@gitlab/ui 32.59.0 → 32.63.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -240,6 +240,7 @@ export const glLineHeight24 = '1.5rem'
 export const glLineHeight28 = '1.75rem'
 export const glLineHeight32 = '2rem'
 export const glLineHeight36 = '2.25rem'
+export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
 export const glFontSize = '0.875rem'

package/scss_to_js/scss_variables.json

@@ -1249,6 +1249,11 @@
       "value": "px-to-rem(36px)",
       "compiledValue": "2.25rem"
     },
+    {
+      "name": "$gl-line-height-42",
+      "value": "px-to-rem(42px)",
+      "compiledValue": "2.625rem"
+    },
     {
       "name": "$gl-line-height-44",
       "value": "px-to-rem(44px)",

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

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { BBreadcrumbItem } from 'bootstrap-vue';
-import Breadcrumb from './breadcrumb.vue';
+import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
+import { createMockDirective } from '~helpers/vue_mock_directive';
 
 describe('Broadcast message component', () => {
   let wrapper;
@@ -14,10 +15,24 @@ describe('Broadcast message component', () => {
     { text: 'third_breadcrumb', href: 'http://about.gitlab.com' },
   ];
 
+  const extraItems = [
+    { text: 'fourth_breadcrumb', href: 'http://gitlab.com' },
+    {
+      text: 'fifth_breadcrumb',
+      to: 'to_value',
+    },
+  ];
+
   const findAvatarSlot = () => wrapper.find('[data-testid="avatar-slot"]');
   const findSeparatorSlot = () => wrapper.find('[data-testid="separator-slot"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(BBreadcrumbItem);
   const findAllSeparators = () => wrapper.findAll('[data-testid="separator"]');
+  const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]');
+  const findExpanderSeparator = () => wrapper.find('[data-testid="expander-separator"]');
+
+  const findVisibleBreadcrumbItems = () =>
+    wrapper.findAll('.gl-breadcrumb-item:not(.gl-display-none)');
+  const findHiddenBreadcrumbItems = () => wrapper.findAll('.gl-breadcrumb-item.gl-display-none');
 
   const createComponent = (propsData = { items }) => {
     wrapper = shallowMount(Breadcrumb, {
@@ -26,7 +41,14 @@ describe('Broadcast message component', () => {
         avatar: '<div data-testid="avatar-slot"></div>',
         separator: '<div data-testid="separator-slot"></div>',
       },
+      directives: { GlTooltip: createMockDirective('gl-tooltip') },
     });
+
+    wrapper.vm.$refs.firstItem = [
+      {
+        querySelector: () => ({ focus: jest.fn() }),
+      },
+    ];
   };
 
   describe('slots', () => {
@@ -82,4 +104,45 @@ describe('Broadcast message component', () => {
       });
     });
   });
+
+  describe('collapsible', () => {
+    describe(`when breadcrumbs list size is NOT larger than ${COLLAPSE_AT_SIZE}`, () => {
+      beforeEach(() => {
+        createComponent();
+      });
+      it('should not display collapsed list expander && separator', () => {
+        expect(findCollapsedListExpander().exists()).toBe(false);
+        expect(findExpanderSeparator().exists()).toBe(false);
+      });
+
+      it('should display all items visible', () => {
+        expect(findVisibleBreadcrumbItems()).toHaveLength(items.length);
+      });
+    });
+
+    describe(`when breadcrumbs list size is larger than ${COLLAPSE_AT_SIZE}`, () => {
+      beforeEach(() => {
+        createComponent({ items: [...items, ...extraItems] });
+      });
+      it('should display collapsed list expander && separator', () => {
+        expect(findCollapsedListExpander().exists()).toBe(true);
+        expect(findExpanderSeparator().exists()).toBe(true);
+      });
+
+      it('should display only first && 2 last items and the rest as hidden', () => {
+        const alwaysVisibleNum = 3;
+        expect(findVisibleBreadcrumbItems()).toHaveLength(alwaysVisibleNum);
+        expect(findHiddenBreadcrumbItems()).toHaveLength(
+          items.length + extraItems.length - alwaysVisibleNum
+        );
+      });
+
+      it('should expand the list on expander click', async () => {
+        findCollapsedListExpander().vm.$emit('click');
+        await wrapper.vm.$nextTick();
+        expect(findHiddenBreadcrumbItems()).toHaveLength(0);
+        expect(findVisibleBreadcrumbItems()).toHaveLength(items.length + extraItems.length);
+      });
+    });
+  });
 });

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

@@ -60,3 +60,25 @@ export default {
     },
   },
 };
+
+const extraItems = [
+  {
+    text: 'Fifth Item',
+    href: '#',
+  },
+  {
+    text: 'Sixth Item',
+    href: '#',
+  },
+  {
+    text: 'Seventh Item',
+    href: '#',
+  },
+  {
+    text: 'Eighth Item',
+    href: '#',
+  },
+];
+
+export const CollapsedItems = Template.bind({});
+CollapsedItems.args = generateProps({ items: [...defaultItems, ...extraItems] });

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,12 +1,20 @@
 <script>
 import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue';
 import GlIcon from '../icon/icon.vue';
