@gitlab/ui 49.1.0 → 49.2.0

package/dist/utils/constants.js

@@ -35,6 +35,10 @@ const badgeVariantOptions = {
   danger: 'danger',
   tier: 'tier'
 };
+const badgeIconSizeOptions = {
+  sm: 12,
+  md: 16
+};
 const variantCssColorMap = {
   muted: 'gl-text-gray-500',
   neutral: 'gl-text-blue-100',
@@ -248,4 +252,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

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

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

@@ -17,13 +17,14 @@ describe('badge', () => {
 
   describe('with "icon" prop', () => {
     describe.each`
-      scenario           | hasSlot  | iconName     | expectedRole
-      ${'icon-only'}     | ${false} | ${'warning'} | ${'img'}
-      ${'icon and slot'} | ${true}  | ${'warning'} | ${undefined}
-    `('with $scenario', ({ iconName, hasSlot, expectedRole }) => {
+      scenario                | hasSlot  | iconName     | iconSize | expectedIconSize | expectedRole
+      ${'icon-only'}          | ${false} | ${'warning'} | ${'md'}  | ${16}            | ${'img'}
+      ${'16px icon and slot'} | ${true}  | ${'warning'} | ${'md'}  | ${16}            | ${undefined}
+      ${'12px icon and slot'} | ${true}  | ${'warning'} | ${'sm'}  | ${12}            | ${undefined}
+    `('with $scenario', ({ iconName, iconSize, expectedIconSize, hasSlot, expectedRole }) => {
       beforeEach(() => {
         const slots = hasSlot ? { default: 'slot-content' } : undefined;
-        createComponent({ propsData: { icon: iconName }, slots });
+        createComponent({ propsData: { icon: iconName, iconSize }, slots });
       });
 
       it(`sets badge "role" attribute to ${expectedRole}`, () => {
@@ -42,6 +43,10 @@ describe('badge', () => {
 
           expect(icon.classes('gl-mr-2')).toBe(hasSlot);
         });
+
+        it('with correct size', () => {
+          expect(findIcon().props('size')).toBe(expectedIconSize);
+        });
       });
     });
   });

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

@@ -1,6 +1,10 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlBadge } from '../../../index';
-import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants';
+import {
+  badgeSizeOptions,
+  badgeVariantOptions,
+  badgeIconSizeOptions,
+} from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
 import readme from './badge.md';
 
@@ -10,6 +14,7 @@ const template = `
       :variant="variant"
       :size="size"
       :icon="icon"
+      :iconSize="iconSize"
     >{{ content }}</gl-badge>
   `;
 
@@ -21,12 +26,14 @@ const generateProps = ({
   href = '',
   content = 'TestBadge',
   icon = '',
+  iconSize = defaultValue('iconSize'),
 } = {}) => ({
   variant,
   size,
   href,
   content,
   icon,
+  iconSize,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -53,6 +60,7 @@ export const Variants = (args, { argTypes }) => ({
         :variant="variant"
         :size="size"
         :icon="icon"
+        :iconSize="iconSize"
         class="gl-mr-3"
       >{{ variant }}</gl-badge>
     </div>
@@ -76,6 +84,7 @@ export const Actionable = (args, { argTypes }) => ({
         :variant="variant"
         :size="size"
         :icon="icon"
+        :iconSize="iconSize"
         class="gl-mr-3"
       >{{ variant }}</gl-badge>
     </div>
@@ -103,6 +112,7 @@ export const Sizes = (args, { argTypes }) => ({
         :variant="variant"
         :size="size"
         :icon="icon"
+        :iconSize="iconSize"
         class="gl-mr-3"
       >{{ size }}</gl-badge>
     </div>
@@ -115,6 +125,18 @@ Sizes.args = generateProps({
 Sizes.argTypes = disableControls(['content', 'size']);
 
 export const BadgeIcon = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div class="gl-display-flex gl-gap-3">
+      <gl-badge variant="tier" icon="license">16px icon</gl-badge>
+      <gl-badge variant="tier" icon="license-sm" iconSize="sm">12px icon</gl-badge>
+    </div>
+  `,
+});
+BadgeIcon.argTypes = disableControls(['content', 'iconSize']);
+
+export const IconOnly = (args, { argTypes }) => ({
   components: { GlBadge },
   props: Object.keys(argTypes),
   template: `
@@ -124,20 +146,14 @@ export const BadgeIcon = (args, { argTypes }) => ({
         :variant="variant"
         :size="size"
         :icon="icon"
-      >{{ content }}</gl-badge>
-      <gl-badge
-        :href="href"
-        :variant="variant"
-        :size="size"
-        :icon="icon"
+        :iconSize="iconSize"
       />
     </div>
   `,
 });
-BadgeIcon.args = generateProps({
+IconOnly.args = generateProps({
   variant: badgeVariantOptions.success,
   icon: 'calendar',
-  content: 'Badge icon',
 });
 
 export default {
@@ -164,5 +180,9 @@ export default {
       options: ['', ...iconSpriteInfo.icons],
       control: 'select',
     },
+    iconSize: {
+      options: Object.keys(badgeIconSizeOptions),
+      control: 'select',
+    },
   },
 };

package/src/components/base/badge/badge.vue

@@ -1,7 +1,11 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBadge } from 'bootstrap-vue';
-import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants';
+import {
+  badgeSizeOptions,
+  badgeVariantOptions,
+  badgeIconSizeOptions,
+} from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
 export default {
@@ -41,6 +45,15 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The size of the icon 16 or 12
+     */
+    iconSize: {
+      type: String,
+      default: 'md',
+      validator: (value) => Object.keys(badgeIconSizeOptions).includes(value),
+      required: false,
+    },
   },
   computed: {
     hasIconOnly() {
@@ -50,13 +63,22 @@ export default {
     role() {
       return this.hasIconOnly ? 'img' : undefined;
     },
+    iconSizeComputed() {
+      return badgeIconSizeOptions[this.iconSize];
+    },
   },
 };
 </script>
 
 <template>
   <b-badge v-bind="$attrs" :variant="variant" :class="['gl-badge', size]" :role="role" pill>
-    <gl-icon v-if="icon" class="gl-badge-icon" :class="{ 'gl-mr-2': !hasIconOnly }" :name="icon" />
+    <gl-icon
+      v-if="icon"
+      class="gl-badge-icon"
+      :size="iconSizeComputed"
+      :class="{ 'gl-mr-2': !hasIconOnly }"
+      :name="icon"
+    />
     <!-- @slot The badge content to display. -->
     <slot></slot>
   </b-badge>

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

@@ -49,6 +49,12 @@ Alternatively, you can set `selected` property to the array of selected items
 `value` properties (for multi-select) or to the selected item `value` property for a single-select.
 On selection the listbox will emit the `select` event with the selected values.
 
+### Resetting the selection
+
+`GlListbox` can render a reset button if the `headerText` and `resetButtonLabel` props are provided.
+When clicking on the reset button, a `reset` event is emitted. It is the consumer's responsibility
+to listen to that event and to update the model as needed.
+
 ### Setting listbox options
 
 Use the `items` prop to provide options to the listbox. Each item can be

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

@@ -35,6 +35,7 @@ describe('GlListbox', () => {
   const findNoResultsText = () => wrapper.find("[data-testid='listbox-no-results-text']");
   const findLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
   const findSRNumberOfResultsText = () => wrapper.find("[data-testid='listbox-number-of-results']");
+  const findResetButton = () => wrapper.find("[data-testid='listbox-reset-button']");
 
   describe('toggle text', () => {
     describe.each`
@@ -377,4 +378,61 @@ describe('GlListbox', () => {
       });
     });
   });
+
+  describe('with a reset action', () => {
+    it('throws when enabling the reset action without a header', () => {
+      expect(() => {
+        buildWrapper({ resetButtonLabel: 'Unassign' });
+      }).toThrow(
+        'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+      );
+      expect(wrapper).toHaveLoggedVueErrors();
+    });
+
+    it('shows the reset button if the label is provided and the selection is not empty', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        selected: mockOptions[1].value,
+        items: mockOptions,
+      });
+      const button = findResetButton();
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Unassign');
+    });
+
+    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 and calls closeAndFocus()', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        selected: mockOptions[1].value,
+        items: mockOptions,
+      });
+      jest.spyOn(wrapper.vm, 'closeAndFocus');
+
+      expect(wrapper.emitted('reset')).toBe(undefined);
+      expect(wrapper.vm.closeAndFocus).not.toHaveBeenCalled();
+
+      findResetButton().trigger('click');
+
+      expect(wrapper.emitted('reset')).toHaveLength(1);
+      expect(wrapper.vm.closeAndFocus).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -39,6 +39,7 @@ const generateProps = ({
   isCheckCentered = defaultValue('isCheckCentered'),
   toggleAriaLabelledBy,
   listAriaLabelledBy,
+  resetButtonLabel = defaultValue('resetButtonLabel'),
   startOpened = true,
 } = {}) => ({
   items,
@@ -60,6 +61,7 @@ const generateProps = ({
   isCheckCentered,
   toggleAriaLabelledBy,
   listAriaLabelledBy,
+  resetButtonLabel,
   startOpened,
 });
 
@@ -84,6 +86,7 @@ const makeBindings = (overrides = {}) =>
     ':is-check-centered': 'isCheckCentered',
     ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
     ':list-aria-labelled-by': 'listAriaLabelledBy',
+    ':reset-button-label': 'resetButtonLabel',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
@@ -153,8 +156,12 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     selectItem(index) {
       this.selected.push(mockOptions[index].value);
     },
+    onReset() {
+      this.selected = [];
+    },
   },
-  template: template(`
+  template: template(
+    `
     <template #footer>
       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-justify-content-center gl-p-3">
         <gl-button-group :vertical="false">
@@ -164,11 +171,18 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
         </gl-button-group>
       </div>
     </template>
-  `),
+  `,
+    {
+      bindingOverrides: {
+        '@reset': 'onReset',
+      },
+    }
+  ),
 });
 HeaderAndFooter.args = generateProps({
   toggleText: 'Header and Footer',
   headerText: 'Assign to department',
+  resetButtonLabel: 'Unassign',
   multiple: true,
 });
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
@@ -197,6 +211,11 @@ export const CustomListItem = (args, { argTypes }) => ({
         : this.items.find(({ value }) => value === this.selected[0]).text;
     },
   },
+  methods: {
+    onReset() {
+      this.selected = [];
+    },
+  },
   template: template(
     `<template #list-item="{ item }">
           <span class="gl-display-flex gl-align-items-center">
@@ -211,6 +230,7 @@ export const CustomListItem = (args, { argTypes }) => ({
     {
       bindingOverrides: {
         ':toggle-text': 'customToggleText',
+        '@reset': 'onReset',
       },
     }
   ),
@@ -229,6 +249,8 @@ CustomListItem.args = generateProps({
   ],
   multiple: true,
   isCheckCentered: true,
+  headerText: 'Select assignees',
+  resetButtonLabel: 'Unassign',
 });
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 

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

@@ -15,6 +15,7 @@ import {
   buttonSizeOptions,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
+import GlButton from '../../button/button.vue';
 import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
 import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
@@ -37,6 +38,7 @@ export default {
     GlBaseDropdown,
     GlListboxItem,
     GlListboxGroup,
+    GlButton,
     GlSearchBoxByType,
     GlLoadingIcon,
   },
@@ -219,6 +221,17 @@ export default {
       required: false,
       default: 'No results found',
     },
+    /**
+     * The reset button's label, to be rendered in the header. If this is omitted, the button is not
+     * rendered.
+     * The reset button requires a header to be set, so this prop should be used in conjunction with
+     * headerText.
+     */
+    resetButtonLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -266,6 +279,15 @@ export default {
     headerId() {
       return this.headerText && uniqueId('listbox-header-');
     },
+    showResetButton() {
+      if (!this.resetButtonLabel) {
+        return false;
+      }
+      if (this.multiple) {
+        return this.selected.length > 0;
+      }
+      return Boolean(this.selected);
+    },
   },
   watch: {
     selected: {
@@ -282,6 +304,13 @@ export default {
       },
     },
   },
+  mounted() {
+    if (process.env.NODE_ENV !== 'production' && this.resetButtonLabel && !this.headerText) {
+      throw new Error(
+        'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+      );
+    }
+  },
   methods: {
     open() {
       this.$refs.baseDropdown.open();
@@ -392,7 +421,7 @@ export default {
         this.$emit('select', value);
       }
 
-      this.$refs.baseDropdown.closeAndFocus();
+      this.closeAndFocus();
     },
     onMultiSelect(value, isSelected) {
       if (isSelected) {
@@ -413,6 +442,18 @@ export default {
        */
       this.$emit('search', searchTerm);
     },
+    onResetButtonClicked() {
+      /**
+       * Emitted when the reset button is clicked
+       *
+       * @event reset
+       */
+      this.$emit('reset');
+      this.closeAndFocus();
+    },
+    closeAndFocus() {
+      this.$refs.baseDropdown.closeAndFocus();
+    },
     isOption,
   },
 };
@@ -440,16 +481,25 @@ export default {
   >
     <div
       v-if="headerText"
-      class="gl-display-flex gl-align-items-center gl-p-3"
+      class="gl-display-flex gl-align-items-center gl-px-3 gl-py-2! gl-min-h-8"
       :class="$options.HEADER_ITEMS_BORDER_CLASSES"
     >
       <div
         :id="headerId"
-        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm"
+        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2"
         data-testid="listbox-header-text"
       >
         {{ headerText }}
       </div>
+      <gl-button
+        v-if="showResetButton"
+        category="tertiary"
+        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!"
+        data-testid="listbox-reset-button"
+        @click="onResetButtonClicked"
+      >
+        {{ resetButtonLabel }}
+      </gl-button>
     </div>
 
     <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">

package/src/scss/utilities.scss

@@ -1898,6 +1898,22 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-600 !important
 }
 
+.gl-inset-border-2-blue-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400
+}
+
+.gl-focus-inset-border-2-blue-400:focus {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400
+}
+
+.gl-inset-border-2-blue-400\! {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400 !important
+}
+
+.gl-focus-inset-border-2-blue-400\!:focus {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400 !important
+}
+
 .gl-inset-border-2-green-400 {
   box-shadow: inset 0 0 0 $gl-border-size-2 $green-400
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -93,6 +93,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-600;
 }
 
+@mixin gl-inset-border-2-blue-400($focus: true) {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400;
+}
+
 @mixin gl-inset-border-2-green-400 {
   box-shadow: inset 0 0 0 $gl-border-size-2 $green-400;
 }

package/src/utils/constants.js

@@ -39,6 +39,11 @@ export const badgeVariantOptions = {
   tier: 'tier',
 };
 
+export const badgeIconSizeOptions = {
+  sm: 12,
+  md: 16,
+};
+
 export const variantCssColorMap = {
   muted: 'gl-text-gray-500',
   neutral: 'gl-text-blue-100',