@gitlab/ui 64.18.0 → 64.18.2

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Wed, 05 Jul 2023 16:22:25 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Wed, 05 Jul 2023 16:22:25 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Wed, 05 Jul 2023 16:22:25 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 11:29:36 GMT
+ * Generated on Wed, 05 Jul 2023 16:22:25 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 11:29:36 GMT
+// Generated on Wed, 05 Jul 2023 16:22:25 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 11:29:36 GMT
+// Generated on Wed, 05 Jul 2023 16:22:25 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/constants.js

@@ -249,7 +249,6 @@ const formInputSizes = {
 const toggleLabelPosition = {
   hidden: 'hidden',
   left: 'left',
-  block: 'block',
   top: 'top'
 };
 const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.18.0",
+  "version": "64.18.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -95,18 +95,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.23",
-    "@storybook/addon-docs": "7.0.23",
-    "@storybook/addon-essentials": "7.0.23",
-    "@storybook/addon-storyshots": "7.0.23",
-    "@storybook/addon-storyshots-puppeteer": "7.0.23",
-    "@storybook/addon-viewport": "7.0.23",
-    "@storybook/builder-webpack5": "7.0.23",
-    "@storybook/theming": "7.0.23",
-    "@storybook/vue": "7.0.23",
-    "@storybook/vue-webpack5": "7.0.23",
-    "@storybook/vue3": "7.0.23",
-    "@storybook/vue3-webpack5": "7.0.23",
+    "@storybook/addon-a11y": "7.0.24",
+    "@storybook/addon-docs": "7.0.24",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addon-storyshots": "7.0.24",
+    "@storybook/addon-storyshots-puppeteer": "7.0.24",
+    "@storybook/addon-viewport": "7.0.24",
+    "@storybook/builder-webpack5": "7.0.24",
+    "@storybook/theming": "7.0.24",
+    "@storybook/vue": "7.0.24",
+    "@storybook/vue-webpack5": "7.0.24",
+    "@storybook/vue3": "7.0.24",
+    "@storybook/vue3-webpack5": "7.0.24",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -120,7 +120,7 @@
     "bootstrap": "4.6.2",
     "cypress": "12.16.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.42.0",
+    "eslint": "8.44.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",
@@ -154,7 +154,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.23",
+    "storybook": "7.0.24",
     "storybook-dark-mode": "3.0.0",
     "style-dictionary": "^3.8.0",
     "stylelint": "14.9.1",

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -485,31 +485,33 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      title      | multiple | selected
-      ${'shows'} | ${true}  | ${mockOptionsValues}
-      ${'hides'} | ${false} | ${mockOptions[1].value}
+      description        | props
+      ${'multi-select'}  | ${{ multiple: true, selected: mockOptionsValues }}
+      ${'single-select'} | ${{ multiple: false, selected: mockOptions[1].value }}
     `(
-      '$title the reset button if the label is provided and the selection is complete and mode if multiple mode is $multiple',
-      ({ multiple, selected }) => {
+      'shows the button if the label is provided and the selection is complete in $description mode',
+      ({ props }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          selected,
           items: mockOptions,
-          multiple,
+          ...props,
         });
 
-        expect(findResetButton().exists()).toBe(multiple);
+        expect(findResetButton().exists()).toBe(true);
       }
     );
 
-    it('hides reset button if the label is provided and the selection is not complete', () => {
+    it.each`
+      description        | props
+      ${'multi-select'}  | ${{ multiple: true, selected: [] }}
+      ${'single-select'} | ${{ multiple: false, selected: [] }}
+    `('hides the button if the selection is empty in $description mode', ({ props }) => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptions[1].value,
         items: mockOptions,
-        multiple: true,
+        ...props,
       });
 
       expect(findResetButton().exists()).toBe(false);
@@ -527,22 +529,7 @@ describe('GlCollapsibleListbox', () => {
       expect(findResetButton().exists()).toBe(false);
     });
 
-    it.each`
-      description        | props
-      ${'multi-select'}  | ${{ multiple: true, selected: [] }}
-      ${'single-select'} | ${{ multiple: false, selected: null }}
-    `('hides the button if the selection is empty in $description mode', ({ props }) => {
-      buildWrapper({
-        headerText: 'Select assignee',
-        resetButtonLabel: 'Unassign',
-        items: mockOptions,
-        ...props,
-      });
-
-      expect(findResetButton().exists()).toBe(false);
-    });
-
-    it('on click, emits the reset event does not and call closeAndFocus() for multiple mode', () => {
+    it('on click, emits the `reset` event but does not call `closeAndFocus`', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
@@ -572,24 +559,31 @@ describe('GlCollapsibleListbox', () => {
       expect(wrapper).toHaveLoggedVueErrors();
     });
 
-    it.each`
-      multiple | resetVisible | selectAllVisible
-      ${false} | ${false}     | ${false}
-      ${true}  | ${false}     | ${true}
+    describe.each`
+      multiple | resetVisible | selectAllVisible | selected
+      ${false} | ${false}     | ${false}         | ${[]}
+      ${true}  | ${false}     | ${true}          | ${[]}
     `(
-      'shows the select all button if the label is provided and the selection is empty and multiple option is $multiple',
-      ({ multiple, resetVisible, selectAllVisible }) => {
-        buildWrapper({
-          headerText: 'Select assignee',
-          resetButtonLabel: 'Unassign',
-          showSelectAllButtonLabel: 'Select All',
-          selected: [],
-          items: mockOptions,
-          multiple,
+      'when label is provided, selection is empty and multiple option is $multiple',
+      ({ multiple, resetVisible, selectAllVisible, selected }) => {
+        beforeEach(() => {
+          buildWrapper({
+            headerText: 'Select assignee',
+            resetButtonLabel: 'Unassign',
+            showSelectAllButtonLabel: 'Select All',
+            items: mockOptions,
+            selected,
+            multiple,
+          });
+        });
+
+        it(`${selectAllVisible ? 'shows' : 'does not show'} the Select all button`, () => {
+          expect(findSelectAllButton().exists()).toBe(selectAllVisible);
         });
 
-        expect(findResetButton().exists()).toBe(resetVisible);
-        expect(findSelectAllButton().exists()).toBe(selectAllVisible);
+        it(`${resetVisible ? 'shows' : 'does not show'} the Reset button`, () => {
+          expect(findResetButton().exists()).toBe(resetVisible);
+        });
       }
     );
 
@@ -644,7 +638,7 @@ describe('GlCollapsibleListbox', () => {
       expect(findSelectAllButton().text()).toBe('Select All');
     });
 
-    it('on click, emits the select-all event and calls closeAndFocus()', () => {
+    it('on click, emits the `select-all` event and calls `closeAndFocus`', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',

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

@@ -398,10 +398,6 @@ export default {
         return false;
       }
 
-      if (!this.multiple) {
-        return false;
-      }
-
       /**
        * if dropdown has no items
        * reset all should be hidden
@@ -410,6 +406,13 @@ export default {
         return false;
       }
 
+      /**
+       * hide if no selection
+       */
+      if (this.selected.length === 0) {
+        return false;
+      }
+
       if (this.multiple) {
         return this.selected.length === this.items.length;
       }

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

@@ -29,18 +29,18 @@
     .gl-toggle {
       @include gl-cursor-not-allowed;
       @include gl-bg-gray-200;
-    }
 
-    .toggle-icon > svg {
-      @include gl-fill-gray-200;
+      .toggle-icon > svg {
+        @include gl-fill-gray-200;
+      }
     }
 
     .gl-toggle.is-checked {
       @include gl-bg-blue-200;
-    }
 
-    .toggle-icon > svg {
-      @include gl-fill-blue-200;
+      .toggle-icon > svg {
+        @include gl-fill-blue-200;
+      }
     }
 
     .gl-toggle-label,
@@ -50,32 +50,6 @@
   }
 }
 
-.gl-toggle-label-container {
-  @include gl-flex-shrink-0;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
-}
-
-.gl-toggle-switch-container {
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
-}
-
-.gl-toggle-label-position-block {
-  @include gl-justify-content-space-between;
-  @include gl-align-items-center;
-  @include gl-w-full;
-
-  .gl-toggle-label-container {
-    @include gl-gap-2;
-  }
-
-  .gl-toggle-switch-container {
-    @include gl-align-items-flex-end;
-    @include gl-gap-2;
-  }
-}
-
 .gl-help-label {
   @include gl-mt-3;
   @include gl-text-gray-500;

package/src/components/base/toggle/toggle.spec.js

@@ -138,43 +138,31 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection                 | showsHelpText | showsDescription
-      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'} | ${true}       | ${true}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}   | ${false}      | ${false}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'} | ${true}       | ${true}
-      ${'block'}  | ${toggleLabelPosition.block}  | ${false}         | ${'gl-toggle-label-inline'}   | ${true}       | ${true}
-    `(
-      'when $state',
-      ({ labelPosition, hasGlSrOnlyClass, flexDirection, showsHelpText, showsDescription }) => {
-        beforeEach(() => {
-          createWrapper({ labelPosition, help: helpText, description: descriptionText });
-        });
-
-        it(`${flexDirection} class is added to the label`, () => {
-          const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
-
-          expect(cssClasses).toContain(flexDirection);
-        });
-
-        it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
-          const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
-          return hasGlSrOnlyClass
-            ? expect(cssClasses).toContain('gl-sr-only')
-            : expect(cssClasses).not.toContain('gl-sr-only');
-        });
-
-        it('has accessible name for the button', () => {
-          expect(findButton().attributes('aria-labelledby')).toBeDefined();
-        });
-
-        it(`${showsHelpText ? 'shows' : 'does not show'} the help text`, () => {
-          expect(findHelpElement().exists()).toBe(showsHelpText);
-        });
-
-        it(`${showsDescription ? 'shows' : 'does not show'} the description`, () => {
-          expect(findDescriptionElement().exists()).toBe(showsDescription);
-        });
-      }
-    );
+      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection
+      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'}
+      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}
+      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'}
+    `('when $state', ({ labelPosition, hasGlSrOnlyClass, flexDirection }) => {
+      beforeEach(() => {
+        createWrapper({ labelPosition });
+      });
+
+      it(`${flexDirection} class is added to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
+
+        return expect(cssClasses).toContain(flexDirection);
+      });
+
+      it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
+        return hasGlSrOnlyClass
+          ? expect(cssClasses).toContain('gl-sr-only')
+          : expect(cssClasses).not.toContain('gl-sr-only');
+      });
+
+      it('has accessible name for the button', () => {
+        expect(findButton().attributes('aria-labelledby')).toBeDefined();
+      });
+    });
   });
 });

package/src/components/base/toggle/toggle.stories.js

@@ -67,12 +67,6 @@ LabelPositionLeft.args = generateProps({
   labelPosition: 'left',
 });
 
-export const LabelPositionBlock = Template.bind({});
-LabelPositionBlock.args = generateProps({
-  labelPosition: 'block',
-  description: withDescription,
-});
-
 export default {
   title: 'base/toggle',
   component: GlToggle,

package/src/components/base/toggle/toggle.vue

@@ -90,42 +90,19 @@ export default {
     };
   },
   computed: {
-    layoutAllowsDescription() {
-      return this.isVerticalLayout || this.isBlockLayout;
-    },
     shouldRenderDescription() {
-      return (
-        Boolean(this.$scopedSlots.description || this.description) && this.layoutAllowsDescription
-      );
-    },
-    labelIsSrOnly() {
-      return this.labelPosition === 'hidden';
-    },
-    layoutAllowsHelp() {
-      return this.isVerticalLayout || this.isBlockLayout;
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
     },
     shouldRenderHelp() {
-      return Boolean(this.$scopedSlots.help || this.help) && this.layoutAllowsHelp;
-    },
-    labelContainerClasses() {
-      return {
-        'gl-mb-3': this.isVerticalLayout && !this.labelIsSrOnly,
-      };
-    },
-    labelClasses() {
-      if (this.labelIsSrOnly) return 'gl-sr-only';
-      return {
-        'gl-mb-2': this.shouldRenderDescription,
-        'gl-mb-3': !this.shouldRenderDescription && !this.isVerticalLayout,
-      };
-    },
-    wrapperClasses() {
-      return {
-        'gl-flex-direction-column': this.isVerticalLayout,
-        'gl-toggle-label-inline': !this.isVerticalLayout,
-        'is-disabled': this.disabled,
-        'gl-toggle-label-position-block': this.isBlockLayout,
-      };
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+    },
+    toggleClasses() {
+      return [
+        { 'gl-sr-only': this.labelPosition === 'hidden' },
+        this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3',
+      ];
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -139,9 +116,6 @@ export default {
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     },
-    isBlockLayout() {
-      return this.labelPosition === 'block';
-    },
   },
 
   beforeCreate() {
@@ -168,49 +142,54 @@ export default {
 <template>
   <div
     class="gl-toggle-wrapper gl-display-flex gl-mb-0"
-    :class="wrapperClasses"
+    :class="{
+      'gl-flex-direction-column': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
+      'is-disabled': disabled,
+    }"
     data-testid="toggle-wrapper"
   >
-    <span :class="labelContainerClasses" class="gl-toggle-label-container">
-      <span :id="labelId" :class="labelClasses" class="gl-toggle-label" data-testid="toggle-label">
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <span
-        v-if="shouldRenderDescription"
-        class="gl-description-label"
-        data-testid="toggle-description"
-      >
-        <!-- @slot A description text to be shown below the label. -->
-        <slot name="description">{{ description }}</slot>
-      </span>
+    <span
+      :id="labelId"
+      :class="toggleClasses"
+      class="gl-toggle-label gl-flex-shrink-0"
+      data-testid="toggle-label"
+    >
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span
+      v-if="shouldRenderDescription"
+      class="gl-description-label gl-mb-3"
+      data-testid="toggle-description"
+    >
+      <!-- @slot A description text to be shown below the label. -->
+      <slot name="description">{{ description }}</slot>
     </span>
-    <span class="gl-toggle-switch-container">
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-labelledby="labelId"
-        :aria-describedby="helpId"
-        :aria-disabled="disabled"
-        :class="{
-          'gl-toggle': true,
-          'is-checked': value,
-          'is-disabled': disabled,
-        }"
-        class="gl-flex-shrink-0"
-        type="button"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
-        <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
-          <gl-icon :name="icon" :size="16" />
-        </span>
-      </button>
-      <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
-        <!-- @slot A help text to be shown below the toggle. -->
-        <slot name="help">{{ help }}</slot>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :aria-disabled="disabled"
+      :class="{
+        'gl-toggle': true,
+        'is-checked': value,
+        'is-disabled': disabled,
+      }"
+      class="gl-flex-shrink-0"
+      type="button"
+      @click.prevent="toggleFeature"
+    >
+      <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
+      <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
+        <gl-icon :name="icon" :size="16" />
       </span>
+    </button>
+    <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
+      <!-- @slot A help text to be shown below the toggle. -->
+      <slot name="help">{{ help }}</slot>
     </span>
   </div>
 </template>

package/src/utils/constants.js

@@ -297,7 +297,6 @@ export const formInputSizes = {
 export const toggleLabelPosition = {
   hidden: 'hidden',
   left: 'left',
-  block: 'block',
   top: 'top',
 };