@gitlab/ui 42.4.1 → 42.7.0

package/package.json

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

package/src/components/base/drawer/drawer.scss

@@ -10,6 +10,8 @@ $gl-sidebar-width: 290px;
   @include gl-shadow-drawer;
   @include gl-font-base;
   @include gl-line-height-normal;
+  @include gl-display-flex;
+  @include gl-flex-direction-column;
 
   .gl-drawer-header-sticky {
     @include gl-bg-white;
@@ -51,6 +53,20 @@ $gl-sidebar-width: 290px;
   }
 }
 
+.gl-drawer-footer {
+  @include gl-border-t-solid;
+  @include gl-border-t-gray-100;
+  @include gl-border-t-1;
+  @include gl-px-6;
+  @include gl-py-5;
+}
+
+.gl-drawer-footer-sticky {
+  @include gl-bg-white;
+  @include gl-bottom-0;
+  @include gl-sticky;
+}
+
 .gl-drawer-header {
   @include gl-border-b-solid;
   @include gl-border-b-gray-100;
@@ -74,6 +90,10 @@ $gl-sidebar-width: 290px;
   @include gl-border-none;
 }
 
+.gl-drawer-body {
+  @include gl-flex-grow-1;
+}
+
 .gl-drawer-body > * {
   @include gl-border-b-solid;
   @include gl-border-b-gray-100;

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

@@ -90,6 +90,7 @@ describe('drawer component', () => {
     ${'title'}   | ${'.gl-drawer-title'}
     ${'header'}  | ${'.gl-drawer-header'}
     ${'default'} | ${'.gl-drawer-body'}
+    ${'footer'}  | ${'.gl-drawer-footer'}
   `('renders nodes when added to the $slot slot', ({ slot, parentSelector }) => {
     mountWithOpts({
       slots: {

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

@@ -4,7 +4,19 @@ import readme from './drawer.md';
 
 const components = { GlDrawer, GlButton };
 
-const drawerContent = [
+const generateDrawerContent = (items) =>
+  items
+    .map(
+      (str) => `
+    <div>
+      <label class="gl-font-weight-bold">${str}</label>
+      <div>None</div>
+    </div>
+    `
+    )
+    .join('');
+
+const drawerContent = generateDrawerContent([
   'One',
   'Two',
   'Three',
@@ -19,16 +31,9 @@ const drawerContent = [
   'Twelve',
   'Thirteen',
   'Fourteen',
-]
-  .map(
-    (str) => `
-    <div>
-      <label class="gl-font-weight-bold">${str}</label>
-      <div>None</div>
-    </div>
-    `
-  )
-  .join('');
+]);
+
+const drawerContentShortList = generateDrawerContent(['One', 'Two', 'Three']);
 
 const createSidebarTemplate = (content) => `
   <gl-drawer
@@ -106,6 +111,40 @@ export const WithActions = (_args, { viewMode }) => ({
 });
 WithActions.args = generateProps();
 
+export const WithStickyFooterShortContent = (_args, { viewMode }) => ({
+  ...storyOptions(viewMode),
+  template: `
+    <div>
+      <gl-button @click="toggle">Toggle Drawer</gl-button>
+      ${createSidebarTemplate(`
+        <template #title>List Settings</template>
+        ${drawerContentShortList}
+        <template #footer>
+          Drawer footer
+        </template>
+      `)}
+    </div>`,
+});
+
+WithStickyFooterShortContent.args = generateProps();
+
+export const WithStickyFooter = (_args, { viewMode }) => ({
+  ...storyOptions(viewMode),
+  template: `
+    <div>
+      <gl-button @click="toggle">Toggle Drawer</gl-button>
+      ${createSidebarTemplate(`
+        <template #title>List Settings</template>
+        ${drawerContent}
+        <template #footer>
+          Drawer footer
+        </template>
+      `)}
+    </div>`,
+});
+
+WithStickyFooter.args = generateProps();
+
 export const SidebarVariant = (_args, { viewMode }) => ({
   ...storyOptions(viewMode),
   template: `
@@ -128,7 +167,7 @@ SidebarVariant.args = generateProps({
   variant: drawerVariants.sidebar,
 });
 
-export const StickyHeader = (_args, { viewMode }) => ({
+export const StickyHeaderFooter = (_args, { viewMode }) => ({
   ...storyOptions(viewMode),
   template: `
   <div>
@@ -136,10 +175,13 @@ export const StickyHeader = (_args, { viewMode }) => ({
     ${createSidebarTemplate(`
       <template #title>List Settings</template>
       ${drawerContent}
+      <template #footer>
+         Drawer footer
+      </template>
     `)}
   </div>`,
 });
-StickyHeader.args = generateProps({
+StickyHeaderFooter.args = generateProps({
   headerSticky: true,
 });
 

package/src/components/base/drawer/drawer.vue

@@ -56,6 +56,9 @@ export default {
         zIndex: this.headerSticky ? maxZIndex : null,
       };
     },
+    shouldRenderFooter() {
+      return Boolean(this.$slots.footer);
+    },
     variantClass() {
       return `gl-drawer-${this.variant}`;
     },
@@ -110,6 +113,13 @@ export default {
       <div class="gl-drawer-body">
         <slot></slot>
       </div>
+      <div
+        v-if="shouldRenderFooter"
+        class="gl-drawer-footer gl-drawer-footer-sticky"
+        :style="{ zIndex }"
+      >
+        <slot name="footer"></slot>
+      </div>
     </aside>
   </transition>
 </template>

package/src/components/base/form/form_combobox/constants.js

@@ -1,4 +1,4 @@
-export const tokenList = [
+export const stringTokenList = [
   'giraffe',
   'dog',
   'dodo',
@@ -14,3 +14,18 @@ export const tokenList = [
 ];
 
 export const labelText = 'Animals We Tolerate';
+
+export const objectTokenList = [
+  { id: '1', title: 'giraffe' },
+  { id: '2', title: 'dog' },
+  { id: '3', title: 'dodo' },
+  { id: '4', title: 'komodo dragon' },
+  { id: '5', title: 'hippo' },
+  { id: '6', title: 'platypus' },
+  { id: '7', title: 'jackalope' },
+  { id: '8', title: 'quetzal' },
+  { id: '9', title: 'badger' },
+  { id: '10', title: 'vicuña' },
+  { id: '11', title: 'whale' },
+  { id: '12', title: 'xenarthra' },
+];

package/src/components/base/form/form_combobox/form_combobox.scss

@@ -5,6 +5,7 @@
 
   .show-dropdown {
     @include gl-display-block;
+    max-height: $gl-max-dropdown-max-height;
   }
 
   .highlight-dropdown {

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -1,11 +1,16 @@
 import { mount } from '@vue/test-utils';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlFormInput from '../form_input/form_input.vue';
-import { tokenList, labelText } from './constants';
+import { stringTokenList, labelText, objectTokenList } from './constants';
 import GlFormCombobox from './form_combobox.vue';
 
 const partialToken = 'do';
-const partialTokenMatch = ['dog', 'dodo', 'komodo dragon'];
+const partialStringTokenMatch = ['dog', 'dodo', 'komodo dragon'];
+const partialObjectTokenMatch = [
+  { id: '2', title: 'dog' },
+  { id: '3', title: 'dodo' },
+  { id: '4', title: 'komodo dragon' },
+];
 const unlistedToken = 'elephant';
 
 const doTimes = (num, fn) => {
@@ -17,13 +22,14 @@ const doTimes = (num, fn) => {
 describe('GlFormCombobox', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = ({ tokens = stringTokenList, matchValueToAttr = undefined } = {}) => {
     wrapper = mount({
       data() {
         return {
           inputVal: '',
-          tokens: tokenList,
+          tokens,
           labelText,
+          matchValueToAttr,
         };
       },
       components: { GlFormCombobox },
@@ -32,7 +38,8 @@ describe('GlFormCombobox', () => {
           <gl-form-combobox
             v-model="inputVal"
             :token-list="tokens"
-            :labelText="labelText"
+            :label-text="labelText"
+            :match-value-to-attr="matchValueToAttr"
           />
         </div>
       `,
@@ -48,123 +55,163 @@ describe('GlFormCombobox', () => {
   const setInput = (val) => findInput().setValue(val);
   const arrowDown = () => findInput().trigger('keydown.down');
 
-  describe('match and filter functionality', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('is closed when the input is empty', () => {
-      expect(findInput().isVisible()).toBe(true);
-      expect(findInputValue()).toBe('');
-      expect(findDropdown().isVisible()).toBe(false);
-    });
-
-    it('is open when the input text matches a token', async () => {
-      await setInput(partialToken);
-      expect(findDropdown().isVisible()).toBe(true);
-    });
-
-    it('shows partial matches at string start and mid-string', async () => {
-      await setInput(partialToken);
-      expect(findDropdown().isVisible()).toBe(true);
-      expect(findDropdownOptions()).toEqual(partialTokenMatch);
-    });
-
-    it('is closed when the text does not match', async () => {
-      await setInput(unlistedToken);
-      expect(findDropdown().isVisible()).toBe(false);
-    });
-  });
+  describe.each`
+    valueType   | tokens             | matchValueToAttr | partialTokenMatch
+    ${'string'} | ${stringTokenList} | ${undefined}     | ${partialStringTokenMatch}
+    ${'object'} | ${objectTokenList} | ${'title'}       | ${partialObjectTokenMatch}
+  `('with value as $valueType', ({ valueType, tokens, matchValueToAttr, partialTokenMatch }) => {
+    describe('match and filter functionality', () => {
+      beforeEach(() => {
+        createComponent({ tokens, matchValueToAttr });
+      });
 
-  describe('keyboard navigation in dropdown', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+      it('is closed when the input is empty', () => {
+        expect(findInput().isVisible()).toBe(true);
+        expect(findInputValue()).toBe('');
+        expect(findDropdown().isVisible()).toBe(false);
+      });
 
-    describe('on down arrow + enter', () => {
-      it('selects the next item in the list and closes the dropdown', async () => {
+      it('is open when the input text matches a token', async () => {
         await setInput(partialToken);
-        findInput().trigger('keydown.down');
-        await findInput().trigger('keydown.enter');
-        expect(findInputValue()).toBe(partialTokenMatch[0]);
+        expect(findDropdown().isVisible()).toBe(true);
       });
 
-      it('loops to the top when it reaches the bottom', async () => {
+      it('shows partial matches at string start and mid-string', async () => {
         await setInput(partialToken);
-        doTimes(findDropdownOptions().length + 1, arrowDown);
-        await findInput().trigger('keydown.enter');
-        expect(findInputValue()).toBe(partialTokenMatch[0]);
+        expect(findDropdown().isVisible()).toBe(true);
+
+        if (valueType === 'string') {
+          expect(findDropdownOptions()).toEqual(partialTokenMatch);
+        } else {
+          findDropdownOptions().forEach((option, index) => {
+            expect(option).toContain(partialTokenMatch[index][matchValueToAttr]);
+          });
+        }
+      });
+
+      it('is closed when the text does not match', async () => {
+        await setInput(unlistedToken);
+        expect(findDropdown().isVisible()).toBe(false);
       });
     });
 
-    describe('on up arrow + enter', () => {
-      it('selects the previous item in the list and closes the dropdown', async () => {
-        setInput(partialToken);
+    describe('keyboard navigation in dropdown', () => {
+      beforeEach(() => {
+        createComponent({ tokens, matchValueToAttr });
+      });
 
-        await wrapper.vm.$nextTick();
-        doTimes(3, arrowDown);
-        findInput().trigger('keydown.up');
-        findInput().trigger('keydown.enter');
+      describe('on down arrow + enter', () => {
+        it('selects the next item in the list and closes the dropdown', async () => {
+          await setInput(partialToken);
+          findInput().trigger('keydown.down');
+          await findInput().trigger('keydown.enter');
+
+          if (valueType === 'string') {
+            expect(findInputValue()).toBe(partialTokenMatch[0]);
+          } else {
+            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
+          }
+        });
 
-        await wrapper.vm.$nextTick();
-        expect(findInputValue()).toBe(partialTokenMatch[1]);
-        expect(findDropdown().isVisible()).toBe(false);
+        it('loops to the top when it reaches the bottom', async () => {
+          await setInput(partialToken);
+          doTimes(findDropdownOptions().length + 1, arrowDown);
+          await findInput().trigger('keydown.enter');
+
+          if (valueType === 'string') {
+            expect(findInputValue()).toBe(partialTokenMatch[0]);
+          } else {
+            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
+          }
+        });
       });
 
-      it('loops to the bottom when it reaches the top', async () => {
-        await setInput(partialToken);
-        findInput().trigger('keydown.down');
-        findInput().trigger('keydown.up');
-        await findInput().trigger('keydown.enter');
-        expect(findInputValue()).toBe(partialTokenMatch[partialTokenMatch.length - 1]);
-      });
-    });
+      describe('on up arrow + enter', () => {
+        it('selects the previous item in the list and closes the dropdown', async () => {
+          setInput(partialToken);
 
-    describe('on enter with no item highlighted', () => {
-      it('does not select any item and closes the dropdown', async () => {
-        await setInput(partialToken);
-        await findInput().trigger('keydown.enter');
-        expect(findInputValue()).toBe(partialToken);
-        expect(findDropdown().isVisible()).toBe(false);
+          await wrapper.vm.$nextTick();
+          doTimes(3, arrowDown);
+          findInput().trigger('keydown.up');
+          findInput().trigger('keydown.enter');
+
+          await wrapper.vm.$nextTick();
+
+          if (valueType === 'string') {
+            expect(findInputValue()).toBe(partialTokenMatch[1]);
+          } else {
+            expect(findInputValue()).toBe(partialTokenMatch[1][matchValueToAttr]);
+          }
+          expect(findDropdown().isVisible()).toBe(false);
+        });
+
+        it('loops to the bottom when it reaches the top', async () => {
+          await setInput(partialToken);
+          findInput().trigger('keydown.down');
+          findInput().trigger('keydown.up');
+          await findInput().trigger('keydown.enter');
+
+          if (valueType === 'string') {
+            expect(findInputValue()).toBe(partialTokenMatch[partialTokenMatch.length - 1]);
+          } else {
+            expect(findInputValue()).toBe(
+              partialTokenMatch[partialTokenMatch.length - 1][matchValueToAttr]
+            );
+          }
+        });
       });
-    });
 
-    describe('on click', () => {
-      it('selects the clicked item regardless of arrow highlight', async () => {
-        await setInput(partialToken);
-        await wrapper.find('[data-testid="combobox-dropdown"] button').trigger('click');
-        expect(findInputValue()).toBe(partialTokenMatch[0]);
+      describe('on enter with no item highlighted', () => {
+        it('does not select any item and closes the dropdown', async () => {
+          await setInput(partialToken);
+          await findInput().trigger('keydown.enter');
+          expect(findInputValue()).toBe(partialToken);
+          expect(findDropdown().isVisible()).toBe(false);
+        });
       });
-    });
 
-    describe('on tab', () => {
-      it('selects entered text, closes dropdown', async () => {
-        await setInput(partialToken);
-        findInput().trigger('keydown.tab');
-        doTimes(2, arrowDown);
+      describe('on click', () => {
+        it('selects the clicked item regardless of arrow highlight', async () => {
+          await setInput(partialToken);
+          await wrapper.find('[data-testid="combobox-dropdown"] button').trigger('click');
 
-        await wrapper.vm.$nextTick();
-        expect(findInputValue()).toBe(partialToken);
-        expect(findDropdown().isVisible()).toBe(false);
+          if (valueType === 'string') {
+            expect(findInputValue()).toBe(partialTokenMatch[0]);
+          } else {
+            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
+          }
+        });
       });
-    });
 
-    describe('on esc', () => {
-      describe('when dropdown is open', () => {
-        it('closes dropdown and does not select anything', async () => {
+      describe('on tab', () => {
+        it('selects entered text, closes dropdown', async () => {
           await setInput(partialToken);
-          await findInput().trigger('keydown.esc');
+          findInput().trigger('keydown.tab');
+          doTimes(2, arrowDown);
+
+          await wrapper.vm.$nextTick();
           expect(findInputValue()).toBe(partialToken);
           expect(findDropdown().isVisible()).toBe(false);
         });
       });
 
-      describe('when dropdown is closed', () => {
-        it('clears the input field', async () => {
-          await setInput(unlistedToken);
-          expect(findDropdown().isVisible()).toBe(false);
-          await findInput().trigger('keydown.esc');
-          expect(findInputValue()).toBe('');
+      describe('on esc', () => {
+        describe('when dropdown is open', () => {
+          it('closes dropdown and does not select anything', async () => {
+            await setInput(partialToken);
+            await findInput().trigger('keydown.esc');
+            expect(findInputValue()).toBe(partialToken);
+            expect(findDropdown().isVisible()).toBe(false);
+          });
+        });
+
+        describe('when dropdown is closed', () => {
+          it('clears the input field', async () => {
+            await setInput(unlistedToken);
+            expect(findDropdown().isVisible()).toBe(false);
+            await findInput().trigger('keydown.esc');
+            expect(findInputValue()).toBe('');
+          });
         });
       });
     });

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -1,10 +1,19 @@
-import { tokenList, labelText } from './constants';
+import { stringTokenList, labelText, objectTokenList } from './constants';
 import readme from './form_combobox.md';
 import GlFormCombobox from './form_combobox.vue';
 
-const getProps = () => ({
+const template = `
+  <gl-form-combobox
+    v-model="value"
+    :token-list="tokenList"
+    :label-text="labelText"
+    :match-value-to-attr="matchValueToAttr"
+  />`;
+
+const generateProps = ({ tokenList = stringTokenList, matchValueToAttr = undefined } = {}) => ({
   tokenList,
   labelText,
+  matchValueToAttr,
 });
 
 const Template = (args) => ({
@@ -15,17 +24,40 @@ const Template = (args) => ({
     };
   },
   props: Object.keys(args),
-  template: `
-      <gl-form-combobox
-        v-model="value"
-        :token-list="tokenList"
-        :labelText="labelText"
-      />
-    `,
+  template,
 });
 
 export const Default = Template.bind({});
-Default.args = getProps();
+Default.args = generateProps();
+
+export const WithObjectValue = (args, { argTypes }) => ({
+  components: { GlFormCombobox },
+  props: Object.keys(argTypes),
+  mounted() {
+    document.querySelector('.gl-form-input').focus();
+  },
+  data: () => {
+    return {
+      value: '',
+    };
+  },
+  template: `
+    <gl-form-combobox
+      v-model="value"
+      :token-list="tokenList"
+      :label-text="labelText"
+      :match-value-to-attr="matchValueToAttr"
+    >
+      <template #result="{ item }">
+        <div class="gl-display-flex">
+          <div class="gl-text-gray-400 gl-mr-4">{{ item.id }}</div>
+          <div>{{ item.title }}</div>
+        </div>
+      </template>
+    </gl-form-combobox>
+  `,
+});
+WithObjectValue.args = generateProps({ tokenList: objectTokenList, matchValueToAttr: 'title' });
 
 export default {
   title: 'base/form/form-combobox',