@gitlab/ui 41.0.0 → 41.1.0

package/package.json

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

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

@@ -11,6 +11,12 @@ $gl-sidebar-width: 290px;
   @include gl-font-base;
   @include gl-line-height-normal;
 
+  .gl-drawer-header-sticky {
+    @include gl-bg-white;
+    @include gl-top-0;
+    @include gl-sticky;
+  }
+
   @include media-breakpoint-down(sm) {
     @include gl-w-full;
   }
@@ -34,8 +40,15 @@ $gl-sidebar-width: 290px;
   .gl-drawer-header,
   .gl-drawer-body > * {
     @include gl-py-5;
+  }
+
+  .gl-drawer-body > * {
     @include gl-mx-5;
   }
+
+  .gl-drawer-header {
+    @include gl-px-5;
+  }
 }
 
 .gl-drawer-header {

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

@@ -27,6 +27,16 @@ describe('drawer component', () => {
       });
     });
 
+    describe('when sticky header is true', () => {
+      it('renders drawer header with sticky position', () => {
+        mountWithOpts({ props: { open: true, headerSticky: true } });
+        const header = wrapper.find('.gl-drawer-header');
+
+        expect(header.classes()).toContain('gl-drawer-header-sticky');
+        expect(header.attributes('style')).toBe('z-index: 10;');
+      });
+    });
+
     describe('when open is false', () => {
       it('cannot find aside html element', () => {
         mountWithOpts({ props: { open: false } });

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

@@ -1,4 +1,5 @@
 import { GlDrawer, GlButton } from '../../../index';
+import { drawerVariants } from '../../../utils/constants';
 import readme from './drawer.md';
 
 const components = { GlDrawer, GlButton };
@@ -14,6 +15,10 @@ const drawerContent = [
   'Eight',
   'Nine',
   'Ten',
+  'Eleven',
+  'Twelve',
+  'Thirteen',
+  'Fourteen',
 ]
   .map(
     (str) => `
@@ -25,7 +30,32 @@ const drawerContent = [
   )
   .join('');
 
-export const Default = (_args, { viewMode }) => ({
+const createSidebarTemplate = (content) => `
+  <gl-drawer
+    :open="open"
+    :header-height="headerHeight"
+    :header-sticky="headerSticky"
+    :z-index="zIndex"
+    :variant="variant"
+    @close="close">${content}</gl-drawer>
+  `;
+
+const defaultValue = (prop) => GlDrawer.props[prop].default;
+
+const generateProps = ({
+  headerHeight = defaultValue('headerHeight'),
+  headerSticky = defaultValue('headerSticky'),
+  zIndex = defaultValue('zIndex'),
+  variant = defaultValue('variant'),
+} = {}) => ({
+  headerHeight,
+  headerSticky,
+  zIndex,
+  variant,
+});
+
+const storyOptions = (viewMode) => ({
+  props: Object.keys(generateProps()),
   components,
   methods: {
     toggle() {
@@ -40,35 +70,27 @@ export const Default = (_args, { viewMode }) => ({
       open: viewMode !== 'docs',
     };
   },
+});
+
+export const Default = (_args, { viewMode }) => ({
+  ...storyOptions(viewMode),
   template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
-      <gl-drawer :open="open" @close="close">
+      ${createSidebarTemplate(`
         <template #title>List Settings</template>
         ${drawerContent}
-      </gl-drawer>
+      `)}
     </div>`,
 });
+Default.args = generateProps();
 
 export const WithActions = (_args, { viewMode }) => ({
-  components,
-  methods: {
-    toggle() {
-      this.open = !this.open;
-    },
-    close() {
-      this.open = false;
-    },
-  },
-  data() {
-    return {
-      open: viewMode !== 'docs',
-    };
-  },
+  ...storyOptions(viewMode),
   template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
-      <gl-drawer :open="open" @close="close">
+      ${createSidebarTemplate(`
           <template #title>
           <h3>custom-network-policy</h3>
         </template>
@@ -79,29 +101,17 @@ export const WithActions = (_args, { viewMode }) => ({
             </div>
         </template>
           ${drawerContent}
-      </gl-drawer>
+      `)}
     </div>`,
 });
+WithActions.args = generateProps();
 
 export const SidebarVariant = (_args, { viewMode }) => ({
-  components,
-  methods: {
-    toggle() {
-      this.open = !this.open;
-    },
-    close() {
-      this.open = false;
-    },
-  },
-  data() {
-    return {
-      open: viewMode !== 'docs',
-    };
-  },
+  ...storyOptions(viewMode),
   template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
-      <gl-drawer :open="open" @close="close" variant="sidebar">
+      ${createSidebarTemplate(`
         <template #title>
           <h3>Sidebar</h3>
         </template>
@@ -111,16 +121,42 @@ export const SidebarVariant = (_args, { viewMode }) => ({
           </div>
         </template>
         ${drawerContent}
-      </gl-drawer>
+      `)}
     </div>`,
 });
+SidebarVariant.args = generateProps({
+  variant: drawerVariants.sidebar,
+});
+
+export const StickyHeader = (_args, { viewMode }) => ({
+  ...storyOptions(viewMode),
+  template: `
+  <div>
+    <gl-button @click="toggle">Toggle Drawer</gl-button>
+    ${createSidebarTemplate(`
+      <template #title>List Settings</template>
+      ${drawerContent}
+    `)}
+  </div>`,
+});
+StickyHeader.args = generateProps({
+  headerSticky: true,
+});
 
 export default {
   title: 'base/drawer',
   component: GlDrawer,
+  argTypes: {
+    open: {
+      control: false,
+    },
+    variant: {
+      options: Object.keys(drawerVariants),
+      control: 'select',
+    },
+  },
   parameters: {
     knobs: { disabled: true },
-    controls: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: '',
     },
+    headerSticky: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     zIndex: {
       type: Number,
       required: false,
@@ -46,6 +51,11 @@ export default {
 
       return styles;
     },
+    drawerHeaderStyles() {
+      return {
+        zIndex: this.headerSticky ? maxZIndex : null,
+      };
+    },
     variantClass() {
       return `gl-drawer-${this.variant}`;
     },
@@ -79,7 +89,11 @@ export default {
 <template>
   <transition name="gl-drawer">
     <aside v-if="open" :style="drawerStyles" class="gl-drawer" :class="variantClass">
-      <div class="gl-drawer-header">
+      <div
+        class="gl-drawer-header"
+        :style="drawerHeaderStyles"
+        :class="{ 'gl-drawer-header-sticky': headerSticky }"
+      >
         <span class="gl-drawer-title">
           <slot name="title"></slot>
           <gl-button