@gitlab/ui 58.8.0 → 59.1.0

package/package.json

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

package/src/components/base/badge/badge.md

@@ -4,7 +4,9 @@ indicate an issue’s status, a member’s role, or if a branch is protected.
 
 ## Usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-badge>Hello, world!</gl-badge>
 ```
 

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>

package/src/components/base/button/button.md

@@ -19,7 +19,9 @@ with the necessary classes added to make it look like a button, it shares the sa
 Icon-only buttons must have an accessible name.
 You can provide one with the `aria-label` attribute, which is read out by screen readers.
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-button icon="close" aria-label="Close" />
 ```
 

package/src/components/base/filtered_search/filtered_search.md

@@ -59,6 +59,8 @@ const availableTokens = [
 Pass the list of tokens to the search component. Optionally, you can use `v-model` to receive
 realtime updates:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-filtered-search :available-tokens="tokens" v-model="value" />
 ```

package/src/components/base/keyset_pagination/keyset_pagination.md

@@ -10,7 +10,9 @@ is to `v-bind` to the
 [`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type
 returned by the endpoint:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-keyset-pagination v-bind="pageInfo" />
 ```
 
@@ -25,7 +27,9 @@ can't be translated.
 
 Example:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
 ```
 

package/src/components/base/markdown/markdown.md

@@ -40,7 +40,9 @@ selector to the root element that contains the markdown-generated HTML.
 
 Set the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-markdown compact></gl-compact>
 ```
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -4,7 +4,9 @@ to make sure this is the right dropdown component for you.
 
 ### Basic usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-disclosure-dropdown-dropdown toggle-text="Actions" :items="items" />
 ```
 

package/src/components/utilities/friendly_wrap/friendly_wrap.md

@@ -21,13 +21,17 @@ wbr {
 By default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially
 useful when displaying paths or URLs:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-friendly-wrap text="/some/file/path" />
 ```
 
 The code above renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>
 ```
 
@@ -44,7 +48,9 @@ Multiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:
 
 Which renders to:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>
 ```
 
@@ -61,6 +67,8 @@ Symbols can be words too:
 
 Which renders to:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>
 ```

package/src/components/utilities/intersperse/intersperse.md

@@ -34,7 +34,9 @@ consistent formatting.
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>
 ```
 
@@ -52,7 +54,9 @@ A custom separator can be defined via the `separator` prop:
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>
 ```
 
@@ -70,7 +74,9 @@ A custom last separator can be defined via the `lastSeparator` prop:
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>
 ```
 
@@ -85,6 +91,8 @@ A custom last separator used on two items will only place `lastSeparator` betwee
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span> and <span>Item 2</span></span>
 ```

package/src/components/utilities/sprintf/sprintf.md

@@ -130,7 +130,9 @@ export default {
 
 The example above renders to this HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <div>Written by <span>Some author</span></div>
 ```
 

package/src/components/utilities/truncate/truncate.md

@@ -4,7 +4,9 @@ The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
 ## Usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-truncate :text="text" :position="position" />
 ```
 

package/src/directives/safe_html/safe_html.md

@@ -46,7 +46,9 @@ const config = { ALLOWED_TAGS: ['b'] };
 const config = { ALLOWED_TAGS: [] };
 ```
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <div v-safe-html:[config]="rawHtml"></div>
 ```
 

package/src/scss/utilities.scss

@@ -482,6 +482,10 @@
   background-color: $t-gray-a-08
 }
 
+.gl-focus-bg-t-gray-a-08:focus {
+  background-color: $t-gray-a-08
+}
+
 .gl-bg-t-gray-a-08\! {
   background-color: $t-gray-a-08 !important
 }
@@ -490,6 +494,10 @@
   background-color: $t-gray-a-08 !important
 }
 
+.gl-focus-bg-t-gray-a-08\!:focus {
+  background-color: $t-gray-a-08 !important
+}
+
 .gl-bg-theme-indigo-50 {
   background-color: $theme-indigo-50
 }

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

@@ -174,7 +174,7 @@
   background-color: $red-700;
 }
 
-@mixin gl-bg-t-gray-a-08($hover: true) {
+@mixin gl-bg-t-gray-a-08($hover: true, $focus: true) {
   background-color: $t-gray-a-08;
 }