@gitlab/ui 77.2.0 → 77.3.0

package/dist/tokens/common_story_options.js

@@ -1,74 +1,34 @@
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
-import { colorFromBackground } from '../utils/utils';
-import GlColorContrast from '../internal/color_contrast/color_contrast';
+import TokensStory from './tokens_story';
 
-const components = {
-  GlColorContrast
-};
-const methods = {
-  isAlpha(value) {
-    return value.startsWith('rgba(');
-  },
-  isBackgroundColor(property) {
-    return property === 'backgroundColor';
-  },
-  getTokenName(token) {
-    return token.path.filter(Boolean).join('.');
-  },
-  getClasses(property, value) {
-    if (this.isAlpha(value)) return '';
-    if (!this.isBackgroundColor(property)) return '';
-    const textColorVariant = colorFromBackground(value, 4.5);
-    return {
-      'gl-text-gray-950': textColorVariant === 'dark',
-      'gl-text-white': textColorVariant === 'light'
-    };
-  },
-  getStyle(property, value) {
-    if (this.isBackgroundColor(property)) {
-      return {
-        backgroundColor: value
-      };
-    }
+const createDesignTokenStory = function () {
+  let {
+    tokens = {},
+    isBackgroundColorStory = true,
+    containerClass = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const Story = (args, _ref) => {
+    let {
+      argTypes
+    } = _ref;
     return {
-      color: value
+      props: Object.keys(argTypes),
+      components: {
+        TokensStory
+      },
+      provide: {
+        containerClass,
+        isBackgroundColorStory,
+        lightBackground: WHITE,
+        darkBackground: GRAY_950
+      },
+      template: `<tokens-story v-bind="$props" />`
     };
-  }
-};
-const colorTemplate = function () {
-  let property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'backgroundColor';
-  let lightBackground = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : WHITE;
-  let darkBackground = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GRAY_950;
-  return `
-  <ul
-    class="gl-list-style-none gl-m-0 gl-p-0"
-  >
-    <li
-      v-for="token in tokens"
-      :key="token.name"
-      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getClasses('${property}', token.value)"
-      :style="getStyle('${property}', token.value)"
-    >
-      <code class="gl-reset-color">{{ getTokenName(token) }}</code>
-      <div class="gl-display-flex gl-align-items-center gl-gap-3">
-        <code class="gl-reset-color">{{ token.value }}</code>
-        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${darkBackground}" />
-        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${lightBackground}" />
-      </div>
-    </li>
-  </ul>
-`;
-};
-const colorTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('backgroundColor')
-};
-const colorTextTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('color')
+  };
+  Story.args = {
+    tokens
+  };
+  return Story;
 };
 
-export { colorTextTokenStoryOptions, colorTokenStoryOptions, components, methods };
+export { createDesignTokenStory };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 10:27:04 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 10:27:04 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 10:27:04 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 10:27:04 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 18:50:13 GMT
+// Generated on Wed, 28 Feb 2024 10:27:04 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 18:50:13 GMT
+// Generated on Wed, 28 Feb 2024 10:27:04 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/tokens/tokens_story.js

@@ -0,0 +1,83 @@
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'TokensStory',
+  components: {
+    GlColorContrast
+  },
+  inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
+  props: {
+    tokens: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  methods: {
+    isAlpha(value) {
+      return value.startsWith('rgba(');
+    },
+    getTokenName(token) {
+      return token.path.filter(Boolean).join('.');
+    },
+    getClasses(value) {
+      if (this.isAlpha(value)) return '';
+      if (!this.isBackgroundColorStory) return '';
+      const textColorVariant = colorFromBackground(value, 4.5);
+      return {
+        'gl-text-gray-950': textColorVariant === 'dark',
+        'gl-text-white': textColorVariant === 'light'
+      };
+    },
+    getStyle(value) {
+      if (this.isBackgroundColorStory) {
+        return {
+          backgroundColor: value
+        };
+      }
+      return {
+        color: value
+      };
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(_vm.getTokenName(token)))]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "77.2.0",
+  "version": "77.3.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 {