@gitlab/ui 53.2.0 → 53.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [53.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v53.2.0...v53.3.0) (2023-01-24)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Allow to provide custom toggle id ([b696ea2](https://gitlab.com/gitlab-org/gitlab-ui/commit/b696ea2ef34a9efca894260cfa45b7ff36aefd56))
+
 # [53.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v53.1.0...v53.2.0) (2023-01-23)
 
 

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

@@ -97,6 +97,15 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Custom toggle id.
+     * Fot instance, it can be referenced by tooltip or popover
+     */
+    toggleId: {
+      type: String,
+      required: false,
+      default: _uniqueId('dropdown-toggle-btn-')
+    },
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -143,7 +152,6 @@ var script = {
   },
   data() {
     return {
-      toggleId: _uniqueId('dropdown-toggle-btn-'),
       disclosureId: _uniqueId('disclosure-'),
       nextFocusedItemIndex: null
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "53.2.0",
+  "version": "53.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -33,13 +33,21 @@ describe('GlDisclosureDropdown', () => {
   const findListItem = (index) => findDisclosureItems().at(index).findComponent(ITEM_SELECTOR);
 
   describe('toggle text', () => {
-    it('should pass toggle text to base dropdown', () => {
+    it('should pass toggle text to the base dropdown', () => {
       const toggleText = 'Merge requests';
       buildWrapper({ items: mockItems, toggleText });
       expect(findBaseDropdown().props('toggleText')).toBe(toggleText);
     });
   });
 
+  describe('custom toggle id', () => {
+    it('should pass toggle id to the base dropdown', () => {
+      const toggleId = 'custom-toggle';
+      buildWrapper({ items: mockItems, toggleId });
+      expect(findBaseDropdown().props('toggleId')).toBe(toggleId);
+    });
+  });
+
   describe('ARIA attributes', () => {
     it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper({ items: mockItems });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -13,6 +13,7 @@ import {
   GlAvatar,
   GlModal,
   GlIcon,
+  GlTooltip,
 } from '../../../../index';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import readme from './disclosure_dropdown.md';
@@ -35,6 +36,7 @@ const generateProps = ({
   loading = defaultValue('loading'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
+  toggleId = defaultValue('toggleId'),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',
@@ -50,6 +52,7 @@ const generateProps = ({
   loading,
   noCaret,
   placement,
+  toggleId,
   toggleText,
   textSrOnly,
   icon,
@@ -68,6 +71,7 @@ const makeBindings = (overrides = {}) =>
     ':loading': 'loading',
     ':no-caret': 'noCaret',
     ':placement': 'placement',
+    ':toggle-id': 'toggleId',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
     ':icon': 'icon',
@@ -93,23 +97,34 @@ const template = (content, { bindingOverrides = {} } = {}) => `
     </gl-disclosure-dropdown>
 `;
 
+const TOGGLE_ID = 'custom-toggle-id';
 export const Default = (args, { argTypes }) => ({
+  toggleId: TOGGLE_ID,
   props: Object.keys(argTypes),
   components: {
     GlDisclosureDropdown,
+    GlTooltip,
   },
   mounted() {
     if (this.startOpened) {
       openDisclosure(this);
     }
   },
-  template: template(),
+  template: `
+    <div>
+      ${template()}
+      <gl-tooltip :target="$options.toggleId" placement="right">
+        This is a default disclosure
+      </gl-tooltip>
+    </div>
+  `,
 });
 Default.args = generateProps({
   icon: 'ellipsis_v',
   noCaret: true,
   toggleText: 'Disclosure',
   textSrOnly: true,
+  toggleId: TOGGLE_ID,
 });
 Default.decorators = [makeContainer({ height: '200px' })];
 

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

@@ -109,6 +109,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Custom toggle id.
+     * Fot instance, it can be referenced by tooltip or popover
+     */
+    toggleId: {
+      type: String,
+      required: false,
+      default: uniqueId('dropdown-toggle-btn-'),
+    },
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -155,7 +164,6 @@ export default {
   },
   data() {
     return {
-      toggleId: uniqueId('dropdown-toggle-btn-'),
       disclosureId: uniqueId('disclosure-'),
       nextFocusedItemIndex: null,
     };