@gitlab/ui 55.2.0 → 55.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.2.0",
+  "version": "55.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,18 +87,18 @@
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.19.0",
+    "@gitlab/svgs": "3.20.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.15",
-    "@storybook/addon-docs": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-storyshots": "6.5.15",
-    "@storybook/addon-storyshots-puppeteer": "6.5.15",
-    "@storybook/addon-viewport": "6.5.15",
-    "@storybook/theming": "6.5.15",
-    "@storybook/vue": "6.5.15",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-storyshots": "6.5.16",
+    "@storybook/addon-storyshots-puppeteer": "6.5.16",
+    "@storybook/addon-viewport": "6.5.16",
+    "@storybook/theming": "6.5.16",
+    "@storybook/vue": "6.5.16",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -123,9 +123,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.4.1",
-    "jest-circus": "29.4.1",
-    "jest-environment-jsdom": "29.4.1",
+    "jest": "^29.4.2",
+    "jest-circus": "29.4.2",
+    "jest-environment-jsdom": "29.4.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

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

@@ -8,12 +8,13 @@
     @include gl-pt-0;
     @include gl-pb-3;
 
-    > .form-text {
+    > .label-description {
       @include gl-mt-3;
     }
   }
 
-  .optional-label {
+  .optional-label,
+  .label-description {
     @include gl-font-weight-normal;
   }
 

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

@@ -1,12 +1,10 @@
 <script>
 import { BFormGroup } from 'bootstrap-vue';
 import { isString, isArray, isPlainObject } from 'lodash';
-import GlFormText from '../form_text/form_text.vue';
 
 export default {
   components: {
     BFormGroup,
-    GlFormText,
   },
   inheritAttrs: false,
   props: {
@@ -63,9 +61,9 @@ export default {
           optionalText
         }}</span>
       </slot>
-      <gl-form-text v-if="hasLabelDescription" data-testid="label-description">
+      <div v-if="hasLabelDescription" data-testid="label-description" class="label-description">
         <slot name="label-description">{{ labelDescription }}</slot>
-      </gl-form-text>
+      </div>
     </template>
 
     <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->

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

@@ -25,42 +25,6 @@ import {
   mockGroupsCustomItem,
 } from './mock_data';
 
-const defaultValue = (prop) => GlDisclosureDropdown.props[prop].default;
-
-const generateProps = ({
-  items = mockItems,
-  category = defaultValue('category'),
-  variant = defaultValue('variant'),
-  size = defaultValue('size'),
-  disabled = defaultValue('disabled'),
-  loading = defaultValue('loading'),
-  noCaret = defaultValue('noCaret'),
-  placement = defaultValue('placement'),
-  toggleId = defaultValue('toggleId')(),
-  toggleText,
-  textSrOnly = defaultValue('textSrOnly'),
-  icon = '',
-  toggleAriaLabelledBy,
-  listAriaLabelledBy,
-  startOpened = true,
-} = {}) => ({
-  items,
-  category,
-  variant,
-  size,
-  disabled,
-  loading,
-  noCaret,
-  placement,
-  toggleId,
-  toggleText,
-  textSrOnly,
-  icon,
-  toggleAriaLabelledBy,
-  listAriaLabelledBy,
-  startOpened,
-});
-
 const makeBindings = (overrides = {}) =>
   Object.entries({
     ':items': 'items',
@@ -119,13 +83,14 @@ export const Default = (args, { argTypes }) => ({
     </div>
   `,
 });
-Default.args = generateProps({
+Default.args = {
+  items: mockItems,
   icon: 'ellipsis_v',
   noCaret: true,
   toggleText: 'Disclosure',
   textSrOnly: true,
   toggleId: TOGGLE_ID,
-});
+};
 Default.decorators = [makeContainer({ height: '200px' })];
 
 export const CustomListItem = (args, { argTypes }) => ({
@@ -162,11 +127,11 @@ export const CustomListItem = (args, { argTypes }) => ({
   ),
 });
 
-CustomListItem.args = generateProps({
+CustomListItem.args = {
   items: mockItemsCustomItem,
   toggleText: 'Merge requests',
   placement: 'center',
-});
+};
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 
 const makeGroupedExample = (changes) => {
@@ -190,7 +155,7 @@ const makeGroupedExample = (changes) => {
     ...changes,
   });
 
-  story.args = generateProps({ items: mockGroups });
+  story.args = { items: mockGroups };
   story.decorators = [makeContainer({ height: '340px' })];
 
   return story;
@@ -199,12 +164,12 @@ const makeGroupedExample = (changes) => {
 export const Groups = makeGroupedExample({
   template: template(''),
 });
-Groups.args = generateProps({
+Groups.args = {
   icon: 'plus-square',
   items: mockGroups,
   toggleText: 'Create new',
   textSrOnly: true,
-});
+};
 
 export const CustomGroupsAndItems = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -245,10 +210,10 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
   ),
 });
 
-CustomGroupsAndItems.args = generateProps({
+CustomGroupsAndItems.args = {
   items: mockGroupsCustomItem,
   toggleText: 'Merge requests',
-});
+};
 CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
 
 export const CustomGroupsItemsAndToggle = makeGroupedExample({
@@ -313,12 +278,11 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
   },
   groups: mockProfileGroups,
 });
-CustomGroupsItemsAndToggle.args = generateProps({
+CustomGroupsItemsAndToggle.args = {
   icon: 'plus-square',
   toggleText: 'User profile menu',
   textSrOnly: true,
-  items: null,
-});
+};
 CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
 
 export const MiscellaneousContent = (args, { argTypes }) => ({
@@ -338,12 +302,11 @@ export const MiscellaneousContent = (args, { argTypes }) => ({
   ),
 });
 
-MiscellaneousContent.args = generateProps({
+MiscellaneousContent.args = {
   icon: 'doc-text',
   toggleText: 'Miscellaneous content',
   textSrOnly: true,
-  items: null,
-});
+};
 MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
 
 export default {
@@ -382,4 +345,7 @@ export default {
       },
     },
   },
+  args: {
+    startOpened: true,
+  },
 };

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

@@ -44,7 +44,7 @@
     }
 
     .gl-toggle-label,
-    .gl-help-label {
+    .gl-description-label {
       @include gl-text-gray-500;
     }
   }
@@ -73,7 +73,6 @@
 }
 
 .gl-toggle-label {
-  @include gl-mb-3;
   @include gl-font-weight-bold;
 }
 

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

@@ -8,6 +8,7 @@ describe('toggle', () => {
   let wrapper;
 
   const label = 'toggle label';
+  const descriptionText = 'description text';
   const helpText = 'help text';
 
   const createWrapper = (props = {}, options = {}) => {
@@ -21,6 +22,7 @@ describe('toggle', () => {
   };
 
   const findButton = () => wrapper.find('button');
+  const findDescriptionElement = () => wrapper.find('[data-testid="toggle-description"]');
   const findHelpElement = () => wrapper.find('[data-testid="toggle-help"]');
 
   it('has role=switch', () => {
@@ -85,6 +87,28 @@ describe('toggle', () => {
     });
   });
 
+  describe.each`
+    state                                        | description        | props                                                                       | options
+    ${'with description'}                        | ${descriptionText} | ${{ description: descriptionText }}                                         | ${undefined}
+    ${'with description in slot'}                | ${descriptionText} | ${undefined}                                                                | ${{ slots: { description: descriptionText } }}
+    ${'without description'}                     | ${undefined}       | ${undefined}                                                                | ${undefined}
+    ${'with description and labelPosition left'} | ${undefined}       | ${{ desciption: descriptionText, labelPosition: toggleLabelPosition.left }} | ${undefined}
+  `('$state', ({ description, props, options }) => {
+    beforeEach(() => {
+      createWrapper(props, options);
+    });
+
+    if (description) {
+      it('shows description', () => {
+        expect(findDescriptionElement().text()).toBe(description);
+      });
+    } else {
+      it('does not show description', () => {
+        expect(findDescriptionElement().exists()).toBe(false);
+      });
+    }
+  });
+
   describe.each`
     state                                 | help         | props                                                          | options                          | getAriaDescribedBy
     ${'with help'}                        | ${helpText}  | ${{ help: helpText }}                                          | ${undefined}                     | ${() => findHelpElement().attributes('id')}

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

@@ -5,7 +5,9 @@ import readme from './toggle.md';
 
 const defaultValue = (prop) => GlToggle.props[prop].default;
 
-const longHelp = `This is a toggle component with a long help message. 
+const withDescription = 'A dark color theme that is easier on the eyes.';
+
+const longHelp = `This is a toggle component with a long help message.
   You can notice how the text wraps when the width of the container
   is not enough to fix the entire text.`;
 
@@ -15,7 +17,8 @@ const generateProps = ({
   isLoading = defaultValue('isLoading'),
   label = 'Dark mode',
   labelId = 'dark-mode-toggle',
-  help = 'Toggle dark mode for the website',
+  description = '',
+  help = 'Toggle dark mode for the website.',
   labelPosition = defaultValue('labelPosition'),
 } = {}) => ({
   value,
@@ -23,6 +26,7 @@ const generateProps = ({
   isLoading,
   label,
   labelId,
+  description,
   help,
   labelPosition,
 });
@@ -35,6 +39,7 @@ const Template = (args, { argTypes }) => ({
     <gl-toggle
       v-model="value"
       :disabled="disabled"
+      :description="description"
       :help="help"
       :label-id="labelId"
       :is-loading="isLoading"
@@ -47,11 +52,21 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithDescription = Template.bind({});
+WithDescription.args = generateProps({
+  description: withDescription,
+});
+
 export const WithLongHelp = Template.bind({});
 WithLongHelp.args = generateProps({
   help: longHelp,
 });
 
+export const LabelPositionLeft = Template.bind({});
+LabelPositionLeft.args = generateProps({
+  labelPosition: 'left',
+});
+
 export default {
   title: 'base/toggle',
   component: GlToggle,
@@ -71,6 +86,9 @@ export default {
     label: {
       control: 'text',
     },
+    description: {
+      control: 'text',
+    },
     help: {
       control: 'text',
     },

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

@@ -55,6 +55,14 @@ export default {
       type: String,
       required: true,
     },
+    /**
+     * The toggle's description.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     /**
      * A help text to be shown below the toggle.
      */
@@ -81,10 +89,20 @@ export default {
     };
   },
   computed: {
+    shouldRenderDescription() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
+    },
     shouldRenderHelp() {
       // 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';
     },
@@ -132,13 +150,21 @@ export default {
   >
     <span
       :id="labelId"
-      :class="{ 'gl-sr-only': labelPosition === 'hidden' }"
+      :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>
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
       role="switch"