@gitlab/ui 47.0.1 → 48.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "47.0.1",
+  "version": "48.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,7 +107,7 @@
     "eslint": "8.25.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.5",
+    "eslint-plugin-storybook": "0.6.6",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -30,6 +30,7 @@ describe('GlListbox', () => {
   const findListboxItems = (root = wrapper) => root.findAllComponents(GlListboxItem);
   const findListboxGroups = () => wrapper.findAllComponents(GlListboxGroup);
   const findListItem = (index) => findListboxItems().at(index).find(ITEM_SELECTOR);
+  const findHeaderText = () => wrapper.find("[data-testid='listbox-header-text']");
   const findSearchBox = () => wrapper.find("[data-testid='listbox-search-input']");
   const findNoResultsText = () => wrapper.find("[data-testid='listbox-no-results-text']");
   const findLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
@@ -263,13 +264,28 @@ describe('GlListbox', () => {
     });
   });
 
-  describe('when the header slot content is provided', () => {
+  describe('when the header prop is provided', () => {
     const headerContent = 'Header Content';
-    const slots = { header: headerContent };
 
     it('renders it', () => {
-      buildWrapper({}, slots);
-      expect(wrapper.text()).toContain(headerContent);
+      buildWrapper({ headerText: headerContent, items: mockOptions });
+
+      expect(findHeaderText().text()).toContain(headerContent);
+    });
+
+    it("uses the generated header ID as the list's aria-labelledby attribute", () => {
+      buildWrapper({ headerText: headerContent, items: mockOptions });
+
+      expect(findListContainer().attributes('aria-labelledby')).toBe(
+        findHeaderText().attributes('id')
+      );
+    });
+
+    it('if a custom list label is passed, it overrides the header ID', () => {
+      const listAriaLabelledBy = 'listAriaLabelledBy';
+      buildWrapper({ listAriaLabelledBy, headerText: headerContent, items: mockOptions });
+
+      expect(findListContainer().attributes('aria-labelledby')).toBe(listAriaLabelledBy);
     });
   });
 

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

@@ -33,6 +33,7 @@ const generateProps = ({
   right = defaultValue('right'),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
+  headerText = defaultValue('headerText'),
   icon = '',
   multiple = defaultValue('multiple'),
   isCheckCentered = defaultValue('isCheckCentered'),
@@ -53,6 +54,7 @@ const generateProps = ({
   right,
   toggleText,
   textSrOnly,
+  headerText,
   icon,
   multiple,
   isCheckCentered,
@@ -76,6 +78,7 @@ const makeBindings = (overrides = {}) =>
     ':right': 'right',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
+    ':header-text': 'headerText',
     ':icon': 'icon',
     ':multiple': 'multiple',
     ':is-check-centered': 'isCheckCentered',
@@ -151,10 +154,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
       this.selected.push(mockOptions[index].value);
     },
   },
-  template: template(
-    `<template #header>
-        <p class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">Assign to department</p>
-    </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 +164,11 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
         </gl-button-group>
       </div>
     </template>
-  `
-  ),
+  `),
 });
 HeaderAndFooter.args = generateProps({
   toggleText: 'Header and Footer',
+  headerText: 'Assign to department',
   multiple: true,
 });
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
@@ -315,7 +315,6 @@ export const Searchable = (args, { argTypes }) => ({
       filteredItems: mockOptions,
       searchInProgress: false,
       timeoutId: null,
-      headerId: 'listbox-header',
     };
   },
   mounted() {
@@ -358,19 +357,12 @@ export const Searchable = (args, { argTypes }) => ({
     },
   },
   template: template(
-    `<template #header>
-        <p :id="headerId"
-          class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
-          Assign to department</p>
-      </template>
-      <template #search-summary-sr-only>
-        {{ numberOfSearchResults }}
-      </template>
-  `,
+    `<template #search-summary-sr-only>
+      {{ numberOfSearchResults }}
+    </template>`,
     {
       bindingOverrides: {
         ':items': 'filteredItems',
-        ':list-aria-labelled-by': 'headerId',
         ':toggle-text': 'customToggleText',
         ':searching': 'searchInProgress',
         '@search': 'filterList',
@@ -378,7 +370,7 @@ export const Searchable = (args, { argTypes }) => ({
     }
   ),
 });
-Searchable.args = generateProps({ searchable: true });
+Searchable.args = generateProps({ headerText: 'Assign to department', searchable: true });
 Searchable.decorators = [makeContainer({ height: '370px' })];
 
 export const SearchableGroups = (args, { argTypes }) => ({
@@ -392,7 +384,6 @@ export const SearchableGroups = (args, { argTypes }) => ({
       filteredGroupOptions: mockGroups,
       searchInProgress: false,
       timeoutId: null,
-      headerId: 'listbox-header',
     };
   },
   mounted() {
@@ -450,19 +441,12 @@ export const SearchableGroups = (args, { argTypes }) => ({
     },
   },
   template: template(
-    `<template #header>
-        <p :id="headerId"
-          class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
-          Assign to department</p>
-      </template>
-      <template #search-summary-sr-only>
-        {{ numberOfSearchResults }}
-      </template>
-  `,
+    `<template #search-summary-sr-only>
+      {{ numberOfSearchResults }}
+    </template>`,
     {
       bindingOverrides: {
         ':items': 'filteredGroupOptions',
-        ':list-aria-labelled-by': 'headerId',
         ':toggle-text': 'customToggleText',
         ':searching': 'searchInProgress',
         '@search': 'filterList',
@@ -470,5 +454,9 @@ export const SearchableGroups = (args, { argTypes }) => ({
     }
   ),
 });
-SearchableGroups.args = generateProps({ searchable: true, items: mockGroups });
+SearchableGroups.args = generateProps({
+  headerText: 'Select ref',
+  searchable: true,
+  items: mockGroups,
+});
 SearchableGroups.decorators = [makeContainer({ height: '370px' })];

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

@@ -23,10 +23,12 @@ import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
+const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
 export const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
 
 export default {
+  HEADER_ITEMS_BORDER_CLASSES,
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
@@ -84,6 +86,12 @@ export default {
       required: false,
       default: false,
     },
+    /** The header text */
+    headerText: {
+      type: String,
+      required: false,
+      default: '',
+    },
     /**
      * Styling option - dropdown's toggle category
      */
@@ -255,6 +263,9 @@ export default {
         this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only']
       );
     },
+    headerId() {
+      return this.headerText && uniqueId('listbox-header-');
+    },
   },
   watch: {
     selected: {
@@ -431,10 +442,21 @@ export default {
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >
-    <!-- @slot Content to display in dropdown header -->
-    <slot name="header"></slot>
+    <div
+      v-if="headerText"
+      class="gl-display-flex gl-align-items-center gl-p-3"
+      :class="$options.HEADER_ITEMS_BORDER_CLASSES"
+    >
+      <div
+        :id="headerId"
+        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm"
+        data-testid="listbox-header-text"
+      >
+        {{ headerText }}
+      </div>
+    </div>
 
-    <div v-if="searchable" class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200">
+    <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">
       <gl-search-box-by-type
         ref="searchBox"
         v-model="searchStr"
@@ -456,7 +478,7 @@ export default {
       v-if="showList"
       id="listbox"
       ref="list"
-      :aria-labelledby="listAriaLabelledBy || toggleId"
+      :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
       class="gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
       tabindex="-1"

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

@@ -39,6 +39,7 @@
 @import './sizing';
 @import './spacing';
 @import './svg';
+@import './table';
 @import './text';
 @import './transform';
 @import './transition';