@gitlab/ui 77.2.0 → 77.4.0

package/package.json

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

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

@@ -1,6 +1,5 @@
 import GlDropdown from '../dropdown/dropdown.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlSorting from '../sorting/sorting.vue';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -498,35 +497,6 @@ export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
 });
 BadgeWithSROnlyText.parameters = { controls: { disable: true } };
 
-export const SortingDropdownSplitButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlSorting },
-  template: `
-    <gl-sorting
-      text="Sorting options"
-      :sort-options="sortOptions"
-      sort-by="first"
-    />
-  `,
-});
-SortingDropdownSplitButton.args = {
-  sortOptions: [
-    {
-      value: 'first',
-      text: 'First item',
-    },
-    {
-      value: 'second',
-      text: 'Second item',
-    },
-    {
-      value: 'last',
-      text: 'Last item',
-    },
-  ],
-};
-SortingDropdownSplitButton.parameters = { controls: { disable: true } };
-
 export default {
   title: 'base/button',
   component: GlButton,

package/src/components/base/button_group/button_group.md

@@ -1,5 +1,27 @@
 Button groups are an easy way to group a series of buttons together.
 
+## Split dropdowns
+
+Both `GlCollapsibleListbox` and `GlDisclosureDropdown` can be added as the last
+child of a button group to produce a "split" dropdown.
+
+For the correct styling, the dropdown component must render a caret _only_.
+This means no icon, and no visible text. For accessbility, ensure the
+dropdown's `toggle-text` _and_ `text-sr-only` props are set.
+
+```html
+<gl-button-group>
+  <gl-button>Split listbox</gl-button>
+
+  <gl-collapsible-listbox
+    v-model="foo"
+    :items="items"
+    toggle-text="Choose button action"
+    text-sr-only
+  />
+</gl-button-group>
+```
+
 ## vue-bootstrap component
 
 This component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap

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

@@ -1,30 +1,37 @@
 import GlButton from '../button/button.vue';
-import GlDropdown from '../dropdown/dropdown.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import { buttonSizeOptions } from '../../../utils/constants';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
+import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
+import {
+  buttonCategoryOptions,
+  buttonSizeOptions,
+  buttonVariantOptions,
+} from '../../../utils/constants';
 import GlButtonGroup from './button_group.vue';
 import readme from './button_group.md';
 
 const defaultValue = (prop) => GlButton.props[prop].default;
 
-const generateProps = ({ vertical = false, size = defaultValue('size') } = {}) => ({
+const generateProps = ({
+  vertical = false,
+  category = buttonCategoryOptions.primary,
+  size = defaultValue('size'),
+  variant = 'default',
+} = {}) => ({
   vertical,
+  category,
   size,
+  variant,
 });
 
 const template = `
   <gl-button-group :vertical="vertical">
-    <gl-button :size="size">Button 1</gl-button>
-    <gl-button :size="size">Button 2</gl-button>
-    <gl-dropdown :size="size" text="Some dropdown">
-      <gl-dropdown-item>First item</gl-dropdown-item>
-      <gl-dropdown-item>Second item</gl-dropdown-item>
-      <gl-dropdown-item>Last item</gl-dropdown-item>
-    </gl-dropdown>
+    <gl-button :category="category" :size="size" :variant="variant">Button 1</gl-button>
+    <gl-button :category="category" :size="size" :variant="variant">Button 2</gl-button>
+    <gl-button :category="category" :size="size" :variant="variant">Button 3</gl-button>
   </gl-button-group>`;
 
 const Template = (args, { argTypes }) => ({
-  components: { GlButton, GlButtonGroup, GlDropdown, GlDropdownItem },
+  components: { GlButton, GlButtonGroup },
   props: Object.keys(argTypes),
   template,
 });
@@ -32,6 +39,71 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const SplitDropdowns = (args, { argTypes }) => ({
+  components: { GlButton, GlButtonGroup, GlCollapsibleListbox, GlDisclosureDropdown },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      firstListboxValue: 1,
+      secondListboxValue: 1,
+      items: [
+        { text: 'One', value: 1 },
+        { text: 'Two', value: 2 },
+      ],
+    };
+  },
+  template: `
+    <div class="gl-display-flex gl-flex-direction-column gl-gap-6 gl-align-items-flex-start">
+      <gl-button-group>
+        <gl-button
+          :disabled="disabled"
+          :category="category"
+          :size="size"
+          :variant="variant"
+        >Split disclosure</gl-button>
+
+        <gl-disclosure-dropdown
+          :disabled="disabled"
+          :items="items"
+          toggle-text="Other actions"
+          text-sr-only
+          :category="category"
+          :size="size"
+          :variant="variant"
+        />
+      </gl-button-group>
+
+      <gl-button-group>
+        <gl-button
+          :disabled="disabled"
+          :category="category"
+          :size="size"
+          :variant="variant"
+        >Split listbox</gl-button>
+
+        <gl-collapsible-listbox
+          v-model="secondListboxValue"
+          :disabled="disabled"
+          :items="items"
+          toggle-text="Choose button action"
+          text-sr-only
+          :category="category"
+          :size="size"
+          :variant="variant"
+        />
+      </gl-button-group>
+    </div>
+  `,
+});
+Object.assign(SplitDropdowns, {
+  args: { ...generateProps({ variant: 'confirm' }), disabled: false },
+  parameters: {
+    controls: {
+      include: ['category', 'disabled', 'size', 'variant'],
+    },
+  },
+});
+
 export default {
   title: 'base/button group',
   component: GlButtonGroup,
@@ -44,9 +116,17 @@ export default {
     },
   },
   argTypes: {
+    category: {
+      options: Object.keys(buttonCategoryOptions),
+      control: 'select',
+    },
     size: {
       options: Object.keys(buttonSizeOptions),
       control: 'select',
     },
+    variant: {
+      options: Object.keys(buttonVariantOptions),
+      control: 'select',
+    },
   },
 };

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

