@gitlab/ui 107.1.1 → 107.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "107.1.1",
+  "version": "107.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -32,7 +32,6 @@
     "build": "NODE_ENV=production rollup -c",
     "prebuild": "run-s build-tokens build-migration-script",
     "prepare": "run-s build-tokens",
-    "postinstall": "patch-package --error-on-fail --error-on-warn",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.mjs",
     "build-migration-script": "esbuild --bundle --platform=node --target=esnext --outfile=bin/migrate_custom_utils_to_tw.bundled.mjs --format=esm --banner:js=\"import { createRequire as __gl__createRequire } from 'node:module'; const require = __gl__createRequire(import.meta.url);\" bin/migrate_custom_utils_to_tw.mjs",
@@ -43,7 +42,8 @@
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook:prepare": "run-s copy-fonts build-tokens",
+    "storybook:patch": "patch-package --error-on-fail --error-on-warn",
+    "storybook:prepare": "run-s storybook:patch copy-fonts build-tokens",
     "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
     "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
     "storybook:run": "npx http-server -bgs -p 9001 ./storybook",

package/src/components/base/button/button.scss

@@ -39,6 +39,12 @@
     @include gl-button-border($border-color);
   }
 
+  &::before {
+    background-color: $border-color;
+    transition: background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+                border-color $gl-transition-duration-medium $gl-easing-out-cubic;
+  }
+
   &:hover {
     color: $hover-color;
     background-color: $hover-background-color;
@@ -223,6 +229,12 @@
     }
   }
 
