Merge branch 'legacy-dropdown-use-design-tokens' into 'master'

Legacy dropdown design token migration

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/173267



Merged-by: Scott de Jonge <sdejonge@gitlab.com>
Approved-by: Scott de Jonge <sdejonge@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: Scott de Jonge <sdejonge@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents.vue

@@ -207,7 +207,6 @@ export default {
   <gl-dropdown
     ref="dropdown"
     :text="buttonText"
-    class="gl-w-full"
     block
     data-testid="labels-select-dropdown-contents"
     :toggle-attrs="toggleAttrs"

app/assets/javascripts/sidebar/components/labels/labels_select_widget/labels_select_root.vue

@@ -428,6 +428,7 @@ export default {
           </dropdown-value>
           <dropdown-contents
             ref="dropdownContents"
+            class="gl-mt-3 gl-w-full"
             :dropdown-button-text="dropdownButtonText"
             :allow-multiselect="allowMultiselect"
             :labels-list-title="labelsListTitle"
@@ -441,7 +442,6 @@ export default {
             :workspace-type="workspaceType"
             :attr-workspace-path="attrWorkspacePath"
             :label-create-type="labelCreateType"
-            class="gl-mt-3"
             @setLabels="handleDropdownClose"
             @closeDropdown="collapseEditableItem"
           />
@@ -451,6 +451,7 @@ export default {
     <template v-else>
       <dropdown-contents
         ref="dropdownContents"
+        class="issuable-form-select-holder"
         :dropdown-button-text="dropdownButtonText"
         :allow-multiselect="allowMultiselect"
         :labels-list-title="labelsListTitle"

app/assets/stylesheets/framework/dropdowns.scss

@@ -78,17 +78,48 @@
   }
 }
 
+@mixin gl-dropdown-toggle-button {
+  color: var(--gl-button-default-primary-foreground-color-default);
+  background-color: var(--gl-button-default-primary-background-color-default);
+  border: 1px solid var(--gl-button-default-primary-border-color-default);
+  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+
+  &:hover {
+    color: var(--gl-button-default-primary-foreground-color-hover);
+    background-color: var(--gl-button-default-primary-background-color-hover);
+    border-color: var(--gl-button-default-primary-border-color-hover);
+    box-shadow: inset 0 0 0 1px var(--gl-button-default-primary-border-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-button-default-primary-foreground-color-focus);
+    background-color: var(--gl-button-default-primary-background-color-focus);
+    border-color: var(--gl-button-default-primary-border-color-focus);
+  }
+
+  &:active,
+  &.active {
+    color: var(--gl-button-default-primary-foreground-color-active);
+    background-color: var(--gl-button-default-primary-background-color-active);
+    border-color: var(--gl-button-default-primary-border-color-active);
+
+    &:focus {
+      @apply gl-focus;
+    }
+  }
+}
+
 .dropdown-toggle,
 .dropdown-menu-toggle,
 .confidential-merge-request-fork-group .dropdown-toggle {
+  @apply gl-rounded-base;
   padding: 6px 8px 6px 10px;
-  background-color: $white;
-  color: $gl-text-color;
-  font-size: 14px;
   text-align: left;
-  border: 1px solid $gray-200;
-  border-radius: $border-radius-base;
   white-space: nowrap;
+  @include gl-dropdown-toggle-button;
 
   &:disabled.read-only {
     color: $gl-text-color !important;
@@ -114,15 +145,6 @@
     max-width: 100%;
     padding-right: 25px;
   }
-
-  &:hover {
-    border-color: $gray-200;
-  }
-
-  &:focus:active {
-    border-color: $dropdown-toggle-active-border-color;
-    outline: 0;
-  }
 }
 
 // This is double classed to solve a specificity issue with the gitlab ui buttons
@@ -136,12 +158,7 @@
   text-overflow: ellipsis;
   line-height: $gl-line-height;
   width: 160px;
-
-  &:hover,
-  &:focus {
-    background-color: $gray-50;
-    border-color: $gray-400;
-  }
+  @include gl-dropdown-toggle-button;
 
   .gl-spinner {
     position: absolute;
@@ -152,7 +169,7 @@
   .dropdown-menu-toggle-icon {
     position: absolute;
     right: $gl-padding-8;
-    @apply gl-fill-icon-subtle;
+    color: currentColor;
   }
 }
 
@@ -186,7 +203,7 @@
   font-weight: $gl-font-weight-normal;
   position: relative;
   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  color: $gl-text-color;
+  @apply gl-text-default;
   line-height: $gl-btn-line-height;
   white-space: normal;
   overflow: hidden;
@@ -238,10 +255,7 @@
   font-size: 0.875rem;
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
-  background-color: $white;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-base;
-  box-shadow: 0 2px 4px $dropdown-shadow-color;
+  @apply gl-bg-dropdown gl-border gl-border-dropdown gl-rounded-base gl-shadow-md;
 
   &.dropdown-open-top {
     margin-bottom: $dropdown-vertical-offset;
@@ -296,11 +310,7 @@
     height: 1px;
     margin: #{$grid-size / 2} 0;
     padding: 0;
-    background-color: $dropdown-divider-bg;
-
-    &:hover {
-      background-color: $dropdown-divider-bg;
-    }
+    @apply gl-border-t gl-border-t-dropdown;
   }
 
   .separator {
@@ -308,7 +318,7 @@
     height: 1px;
     margin-top: 8px;
     margin-bottom: 8px;
-    background-color: $dropdown-divider-bg;
+    background-color: var(--gl-dropdown-border-color);
   }
 
   .dropdown-menu-empty-item a {
@@ -319,9 +329,8 @@
   }
 
   .dropdown-header {
-    color: $black;
+    @apply gl-text-strong gl-font-bold;
     font-size: 13px;
-    font-weight: $gl-font-weight-bold;
     line-height: $gl-line-height;
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
@@ -499,7 +508,7 @@
 
       &.is-indeterminate,
       &.is-active {
-        color: $gl-text-color;
+        @apply gl-text-default;
 
         &.dropdown-menu-user-link::before {
           top: 50%;
@@ -552,7 +561,7 @@
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-bottom: 1px solid $dropdown-divider-bg;
+  @apply gl-text-strong gl-border-b gl-border-b-dropdown;
   overflow: hidden;
 }
 
@@ -652,7 +661,7 @@
   padding-top: 10px;
   margin-top: 10px;
   font-size: 13px;
-  border-top: 1px solid $dropdown-divider-bg;
+  @apply gl-border-t gl-border-t-dropdown;
 }
 
 .dropdown-footer-content {
@@ -797,10 +806,8 @@
   .labels-select-dropdown-contents {
     min-height: $dropdown-min-height;
     max-height: 330px;
-    background-color: $white;
-    border: 1px solid $border-color;
-    box-shadow: 0 2px 4px $dropdown-shadow-color;
     z-index: 2;
+    @apply gl-border gl-border-dropdown gl-bg-dropdown gl-shadow-md;
 
     .dropdown-content {
       height: 135px;

app/assets/stylesheets/framework/variables.scss

@@ -236,7 +236,6 @@ $dropdown-min-height: 40px;
 $dropdown-max-height: 312px;
 $dropdown-max-height-lg: 445px;
 $dropdown-vertical-offset: 4px;
-$dropdown-shadow-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-loading-bg: rgba($white, 0.6);
 $dropdown-toggle-active-border-color: darken($border-color, 14%);

app/assets/stylesheets/framework/variables_overrides.scss

@@ -21,7 +21,6 @@ $warning: $orange-500;
 $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
-$dropdown-divider-bg: $gray-100;
 $dropdown-item-padding-y: 8px;
 $dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;