@@ -231,7 +231,7 @@ describe('base dropdown', () => {
 
   describe.each`
     props                                                            | toggleClasses
-    ${{}}                                                            | ${[]}
+    ${{}}                                                            | ${['gl-new-dropdown-caret-only']}
     ${{ toggleText: 'toggleText' }}                                  | ${[]}
     ${{ icon: 'close' }}                                             | ${['gl-new-dropdown-icon-only', 'btn-icon']}
     ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['gl-new-dropdown-icon-only', 'btn-icon']}

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

@@ -160,8 +160,14 @@ export default {
     };
   },
   computed: {
+    hasNoVisibleToggleText() {
+      return !this.toggleText?.length || this.textSrOnly;
+    },
     isIconOnly() {
-      return Boolean(this.icon && (!this.toggleText?.length || this.textSrOnly));
+      return Boolean(this.icon && this.hasNoVisibleToggleText);
+    },
+    isCaretOnly() {
+      return !this.noCaret && !this.icon && this.hasNoVisibleToggleText;
     },
     ariaAttributes() {
       return {
@@ -178,6 +184,7 @@ export default {
           'gl-new-dropdown-toggle': true,
           'gl-new-dropdown-icon-only btn-icon': this.isIconOnly,
           'gl-new-dropdown-toggle-no-caret': this.noCaret,
+          'gl-new-dropdown-caret-only': this.isCaretOnly,
         },
       ];
     },

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

@@ -2,13 +2,13 @@ A disclosure dropdown is a button that toggles a panel containing a list of acti
 [this decision tree](https://design.gitlab.com/components/dropdown-overview#which-component-should-you-use)
 to make sure this is the right dropdown component for you.
 
-### Basic usage
+## Basic usage
 
 ```html
 <gl-disclosure-dropdown toggle-text="Actions" :items="items" />
 ```
 
-### Icon-only disclosure dropdown
+## Icon-only disclosure dropdown
 
 Icon-only disclosure dropdowns must have an accessible name.
 You can provide this with the combination of `toggleText` and `textSrOnly` props.
@@ -25,12 +25,12 @@ Optionally, you can use `no-caret` to remove the caret and `category="tertiary"`
 />
 ```
 
-### Opening the disclosure dropdown
+## Opening the disclosure dropdown
 
 Disclosure dropdown will open on toggle button click (if it was previously closed).
 On open, `GlDisclosureDropdown` will emit the `shown` event.
 
-### Closing the disclosure dropdown
+## Closing the disclosure dropdown
 
 The disclosure dropdown is closed by any of the following:
 
@@ -61,7 +61,7 @@ You can use the `preventDefault` to filter out events that are causing undesired
 
 After closing, `GlDisclosureDropdown` emits a `hidden` event.
 
-### Setting disclosure dropdown items
+## Setting disclosure dropdown items
 
 Use the `items` prop to provide actions/links to the disclosure dropdown. Each
 item can be either an item or a group. For `Item`s, provide an `href` string to
@@ -101,7 +101,7 @@ type Group = {
 type ItemsProp = Array<Item> | Array<Group>;
 ```
 
-#### Actions/links
+### Actions/links
 
 The `text` property is used to render the default disclosure dropdown item
 template. If you want to render a custom template for items, use the
@@ -118,7 +118,7 @@ template. If you want to render a custom template for items, use the
 </gl-disclosure-dropdown>
 ```
 
-#### Groups
+### Groups
 
 Actions/links can be contained within groups. A group can have a `name`
 property, which will be used as the group header if present.
@@ -148,15 +148,19 @@ using the `border-position` property:
 </gl-disclosure-dropdown>
 ```
 
-#### Miscellaneous content
+### Miscellaneous content
 
 Besides default components, disclosure dropdown can render miscellaneous content inside it.
 In this case the user is responsible for handling all events and navigation inside the disclosure.
 
-#### Dealing with long option texts
+### Dealing with long option texts
 
 - Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
   such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
   `GlTruncate`.
 - If the toggle text reflects the selected option text, it might be necessary to truncate
   it too by overriding the `#toggle` slot.
+
+## Split dropdown
+
+See [button group documentation](/docs/base-button-group--docs#split-dropdowns).

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

@@ -1,35 +1,3 @@
-.btn-group {
-  .gl-disclosure-dropdown:not(:last-child) {
-    .gl-new-dropdown-toggle {
-      @include gl-rounded-top-right-none;
-      @include gl-rounded-bottom-right-none;
-    }
-  }
-
-  .gl-disclosure-dropdown:not(:first-child) {
-    .gl-new-dropdown-toggle {
-      @include gl-rounded-top-left-none;
-      @include gl-rounded-bottom-left-none;
-
-      // Prevent double borders when buttons are next to each other
-      margin-left: -1px;
-    }
-  }
-
-  .gl-disclosure-dropdown:hover {
-    .gl-new-dropdown-toggle {
-      @include gl-z-index-1;
-    }
-  }
-
-  .gl-disclosure-dropdown {
-    .gl-new-dropdown-toggle:focus,
-    .gl-new-dropdown-toggle:active {
-      @include gl-z-index-1;
-    }
-  }
-}
-
 .gl-disclosure-dropdown {
   &.gl-new-dropdown {
     .gl-new-dropdown-inner {

package/src/components/base/new_dropdowns/dropdown.scss

@@ -64,7 +64,6 @@
     &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
       @include gl-display-none;
     }
-
   }
 
   .gl-new-dropdown-toggle {
@@ -110,7 +109,15 @@
     &.btn-sm .gl-new-dropdown-chevron {
       @include gl-mx-0;
     }
-    
+  }
+
+  .gl-new-dropdown-caret-only {
+    // optically center the caret
+    @include gl-pl-2;
+
+    &.btn-sm {
+      @include gl-pl-0;
+    }
   }
 
   $dropdown-content-padding: 0.25rem;
@@ -178,3 +185,52 @@
     }
   }
 }
+
+.btn-group {
+  .gl-new-dropdown:not(:last-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-right-none;
+      @include gl-rounded-bottom-right-none;
+    }
+  }
+
+  .gl-new-dropdown:not(:first-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-left-none;
+      @include gl-rounded-bottom-left-none;
+
+      // Prevent double borders when buttons are next to each other
+      margin-left: -1px;
+    }
+  }
+
+  // The dropdown toggle of a "split" is by design supposed to be the last
+  // child of a button group, so only apply styles for that.
+  .gl-new-dropdown:last-child {
+    .gl-new-dropdown-caret-only {
+      &.btn-confirm,
+      &.btn-danger {
+        margin-left: 1px;
+      }
+
+      &:disabled,
+      &.disabled,
+      &[class*='-secondary'] {
+        margin-left: -1px;
+      }
+    }
+  }
+
+  .gl-new-dropdown:hover {
+    .gl-new-dropdown-toggle {
+      @include gl-z-index-1;
+    }
+  }
+
+  .gl-new-dropdown {
+    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:active {
+      @include gl-z-index-1;
+    }
+  }
+}

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

