@gitlab/ui 42.14.0 → 42.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.14.0",
+  "version": "42.17.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "13.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.25.0",
+    "@gitlab/svgs": "2.26.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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/token_selector/token_container.spec.js

@@ -71,6 +71,29 @@ describe('GlTokenContainer', () => {
       });
     });
 
+    describe('clearing all tokens', () => {
+      const findClearAllButton = () => wrapper.find('[data-testid="clear-all-button"]');
+
+      it('does not render `Clear all` button by default', () => {
+        createComponent();
+
+        expect(findClearAllButton().exists()).toBe(false);
+      });
+
+      it('renders `Clear all` button when `showClearAllButton` prop is true', () => {
+        createComponent({ propsData: { showClearAllButton: true } });
+
+        expect(findClearAllButton().exists()).toBe(true);
+      });
+
+      it('emits `clear-all` event when `Clear all` button is clicked', () => {
+        createComponent({ propsData: { showClearAllButton: true } });
+        findClearAllButton().vm.$emit('click', new MouseEvent('click'));
+
+        expect(wrapper.emitted('clear-all')).toEqual([[]]);
+      });
+    });
+
     describe('state', () => {
       describe('when `state` is `false`', () => {
         it('adds `aria-invalid="true"` attribute`', () => {

package/src/components/base/token_selector/token_container.vue

@@ -1,10 +1,11 @@
 <script>
 import GlToken from '../token/token.vue';
+import GlButton from '../button/button.vue';
 import { tokensValidator } from './helpers';
 
 export default {
   name: 'GlTokenContainer',
-  components: { GlToken },
+  components: { GlToken, GlButton },
   props: {
     tokens: {
       type: Array,
@@ -26,6 +27,11 @@ export default {
       required: false,
       default: false,
     },
+    showClearAllButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -124,7 +130,7 @@ export default {
 <template>
   <div
     ref="tokenContainer"
-    class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1"
+    class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
     role="listbox"
     aria-multiselectable="false"
     aria-orientation="horizontal"
@@ -162,5 +168,14 @@ export default {
       </gl-token>
     </div>
     <slot name="text-input"></slot>
+    <gl-button
+      v-if="showClearAllButton"
+      size="small"
+      aria-label="Clear all"
+      icon="clear"
+      category="tertiary"
+      data-testid="clear-all-button"
+      @click.stop="$emit('clear-all')"
+    />
   </div>
 </template>

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

@@ -86,6 +86,8 @@ describe('GlTokenSelector', () => {
 
   const findContainer = () => wrapper.findComponent({ ref: 'container' });
 
+  const findTokenContainer = () => wrapper.findComponent(GlTokenContainer);
+
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
       HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -149,7 +151,7 @@ describe('GlTokenSelector', () => {
       });
 
       it('passes `viewOnly` prop to GlTokenContainer', () => {
-        expect(wrapper.findComponent(GlTokenContainer).props('viewOnly')).toBe(true);
+        expect(findTokenContainer().props('viewOnly')).toBe(true);
       });
 
       it('disables input field if viewOnly is true', () => {
@@ -159,6 +161,16 @@ describe('GlTokenSelector', () => {
       });
     });
 
+    describe('when there are tokens and `allowClearAll` is true', () => {
+      beforeEach(() => {
+        createComponent({ propsData: { allowClearAll: true, selectedTokens: tokens } });
+      });
+
+      it('passes `showClearAllButton` prop as `true` to token-container', () => {
+        expect(findTokenContainer().props('showClearAllButton')).toBe(true);
+      });
+    });
+
     describe('containerClass', () => {
       it('renders passed CSS classes', () => {
         createComponent({
@@ -290,7 +302,7 @@ describe('GlTokenSelector', () => {
         },
       });
 
-      expect(wrapper.findComponent(GlTokenContainer).props('state')).toBe(true);
+      expect(findTokenContainer().props('state')).toBe(true);
     });
   });
 
@@ -589,7 +601,7 @@ describe('GlTokenSelector', () => {
         propsData: { selectedTokens: [token] },
       });
 
-      wrapper.findComponent(GlTokenContainer).vm.$emit('token-remove', token);
+      findTokenContainer().vm.$emit('token-remove', token);
 
       await nextTick();
     });
@@ -631,7 +643,7 @@ describe('GlTokenSelector', () => {
         selectedTokens: tokens,
       });
 
-      wrapper.findComponent(GlTokenContainer).vm.$emit('cancel-focus');
+      findTokenContainer().vm.$emit('cancel-focus');
 
       await nextTick();
 

package/src/components/base/token_selector/token_selector.vue

@@ -1,6 +1,5 @@
 <script>
 import { uniqueId } from 'lodash';
-
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
@@ -8,7 +7,10 @@ import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
 export default {
   name: 'GlTokenSelector',
   componentId: uniqueId('token-selector'),
-  components: { GlTokenContainer, GlTokenSelectorDropdown },
+  components: {
+    GlTokenContainer,
+    GlTokenSelectorDropdown,
+  },
   model: {
     prop: 'selectedTokens',
     event: 'input',
@@ -121,6 +123,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Allows user to bulk delete tokens when enabled
+     */
+    allowClearAll: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -173,8 +183,14 @@ export default {
         ? 'is-valid gl-inset-border-1-gray-400!'
         : 'is-invalid gl-inset-border-1-red-500!';
     },
+    hasSelectedTokens() {
+      return this.selectedTokens.length > 0;
+    },
     showEmptyPlaceholder() {
-      return this.selectedTokens.length === 0 && !this.inputFocused;
+      return !this.hasSelectedTokens && !this.inputFocused;
+    },
+    showClearAllButton() {
+      return this.hasSelectedTokens && this.allowClearAll;
     },
   },
   watch: {
@@ -357,6 +373,10 @@ export default {
     registerFocusOnToken(focusOnToken) {
       this.focusOnToken = focusOnToken;
     },
+    clearAll() {
+      this.$emit('input', []);
+      this.focusTextInput();
+    },
   },
 };
 </script>
@@ -377,8 +397,10 @@ export default {
         :state="state"
         :register-focus-on-token="registerFocusOnToken"
         :view-only="viewOnly"
+        :show-clear-all-button="showClearAllButton"
         @token-remove="removeToken"
         @cancel-focus="cancelTokenFocus"
+        @clear-all="clearAll"
       >
         <template #token-content="{ token }">
           <!-- @slot Content to pass to the token component slot. Can be used

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;
 }