@gitlab/ui 130.1.1 → 130.2.0

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -163,6 +163,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle `button`.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * Custom value to be passed to the offset middleware.
      * https://floating-ui.com/docs/offset
@@ -273,6 +281,7 @@ var script = {
         'aria-expanded': String(this.visible),
         'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-label': this.ariaLabel || undefined,
         'aria-activedescendant': this.ariaActiveDescendant
       };
     },

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,5 +1,5 @@
 import { uniqueId, clamp } from 'lodash-es';
-import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { logWarning, stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
@@ -143,6 +143,17 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * The `aria-label` attribute value for the toggle button.
+     * Use when there is no visible label element to reference with `toggleAriaLabelledBy`.
+     * Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`.
+     * When both are present, `toggleAriaLabelledBy` takes precedence per the WAI-ARIA spec.
+     */
+    toggleAriaLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -230,6 +241,11 @@ var script = {
     }
   },
   mounted() {
+    if (this.toggleAriaLabel && this.toggleAriaLabelledBy) {
+      logWarning('Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`. ' + 'When both are present, `toggleAriaLabelledBy` takes precedence and `toggleAriaLabel` is ignored. ' + 'See https://design.gitlab.com/components/dropdown-disclosure/#accessibility', {
+        name: 'GlDisclosureDropdown'
+      });
+    }
     if (this.startOpened) {
       this.open();
     }
@@ -349,7 +365,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"aria-label":_vm.toggleAriaLabelledBy ? undefined : _vm.toggleAriaLabel,"arrow-element":_vm.$refs.disclosureArrow,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy,"is-disclosure":""},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(slotProps){return [_vm._t("toggle",null,null,slotProps)]}}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.siblingsHaveIcons,"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null,(_vm.$scopedSlots['list-item'])?{key:"default",fn:function(){return _vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"siblings-have-icons":_vm.doSomeItemsHaveIcon(item.items),"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})})},proxy:true}:null],null,true)})]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "130.1.1",
+  "version": "130.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -28,6 +28,7 @@
     "!src/vendor",
     "src/vendor/bootstrap-vue/src/**/*.{js,scss}",
     "src/vendor/bootstrap/scss/**/*.scss",
+    "!*.figma.{js,ts}",
     "!*.stories.js",
     "!*.snap",
     "!*.spec.{js,scss}"
@@ -38,6 +39,7 @@
     "copy-fonts": "make copy-fonts",
     "build-tokens": "make tokens",
     "sync-tokens": "node --env-file=.figma.env bin/figma_sync_tokens.mjs",
+    "figma:connect": "node --env-file=.figma.env node_modules/.bin/figma connect",
     "clean": "rm -r dist storybook",
     "cy:edge": "cypress run --browser edge --env grepTags=-@storybook",
     "cy:run": "cypress run --browser firefox --env grepTags=-@storybook",
@@ -99,6 +101,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
+    "@figma/code-connect": "^1.4.2",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.3.0",

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

@@ -195,6 +195,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The `aria-label` attribute value for the toggle `button`.
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * Custom value to be passed to the offset middleware.
      * https://floating-ui.com/docs/offset
@@ -302,6 +310,7 @@ export default {
         'aria-expanded': String(this.visible),
         'aria-haspopup': this.ariaHaspopup,
         'aria-labelledby': this.toggleLabelledBy,
+        'aria-label': this.ariaLabel || undefined,
         'aria-activedescendant': this.ariaActiveDescendant,
       };
     },

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

@@ -1,6 +1,6 @@
 <script>
 import { clamp, uniqueId } from 'lodash-es';
-import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { stopEvent, filterVisible, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -163,6 +163,17 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The `aria-label` attribute value for the toggle button.
+     * Use when there is no visible label element to reference with `toggleAriaLabelledBy`.
+     * Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`.
+     * When both are present, `toggleAriaLabelledBy` takes precedence per the WAI-ARIA spec.
+     */
+    toggleAriaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -251,6 +262,16 @@ export default {
     },
   },
   mounted() {
+    if (this.toggleAriaLabel && this.toggleAriaLabelledBy) {
+      logWarning(
+        'Do not provide both `toggleAriaLabel` and `toggleAriaLabelledBy`. ' +
+          'When both are present, `toggleAriaLabelledBy` takes precedence and `toggleAriaLabel` is ignored. ' +
+          'See https://design.gitlab.com/components/dropdown-disclosure/#accessibility',
+        {
+          name: 'GlDisclosureDropdown',
+        },
+      );
+    }
     if (this.startOpened) {
       this.open();
     }
@@ -374,6 +395,7 @@ export default {
   <gl-base-dropdown
     ref="baseDropdown"
     :aria-labelledby="toggleAriaLabelledBy"
+    :aria-label="toggleAriaLabelledBy ? undefined : toggleAriaLabel"
     :arrow-element="$refs.disclosureArrow"
     :toggle-id="toggleId"
     :toggle-text="toggleText"