@gitlab/ui 94.8.0 → 94.10.0

package/src/components/base/dropdown/dropdown.scss

@@ -109,11 +109,21 @@
       margin-left: -1px;
     }
 
-    &.gl-button {
-      @apply gl-px-3;
+    @if $feature-button-border {
+      &.gl-button {
+        @apply gl-px-0;
 
-      &.btn-sm {
-        @apply gl-px-2;
+        &.btn-sm {
+          @apply gl-px-0;
+        }
+      }
+    } @else {
+      &.gl-button {
+        @apply gl-px-3;
+
+        &.btn-sm {
+          @apply gl-px-2;
+        }
       }
     }
   }
@@ -170,6 +180,12 @@
   }
 
   .dropdown-icon-only {
+    @if $feature-button-border {
+      &.dropdown-toggle-no-caret {
+        padding: 0 !important;
+      }
+    }
+
     .dropdown-icon,
     .gl-button-icon.gl-button-icon {
       @apply gl-mr-0;

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -235,7 +235,7 @@ export default {
       :id="suggestionsId"
       ref="suggestionsMenu"
       data-testid="combobox-dropdown"
-      class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-pl-0"
+      class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0"
       @keydown.down="onArrowDown"
       @keydown.up="onArrowUp"
       @keydown.esc.stop="onEsc"

package/src/components/base/label/label.scss

@@ -74,6 +74,11 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @apply gl-rounded-full;
     @apply gl-shadow-none;
 
+    @if $feature-button-border {
+      min-height: auto !important;
+      min-width: auto !important;
+    }
+
     &:focus,
     &:active {
       @apply gl-focus;

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -174,6 +174,9 @@ export default {
     isIconOnly() {
       return Boolean(this.icon && this.hasNoVisibleToggleText);
     },
+    isEllipsisButton() {
+      return this.isIconOnly && this.icon === 'ellipsis_h';
+    },
     isCaretOnly() {
       return !this.noCaret && !this.icon && this.hasNoVisibleToggleText;
     },
@@ -190,9 +193,10 @@ export default {
         this.toggleClass,
         {
           'gl-new-dropdown-toggle': true,
-          'gl-new-dropdown-icon-only btn-icon': this.isIconOnly,
+          'button-ellipsis-horizontal': this.isEllipsisButton,
+          'gl-new-dropdown-icon-only btn-icon': this.isIconOnly && !this.isEllipsisButton,
           'gl-new-dropdown-toggle-no-caret': this.noCaret,
-          'gl-new-dropdown-caret-only': this.isCaretOnly,
+          'gl-new-dropdown-caret-only btn-icon': this.isCaretOnly,
         },
       ];
     },

package/src/components/base/new_dropdowns/dropdown.scss

@@ -51,7 +51,7 @@
 
   .gl-new-dropdown-toggle {
     // optically align the caret
-    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
+    &.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon) {
       @apply gl-pr-3;
 
       &.btn-sm {
@@ -67,6 +67,10 @@
   .gl-new-dropdown-toggle {
     .gl-button-text {
       @apply gl-inline-flex;
+
+      &:has(.gl-sr-only) {
+        width: auto;
+      }
     }
   }
 
@@ -85,7 +89,7 @@
     }
   }
 
-  .gl-button .gl-button-icon.gl-new-dropdown-chevron {
+  .gl-button:not(.gl-new-dropdown-caret-only) .gl-button-icon.gl-new-dropdown-chevron {
     @apply gl-ml-2;
     @apply gl-mr-0;
   }
@@ -94,6 +98,7 @@
     // optically align the caret
     &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
       @apply gl-pr-2;
+      @apply gl-pl-3;
 
       &.btn-sm {
         @apply gl-pr-0;

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -793,7 +793,8 @@ export default {
       <gl-button
         v-if="showResetButton"
         category="tertiary"
-        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
+        size="small"
         data-testid="listbox-reset-button"
         @click="onResetButtonClicked"
       >
@@ -802,7 +803,8 @@ export default {
       <gl-button
         v-if="showSelectAllButton"
         category="tertiary"
-        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
+        size="small"
         data-testid="listbox-select-all-button"
         @click="onSelectAllButtonClicked"
       >

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -4,14 +4,23 @@
   .gl-search-box-by-click-history > .gl-button {
     padding-left: $gl-spacing-scale-4 !important;
     padding-right: $gl-spacing-scale-3 !important;
-    @apply gl-border-none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    @apply gl-shadow-inner-1-gray-400;
+
+    @if $feature-button-border {
+      border-color: var(--gl-border-color-strong);
+    } @else {
+      @apply gl-border-none;
+      @include gl-inset-border-1-gray-400;
+    }
   }
 
   .gl-search-box-by-click-search-button.gl-button:not(:disabled) {
-    @apply gl-shadow-inner-1-gray-400;
+    @if $feature-button-border {
+      border-color: var(--gl-border-color-strong);
+    } @else {
+      @include gl-inset-border-1-gray-400;
+    }
   }
 
   .gl-search-box-by-click-input {

package/src/components/base/segmented_control/segmented_control.scss

@@ -27,67 +27,95 @@
   }
 }
 
-.gl-segmented-control {
-  label:not(.disabled) {
-    @apply gl-cursor-pointer;
-  }
+@if $feature-button-border {
+  .gl-segmented-control {
+    label:not(.disabled) {
+      @apply gl-cursor-pointer;
+    }
 
   .btn-gl-segmented-button {
     @apply gl-text-base;
     @apply gl-leading-normal;
     @apply gl-text-gray-900;
     @include gl-fill-current-color;
-    @apply gl-bg-gray-10;
-    @include gl-inset-border-y-1-gray-200;
+    @include gl-bg-gray-10;
+    border-color: $gray-200;
 
-    &:first-child {
-      @include gl-btn-gl-segmented-button-first;
-    }
-
-    &:last-child {
-      @include gl-btn-gl-segmented-button-last;
-    }
-
-    &:hover {
-      @include gl-inset-border-2-gray-400;
-      @apply gl-bg-gray-50;
-    }
-
-    &.focus {
-      @apply gl-z-1;
-      @include gl-btn-gl-segmented-button-focus($gray-400);
-      @apply gl-bg-gray-50;
-    }
+      &:not(:first-child) {
+        border-left-color: transparent;
+      }
 
-    &.active {
-      @apply gl-z-2;
-      @include gl-inset-border-2-gray-300;
-      @apply gl-bg-white;
+      &:not(:last-child) {
+        border-right-color: transparent;
+      }
 
       &:hover {
-        @include gl-inset-border-2-gray-400;
-        @apply gl-bg-gray-50;
+        border-color: $gray-400;
+        @include gl-bg-gray-50;
       }
 
-      &.focus,
-      &.focus:hover {
-        @include gl-btn-gl-segmented-button-focus($gray-400);
-        @apply gl-bg-gray-50;
+      &.focus {
+        @include gl-z-index-1;
+        border-color: $gray-400;
+        @include gl-focus;
+        @include gl-bg-gray-50;
+      }
+
+      &.active {
+        @include gl-z-index-2;
+        border-color: $gray-400;
+        @include gl-inset-border-1-gray-400;
+        @include gl-bg-white;
+
+        &:hover {
+          @include gl-inset-border-1-gray-400;
+          @include gl-bg-gray-50;
+        }
+
+        &.focus,
+        &.focus:hover {
+          border-color: $gray-400;
+          @include gl-focus;
+          @include gl-bg-gray-50;
+        }
       }
-    }
 
     &:focus-within {
       @apply gl-focus;
     }
 
-    &.disabled,
-    &[disabled],
-    &.disabled:hover,
-    &[disabled]:hover {
-      @apply gl-text-gray-400;
+      &.disabled,
+      &[disabled],
+      &.disabled:hover,
+      &[disabled]:hover {
+        @include gl-text-gray-400;
+        border-color: $gray-200;
+        @include gl-z-index-0;
+        @include gl-cursor-not-allowed;
+
+        &:first-child {
+          border-right-color: transparent;
+        }
+
+        &:last-child {
+          border-left-color: transparent;
+        }
+      }
+    }
+  }
+} @else {
+  .gl-segmented-control {
+    label:not(.disabled) {
+      @include gl-cursor-pointer;
+    }
+
+    .btn-gl-segmented-button {
+      @include gl-font-base;
+      @include gl-line-height-normal;
+      @include gl-text-gray-900;
+      @include gl-fill-current-color;
+      @include gl-bg-gray-10;
       @include gl-inset-border-y-1-gray-200;
-      @apply gl-z-0;
-      @apply gl-cursor-not-allowed;
 
       &:first-child {
         @include gl-btn-gl-segmented-button-first;
@@ -96,6 +124,56 @@
       &:last-child {
         @include gl-btn-gl-segmented-button-last;
       }
+
+      &:hover {
+        @include gl-inset-border-2-gray-400;
+        @include gl-bg-gray-50;
+      }
+
+      &.focus {
+        @include gl-z-index-1;
+        @include gl-btn-gl-segmented-button-focus($gray-400);
+        @include gl-bg-gray-50;
+      }
+
+      &.active {
+        @include gl-z-index-2;
+        @include gl-inset-border-2-gray-300;
+        @include gl-bg-white;
+
+        &:hover {
+          @include gl-inset-border-2-gray-400;
+          @include gl-bg-gray-50;
+        }
+
+        &.focus,
+        &.focus:hover {
+          @include gl-btn-gl-segmented-button-focus($gray-400);
+          @include gl-bg-gray-50;
+        }
+      }
+
+      &:focus-within {
+        @include gl-focus;
+      }
+
+      &.disabled,
+      &[disabled],
+      &.disabled:hover,
+      &[disabled]:hover {
+        @apply gl-text-gray-400;
+        @include gl-inset-border-y-1-gray-200;
+        @apply gl-z-0;
+        @apply gl-cursor-not-allowed;
+
+        &:first-child {
+          @include gl-btn-gl-segmented-button-first;
+        }
+
+        &:last-child {
+          @include gl-btn-gl-segmented-button-last;
+        }
+      }
     }
   }
 }

package/src/scss/storybook.scss

@@ -1,3 +1,7 @@
+// Enables feature flag for GlButton border migration
+// to see in Storybook the expected new styles
+$feature-button-border: true;
+
 @import 'tokens';
 
 @import 'functions';

package/src/scss/variables.scss

@@ -207,6 +207,10 @@ $gl-border-radius-6: $gl-spacing-scale-6;
 $gl-border-radius-7: $gl-spacing-scale-7;
 $gl-border-radius-full: 50%;
 
+// component height
+$gl-button-small-size: px-to-rem(24px);
+$gl-button-medium-size: px-to-rem(32px);
+
 // transition parameters
 $gl-transition-duration-slow: 0.4s;
 $gl-transition-duration-medium: 0.2s;
@@ -328,3 +332,6 @@ $popover-arrow-color: $popover-bg;
 $popover-arrow-outer-color: $gray-100;
 
 $tooltip-opacity: 1;
+
+// Feature flag for GlButton border migration
+$feature-button-border: false !default;