+import GlButton from '../button/button.vue';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+
+export const COLLAPSE_AT_SIZE = 4;
 
 export default {
   components: {
     BBreadcrumb,
     BBreadcrumbItem,
     GlIcon,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   inheritAttrs: false,
   props: {
@@ -25,9 +33,45 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      isListCollapsed: true,
+    };
+  },
+  computed: {
+    breadcrumbsSize() {
+      return this.items.length;
+    },
+    hasCollapsible() {
+      return this.breadcrumbsSize > COLLAPSE_AT_SIZE;
+    },
+    nonCollapsibleIndices() {
+      return [0, this.breadcrumbsSize - 1, this.breadcrumbsSize - 2];
+    },
+  },
   methods: {
-    isLastItem(items, index) {
-      return index === items.length - 1;
+    isFirstItem(index) {
+      return index === 0;
+    },
+    isLastItem(index) {
+      return index === this.breadcrumbsSize - 1;
+    },
+    expandBreadcrumbs() {
+      this.isListCollapsed = false;
+      try {
+        this.$refs.firstItem[0].querySelector('a').focus();
+      } catch (e) {
+        /* eslint-disable-next-line no-console */
+        console.error(`Failed to set focus on the last breadcrumb item.`);
+      }
+    },
+    showCollapsedBreadcrumbsExpander(index) {
+      return index === 0 && this.hasCollapsible && this.isListCollapsed;
+    },
+    isItemCollapsed(index) {
+      return (
+        this.hasCollapsible && this.isListCollapsed && !this.nonCollapsibleIndices.includes(index)
+      );
     },
   },
 };
@@ -40,14 +84,16 @@ export default {
       <template v-for="(item, index) in items">
         <b-breadcrumb-item
           :key="index"
+          :ref="isFirstItem(index) ? 'firstItem' : null"
           class="gl-breadcrumb-item"
           :text="item.text"
           :href="item.href"
           :to="item.to"
+          :class="{ 'gl-display-none': isItemCollapsed(index) }"
         >
           <span>{{ item.text }}</span>
           <span
-            v-if="!isLastItem(items, index)"
+            v-if="!isLastItem(index)"
             :key="`${index} ${item.text}`"
             class="gl-breadcrumb-separator"
             data-testid="separator"
@@ -58,6 +104,28 @@ export default {
             </slot>
           </span>
         </b-breadcrumb-item>
+
+        <template v-if="showCollapsedBreadcrumbsExpander(index)">
+          <!-- eslint-disable-next-line vue/valid-v-for -->
+          <gl-button
+            v-gl-tooltip.hover="'Show all breadcrumbs'"
+            aria-label="Show all breadcrumbs"
+            data-testid="collapsed-expander"
+            icon="ellipsis_h"
+            category="primary"
+            @click="expandBreadcrumbs"
+          />
+          <!-- eslint-disable-next-line vue/require-v-for-key -->
+          <span
+            key="expander"
+            class="gl-display-inline-flex gl-text-gray-500"
+            data-testid="expander-separator"
+          >
+            <slot name="separator">
+              <gl-icon name="chevron-right" />
+            </slot>
+          </span>
+        </template>
       </template>
     </b-breadcrumb>
   </nav>

package/src/scss/utilities.scss

@@ -2940,6 +2940,18 @@
   }
 }
 
+.gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
+.gl-md-flex-direction-column\! {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
 .gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
@@ -5586,6 +5598,16 @@
   margin-bottom: $gl-spacing-scale-3 !important;
   }
 }
+.gl-xs-mb-4 {
+  @include gl-media-breakpoint-down(sm) {
+  margin-bottom: $gl-spacing-scale-4;
+  }
+}
+.gl-xs-mb-4\! {
+  @include gl-media-breakpoint-down(sm) {
+  margin-bottom: $gl-spacing-scale-4 !important;
+  }
+}
 .gl-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-3;
@@ -6296,6 +6318,16 @@
   padding-left: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-pl-7 {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7;
+  }
+}
+.gl-md-pl-7\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
   padding-top: 0;
@@ -7287,6 +7319,14 @@
   line-height: $gl-line-height-36 !important;
 }
 
+.gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
+.gl-line-height-42\! {
+  line-height: $gl-line-height-42 !important;
+}
+
 .gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

package/src/scss/utility-mixins/flex.scss

@@ -96,6 +96,12 @@
   }
 }
 
+@mixin gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
 @mixin gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;

package/src/scss/utility-mixins/spacing.scss

@@ -761,6 +761,12 @@
   }
 }
 
+@mixin gl-xs-mb-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-mb-4;
+  }
+}
+
 @mixin gl-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-ml-3;
@@ -1189,6 +1195,12 @@
   }
 }
 
+@mixin gl-md-pl-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-7;
+  }
+}
+
 @mixin gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pt-0;

package/src/scss/utility-mixins/typography.scss

@@ -177,6 +177,10 @@
   line-height: $gl-line-height-36;
 }
 
+@mixin gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
 @mixin gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

package/src/scss/variables.scss

@@ -316,6 +316,7 @@ $gl-line-height-24: px-to-rem(24px);
 $gl-line-height-28: px-to-rem(28px);
 $gl-line-height-32: px-to-rem(32px);
 $gl-line-height-36: px-to-rem(36px);
+$gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);