@gitlab/ui 134.9.0 → 135.0.0

package/dist/tokens/tokens_story.js

@@ -13,6 +13,9 @@ var script = {
   },
   inject: ['containerClass'],
   props: {
+    /**
+     * Map of design tokens to display in the story.
+     */
     tokens: {
       type: Object,
       required: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "134.9.0",
+  "version": "135.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,6 +29,7 @@
     "src/vendor/bootstrap-vue/src/**/*.{js,scss}",
     "src/vendor/bootstrap/scss/**/*.scss",
     "!*.figma.{js,ts}",
+    "!*.figma.batch.json",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -92,7 +93,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.3.6",
-    "postcss": "8.5.15",
+    "postcss": "8.5.16",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -157,7 +158,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.61.1",
     "playwright-core": "^1.61.1",
-    "postcss": "8.5.15",
+    "postcss": "8.5.16",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/base/animated_icon/base_animated_icon.vue

@@ -22,6 +22,9 @@ export default {
       default: 'current',
       validator: (value) => Object.keys(animatedIconVariantOptions).includes(value),
     },
+    /**
+     * Controls the animated state of the icon.
+     */
     isOn: {
       type: Boolean,
       required: false,

package/src/components/base/color_mode_toggle/color_mode_toggle.vue

@@ -1,5 +1,6 @@
 <script>
 import { translate } from '../../../utils/i18n';
+import { buttonSizeOptions } from '../../../utils/constants';
 import GlButton from '../button/button.vue';
 
 export default {
@@ -16,6 +17,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Specify the size of the button.
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
+    },
     /**
      * The label when in dark mode. Screen-reader only.
      */
@@ -59,6 +69,7 @@ export default {
     :aria-label="ariaLabel"
     class="btn-icon"
     category="tertiary"
+    :size="size"
     :icon="iconName"
     @click="handleClick"
   />

package/src/components/base/filtered_search/filtered_search.vue

@@ -94,11 +94,17 @@ export default {
       required: false,
       default: 'Search',
     },
+    /**
+     * Title text for the clear button.
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear',
     },
+    /**
+     * Array of history items to display in the search.
+     */
     historyItems: {
       type: Array,
       required: false,
@@ -137,6 +143,9 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * When true, renders the filtered search in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

package/src/components/base/filtered_search/filtered_search_suggestion.vue

@@ -17,6 +17,9 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * The value of the suggestion item.
+     */
     value: {
       required: true,
       validator: () => true,

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

@@ -43,6 +43,9 @@ export default {
       required: false,
       default: () => ({ data: '' }),
     },
+    /**
+     * Placeholder text for the search input.
+     */
     placeholder: {
       type: String,
       required: false,
@@ -72,6 +75,9 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
@@ -86,6 +92,9 @@ export default {
       required: false,
       default: termTokenDefinition.title,
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -25,6 +25,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of available token definitions.
+     */
     availableTokens: {
       type: Array,
       required: false,
@@ -46,6 +49,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Array of pre-selected multi-select values.
+     */
     multiSelectValues: {
       type: Array,
       required: false,
@@ -67,17 +73,26 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Attributes to bind to the input element of the data segment.
+     */
     dataSegmentInputAttributes: {
       type: Object,
       required: false,

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

@@ -70,31 +70,49 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Whether this segment represents a search term.
+     */
     isTerm: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Label text for the segment.
+     */
     label: {
       type: String,
       required: false,
       default: 'Search',
     },
+    /**
+     * When true, enables multi-select mode.
+     */
     multiSelect: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of selectable options.
+     */
     options: {
       type: Array,
       required: false,
       default: () => null,
     },
+    /**
+     * The field name used for option display text.
+     */
     optionTextField: {
       type: String,
       required: false,
       default: 'title',
     },
+    /**
+     * Custom keydown event handler function.
+     */
     customInputKeydownHandler: {
       type: Function,
       required: false,
@@ -123,17 +141,26 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * The current value of the segment.
+     */
     currentValue: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Position of the cursor in the input.
+     */
     cursorPosition: {
       type: String,
       required: false,
       default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
+    /**
+     * When true, renders in a non-interactive view-only mode.
+     */
     viewOnly: {
       type: Boolean,
       required: false,

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/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/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/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/listbox/listbox.vue

@@ -380,6 +380,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Screen-reader-only label for results count.
+     */
     srOnlyResultsLabel: {
       type: Function,
       required: false,

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

@@ -4,10 +4,16 @@ import { uniqueId } from 'lodash-es';
 export default {
   name: 'GlListboxGroup',
   props: {
+    /**
+     * The display name of the listbox group.
+     */
     name: {
       type: String,
       required: true,
     },
+    /**
+     * When true, visually hides the group name while keeping it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,

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

@@ -9,26 +9,41 @@ export default {
     GlIcon,
   },
   props: {
+    /**
+     * When true, marks the item as selected.
+     */
     isSelected: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, marks the item as focused.
+     */
     isFocused: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, centers the check icon.
+     */
     isCheckCentered: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * When true, highlights the item.
+     */
     isHighlighted: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /**
+     * When true, disables the item.
+     */
     isDisabled: {
       type: Boolean,
       default: false,