@gitlab/ui 42.15.0 → 42.18.0

package/package.json

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

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

@@ -1,5 +1,6 @@
 $gl-drawer-width: 400px;
 $gl-sidebar-width: 290px;
+$gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white);
 
 .gl-drawer {
   @include gl-right-0;
@@ -61,6 +62,20 @@ $gl-sidebar-width: 290px;
   @include gl-py-5;
 }
 
+.gl-drawer-body-scrim-on-footer {
+  &::before {
+    background: $gl-drawer-scrim-gradient;
+    top: -$gl-border-size-1;
+    @include gl-translate-y-n100;
+    @include gl-content-empty;
+    @include gl-left-0;
+    @include gl-absolute;
+    @include gl-pointer-events-none;
+    @include gl-w-full;
+    @include gl-h-7;
+  }
+}
+
 .gl-drawer-footer-sticky {
   @include gl-bg-white;
   @include gl-bottom-0;
@@ -94,6 +109,18 @@ $gl-sidebar-width: 290px;
   @include gl-flex-grow-1;
 }
 
+.gl-drawer-body-scrim {
+  &::after {
+    background: $gl-drawer-scrim-gradient;
+    @include gl-content-empty;
+    @include gl-bottom-0;
+    @include gl-pointer-events-none;
+    @include gl-w-full;
+    @include gl-fixed;
+    @include gl-h-7;
+  }
+}
+
 .gl-drawer-body > * {
   @include gl-border-b-solid;
   @include gl-border-b-gray-100;

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

@@ -101,6 +101,28 @@ describe('drawer component', () => {
     expect(wrapper.find(parentSelector).find(`[data-testid="${slot}"]`).exists()).toBe(true);
   });
 
+  it('should add scrim to footer', () => {
+    mountWithOpts({
+      slots: {
+        footer: `<div data-testid="footer" />`,
+      },
+    });
+
+    expect(wrapper.find('.gl-drawer-footer').classes()).toContain('gl-drawer-body-scrim-on-footer');
+    expect(wrapper.find('.gl-drawer-body').classes()).not.toContain('gl-drawer-body-scrim');
+  });
+
+  it('should add scrim to scrollable container', () => {
+    mountWithOpts({
+      slots: {
+        default: `<div data-testid="default" />`,
+      },
+    });
+
+    expect(wrapper.find('.gl-drawer-footer').exists()).toBe(false);
+    expect(wrapper.find('.gl-drawer-body').classes()).toContain('gl-drawer-body-scrim');
+  });
+
   it.each`
     variant      | variantClass
     ${'default'} | ${'gl-drawer-default'}

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

@@ -1,8 +1,33 @@
-import { GlDrawer, GlButton } from '../../../index';
+import { GlDrawer, GlButton, GlMarkdown } from '../../../index';
 import { drawerVariants } from '../../../utils/constants';
 import readme from './drawer.md';
 
-const components = { GlDrawer, GlButton };
+const components = { GlDrawer, GlButton, GlMarkdown };
+
+const generateStaticContent = (number = 1) =>
+  Array.from(
+    Array(number),
+    (_, index) => `
+      <div class="gl-mb-8">
+        <h4 class="gl-mb-4">View jobs in a pipeline ${index}</h4>
+        <p>
+          Pipeline configuration begins with jobs. Jobs are the most fundamental element of a .gitlab-ci.yml file.
+        </p>
+        <p>Jobs are:</p>
+        <ul>
+          <li>Defined with constraints stating under what conditions they should be executed. </li>
+          <li>Top-level elements with an arbitrary name and must contain at least the script clause.</li>
+          <li>Not limited in how many can be defined.</li>
+        </ul>
+        <p>For example:</p>
+        <gl-markdown compact>
+          <code>job1: script: "execute-script-for-job1"</code>
+          <br />
+          <code>job2: script: "execute-script-for-job2"</code>
+        </gl-markdown>
+      </div>
+    `
+  ).join('');
 
 const generateDrawerContent = (items) =>
   items
@@ -145,6 +170,24 @@ export const WithStickyFooter = (_args, { viewMode }) => ({
 
 WithStickyFooter.args = generateProps();
 
+export const WithScrimAndStaticContent = (_args, { viewMode }) => ({
+  ...storyOptions(viewMode),
+  template: `
+    <div>
+      <gl-button @click="toggle">Toggle Drawer</gl-button>
+      ${createSidebarTemplate(`
+        <template #title>List Settings</template>
+        <div>
+          ${generateStaticContent(3)}
+        </div>
+      `)}
+    </div>`,
+});
+
+WithScrimAndStaticContent.args = generateProps({
+  headerSticky: true,
+});
+
 export const SidebarVariant = (_args, { viewMode }) => ({
   ...storyOptions(viewMode),
   template: `

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

@@ -110,12 +110,13 @@ export default {
         </span>
         <slot name="header"></slot>
       </div>
-      <div class="gl-drawer-body">
+      <div class="gl-drawer-body" :class="{ 'gl-drawer-body-scrim': !shouldRenderFooter }">
         <slot></slot>
       </div>
       <div
         v-if="shouldRenderFooter"
         class="gl-drawer-footer gl-drawer-footer-sticky"
+        :class="{ 'gl-drawer-body-scrim-on-footer': shouldRenderFooter }"
         :style="{ zIndex }"
       >
         <slot name="footer"></slot>

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

@@ -29,3 +29,22 @@ export const objectTokenList = [
   { id: '11', title: 'whale' },
   { id: '12', title: 'xenarthra' },
 ];
+
+export const oneTokenList = ['dog'];
+
+export const actionsList = [
+  {
+    label: 'Create',
+    fn: () => {
+      // eslint-disable-next-line no-alert
+      window.alert('Create action');
+    },
+  },
+  {
+    label: 'Edit',
+    fn: () => {
+      // eslint-disable-next-line no-alert
+      window.alert('Edit action');
+    },
+  },
+];

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

@@ -4,11 +4,6 @@
   }
 
   .show-dropdown {
-    @include gl-display-block;
     max-height: $gl-max-dropdown-max-height;
   }
-
-  .highlight-dropdown {
-    @include gl-bg-gray-50;
-  }
 }

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

