@gitlab/ui 42.4.1 → 42.5.0

package/package.json

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