+  &.btn-reset {
+    &::before {
+      background-color: var(--gl-button-default-primary-border-color-default);
+    }
+  }
+
   &.btn-default-tertiary,
   &.btn-dashed {
     @include gl-button-theme(
@@ -578,6 +590,11 @@
     color: var(--gl-button-disabled-foreground-color);
     opacity: 1;
     cursor: not-allowed !important;
+
+    &::before {
+      background-color: var(--gl-button-disabled-border-color);
+    }
+
     @if $feature-button-border {
       border-color: var(--gl-button-disabled-border-color);
     } @else {

package/src/components/base/button_group/button_group.scss

@@ -0,0 +1,147 @@
+$gl-button-group-focus-z-index: 3;
+$gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
+
+.gl-button-group:not(.gl-keyset-pagination),
+.btn-group:not(.gl-keyset-pagination),
+.gl-dropdown.btn-group {
+  @apply gl-inline-flex gl-relative;
+
+  // Reset borders
+  > .gl-button:not(:first-child),
+  > .btn-group:not(:first-child) > .gl-button,
+  > .gl-new-dropdown:not(:first-child) .gl-button {
+    @apply gl-border-l-0 gl-rounded-l-none;
+  }
+
+  > .gl-button:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .gl-button,
+  > .gl-new-dropdown:not(:last-child) .gl-button {
+    @apply gl-border-r-0 gl-rounded-r-none;
+  }
+
+  // Pseudo element to mock border between buttons
+  > .gl-button:not(:first-child),
+  > .btn-group:not(:first-child) > .gl-button,
+  > .gl-new-dropdown:not(:first-child) .gl-button {
+    @apply gl-relative gl-ml-[1px];
+
+    &::before {
+      content: '';
+      @apply gl-absolute gl-block gl-top-[-1px] gl-bottom-[-1px] gl-left-[-1px] gl-w-[1px];
+      z-index: $gl-button-group-border-z-index;
+    }
+  }
+
+  // Bring focus to front
+  > .gl-button {
+    &:focus,
+    &:active,
+    &.active {
+      z-index: $gl-button-group-focus-z-index;
+    }
+  }
+
+  // Button separators
+  .btn-dashed {
+    &::before {
+      @apply gl-bg-transparent;
+      border-left: 1px dashed var(--gl-button-dashed-border-color-default);
+    }
+
+    &.disabled::before,
+    &[disabled]::before {
+      @apply gl-bg-transparent;
+      border-left: 1px dashed var(--gl-button-disabled-border-color);
+    }
+  }
+
+  // GlButton confirm and danger variants have transparent gap between items
+  .btn-confirm,
+  .btn-danger {
+    &:not(.disabled):not([disabled])::before {
+      @apply gl-bg-transparent;
+    }
+  }
+
+  // Move icon by 1px as we add a pseudo divider
+  .gl-button.btn-icon .gl-button-text .gl-button-icon {
+    @apply gl-mr-[-1px];
+  }
+
+  &.disabled,
+  &[disabled] {
+    &::before {
+      background-color: var(--gl-button-disabled-border-color);
+    }
+  }
+
+  .btn-confirm-secondary {
+    &:not(.disabled):not([disabled])::before {
+      background-color: var(--gl-button-confirm-secondary-border-color-default);
+    }
+  }
+
+  .btn-danger-secondary {
+    &:not(.disabled):not([disabled])::before {
+      background-color: var(--gl-button-danger-secondary-border-color-default);
+    }
+  }
+}
+
+.gl-button-group-vertical,
+.btn-group-vertical {
+  @apply gl-flex-col gl-items-start gl-justify-center;
+
+  > .gl-button,
+  > .btn-group {
+    @apply gl-relative gl-w-full;
+  }
+
+  // Reset borders
+  > .gl-button:not(:first-child),
+  > .btn-group:not(:first-child) > .gl-button,
+  > .gl-new-dropdown:not(:first-child) .gl-button {
+    @apply gl-border-t-0 gl-rounded-t-none;
+  }
+
+  > .gl-button:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .gl-button,
+  > .gl-new-dropdown:not(:last-child) .gl-button {
+    @apply gl-border-b-0 gl-rounded-b-none;
+  }
+
+  // Pseudo element to mock border between buttons
+  > .gl-button:not(:first-child),
+  > .btn-group:not(:first-child) > .gl-button,
+  > .gl-new-dropdown:not(:first-child) .gl-button {
+    @apply gl-relative gl-mt-[1px];
+
+    &::before {
+      content: '';
+      @apply gl-absolute gl-block gl-left-[-1px] gl-right-[-1px] gl-top-[-1px] gl-h-[1px];
+      z-index: $gl-button-group-border-z-index;
+    }
+  }
+
+  // GlButton confirm and danger variants have transparent gap between items
+  .btn-confirm,
+  .btn-danger {
+    &:not(.disabled):not([disabled])::before {
+      @apply gl-bg-transparent;
+    }
+  }
+
+  // Dashed button
+  > .gl-button.btn-dashed:not(:first-child),
+  > .btn-group:not(:first-child) > .gl-button.btn-dashed,
+  > .gl-new-dropdown:not(:first-child) .gl-button.btn-dashed {
+    &::before {
+      border-top: 1px dashed var(--gl-button-dashed-border-color-default);
+    }
+
+    &.disabled::before,
+    &[disabled]::before {
+      border-top: 1px dashed var(--gl-button-disabled-border-color);
+    }
+  }
+}

package/src/components/base/button_group/button_group.vue

@@ -14,7 +14,11 @@ export default {
 };
 </script>
 <template>
-  <div :class="!vertical ? 'btn-group' : 'btn-group-vertical'" role="group" v-on="$listeners">
+  <div
+    :class="!vertical ? 'gl-button-group btn-group' : 'gl-button-group-vertical btn-group-vertical'"
+    role="group"
+    v-on="$listeners"
+  >
     <!-- @slot The buttons to group. -->
     <slot></slot>
   </div>

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

@@ -96,17 +96,6 @@
       @include mask-chevron-down;
     }
 
-    &.btn-confirm,
-    &.btn-danger {
-      margin-left: 1px;
-    }
-
-    &:disabled,
-    &.disabled,
-    &[class*='-secondary'] {
-      margin-left: -1px;
-    }
-
     @if $feature-button-border {
       &.gl-button {
         @apply gl-px-0;

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

@@ -205,26 +205,6 @@
     .gl-new-dropdown-toggle {
       @apply gl-rounded-tl-none;
       @apply gl-rounded-bl-none;
-
-      // Prevent double borders when buttons are next to each other
-      margin-left: -1px;
-    }
-  }
-
-  // The dropdown toggle of a "split" is by design supposed to be the last
-  // child of a button group, so only apply styles for that.
-  .gl-new-dropdown:last-child {
-    .gl-new-dropdown-caret-only {
-      &.btn-confirm,
-      &.btn-danger {
-        margin-left: 1px;
-      }
-
-      &:disabled,
-      &.disabled,
-      &[class*='-secondary'] {
-        margin-left: -1px;
-      }
     }
   }
 

package/src/scss/components.scss

@@ -51,6 +51,7 @@
 @import '../components/base/modal/modal';
 @import '../components/base/nav/nav';
 @import '../components/base/button/button';
+@import '../components/base/button_group/button_group';
 @import '../components/base/pagination/pagination';
 @import '../components/base/path/path';
 @import '../components/base/popover/popover';