@gitlab/ui 42.3.1 → 42.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.3.1",
+  "version": "42.5.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/label/label.scss

@@ -34,10 +34,6 @@ $label-close-button: '.gl-label-close.gl-button';
       @include gl-reset-color;
       @include gl-shadow-none;
       @include gl-outline-none;
-
-      .gl-label-text-scoped {
-        @include gl-text-decoration-underline;
-      }
     }
   }
 

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

@@ -36,9 +36,11 @@ describe('Label component', () => {
   };
 
   const findLink = () => wrapper.findComponent(GlLink);
+  const findContent = () => wrapper.find('.gl-label-link');
   const findTitle = () => wrapper.find('.gl-label-text');
   const findSubTitle = () => wrapper.find('.gl-label-text-scoped');
-  const findTooltipText = () => wrapper.findComponent(GlTooltip).text();
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
+  const findTooltipText = () => findTooltip().text();
   const findCloseButton = () => wrapper.findComponent(CloseButton);
 
   describe('basic label', () => {
@@ -137,6 +139,22 @@ describe('Label component', () => {
         expect(wrapper.emitted().close).toBeFalsy();
       });
     });
+
+    describe('label has no target', () => {
+      const props = { ...defaultProps, target: '' };
+
+      it('renders the label content as text', () => {
+        createComponent(props, { mountFn: mount });
+
+        expect(findContent().element.tagName.toLowerCase()).toBe('span');
+      });
+
+      it('does not render a link', () => {
+        createComponent(props, { mountFn: shallowMount });
+
+        expect(findLink().exists()).toBe(false);
+      });
+    });
   });
 
   describe('scoped label', () => {
@@ -220,5 +238,21 @@ describe('Label component', () => {
         expect(wrapper.emitted().close).toBeFalsy();
       });
     });
+
+    describe('label has no target', () => {
+      const props = { ...defaultProps, target: '' };
+
+      it('renders the label content as text', () => {
+        createComponent(props, { mountFn: mount });
+
+        expect(findContent().element.tagName.toLowerCase()).toBe('span');
+      });
+
+      it('does not render a link', () => {
+        createComponent(props, { mountFn: shallowMount });
+
+        expect(findLink().exists()).toBe(false);
+      });
+    });
   });
 });

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

@@ -54,6 +54,9 @@ Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
 export const WithCloseButton = Template.bind({});
 WithCloseButton.args = generateProps({ showCloseButton: true });
 
+export const WithoutTarget = Template.bind({});
+WithoutTarget.args = generateProps({ target: '' });
+
 export default {
   title: 'base/label',
   component: GlLabel,
@@ -70,6 +73,7 @@ export default {
     },
     size: {
       options: labelSizeOptions,
+      control: 'select',
     },
     tooltipPlacement: {
       options: tooltipPlacements,

package/src/components/base/label/label.vue

@@ -41,7 +41,7 @@ export default {
     target: {
       type: String,
       required: false,
-      default: '#',
+      default: '',
     },
     scoped: {
       type: Boolean,
@@ -91,6 +91,12 @@ export default {
     closeIconSize() {
       return this.size === 'sm' ? 12 : 16;
     },
+    labelComponent() {
+      return this.target ? GlLink : 'span';
+    },
+    tooltipTarget() {
+      return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
+    },
   },
   watch: {
     title() {
@@ -122,14 +128,20 @@ export default {
 
 <template>
   <span class="gl-label" :class="cssClasses" :style="cssVariables" v-bind="$attrs" @click="onClick">
-    <gl-link ref="labelTitle" :href="target" class="gl-label-link">
+    <component
+      :is="labelComponent"
+      ref="labelTitle"
+      :href="target ? target : false"
+      class="gl-label-link"
+      tabindex="0"
+    >
       <span class="gl-label-text">
         {{ scopedKey }}
       </span>
       <span v-if="scoped && scopedValue" class="gl-label-text-scoped">
         {{ scopedValue }}
       </span>
-    </gl-link>
+    </component>
     <close-button
       v-if="showCloseButton"
       class="gl-label-close gl-p-0!"
@@ -140,7 +152,7 @@ export default {
     />
     <gl-tooltip
       v-if="description"
-      :target="() => $refs.labelTitle.$el"
+      :target="() => tooltipTarget"
       :placement="tooltipPlacement"
       boundary="viewport"
     >