@gitlab/ui 134.8.0 → 135.0.0

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -31,8 +31,8 @@
     @include gl-tmp-form-checkbox-inline-styles;
 
     &:active,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       @apply gl-focus;
     }
   }
@@ -75,7 +75,7 @@
       border-color: var(--gl-control-border-color-hover);
     }
 
-    .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
+    .custom-control-input:not(:disabled):focus-visible ~ .custom-control-label::before {
       @apply gl-focus;
       border-color: var(--gl-control-border-color-focus);
     }
@@ -124,14 +124,14 @@
       }
     }
 
-    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label::before {
+    .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label::before {
       background-color: var(--gl-control-background-color-selected-focus);
       border-color: var(--gl-control-border-color-selected-focus);
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label,
-    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
+    .custom-control-input:not(:disabled):focus-visible:checked ~ .custom-control-label {
       &::before {
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -156,13 +156,15 @@
         border-color: var(--gl-control-border-color-selected-hover);
       }
 
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
+      .custom-control-input:not(:disabled):focus-visible:indeterminate
+        ~ .custom-control-label::before {
         background-color: var(--gl-control-background-color-selected-focus);
         border-color: var(--gl-control-border-color-selected-focus);
       }
 
       .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
+      .custom-control-input:not(:disabled):focus-visible:indeterminate
+        ~ .custom-control-label::before {
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
           border-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value

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

@@ -68,7 +68,7 @@
         }
 
         // Focus state (when item receives actual focus)
-        &:focus {
+        &:focus-visible {
           color: var(--gl-dropdown-option-text-color-focus);
           background-color: var(--gl-dropdown-option-background-color-unselected-focus);
           @include gl-focus($inset: true);
@@ -77,7 +77,7 @@
 
         // Active state (when item is clicked)
         &:active,
-        &:focus:active {
+        &:focus-visible:active {
           color: var(--gl-dropdown-option-text-color-active);
           background-color: var(--gl-dropdown-option-background-color-unselected-active);
           @include gl-focus($inset: true);
@@ -112,12 +112,12 @@
           background-color: var(--gl-dropdown-option-background-color-selected-hover);
         }
 
-        &:focus {
+        &:focus-visible {
           background-color: var(--gl-dropdown-option-background-color-selected-focus);
         }
 
         &:active,
-        &:focus:active {
+        &:focus-visible:active {
           background-color: var(--gl-dropdown-option-background-color-selected-active);
         }
       }

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

@@ -19,15 +19,24 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * Text for the combobox label.
+     */
     labelText: {
       type: String,
       required: true,
     },
+    /**
+     * When true, visually hides the label while keeping it accessible to screen readers.
+     */
     labelSrOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of tokens displayed in the combobox.
+     */
     tokenList: {
       type: Array,
       required: true,
@@ -40,15 +49,24 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * The current value of the combobox.
+     */
     value: {
       type: [String, Object],
       required: true,
     },
+    /**
+     * The attribute name used to match values against options.
+     */
     matchValueToAttr: {
       type: String,
       required: false,
       default: undefined,
     },
+    /**
+     * When true, automatically focuses the combobox on mount.
+     */
     autofocus: {
       type: Boolean,
       required: false,

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

@@ -13,31 +13,49 @@ export default {
     prop: 'value',
   },
   props: {
+    /**
+     * Unique identifier for the date input.
+     */
     id: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Minimum allowed date value.
+     */
     min: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Maximum allowed date value.
+     */
     max: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Error message displayed when the value is below the minimum.
+     */
     minInvalidFeedback: {
       type: String,
       required: false,
       default: 'Must be after minimum date.',
     },
+    /**
+     * Error message displayed when the value exceeds the maximum.
+     */
     maxInvalidFeedback: {
       type: String,
       required: false,
       default: 'Must be before maximum date.',
     },
+    /**
+     * The current value of the date picker.
+     */
     value: {
       type: String,
       required: false,

package/src/components/base/form/form_fields/form_field_validator.vue

@@ -12,16 +12,25 @@
 export default {
   name: 'GlFormFieldValidator',
   props: {
+    /**
+     * The value to validate.
+     */
     value: {
       required: true,
       // ESLint requires "validator" or "type". Any kind of value is valid.
       validator: () => true,
     },
+    /**
+     * Array of validation functions or rules.
+     */
     validators: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, triggers validation.
+     */
     shouldValidate: {
       type: Boolean,
       required: false,

package/src/components/base/form/form_fields/form_fields_loop.vue

@@ -4,6 +4,9 @@ import Vue from 'vue';
 export default {
   name: 'GlFormFieldsLoop',
   props: {
+    /**
+     * Field configurations to render in a loop.
+     */
     fields: {
       type: Object,
       required: true,

package/src/components/base/form/form_input/form_input.scss

@@ -251,7 +251,7 @@ input[type="color"].form-control:disabled {
     @apply gl-text-disabled;
   }
 
-  &:not(.form-control-plaintext):focus {
+  &:not(.form-control-plaintext):focus-visible {
     background: var(--gl-control-background-color-default);
     @apply gl-text-default;
     @include gl-focus($color: var(--gl-control-border-color-focus));
@@ -260,7 +260,7 @@ input[type="color"].form-control:disabled {
   &.is-invalid {
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-error);
 
-    &:focus {
+    &:focus-visible {
       @include gl-focus($color: var(--gl-control-border-color-error));
     }
   }

package/src/components/base/form/form_select/form_select.scss

@@ -37,8 +37,8 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
   }
 
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     @include gl-focus($color: var(--gl-control-border-color-focus), $important: true);
   }
 
@@ -56,7 +56,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
       box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-error);
     }
 
-    &:focus {
+    &:focus-visible {
       @include gl-focus($color: var(--gl-control-border-color-error), $important: true);
     }
   }

package/src/components/base/icon/icon.figma.batch.ts

@@ -0,0 +1,26 @@
+import figma from 'figma';
+
+// Shared Code Connect template for every icon in the GitLab Product Icons
+// library. One entry per icon is supplied by icon.figma.batch.json; the icon's
+// name is exposed via figma.batch.name.
+//
+// Some icons are framed at a non-default size in Figma (e.g. the 12px trend,
+// severity, and status icons). Those entries carry a `size` field in the batch
+// JSON, which is rendered as `:size="12"`. Icons without a `size` field use the
+// GlIcon default (16) and render no size attribute.
+//
+// `metadata.props.name` lets consuming components (badge, button, etc.) read
+// the chosen icon's name through
+// `instance.getInstanceSwap(prop).executeTemplate().metadata.props.name`,
+// which is how we eventually replace the icon="REPLACE" placeholders.
+const sizeAttr = figma.batch.size ? ` :size="${figma.batch.size}"` : '';
+
+export default {
+  id: figma.batch.id,
+  imports: ["import { GlIcon } from '@gitlab/ui'"],
+  example: figma.code`<gl-icon name="${figma.batch.name}"${sizeAttr} />`,
+  metadata: {
+    nestable: true,
+    props: { name: figma.batch.name },
+  },
+};

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

@@ -23,7 +23,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     background-color: var(--label-background-color);
   }
 
-  &:has(*:first-child:focus) {
+  &:has(*:first-child:focus-visible) {
     @include gl-focus(
       $color: var(--label-background-color, var(--gl-background-color-default)),
       $important: true
@@ -38,8 +38,8 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @apply gl-max-w-full;
 
     &:hover,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       @apply gl-text-inherit;
       @apply gl-shadow-none;
       @apply gl-outline-none;
@@ -50,8 +50,8 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     text-decoration: none;
 
     &:hover,
-    &:focus,
-    &:focus:active {
+    &:focus-visible,
+    &:focus-visible:active {
       .gl-label-text,
       .gl-label-text-scoped {
         text-decoration: underline;
@@ -79,7 +79,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @apply gl-rounded-full;
     @apply gl-shadow-none;
 
-    &:focus,
+    &:focus-visible,
     &:active {
       @apply gl-focus;
     }
@@ -98,7 +98,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     color: var(--gl-label-light-button-icon-color-default);
     background-color: var(--gl-label-light-button-background-color-default);
 
-    &:focus,
+    &:focus-visible,
     &:hover {
       color: var(--label-background-color);
       background-color: var(--gl-label-light-button-background-color-hover);
@@ -114,7 +114,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     color: var(--gl-label-dark-button-icon-color-default);
     background-color: var(--gl-label-dark-button-background-color-default);
 
-    &:focus,
+    &:focus-visible,
     &:hover {
       color: var(--label-background-color);
       background-color: var(--gl-label-dark-button-background-color-hover);
@@ -127,7 +127,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     margin-left: #{-$label-padding-horizontal};
     color: var(--gl-label-scoped-button-icon-color-default);
 
-    &:focus,
+    &:focus-visible,
     &:hover {
       color: var(--gl-label-scoped-button-icon-color-hover);
       background-color: var(--gl-label-scoped-button-background-color-hover);

package/src/components/base/link/link.scss

@@ -8,13 +8,13 @@
   &,
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     @apply gl-text-link;
   }
 
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     @apply gl-underline;
     @include gl-focus($outline: true, $outline-offset: $outline-width);
   }
@@ -42,8 +42,8 @@
 
   &,
   &:hover,
-  &:focus,
-  &:focus:hover {
+  &:focus-visible,
+  &:focus-visible:hover {
     @apply gl-text-inherit;
   }
 }
@@ -59,8 +59,8 @@
   }
 
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     @apply gl-no-underline;
   }
 }
@@ -71,8 +71,8 @@
   &,
   &:hover,
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     color: var(--gl-link-mention-text-color-default);
   }
 }
@@ -83,8 +83,8 @@
   &,
   &:hover,
   &:active,
-  &:focus,
-  &:focus:active {
+  &:focus-visible,
+  &:focus-visible:active {
     color: var(--gl-link-mention-text-color-current);
   }
 }

package/src/components/base/markdown/markdown.vue

@@ -2,6 +2,9 @@
 export default {
   name: 'GlMarkdown',
   props: {
+    /**
+     * When true, renders the markdown in a compact style.
+     */
     compact: {
       type: Boolean,
       required: false,

package/src/components/base/nav_item/nav_item.scss

@@ -11,7 +11,7 @@
   @apply gl-border-none;
   @apply gl-cursor-pointer;
   @apply gl-appearance-none;
-  @apply focus:gl-focus-inset;
+  @apply focus-visible:gl-focus-inset;
   min-height: 1.75rem;
   min-width: 1.75rem;
   border-radius: var(--gl-nav-item-border-radius);
@@ -38,13 +38,13 @@
     background-color: var(--gl-nav-item-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     color: var(--gl-nav-item-foreground-color-focus);
     background-color: var(--gl-nav-item-background-color-focus);
   }
 
   &:active,
-  &:focus:active {
+  &:focus-visible:active {
     color: var(--gl-nav-item-foreground-color-active);
     background-color: var(--gl-nav-item-background-color-active);
   }
@@ -58,13 +58,13 @@
       background-color: var(--gl-nav-item-selected-background-color-hover);
     }
 
-    &:focus {
+    &:focus-visible {
       color: var(--gl-nav-item-selected-foreground-color-focus);
       background-color: var(--gl-nav-item-selected-background-color-focus);
     }
 
     &:active,
-    &:focus:active {
+    &:focus-visible:active {
       color: var(--gl-nav-item-selected-foreground-color-active);
       background-color: var(--gl-nav-item-selected-background-color-active);
     }

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

@@ -61,59 +61,92 @@ export default {
     },
   },
   props: {
+    /**
+     * Text displayed on the dropdown toggle button.
+     */
     toggleText: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, visually hides the toggle text while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders the dropdown at 100% width of its parent container.
+     */
     block: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Visual category of the dropdown toggle button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
+    /**
+     * Visual variant of the dropdown toggle button.
+     */
     variant: {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
       validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
     },
+    /**
+     * Size of the dropdown toggle button.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
+    /**
+     * Name of the icon to display in the toggle button.
+     */
     icon: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * When true, disables the dropdown.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, shows a loading state on the toggle button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Additional CSS classes to apply to the toggle element.
+     */
     toggleClass: {
       type: [String, Array, Object],
       required: false,
       default: null,
     },
+    /**
+     * When true, hides the caret icon on the toggle button.
+     */
     noCaret: {
       type: Boolean,
       required: false,
@@ -127,6 +160,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Placement for the dropdown menu.
+     */
     placement: {
       type: String,
       required: false,
@@ -143,6 +179,9 @@ export default {
       },
     },
     // ARIA props
+    /**
+     * ARIA haspopup attribute value for accessibility.
+     */
     ariaHaspopup: {
       type: [String, Boolean],
       required: false,
@@ -151,21 +190,33 @@ export default {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       },
     },
+    /**
+     * ID of the currently active item for accessibility.
+     */
     activeItemId: {
       type: String,
       required: false,
       default: undefined,
     },
+    /**
+     * When true, indicates the dropdown has an external label for accessibility.
+     */
     hasExternalLabel: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders a searchable listbox.
+     */
     hasSearchableListbox: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, renders as a disclosure dropdown.
+     */
     isDisclosure: {
       type: Boolean,
       required: false,
@@ -212,6 +263,9 @@ export default {
       required: false,
       default: () => ({ mainAxis: DEFAULT_OFFSET }),
     },
+    /**
+     * When true, allows the dropdown to take the full width available.
+     */
     fluidWidth: {
       type: Boolean,
       required: false,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -14,6 +14,9 @@ export default {
   ITEM_CLASS,
   components: { GlLink, GlIcon },
   props: {
+    /**
+     * The item object to render as a disclosure dropdown item.
+     */
     item: {
       type: Object,
       required: false,

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

@@ -8,7 +8,7 @@
         @apply gl-cursor-pointer;
       }
 
-      &:focus {
+      &:focus-visible {
         @apply gl-focus;
       }
     }
@@ -254,7 +254,7 @@
   }
 
   .gl-new-dropdown {
-    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:focus-visible,
     .gl-new-dropdown-toggle:active {
       @apply gl-z-1;
     }