@@ -8,7 +8,7 @@ When option is selected, the dropdown will be closed and focus set on the toggle
 **Multi-select:** Selecting an option will not update the toggle, but it can be customized
 providing `toggleText` property. Also, selecting or deselecting an item won't close the dropdown.
 
-### Icon-only listbox
+## Icon-only listbox
 
 Icon-only listboxes must have an accessible name.
 You can provide this with the combination of `toggleText` and `textSrOnly` props.
@@ -27,12 +27,12 @@ Optionally, you can use `no-caret` to remove the caret and `category="tertiary"`
 >
 ```
 
-### Opening the listbox
+## Opening the listbox
 
 Listbox will open on toggle button click (if it was previously closed).
 On open, `GlCollapsibleListbox` will emit the `shown` event.
 
-### Closing the listbox
+## Closing the listbox
 
 The listbox is closed by any of the following:
 
@@ -42,21 +42,21 @@ The listbox is closed by any of the following:
 
 After closing, `GlCollapsibleListbox` emits a `hidden` event.
 
-### Selecting items
+## Selecting items
 
 Set the `v-model` on the listbox to have 2-way data binding for the selected items in the listbox.
 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
+## Resetting the selection
 
 `GlCollapsibleListbox` 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
+## Setting listbox options
 
 Use the `items` prop to provide options to the listbox. Each item can be
 either an option or a group. Below are the expected shapes of these
@@ -77,7 +77,7 @@ type Group = {
 type ItemsProp = Array<Option> | Array<Group>
 ```
 