@@ -1,7 +1,13 @@
 import { mount } from '@vue/test-utils';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlFormInput from '../form_input/form_input.vue';
-import { stringTokenList, labelText, objectTokenList } from './constants';
+import {
+  stringTokenList,
+  labelText,
+  objectTokenList,
+  oneTokenList,
+  actionsList,
+} from './constants';
 import GlFormCombobox from './form_combobox.vue';
 
 const partialToken = 'do';
@@ -22,7 +28,11 @@ const doTimes = (num, fn) => {
 describe('GlFormCombobox', () => {
   let wrapper;
 
-  const createComponent = ({ tokens = stringTokenList, matchValueToAttr = undefined } = {}) => {
+  const createComponent = ({
+    tokens = stringTokenList,
+    matchValueToAttr = undefined,
+    actionList = [],
+  } = {}) => {
     wrapper = mount({
       data() {
         return {
@@ -30,6 +40,7 @@ describe('GlFormCombobox', () => {
           tokens,
           labelText,
           matchValueToAttr,
+          actionList,
         };
       },
       components: { GlFormCombobox },
@@ -40,6 +51,7 @@ describe('GlFormCombobox', () => {
             :token-list="tokens"
             :label-text="labelText"
             :match-value-to-attr="matchValueToAttr"
+            :action-list="actionList"
           />
         </div>
       `,
@@ -54,6 +66,19 @@ describe('GlFormCombobox', () => {
   const findInputValue = () => findInput().element.value;
   const setInput = (val) => findInput().setValue(val);
   const arrowDown = () => findInput().trigger('keydown.down');
+  const findFirstAction = () => wrapper.find('[data-testid="combobox-action"]');
+
+  beforeAll(() => {
+    if (!HTMLElement.prototype.scrollIntoView) {
+      HTMLElement.prototype.scrollIntoView = jest.fn();
+    }
+  });
+
+  afterAll(() => {
+    if (HTMLElement.prototype.scrollIntoView.mock) {
+      delete HTMLElement.prototype.scrollIntoView;
+    }
+  });
 
   describe.each`
     valueType   | tokens             | matchValueToAttr | partialTokenMatch
@@ -216,4 +241,47 @@ describe('GlFormCombobox', () => {
       });
     });
   });
+
+  describe('with action items', () => {
+    let actionSpy;
+    const windowAlert = window.alert;
+
+    beforeEach(() => {
+      createComponent({ tokens: oneTokenList, actionList: actionsList });
+      actionSpy = jest.spyOn(wrapper.vm.actionList[0], 'fn');
+      window.alert = jest.fn();
+    });
+
+    afterEach(() => {
+      window.alert = windowAlert;
+    });
+
+    it('click on action item executes its function', async () => {
+      await setInput(partialToken);
+      expect(findDropdown().isVisible()).toBe(true);
+
+      await findFirstAction().trigger('click');
+
+      expect(actionSpy).toHaveBeenCalled();
+      expect(findDropdown().isVisible()).toBe(false);
+    });
+
+    it('keyboard navigation and executes function on enter', async () => {
+      await setInput('dog');
+      findInput().trigger('keydown.down');
+      findInput().trigger('keydown.down');
+      await findInput().trigger('keydown.enter');
+
+      expect(actionSpy).toHaveBeenCalled();
+      expect(findDropdown().isVisible()).toBe(false);
+    });
+
+    it('displays only action items when no result match input value', async () => {
+      await setInput('doNotMatchAnything');
+      expect(findDropdown().isVisible()).toBe(true);
+
+      expect(findFirstAction().exists()).toBe(true);
+      expect(findDropdownOptions().length).toBe(2);
+    });
+  });
 });

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

@@ -1,19 +1,27 @@
-import { stringTokenList, labelText, objectTokenList } from './constants';
+import { makeContainer } from '../../../../utils/story_decorators/container';
+import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
 import readme from './form_combobox.md';
 import GlFormCombobox from './form_combobox.vue';
 
 const template = `
   <gl-form-combobox
     v-model="value"
+    ref="combobox"
     :token-list="tokenList"
     :label-text="labelText"
     :match-value-to-attr="matchValueToAttr"
+    :action-list="actionList"
   />`;
 
-const generateProps = ({ tokenList = stringTokenList, matchValueToAttr = undefined } = {}) => ({
+const generateProps = ({
+  tokenList = stringTokenList,
+  matchValueToAttr,
+  actionList = undefined,
+} = {}) => ({
   tokenList,
   labelText,
   matchValueToAttr,
+  actionList,
 });
 
 const Template = (args) => ({
@@ -34,16 +42,17 @@ export const WithObjectValue = (args, { argTypes }) => ({
   components: { GlFormCombobox },
   props: Object.keys(argTypes),
   mounted() {
-    document.querySelector('.gl-form-input').focus();
+    this.$nextTick(() => this.$refs.combobox.openSuggestions(objectTokenList));
   },
   data: () => {
     return {
-      value: '',
+      value: ' ',
     };
   },
   template: `
     <gl-form-combobox
       v-model="value"
+      ref="combobox"
       :token-list="tokenList"
       :label-text="labelText"
       :match-value-to-attr="matchValueToAttr"
@@ -58,6 +67,26 @@ export const WithObjectValue = (args, { argTypes }) => ({
   `,
 });
 WithObjectValue.args = generateProps({ tokenList: objectTokenList, matchValueToAttr: 'title' });
+WithObjectValue.decorators = [makeContainer({ height: '370px' })];
+
+export const WithActions = (args, { argTypes }) => ({
+  components: { GlFormCombobox },
+  props: Object.keys(argTypes),
+  mounted() {
+    this.$nextTick(() => this.$refs.combobox.openSuggestions(['dog']));
+  },
+  data: () => {
+    return {
+      value: 'dog',
+    };
+  },
+  template,
+});
+WithActions.args = generateProps({
+  tokenList: stringTokenList,
+  actionList: actionsList,
+});
+WithActions.decorators = [makeContainer({ height: '180px' })];
 
 export default {
   title: 'base/form/form-combobox',

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

@@ -2,6 +2,7 @@
 import { uniqueId } from 'lodash';
 
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
+import GlDropdownDivider from '../../dropdown/dropdown_divider.vue';
 import GlFormGroup from '../form_group/form_group.vue';
 import GlFormInput from '../form_input/form_input.vue';
 
@@ -9,6 +10,7 @@ export default {
   name: 'GlFormCombobox',
   components: {
     GlDropdownItem,
+    GlDropdownDivider,
     GlFormGroup,
     GlFormInput,
   },
@@ -30,6 +32,14 @@ export default {
       type: Array,
       required: true,
     },
+    /**
+     * List of action functions to display at the bottom of the dropdown
+     */
+    actionList: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     value: {
       type: [String, Object],
       required: true,
@@ -62,13 +72,37 @@ export default {
       return this.showSuggestions ? 'off' : 'on';
     },
     showSuggestions() {
-      return this.results.length > 0;
+      return this.value.length > 0 && this.allItems.length > 0;
     },
     displayedValue() {
       return this.matchValueToAttr && this.value[this.matchValueToAttr]
         ? this.value[this.matchValueToAttr]
         : this.value;
     },
+    resultsLength() {
+      return this.results.length;
+    },
+    allItems() {
+      return [...this.results, ...this.actionList];
+    },
+  },
+  watch: {
+    tokenList(newList) {
+      const filteredTokens = newList.filter((token) => {
+        if (this.matchValueToAttr) {
+          // For API driven tokens, we don't need extra filtering
+          return token;
+        }
+        return token.toLowerCase().includes(this.value.toLowerCase());
+      });
+
+      if (filteredTokens.length) {
+        this.openSuggestions(filteredTokens);
+      } else {
+        this.results = [];
+        this.arrowCounter = -1;
+      }
+    },
   },
   mounted() {
     document.addEventListener('click', this.handleClickOutside);
@@ -80,6 +114,7 @@ export default {
     closeSuggestions() {
       this.results = [];
       this.arrowCounter = -1;
+      this.userDismissedResults = true;
     },
     handleClickOutside(event) {
       if (!this.$el.contains(event.target)) {
@@ -89,33 +124,38 @@ export default {
     onArrowDown() {
       const newCount = this.arrowCounter + 1;
 
-      if (newCount >= this.results.length) {
+      if (newCount >= this.allItems.length) {
         this.arrowCounter = 0;
         return;
       }
 
       this.arrowCounter = newCount;
+      this.$refs.results[newCount]?.$el.scrollIntoView(false);
     },
     onArrowUp() {
       const newCount = this.arrowCounter - 1;
 
       if (newCount < 0) {
-        this.arrowCounter = this.results.length - 1;
+        this.arrowCounter = this.allItems.length - 1;
         return;
       }
 
       this.arrowCounter = newCount;
+      this.$refs.results[newCount]?.$el.scrollIntoView(true);
     },
     onEnter() {
-      const currentToken = this.results[this.arrowCounter] || this.value;
-      this.selectToken(currentToken);
+      const focusedItem = this.allItems[this.arrowCounter] || this.value;
+      if (focusedItem.fn) {
+        this.selectAction(focusedItem);
+      } else {
+        this.selectToken(focusedItem);
+      }
     },
     onEsc() {
       if (!this.showSuggestions) {
         this.$emit('input', '');
       }
       this.closeSuggestions();
-      this.userDismissedResults = true;
     },
     onEntry(value) {
       this.$emit('input', value);
@@ -137,7 +177,8 @@ export default {
       if (filteredTokens.length) {
         this.openSuggestions(filteredTokens);
       } else {
-        this.closeSuggestions();
+        this.results = [];
+        this.arrowCounter = -1;
       }
     },
     openSuggestions(filteredResults) {
@@ -152,6 +193,11 @@ export default {
        */
       this.$emit('value-selected', value);
     },
+    selectAction(value) {
+      value.fn();
+      this.$emit('input', this.value);
+      this.closeSuggestions();
+    },
   },
 };
 </script>
@@ -186,20 +232,43 @@ export default {
       v-show="showSuggestions && !userDismissedResults"
       :id="suggestionsId"
       data-testid="combobox-dropdown"
-      class="dropdown-menu dropdown-full-width gl-list-style-none gl-pl-0 gl-mb-0 gl-overflow-y-auto"
-      :class="{ 'show-dropdown': showSuggestions }"
+      class="dropdown-menu dropdown-full-width show-dropdown gl-list-style-none gl-pl-0 gl-mb-0 gl-display-flex gl-flex-direction-column"
     >
-      <gl-dropdown-item
-        v-for="(result, i) in results"
-        :key="i"
-        role="option"
-        :class="{ 'highlight-dropdown': i === arrowCounter }"
-        :aria-selected="i === arrowCounter"
-        tabindex="-1"
-        @click="selectToken(result)"
-      >
-        <slot name="result" :item="result">{{ result }}</slot>
-      </gl-dropdown-item>
+      <li class="gl-overflow-y-auto show-dropdown">
+        <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
+          <gl-dropdown-item
+            v-for="(result, i) in results"
+            ref="results"
+            :key="i"
+            role="option"
+            :class="{ 'gl-bg-gray-50': i === arrowCounter }"
+            :aria-selected="i === arrowCounter"
+            tabindex="-1"
+            @click="selectToken(result)"
+          >
+            <!-- @slot The suggestion result item to display. -->
+            <slot name="result" :item="result">{{ result }}</slot>
+          </gl-dropdown-item>
+        </ul>
+      </li>
+      <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" />
+      <li>
+        <ul class="gl-list-style-none gl-pl-0 gl-mb-0">
+          <gl-dropdown-item
+            v-for="(action, i) in actionList"
+            :key="i + resultsLength"
+            role="option"
+            :class="{ 'gl-bg-gray-50': i + resultsLength === arrowCounter }"
+            :aria-selected="i + resultsLength === arrowCounter"
+            tabindex="-1"
+            data-testid="combobox-action"
+            @click="selectAction(action)"
+          >
+            <!-- @slot The action item to display. -->
+            <slot name="action" :item="action">{{ action.label }}</slot>
+          </gl-dropdown-item>
+        </ul>
+      </li>
     </ul>
   </div>
 </template>

package/src/scss/utilities.scss

@@ -6178,6 +6178,12 @@
 .gl-gap-3\! {
   gap: $gl-spacing-scale-3 !important;
 }
+.gl-gap-5 {
+  gap: $gl-spacing-scale-5;
+}
+.gl-gap-5\! {
+  gap: $gl-spacing-scale-5 !important;
+}
 .gl-gap-6 {
   gap: $gl-spacing-scale-6;
 }

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

@@ -817,6 +817,10 @@
   gap: $gl-spacing-scale-3;
 }
 
+@mixin gl-gap-5 {
+  gap: $gl-spacing-scale-5;
+}
+
 @mixin gl-gap-6 {
   gap: $gl-spacing-scale-6;
 }