@gitlab/ui 58.8.0 → 59.0.0

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.md

@@ -1,17 +1,12 @@
 ## Usage
 
-This component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`
-so an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to
-customize the icon that appears between each breadcrumb.
+This component provides a `<slot #avatar>` so an avatar can appear before the first breadcrumb.
 
 **note:** the component supports passing the property `to` in the list items to enable navigation
 through `vue-router`
 
 ### Example
 
-You can use any kind of separator you want in the slot, like below, which uses `<svg>`
-to draw a `/`
-
 ```html
 <gl-breadcrumb :items="items">
   <template #avatar>
@@ -23,10 +18,5 @@ to draw a `/`
       height="16"
     />
   </template>
-  <template #separator>
-    <svg height="16">
-      <line x1="100%" y1="0" x2="0" y2="100%" stroke="gray" />
-    </svg>
-  </template>
 </gl-breadcrumb>
 ```

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -3,9 +3,6 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumbs {
   @include gl-display-flex;
-  @include gl-border-0;
-  @include gl-inset-border-b-1-gray-200;
-  @include gl-py-5;
 }
 
 .gl-breadcrumb-list {
@@ -19,25 +16,11 @@ $breadcrumb-max-width: $grid-size * 16;
   }
 }
 
-.gl-breadcrumb-separator {
-  @include gl-display-inline-flex;
-  @include gl-absolute;
-  right: 0;
-
-  > svg {
-    @include gl-my-auto;
-    @include gl-mx-2;
-    @include gl-w-3;
-    @include gl-text-gray-500;
-    @include gl-fill-current-color;
-  }
-}
-
 .gl-breadcrumb-avatar-tile {
-  @include gl-mr-3;
+  @include gl-mr-2;
   @include gl-border-1;
   @include gl-border-solid;
-  @include gl-border-gray-200;
+  @include gl-border-gray-a-08;
   @include gl-rounded-base;
 }
 
@@ -45,22 +28,15 @@ $breadcrumb-max-width: $grid-size * 16;
 .gl-breadcrumb-item {
   @include gl-font-sm;
   @include gl-line-height-normal;
-  @include gl-relative;
-  @include gl-pr-6;
-
-  + .gl-breadcrumb-item {
-    @include gl-pl-0;
 
-    &::before {
-      content: '';
-      @include gl-display-none;
-    }
+  &:not(:last-child)::after {
+    @include gl-text-gray-200;
+    @include gl-px-3;
+    content: '/';
   }
 
   > a {
-    @include gl-display-flex;
-    @include gl-align-items-center;
-    @include gl-text-gray-500;
+    @include gl-text-gray-700;
     @include media-breakpoint-down(xs) {
       @include str-truncated($breadcrumb-max-width);
     }
@@ -74,6 +50,6 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-item:last-child > a {
-  @include gl-text-gray-950;
+  @include gl-text-gray-900;
   @include gl-font-weight-bold;
 }

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

@@ -24,22 +24,19 @@ describe('Breadcrumb component', () => {
   ];
 
   const findAvatarSlot = () => wrapper.find('[data-testid="avatar-slot"]');
-  const findSeparatorSlot = () => wrapper.find('[data-testid="separator-slot"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
-  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');
+    findBreadcrumbItems().wrappers.filter((item) => item.isVisible());
+  const findHiddenBreadcrumbItems = () =>
+    findBreadcrumbItems().wrappers.filter((item) => !item.isVisible());
 
   const createComponent = (propsData = { items }) => {
     wrapper = shallowMount(Breadcrumb, {
       propsData,
       slots: {
         avatar: '<div data-testid="avatar-slot"></div>',
-        separator: '<div data-testid="separator-slot"></div>',
       },
       stubs: {
         GlBreadcrumbItem,
@@ -59,18 +56,6 @@ describe('Breadcrumb component', () => {
 
       expect(findAvatarSlot().exists()).toBe(true);
     });
-
-    it('has a separator slot', () => {
-      createComponent();
-
-      expect(findSeparatorSlot().exists()).toBe(true);
-    });
-
-    it('separator slot is shown only with more than one item', () => {
-      createComponent({ items: [items[0]] });
-
-      expect(findSeparatorSlot().exists()).toBe(false);
-    });
   });
 
   describe('items', () => {
@@ -79,12 +64,6 @@ describe('Breadcrumb component', () => {
 
       expect(findBreadcrumbItems()).toHaveLength(items.length);
     });
-
-    it(`with ${items.length} items has ${items.length - 1} separators`, () => {
-      createComponent();
-
-      expect(findAllSeparators()).toHaveLength(items.length - 1);
-    });
   });
 
   describe('bindings', () => {
@@ -122,9 +101,8 @@ describe('Breadcrumb component', () => {
       beforeEach(() => {
         createComponent();
       });
-      it('should not display collapsed list expander && separator', () => {
+      it('should not display collapsed list expander', () => {
         expect(findCollapsedListExpander().exists()).toBe(false);
-        expect(findExpanderSeparator().exists()).toBe(false);
       });
 
       it('should display all items visible', () => {
@@ -136,9 +114,8 @@ describe('Breadcrumb component', () => {
       beforeEach(() => {
         createComponent({ items: [...items, ...extraItems] });
       });
-      it('should display collapsed list expander && separator', () => {
+      it('should display collapsed list expander', () => {
         expect(findCollapsedListExpander().exists()).toBe(true);
-        expect(findExpanderSeparator().exists()).toBe(true);
       });
 
       it('should display only first && 2 last items and the rest as hidden', () => {

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

@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBreadcrumb } from 'bootstrap-vue';
-import GlIcon from '../icon/icon.vue';
 import GlButton from '../button/button.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
@@ -11,7 +10,6 @@ export const COLLAPSE_AT_SIZE = 4;
 export default {
   components: {
     BBreadcrumb,
-    GlIcon,
     GlButton,
     GlBreadcrumbItem,
   },
@@ -88,49 +86,29 @@ export default {
     <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
-        <!-- eslint-disable-next-line vue/valid-v-for -->
+        <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
         <gl-breadcrumb-item
+          v-show="!isItemCollapsed(index)"
           :ref="isFirstItem(index) ? 'firstItem' : null"
           :text="item.text"
           :href="item.href"
           :to="item.to"
-          :class="{ 'gl-display-none': isItemCollapsed(index) }"
           :aria-current="getAriaCurrentAttr(index)"
+          >{{ item.text }}</gl-breadcrumb-item
         >
-          <span>{{ item.text }}</span>
-          <span
-            v-if="!isLastItem(index)"
-            :key="`${index} ${item.text}`"
-            class="gl-breadcrumb-separator"
-            data-testid="separator"
-          >
-            <!-- @slot The separator to display. -->
-            <slot name="separator">
-              <gl-icon name="chevron-right" />
-            </slot>
-          </span>
-        </gl-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>
+          <!-- eslint-disable-next-line vue/require-v-for-key (for @vue/compat) -->
+          <li class="gl-breadcrumb-item">
+            <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"
+            />
+          </li>
         </template>
       </template>
     </b-breadcrumb>