-#### Options
+### Options
 
 The `value` property of options must be unique across all options
 provided to the listbox, as it's used as a primary key.
@@ -100,7 +100,7 @@ template. If you want to render a custom template for items, use the
 </gl-collapsible-listbox>
 ```
 
-#### Groups
+### Groups
 
 Options can be contained within groups. A group has a required `text`
 property, which must be unique across all groups within the listbox, as
@@ -123,7 +123,15 @@ To render custom group labels, use the `group-label` scoped slot:
 </gl-collapsible-listbox>
 ```
 
-#### Search
+### Dealing with long option texts
+
+- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
+such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+`GlTruncate`.
+- If the toggle text reflects the selected option text, it might be necessary to truncate
+it too by overriding the `#toggle` slot.
+
+## Search
 
 To filter out items by  search query set `searchable` property to `true`.
 Listbox will render the search field and will emit `search` event with the `searchQuery` value.
@@ -146,10 +154,6 @@ Screen reader will announce this text when the list is updated.
 </gl-collapsible-listbox>
 ```
 
-#### Dealing with long option texts
+## Split dropdown
 
-- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
-such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
-`GlTruncate`.
-- If the toggle text reflects the selected option text, it might be necessary to truncate
-it too by overriding the `#toggle` slot.
+See [button group documentation](/docs/base-button-group--docs#split-dropdowns).

package/src/components/base/sorting/sorting.vue

@@ -105,14 +105,6 @@ export default {
         ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
-    listboxToggleClass() {
-      return [
-        this.dropdownToggleClass,
-        'gl-rounded-top-right-none!',
-        'gl-rounded-bottom-right-none!',
-        'gl-focus-z-index-1',
-      ];
-    },
   },
   methods: {
     toggleSortDirection() {
@@ -150,7 +142,7 @@ export default {
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
-      :toggle-class="listboxToggleClass"
+      :toggle-class="dropdownToggleClass"
       :class="dropdownClass"
       placement="right"
       :block="block"

package/src/scss/utilities.scss

@@ -3915,6 +3915,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-md-justify-content-center {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: center;
+  }
+}
+
+.gl-md-justify-content-center\! {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: center !important;
+  }
+}
+
 .gl-md-justify-content-end {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-end;

package/src/scss/utility-mixins/flex.scss

@@ -271,6 +271,12 @@
   }
 }
 
+@mixin gl-md-justify-content-center {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-justify-content-center;
+  }
+}
+
 @mixin gl-md-justify-content-end {
   @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-end;

package/src/tokens/color.dark.tokens.stories.js

@@ -1,54 +1,24 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Default.args = generateProps({
+export const Default = createDesignTokenStory({
   tokens: {
     white: COMPILED_TOKENS.white,
     black: COMPILED_TOKENS.black,
   },
 });
 
-export const Gray = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Gray.args = generateProps({ tokens: COMPILED_TOKENS.gray });
+export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS.gray });
 
-export const Blue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Blue.args = generateProps({ tokens: COMPILED_TOKENS.blue });
+export const Blue = createDesignTokenStory({ tokens: COMPILED_TOKENS.blue });
 
-export const Green = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Green.args = generateProps({ tokens: COMPILED_TOKENS.green });
+export const Green = createDesignTokenStory({ tokens: COMPILED_TOKENS.green });
 
-export const Orange = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Orange.args = generateProps({ tokens: COMPILED_TOKENS.orange });
+export const Orange = createDesignTokenStory({ tokens: COMPILED_TOKENS.orange });
 
-export const Red = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Red.args = generateProps({ tokens: COMPILED_TOKENS.red });
+export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.red });
 
-export const Purple = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Purple.args = generateProps({ tokens: COMPILED_TOKENS.purple });
+export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.purple });
 
 // eslint-disable-next-line storybook/csf-component
 export default {