@gitlab/ui 95.1.1 → 95.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "95.1.1",
+  "version": "95.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,13 +107,13 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.25.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-env": "^7.25.7",
+    "@babel/preset-react": "^7.25.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.2.1",
+    "@gitlab/eslint-plugin": "20.3.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.117.0",

package/src/components/base/avatar/avatar.scss

@@ -24,7 +24,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
   @apply gl-overflow-hidden;
   @apply gl-shrink-0;
   @apply gl-leading-1;
-  @include gl-object-fit-contain;
+  @apply gl-object-contain;
   outline: 1px solid var(--gl-avatar-border-color-default);
   outline-offset: -1px;
 }

package/src/components/base/avatar_link/avatar_link.scss

@@ -2,7 +2,7 @@
   @apply gl-inline-flex;
 
   .gl-avatar {
-    @include gl-transition-property-border-color;
+    @apply gl-transition-border-color;
     @apply gl-duration-slow;
     @apply gl-ease-ease;
   }

package/src/components/base/banner/banner.scss

@@ -17,7 +17,7 @@
 }
 
 .gl-banner-title {
-  @include gl-heading-scale-500;
+  @apply gl-heading-scale-500;
   @apply gl-mb-3;
   color: var(--gl-text-color-heading);
 }

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -124,7 +124,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   &-text {
     margin-top: -$gl-spacing-scale-1;
     margin-bottom: -$gl-spacing-scale-1;
-    @include gl-overflow-anywhere;
+    @apply gl-hyphens-auto gl-break-anywhere;
   }
 
   &-dismiss {

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

@@ -72,7 +72,7 @@
     @if $feature-button-border {
       :focus,
       &:focus:active {
-        @include gl-focus;
+        @apply gl-focus;
       }
     } @else {
       &:focus {
@@ -101,7 +101,7 @@
   background-color: var(--gl-button-default-primary-background-color-default);
   @apply gl-leading-normal;
   color: var(--gl-button-default-primary-foreground-color-default);
-  @include gl-fill-current-color;
+  @apply gl-fill-current;
   @apply gl-justify-center;
   @apply gl-items-center;
   @apply gl-text-base;
@@ -126,7 +126,7 @@
   @if $feature-button-border {
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
   } @else {
     @media (forced-colors: active) {
@@ -462,7 +462,7 @@
 
     &:hover {
       @if $feature-button-border {
-        @include gl-text-green-700;
+        @apply gl-text-green-700;
         border-color: $green-700;
         background-color: $green-50;
       } @else {
@@ -616,7 +616,7 @@
     @apply gl-leading-normal;
     color: var(--gl-button-link-text-color-default);
     @if $feature-button-border {
-      @include gl-px-0;
+      @apply gl-px-0;
       min-height: auto;
       min-width: auto;
       text-decoration-thickness: auto;

package/src/components/base/datepicker/datepicker.vue

@@ -7,6 +7,7 @@ import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import GlIcon from '../icon/icon.vue';
+import { translate } from '../../../utils/i18n';
 
 export const pad = (val, len = 2) => `0${val}`.slice(-len);
 
@@ -39,6 +40,26 @@ const highlightPastDates = (pikaday) => {
   });
 };
 
+const addAccessibleLabels = (element) => {
+  // Pikaday sets `role="heading"`, which requires a corresponding
+  // `aria-level`. Ensure we have one.
+  const titleEl = element.querySelector('.pika-title[role="heading"]');
+  if (titleEl) {
+    titleEl.setAttribute('aria-level', 3);
+  }
+
+  // Add aria-label to month & year select dropdowns
+  const monthEl = element.querySelector('select.pika-select-month');
+  if (monthEl) {
+    monthEl.setAttribute('aria-label', translate('GlDatepicker.monthLabel', 'Month'));
+  }
+
+  const yearEl = element.querySelector('select.pika-select-year');
+  if (yearEl) {
+    yearEl.setAttribute('aria-label', translate('GlDatepicker.yearLabel', 'Year'));
+  }
+};
+
 export default {
   name: 'GlDatepicker',
   components: {
@@ -257,6 +278,7 @@ export default {
   },
   mounted() {
     const $parentEl = this.$parent.$el;
+    const openedEvent = this.opened.bind(this);
     const drawEvent = this.draw.bind(this);
 
     const pikadayConfig = {
@@ -280,7 +302,10 @@ export default {
       toString: (date) => defaultDateFormatter(date),
       onSelect: this.selected.bind(this),
       onClose: this.closed.bind(this),
-      onOpen: this.opened.bind(this),
+      onOpen: () => {
+        addAccessibleLabels(this.$el);
+        openedEvent();
+      },
       onDraw: (pikaday) => {
         highlightPastDates(pikaday);
         drawEvent();

package/src/components/base/drawer/drawer.scss

@@ -139,12 +139,12 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-enter-to {
-  @include gl-translate-x-0;
+  @apply gl-translate-x-0;
 }
 
 .gl-drawer-enter,
 .gl-drawer-leave-to {
-  @include gl-translate-x-100;
+  @apply gl-translate-x-full;
 }
 
 .gl-drawer-enter-active,

package/src/components/base/filtered_search/filtered_search_term.scss

@@ -8,7 +8,7 @@
   @apply gl-p-0;
   @apply gl-bg-transparent;
   @apply gl-border-none;
-  @include gl-outline-none;
+  @apply gl-outline-none;
   @apply gl-h-6;
   @apply gl-w-full;
   min-width: $gl-dropdown-width;

package/src/components/base/filtered_search/filtered_search_token_segment.scss

@@ -16,7 +16,7 @@
   @apply gl-h-full;
   @apply gl-bg-transparent;
   @apply gl-border-none;
-  @include gl-outline-none;
+  @apply gl-outline-none;
   min-width: $gl-dropdown-width;
 }
 

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

@@ -39,7 +39,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     &:focus:active {
       @apply gl-text-inherit;
       @apply gl-shadow-none;
-      @include gl-outline-none;
+      @apply gl-outline-none;
     }
   }
 

package/src/components/base/markdown/markdown.scss

@@ -11,37 +11,37 @@
 
   h1,
   .gl-h1 {
-    @include gl-heading-1;
+    @apply gl-heading-1;
     @apply gl-mt-7;
   }
 
   h2,
   .gl-h2 {
-    @include gl-heading-2;
+    @apply gl-heading-2;
     @apply gl-mt-6;
   }
 
   h3,
   .gl-h3 {
-    @include gl-heading-3;
+    @apply gl-heading-3;
     @apply gl-mt-6;
   }
 
   h4,
   .gl-h4 {
-    @include gl-heading-4;
+    @apply gl-heading-4;
     @apply gl-mt-5;
   }
 
   h5,
   .gl-h5 {
-    @include gl-heading-5;
+    @apply gl-heading-5;
     @apply gl-mt-5;
   }
 
   h6,
   .gl-h6 {
-    @include gl-heading-6;
+    @apply gl-heading-6;
     @apply gl-mt-5;
   }
 
@@ -171,37 +171,37 @@
 
   h1,
   .gl-h1 {
-    @include gl-heading-1-fixed;
+    @apply gl-heading-1-fixed;
     @apply gl-mt-7;
   }
 
   h2,
   .gl-h2 {
-    @include gl-heading-2-fixed;
+    @apply gl-heading-2-fixed;
     @apply gl-mt-6;
   }
 
   h3,
   .gl-h3 {
-    @include gl-heading-3-fixed;
+    @apply gl-heading-3-fixed;
     @apply gl-mt-6;
   }
 
   h4,
   .gl-h4 {
-    @include gl-heading-4-fixed;
+    @apply gl-heading-4-fixed;
     @apply gl-mt-5;
   }
 
   h5,
   .gl-h5 {
-    @include gl-heading-5-fixed;
+    @apply gl-heading-5-fixed;
     @apply gl-mt-5;
   }
 
   h6,
   .gl-h6 {
-    @include gl-heading-6-fixed;
+    @apply gl-heading-6-fixed;
     @apply gl-mt-5;
   }
 

package/src/components/base/modal/modal.scss

@@ -58,7 +58,7 @@ body.modal-open {
     @apply gl-border-none;
 
     .modal-title {
-      @include gl-heading-scale-500;
+      @apply gl-heading-scale-500;
       color: var(--gl-text-color-heading);
     }
   }

package/src/components/base/pagination/pagination.scss

@@ -36,7 +36,7 @@
     &:not(.active):focus,
     &:not(.active):active,
     &:not(.active).active {
-      @include gl-focus();
+      @apply gl-focus;
     }
 
     &,
@@ -54,7 +54,7 @@
       @apply gl-shadow-none;
 
       &:focus {
-        @include gl-focus();
+        @apply gl-focus;
       }
     }
 

package/src/components/base/path/path.scss

@@ -11,7 +11,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 
 // Mixins
 @mixin gl-path-chevron {
-  @include gl-reset-bg;
+  @apply gl-bg-inherit;
   content: '';
   position: absolute;
   top: $path-chevron-top;

package/src/components/base/popover/popover.scss

@@ -74,13 +74,13 @@ $gl-popover-max-width: $grid-size * 35;
 
   .popover-header {
     color: var(--gl-text-color-heading);
-    @include gl-heading-scale-200;
+    @apply gl-heading-scale-200;
     @apply gl-border-b-0;
     @apply gl-pb-0;
   }
 
   &.has-title .popover-header {
-    @include gl-overflow-anywhere;
+    @apply gl-hyphens-auto gl-break-anywhere;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;

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

@@ -37,8 +37,8 @@
     @apply gl-text-base;
     @apply gl-leading-normal;
     @apply gl-text-gray-900;
-    @include gl-fill-current-color;
-    @include gl-bg-gray-10;
+    @apply gl-fill-current;
+    @apply gl-bg-gray-10;
     border-color: $gray-200;
 
       &:not(:first-child) {
@@ -51,32 +51,32 @@
 
       &:hover {
         border-color: $gray-400;
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
 
       &.focus {
-        @include gl-z-index-1;
+        @apply gl-z-1;
         border-color: $gray-400;
-        @include gl-focus;
-        @include gl-bg-gray-50;
+        @apply gl-focus;
+        @apply gl-bg-gray-50;
       }
 
       &.active {
-        @include gl-z-index-2;
+        @apply gl-z-2;
         border-color: $gray-400;
         @include gl-inset-border-1-gray-400;
-        @include gl-bg-white;
+        @apply gl-bg-white;
 
         &:hover {
           @include gl-inset-border-1-gray-400;
-          @include gl-bg-gray-50;
+          @apply gl-bg-gray-50;
         }
 
         &.focus,
         &.focus:hover {
           border-color: $gray-400;
-          @include gl-focus;
-          @include gl-bg-gray-50;
+          @apply gl-focus;
+          @apply gl-bg-gray-50;
         }
       }
 
@@ -88,10 +88,10 @@
       &[disabled],
       &.disabled:hover,
       &[disabled]:hover {
-        @include gl-text-gray-400;
+        @apply gl-text-gray-400;
         border-color: $gray-200;
-        @include gl-z-index-0;
-        @include gl-cursor-not-allowed;
+        @apply gl-z-0;
+        @apply gl-cursor-not-allowed;
 
         &:first-child {
           border-right-color: transparent;
@@ -106,15 +106,15 @@
 } @else {
   .gl-segmented-control {
     label:not(.disabled) {
-      @include gl-cursor-pointer;
+      @apply 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;
+      @apply gl-text-base;
+      @apply gl-leading-normal;
+      @apply gl-text-gray-900;
+      @apply gl-fill-current;
+      @apply gl-bg-gray-10;
       @include gl-inset-border-y-1-gray-200;
 
       &:first-child {
@@ -127,34 +127,34 @@
 
       &:hover {
         @include gl-inset-border-2-gray-400;
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
 
       &.focus {
-        @include gl-z-index-1;
+        @apply gl-z-1;
         @include gl-btn-gl-segmented-button-focus($gray-400);
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
 
       &.active {
-        @include gl-z-index-2;
+        @apply gl-z-2;
         @include gl-inset-border-2-gray-300;
-        @include gl-bg-white;
+        @apply gl-bg-white;
 
         &:hover {
           @include gl-inset-border-2-gray-400;
-          @include gl-bg-gray-50;
+          @apply gl-bg-gray-50;
         }
 
         &.focus,
         &.focus:hover {
           @include gl-btn-gl-segmented-button-focus($gray-400);
-          @include gl-bg-gray-50;
+          @apply gl-bg-gray-50;
         }
       }
 
       &:focus-within {
-        @include gl-focus;
+        @apply gl-focus;
       }
 
       &.disabled,

package/src/components/base/toggle/toggle.scss

@@ -35,7 +35,7 @@ $toggle-height: 2.5 * $grid-size;
       @apply gl-bg-gray-200;
 
       .toggle-icon > svg {
-        @include gl-fill-gray-200;
+        @apply gl-fill-gray-200;
       }
     }
 
@@ -43,7 +43,7 @@ $toggle-height: 2.5 * $grid-size;
       @apply gl-bg-blue-200;
 
       .toggle-icon > svg {
-        @include gl-fill-blue-200;
+        @apply gl-fill-blue-200;
       }
     }
 
@@ -90,10 +90,10 @@ $toggle-height: 2.5 * $grid-size;
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
-  @include gl-outline-none;
+  @apply gl-outline-none;
   user-select: none;
   @apply gl-rounded-pill;
-  @include gl-transition-slow;
+  @apply gl-duration-slow;
   @apply gl-leading-normal;
 
   &::selection,
@@ -134,8 +134,8 @@ $toggle-height: 2.5 * $grid-size;
     > svg {
       @apply gl-w-4;
       @apply gl-h-4;
-      @include gl-fill-gray-600;
-      @include gl-vertical-align-baseline;
+      @apply gl-fill-gray-600;
+      @apply gl-align-baseline;
     }
   }
 
@@ -153,7 +153,7 @@ $toggle-height: 2.5 * $grid-size;
       transform: translateX($toggle-translate-width);
 
       > svg {
-        @include gl-fill-blue-500;
+        @apply gl-fill-blue-500;
       }
     }
   }

package/src/scss/mixins.scss

@@ -214,10 +214,25 @@
     background-color: var(--gl-action-neutral-background-color-focus);
     border-color: var(--gl-action-neutral-border-color-focus);
   }
-  
+
   &:active {
     color: var(--gl-action-neutral-foreground-color-active);
     background-color: var(--gl-action-neutral-background-color-active);
     border-color: var(--gl-action-neutral-border-color-active);
   }
 }
+
+@mixin gl-prefers-reduced-motion-transition {
+  @media (prefers-reduced-motion) {
+    transition-duration: .01ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+
+@mixin gl-prefers-reduced-motion-animation {
+  @media (prefers-reduced-motion) {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important;
+  }
+}

package/src/scss/storybook.scss

@@ -31,6 +31,11 @@ $feature-button-border: true;
   padding-bottom: 0 !important;
 }
 
+.bootstrap-vue-docs {
+  @import "../vendor/bootstrap-vue/docs/assets/css/docs.min";
+  @import "../vendor/bootstrap-vue/docs/assets/scss/styles";
+}
+
 // This imports the tailwind.css file.
 // Note that adding `.css` here would break the inline import.
 // These utilities are imported last, because that's

package/src/scss/utilities.scss

@@ -73,36 +73,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
-.gl-prefers-reduced-motion-transition {
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-    transition-delay: 0ms !important;
-  }
-}
-
-.gl-prefers-reduced-motion-transition\! {
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-    transition-delay: 0ms !important;
-  }
-}
-
-.gl-prefers-reduced-motion-animation {
-  @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    animation-delay: 0ms !important;
-  }
-}
-
-.gl-prefers-reduced-motion-animation\! {
-  @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    animation-delay: 0ms !important;
-  }
-}
-
 .gl-spin {
   animation: gl-spinner-rotate 2s infinite linear;
 }

package/src/scss/utility-mixins/animation.scss

@@ -1,18 +1,3 @@
-@mixin gl-prefers-reduced-motion-transition {
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-    transition-delay: 0ms !important;
-  }
-}
-
-@mixin gl-prefers-reduced-motion-animation {
-  @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    animation-delay: 0ms !important;
-  }
-}
-
 @keyframes gl-spinner-rotate {
   0% {
     transform: rotate(0);

package/tailwind.defaults.js

@@ -526,6 +526,7 @@ module.exports = {
       },
       transitionProperty: {
         'box-shadow': 'box-shadow',
+        'border-color': 'border-color',
         'stroke-opacity': 'stroke-opacity',
         background: 'background',
         left: 'left',

package/translations.js

@@ -14,6 +14,8 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDatepicker.monthLabel': 'Month',
+  'GlDatepicker.yearLabel': 'Year',
   'GlDuoChat.chatCancelLabel': 'Cancel',
   'GlDuoChat.chatCloseLabel': 'Close the Code Explanation',
   'GlDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',