@gitlab/ui 40.7.0 → 41.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.7.0",
+  "version": "41.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,15 +87,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.5",
-    "@storybook/addon-docs": "6.5.5",
-    "@storybook/addon-essentials": "6.5.5",
+    "@storybook/addon-a11y": "6.5.6",
+    "@storybook/addon-docs": "6.5.6",
+    "@storybook/addon-essentials": "6.5.6",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.5.5",
-    "@storybook/addon-storyshots-puppeteer": "6.5.5",
-    "@storybook/addon-viewport": "6.5.5",
-    "@storybook/theming": "6.5.5",
-    "@storybook/vue": "6.5.5",
+    "@storybook/addon-storyshots": "6.5.6",
+    "@storybook/addon-storyshots-puppeteer": "6.5.6",
+    "@storybook/addon-viewport": "6.5.6",
+    "@storybook/theming": "6.5.6",
+    "@storybook/vue": "6.5.6",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

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

package/src/components/base/modal/modal.md

@@ -7,11 +7,7 @@ should serve a single purpose dedicated to completing the user’s task.
 You can use the `v-model` directive to control the modal’s visibility. The `v-model`
 directive interfaces with the `visible` property and the `@change` event.
 
-## Deprecation Warning
-
-We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
-`modal-footer` slot content is populated. This is in order to align this component with the design
-system.
+## Modal footer
 
 The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will

package/src/components/base/modal/modal.vue

@@ -86,22 +86,6 @@ export default {
       default: '',
     },
   },
-  computed: {
-    shouldRenderModalOk() {
-      return Boolean(this.$slots['modal-ok']);
-    },
-    shouldRenderModalCancel() {
-      return Boolean(this.$slots['modal-cancel']);
-    },
-    shouldRenderModalFooter() {
-      return Boolean(
-        this.actionCancel ||
-          this.actionSecondary ||
-          this.actionPrimary ||
-          this.$slots['modal-footer']
-      );
-    },
-  },
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
@@ -168,7 +152,7 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
   Emitted when the modal visibility changes
   @event change
  -->
@@ -202,14 +186,8 @@ export default {
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
-    <template v-if="shouldRenderModalOk" #modal-ok>
-      <slot name="modal-ok"></slot>
-    </template>
-    <template v-if="shouldRenderModalCancel" #modal-cancel>
-      <slot name="modal-cancel"></slot>
-    </template>
     <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template v-if="shouldRenderModalFooter" #modal-footer>
+    <template #modal-footer>
       <slot name="modal-footer">
         <!--
         Emitted when clicked on modal-action-cancel

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

@@ -5,6 +5,10 @@ import readme from './toggle.md';
 
 const defaultValue = (prop) => GlToggle.props[prop].default;
 
+const longHelp = `This is a toggle component with a long help message. 
+  You can notice how the text wraps when the width of the container
+  is not enough to fix the entire text.`;
+
 const generateProps = ({
   value = true,
   disabled = defaultValue('disabled'),
@@ -43,6 +47,11 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithLongHelp = Template.bind({});
+WithLongHelp.args = generateProps({
+  help: longHelp,
+});
+
 export default {
   title: 'base/toggle',
   component: GlToggle,

package/src/components/base/toggle/toggle.vue

@@ -118,7 +118,7 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-mb-0 gl-w-max-content"
+    class="gl-toggle-wrapper gl-display-flex gl-mb-0"
     :class="{
       'gl-flex-direction-column': labelPosition === 'top' || labelPosition === 'hidden',
       'gl-toggle-label-inline': labelPosition === 'left',
@@ -129,7 +129,7 @@ export default {
     <span
       :id="labelId"
       :class="{ 'gl-sr-only': labelPosition === 'hidden' }"
-      class="gl-toggle-label"
+      class="gl-toggle-label gl-flex-shrink-0"
       data-testid="toggle-label"
     >
       <!-- @slot The toggle's label. -->
@@ -146,6 +146,7 @@ export default {
         'is-checked': value,
         'is-disabled': disabled,
       }"
+      class="gl-flex-shrink-0"
       type="button"
       @click.prevent="toggleFeature"
     >