@gitlab/ui 54.1.1 → 54.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "54.1.1",
+  "version": "54.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -39,7 +39,7 @@
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
-    "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch --notify",
+    "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
@@ -85,7 +85,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
-    "@gitlab/fonts": "^1.1.0",
+    "@gitlab/fonts": "^1.1.2",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.17.0",
     "@rollup/plugin-commonjs": "^11.1.0",

package/scss_to_js/scss_variables.js

@@ -325,6 +325,7 @@ export const glIconRadio = ''
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
 export const glDropdownWidth = '15rem'
+export const glNewDropdownWidth = '16rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'
 export const glMaxDropdownMaxHeight = '19.5rem'

package/scss_to_js/scss_variables.json

@@ -1735,6 +1735,11 @@
       "value": "px-to-rem(240px)",
       "compiledValue": "15rem"
     },
+    {
+      "name": "$gl-new-dropdown-width",
+      "value": "px-to-rem(256px)",
+      "compiledValue": "16rem"
+    },
     {
       "name": "$gl-dropdown-width-narrow",
       "value": "px-to-rem(160px)",

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

@@ -19,8 +19,7 @@ const DEFAULT_BTN_TOGGLE_CLASSES = [
   'btn-default',
   'btn-md',
   'gl-button',
-  'dropdown-toggle',
-  'gl-dropdown-toggle',
+  'gl-new-dropdown-toggle',
 ];
 
 describe('base dropdown', () => {
@@ -42,10 +41,10 @@ describe('base dropdown', () => {
     jest.clearAllMocks();
   });
 
-  const findDefaultDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
-  const findCustomDropdownToggle = () => wrapper.find('.gl-dropdown-custom-toggle');
+  const findDefaultDropdownToggle = () => wrapper.find('.btn.gl-new-dropdown-toggle');
+  const findCustomDropdownToggle = () => wrapper.find('.gl-new-dropdown-custom-toggle');
   const findDropdownToggleText = () => findDefaultDropdownToggle().find('.gl-button-text');
-  const findDropdownMenu = () => wrapper.find('.dropdown-menu');
+  const findDropdownMenu = () => wrapper.find('.gl-new-dropdown-panel');
 
   describe('popper.js instance', () => {
     it('should initialize popper.js instance with toggle and menu elements and config for left-aligned menu', async () => {
@@ -95,7 +94,7 @@ describe('base dropdown', () => {
 
     it('renders the content', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-dropdown-inner').html()).toContain(defaultContent);
+      expect(wrapper.find('.gl-new-dropdown-inner').html()).toContain(defaultContent);
     });
   });
 
@@ -103,11 +102,10 @@ describe('base dropdown', () => {
     props                                                            | toggleClasses
     ${{}}                                                            | ${[]}
     ${{ toggleText: 'toggleText' }}                                  | ${[]}
-    ${{ toggleText: 'toggleText', icon: 'close' }}                   | ${['dropdown-icon-text']}
-    ${{ icon: 'close' }}                                             | ${['dropdown-icon-only']}
-    ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['dropdown-icon-only']}
-    ${{ icon: 'close', textSrOnly: true }}                           | ${['dropdown-icon-only']}
-    ${{ toggleText: 'toggleText', noCaret: true }}                   | ${['dropdown-toggle-no-caret']}
+    ${{ icon: 'close' }}                                             | ${['gl-new-dropdown-icon-only']}
+    ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['gl-new-dropdown-icon-only']}
+    ${{ icon: 'close', textSrOnly: true }}                           | ${['gl-new-dropdown-icon-only']}
+    ${{ toggleText: 'toggleText', noCaret: true }}                   | ${['gl-new-dropdown-toggle-no-caret']}
   `('dropdown with props $props', ({ props, toggleClasses }) => {
     beforeEach(async () => {
       buildWrapper(props);
@@ -153,7 +151,7 @@ describe('base dropdown', () => {
     it('applies block style if true', () => {
       buildWrapper({ block: true });
 
-      expect(wrapper.classes()).toContain('gl-display-block');
+      expect(wrapper.classes()).toContain('gl-display-block!');
       expect(findDropdownToggleText().classes()).toContain('gl-w-full');
       expect(findDefaultDropdownToggle().props('block')).toBe(true);
     });
@@ -170,14 +168,14 @@ describe('base dropdown', () => {
 
       // open menu clicking toggle btn
       await toggle.trigger('click');
-      expect(menu.classes('show')).toBe(true);
+      expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
       await nextTick();
       expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
       // close menu clicking toggle btn again
       await toggle.trigger('click');
-      expect(menu.classes('show')).toBe(false);
+      expect(menu.classes('gl-display-block!')).toBe(false);
       expect(toggle.attributes('aria-expanded')).toBeUndefined();
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
     });
@@ -188,11 +186,11 @@ describe('base dropdown', () => {
 
       // open menu clicking toggle btn
       await toggle.trigger('click');
-      expect(menu.classes('show')).toBe(true);
+      expect(menu.classes('gl-display-block!')).toBe(true);
 
       // close menu pressing ESC on it
       await menu.trigger('keydown.esc');
-      expect(menu.classes('show')).toBe(false);
+      expect(menu.classes('gl-display-block!')).toBe(false);
       expect(toggle.attributes('aria-expanded')).toBeUndefined();
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
       expect(toggle.element).toHaveFocus();
@@ -225,14 +223,14 @@ describe('base dropdown', () => {
         const menu = findDropdownMenu();
         // open menu clicking toggle btn
         await toggle.trigger('keydown', { code: ENTER });
-        expect(menu.classes('show')).toBe(true);
+        expect(menu.classes('gl-display-block!')).toBe(true);
         expect(toggle.attributes('aria-expanded')).toBe('true');
         await nextTick();
         expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
         // close menu clicking toggle btn again
         await toggle.trigger('keydown', { code: ENTER });
-        expect(menu.classes('show')).toBe(false);
+        expect(menu.classes('gl-display-block!')).toBe(false);
         expect(toggle.attributes('aria-expanded')).toBeUndefined();
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
       });
@@ -242,11 +240,11 @@ describe('base dropdown', () => {
         const menu = findDropdownMenu();
         // open menu clicking toggle btn
         await toggle.trigger('click');
-        expect(menu.classes('show')).toBe(true);
+        expect(menu.classes('gl-display-block!')).toBe(true);
 
         // close menu pressing ESC on it
         await menu.trigger('keydown.esc');
-        expect(menu.classes('show')).toBe(false);
+        expect(menu.classes('gl-display-block!')).toBe(false);
         expect(toggle.attributes('aria-expanded')).toBeUndefined();
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
         expect(toggle.element).toHaveFocus();

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

@@ -119,18 +119,13 @@ export default {
     isIconOnly() {
       return Boolean(this.icon && (!this.toggleText?.length || this.textSrOnly));
     },
-    isIconWithText() {
-      return Boolean(this.icon && this.toggleText?.length && !this.textSrOnly);
-    },
     toggleButtonClasses() {
       return [
         this.toggleClass,
         {
-          'gl-dropdown-toggle': true,
-          'dropdown-toggle': true,
-          'dropdown-icon-only': this.isIconOnly,
-          'dropdown-icon-text': this.isIconWithText,
-          'dropdown-toggle-no-caret': this.noCaret,
+          'gl-new-dropdown-toggle': true,
+          'gl-new-dropdown-icon-only': this.isIconOnly,
+          'gl-new-dropdown-toggle-no-caret': this.noCaret,
         },
       ];
     },
@@ -165,7 +160,7 @@ export default {
       return {
         is: 'div',
         role: 'button',
-        class: 'gl-dropdown-custom-toggle gl-hover-cursor-pointer',
+        class: 'gl-new-dropdown-custom-toggle',
         tabindex: '0',
         listeners: {
           keydown: (event) => this.onKeydown(event),
@@ -247,11 +242,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-outside="close"
-    class="gl-dropdown dropdown gl-display-inline-flex gl-vertical-align-middle"
-    :class="{ 'gl-display-block': block }"
-  >
+  <div v-outside="close" class="gl-new-dropdown" :class="{ 'gl-display-block!': block }">
     <component
       :is="toggleOptions.is"
       v-bind="toggleOptions"
@@ -266,10 +257,14 @@ export default {
     >
       <!-- @slot Custom toggle button content -->
       <slot name="toggle">
-        <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+        <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
           {{ toggleText }}
         </span>
-        <gl-icon v-if="!noCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+        <gl-icon
+          v-if="!noCaret"
+          class="gl-button-icon gl-new-dropdown-chevron"
+          name="chevron-down"
+        />
       </slot>
     </component>
 
@@ -277,11 +272,11 @@ export default {
       :id="baseDropdownId"
       ref="content"
       data-testid="base-dropdown-menu"
-      class="dropdown-menu"
-      :class="{ show: visible }"
+      class="gl-new-dropdown-panel"
+      :class="{ 'gl-display-block!': visible }"
       @keydown.esc.stop.prevent="closeAndFocus"
     >
-      <div class="gl-dropdown-inner">
+      <div class="gl-new-dropdown-inner">
         <slot></slot>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
 .gl-disclosure-dropdown {
-  &.gl-dropdown {
-    .gl-dropdown-inner {
+  &.gl-new-dropdown {
+    .gl-new-dropdown-inner {
       max-height: none;
     }
   }

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

@@ -148,15 +148,15 @@ export const CustomListItem = (args, { argTypes }) => ({
     `
       <template #list-item="{ item }">
         <a ref="link" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
-          {{item.text}}
-          <gl-badge v-if="item.count" pill size="sm">{{item.count}}</gl-badge>
+          {{ item.text }}
+          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
         </a>
       </template>
     `,
     {
       bindingOverrides: {
         '@action': 'navigate',
-        class: 'gl-display-block gl-text-center',
+        class: 'gl-display-block! gl-text-center',
       },
     }
   ),
@@ -228,14 +228,14 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
   template: template(
     `
       <template #group-label="{ group }">
-        {{ group.name }} <gl-badge size="sm">{{ getTotalMrs(group.items)  }}</gl-badge>
+        {{ group.name }} <gl-badge pill size="sm" variant="neutral">{{ getTotalMrs(group.items) }}</gl-badge>
       </template>
       <template #list-item="{ item }">
-        <a ref="link" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
-          {{item.text}}
-          <gl-badge pill size="sm" v-if="item.count">{{item.count}}</gl-badge>
+        <a ref="link" tabindex="-1" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
+          {{ item.text }}
+          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
         </a>
-       </template>
+      </template>
     `,
     {
       bindingOverrides: {
@@ -274,6 +274,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <a
             class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900"
             :href="item.href"
+            tabindex="-1"
             v-bind="item.extraAttrs"
           >
             {{item.text}}

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

@@ -311,7 +311,7 @@ export default {
       :role="disclosureOptions.role"
       :aria-labelledby="listAriaLabelledBy || toggleId"
       data-testid="disclosure-content"
-      class="gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
+      class="gl-new-dropdown-contents"
       tabindex="-1"
       @keydown="onKeydown"
     >

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -3,7 +3,7 @@ import { uniqueId } from 'lodash';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup } from './utils';
 
-export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-3 gl-mt-3';
+export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
 
 export default {
   components: {
@@ -57,7 +57,7 @@ export default {
       v-if="showHeader"
       :id="nameId"
       aria-hidden="true"
-      class="gl-pl-5 gl-py-2 gl-font-sm gl-font-weight-bold"
+      class="gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold"
     >
       <slot name="group-label">{{ group.name }}</slot>
     </div>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -39,12 +39,12 @@ describe('GlDisclosureDropdownItem', () => {
     });
   });
 
-  describe('when item has an `href`', () => {
+  describe('when item has a `href`', () => {
     beforeEach(() => {
       buildWrapper({ item: mockItems[0] });
     });
 
-    const findLink = () => wrapper.find('a.dropdown-item');
+    const findLink = () => wrapper.find('a.gl-new-dropdown-item-content');
 
     it('should render a link', () => {
       expect(findLink().exists()).toBe(true);
@@ -65,7 +65,7 @@ describe('GlDisclosureDropdownItem', () => {
       action.mockClear();
     });
 
-    const findButton = () => wrapper.find('button[type="button"].dropdown-item');
+    const findButton = () => wrapper.find('button[type="button"].gl-new-dropdown-item-content');
 
     it('should render a button', () => {
       expect(findButton().exists()).toBe(true);

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -3,7 +3,7 @@ import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
 
-export const ITEM_CLASS = 'gl-dropdown-item';
+export const ITEM_CLASS = 'gl-new-dropdown-item';
 
 export default {
   ITEM_CLASS,
@@ -73,13 +73,13 @@ export default {
   <li
     tabindex="0"
     :class="$options.ITEM_CLASS"
-    class="gl-dropdown-item gl-focusable-dropdown-item"
+    class="gl-new-dropdown-item"
     data-testid="disclosure-dropdown-item"
     @click="action"
     @keydown="onKeydown"
   >
-    <div v-if="isCustomContent" class="dropdown-item">
-      <div class="gl-dropdown-item-text-wrapper">
+    <div v-if="isCustomContent" class="gl-new-dropdown-item-content">
+      <div class="gl-new-dropdown-item-text-wrapper">
         <slot></slot>
       </div>
     </div>
@@ -89,11 +89,11 @@ export default {
         :is="itemComponent.is"
         v-bind="itemComponent.attrs"
         ref="item"
-        class="dropdown-item"
+        class="gl-new-dropdown-item-content"
         tabindex="-1"
         v-on="itemComponent.listeners"
       >
-        <span class="gl-dropdown-item-text-wrapper">
+        <span class="gl-new-dropdown-item-text-wrapper">
           {{ item.text }}
         </span>
       </component>

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

@@ -1,6 +1,97 @@
-// TODO: remove in scope of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2111
-.gl-focusable-dropdown-item {
-  &:focus {
-    @include gl-focus($inset: true);
+.gl-new-dropdown {
+  @include gl-display-inline-flex;
+  @include gl-vertical-align-middle;
+
+  .gl-new-dropdown-custom-toggle {
+    @include gl-cursor-pointer;
+
+    &:focus {
+      @include gl-focus;
+    }
+  }
+
+  .gl-new-dropdown-panel {
+    @include gl-display-none;
+    @include gl-bg-white;
+    @include gl-border-1;
+    @include gl-border-solid;
+    @include gl-border-gray-200;
+    @include gl-rounded-lg;
+    @include gl-shadow-md;
+    width: $gl-new-dropdown-width;
+  }
+
+  .gl-new-dropdown-inner {
+    @include gl-display-flex;
+    @include gl-flex-direction-column;
+    max-height: $gl-max-dropdown-max-height;
+  }
+
+  .gl-new-dropdown-contents {
+    @include gl-flex-grow-1;
+    @include gl-overflow-y-auto;
+    @include gl-pl-0;
+    @include gl-mb-0;
+    @include gl-py-2;
+    @include gl-list-style-none;
+
+    ul {
+      @include gl-list-style-none;
+    }
+  }
+
+  .gl-new-dropdown-toggle {
+    &.gl-button {
+      @include gl-pr-3;
+
+      &.btn-sm {
+        @include gl-pr-2;
+      }
+    }
+
+    &.gl-new-dropdown-toggle-no-caret,
+    &.gl-new-dropdown-toggle-no-caret.btn-sm {
+      @include gl-p-3;
+
+      .gl-new-dropdown-chevron {
+        @include gl-display-none;
+      }
+    }
+  }
+
+  .gl-new-dropdown-toggle {
+    .gl-button-text {
+      @include gl-display-inline-flex;
+    }
+  }
+
+  .gl-new-dropdown-button-text {
+    @include gl-mr-auto;
+    @include gl-overflow-hidden;
+    @include gl-text-overflow-ellipsis;
+  }
+
+  &.btn-sm .gl-icon {
+    @include gl-my-0;
+
+    &.gl-new-dropdown-chevron {
+      @include gl-h-5;
+      @include gl-w-5;
+    }
+  }
+
+  .gl-button .gl-new-dropdown-chevron {
+    @include gl-ml-2;
+    @include gl-mr-0;
+  }
+
+  .gl-new-dropdown-icon-only {
+    .gl-button-icon.gl-button-icon {
+      @include gl-mr-0;
+    }
+
+    &.btn-sm .gl-new-dropdown-chevron {
+      @include gl-mx-0;
+    }
   }
 }

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

@@ -0,0 +1,71 @@
+.gl-new-dropdown-item {
+  @include gl-cursor-pointer;
+  @include gl-px-2;
+  @include gl-my-1;
+
+  &:first-child {
+    @include gl-mt-0;
+  }
+
+  &:last-child {
+    @include gl-mb-0;
+  }
+
+  &:active,
+  &:hover,
+  &:focus,
+  &:focus:active {
+    .gl-new-dropdown-item-content {
+      @include gl-bg-gray-50;
+      @include gl-text-decoration-none;
+      @include gl-text-gray-900;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    .gl-new-dropdown-item-content {
+      @include gl-focus($inset: true);
+    }
+  }
+
+  .gl-new-dropdown-item-content {
+    @include gl-w-full;
+    @include gl-bg-transparent;
+    @include gl-align-items-center;
+    @include gl-border-0;
+    @include gl-display-flex;
+    @include gl-font-base;
+    @include gl-font-weight-normal;
+    @include gl-line-height-normal;
+    @include gl-px-3;
+    @include gl-py-0;
+    @include gl-relative;
+    @include gl-rounded-base;
+    @include gl-text-gray-900;
+    @include gl-text-left;
+    @include gl-white-space-normal;
+
+    .gl-new-dropdown-item-check-icon {
+      @include gl-flex-shrink-0;
+      @include gl-mr-3;
+      @include gl-text-blue-400;
+    }
+
+    .gl-new-dropdown-item-icon {
+      @include gl-flex-shrink-0;
+      @include gl-mr-3;
+    }
+
+    .gl-new-dropdown-item-text-wrapper {
+      @include gl-min-w-0;
+      @include gl-flex-grow-1;
+      @include gl-py-3;
+    }
+  }
+}

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

@@ -9,7 +9,7 @@ $clear-button-size: 24px;
     @include gl-line-height-normal;
     @include gl-h-auto;
     @include gl-border-none;
-    @include gl-pl-7;
+    padding-left: calc(#{$gl-spacing-scale-7} + #{$gl-spacing-scale-2});
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
     @include gl-py-4;
     @include gl-font-base;
@@ -37,6 +37,6 @@ $clear-button-size: 24px;
   .gl-listbox-search-clear-button {
     @include gl-absolute;
     top: calc(50% - #{$clear-button-size} / 2);
-    right: $gl-spacing-scale-2;
+    right: $gl-spacing-scale-3;
   }
 }

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

@@ -175,8 +175,9 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     }
   },
   methods: {
-    selectItem(index) {
-      this.selected.push(mockOptions[index].value);
+    selectAll() {
+      const allValues = mockOptions.map(({ value }) => value);
+      this.selected = [...allValues];
     },
     onReset() {
       this.selected = [];
@@ -185,12 +186,13 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
   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">
-          <gl-button @click="selectItem(0)">1st</gl-button>
-          <gl-button @click="selectItem(1)">2nd</gl-button>
-          <gl-button @click="selectItem(2)">3rd</gl-button>
-        </gl-button-group>
+       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
+        <gl-button  @click="selectAll" category="tertiary" block class="gl-justify-content-start! gl-mt-2!"">
+          Select all
+        </gl-button>
+        <gl-button category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
+          Manage departments
+        </gl-button>
       </div>
     </template>
   `,
@@ -242,7 +244,7 @@ export const CustomListItem = (args, { argTypes }) => ({
   template: template(
     `<template #list-item="{ item }">
               <span class="gl-display-flex gl-align-items-center">
-                <gl-avatar :size="32" :entity-name="item.value" class-="gl-mr-3"/>
+                <gl-avatar :size="32" :entity-name="item.value" class="gl-mr-3"/>
                   <span class="gl-display-flex gl-flex-direction-column">
                     <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
                     <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
@@ -291,7 +293,7 @@ export const CustomToggle = (args, { argTypes }) => ({
     </template>
     <template #list-item="{ item }">
       <span class="gl-display-flex gl-align-items-center">
-        <gl-avatar :size="32" :entity-name="item.value" class-="gl-mr-3"/>
+        <gl-avatar :size="32" :entity-name="item.value" class="gl-mr-3"/>
           <span class="gl-display-flex gl-flex-direction-column">
             <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
             <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>