From b58ba764e40ee70eace928f4ffa849eeafff0455 Mon Sep 17 00:00:00 2001 From: Thomas Hutterer Date: Fri, 8 Sep 2023 16:53:41 +0200 Subject: [PATCH 1/2] feat(GlBreadcrumb): Always show as many breadcrumbs as possible ... and show the rest in a dropdown. --- cypress/e2e/breadcrumb.cy.js | 31 +++ .../base/breadcrumb/breadcrumb.scss | 9 +- .../base/breadcrumb/breadcrumb.spec.js | 116 +++++++---- .../base/breadcrumb/breadcrumb.stories.js | 19 +- src/components/base/breadcrumb/breadcrumb.vue | 196 ++++++++++++------ ...base-breadcrumb-collapsed-items-1-snap.png | Bin 15946 -> 14893 bytes translations.json | 1 + 7 files changed, 260 insertions(+), 112 deletions(-) create mode 100644 cypress/e2e/breadcrumb.cy.js diff --git a/cypress/e2e/breadcrumb.cy.js b/cypress/e2e/breadcrumb.cy.js new file mode 100644 index 0000000000..406decb8ef --- /dev/null +++ b/cypress/e2e/breadcrumb.cy.js @@ -0,0 +1,31 @@ +describe('GlBreadcrumb', () => { + describe('on a wide screen', () => { + beforeEach(() => { + cy.viewport(2000, 600); + cy.visitStory('base/breadcrumb'); + }); + + it('shows all breadcrumb items', () => { + cy.contains('First item'); + cy.contains('Fourth item'); + }); + + it('does not show the dropdown toggle', () => { + cy.get('[data-testid="base-dropdown-toggle"]').should('not.exist'); + }); + }); + + describe('on a small screen', () => { + beforeEach(() => { + cy.viewport(300, 600); + cy.visitStory('base/breadcrumb'); + }); + + it('moves overflowing breadcrumbs into a dropdown', () => { + cy.contains('Fourth item').should('be.visible'); + cy.contains('First item').should('not.be.visible'); + cy.get('[data-testid="base-dropdown-toggle"]').click(); + cy.contains('First item').should('be.visible'); + }); + }); +}); diff --git a/src/components/base/breadcrumb/breadcrumb.scss b/src/components/base/breadcrumb/breadcrumb.scss index d592816b09..140cca88a7 100755 --- a/src/components/base/breadcrumb/breadcrumb.scss +++ b/src/components/base/breadcrumb/breadcrumb.scss @@ -11,15 +11,15 @@ $breadcrumb-max-width: $grid-size * 16; @include gl-align-items-center; @include gl-line-height-normal; @include gl-m-0; - @include media-breakpoint-down(xs) { - @include gl-flex-wrap; - } + @include gl-flex-nowrap; + @include gl-max-w-full; } // bootstrap overrides .gl-breadcrumb-item { @include gl-font-sm; @include gl-line-height-normal; + @include gl-flex-shrink-0; &:not(:last-child)::after { @include gl-text-gray-200; @@ -29,9 +29,6 @@ $breadcrumb-max-width: $grid-size * 16; > a { @include gl-text-gray-700; - @include media-breakpoint-down(xs) { - @include str-truncated($breadcrumb-max-width); - } &:active, &:focus, diff --git a/src/components/base/breadcrumb/breadcrumb.spec.js b/src/components/base/breadcrumb/breadcrumb.spec.js index 1eab5cd63a..34ff23b697 100644 --- a/src/components/base/breadcrumb/breadcrumb.spec.js +++ b/src/components/base/breadcrumb/breadcrumb.spec.js @@ -1,15 +1,20 @@ -import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { mount } from '@vue/test-utils'; import avatarPath1 from '../../../../static/img/avatar.png'; import avatarPath3 from '../../../../static/img/avatar_1.png'; -import GlBreadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue'; +import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue'; +import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue'; +import GlBreadcrumb from './breadcrumb.vue'; import GlBreadcrumbItem from './breadcrumb_item.vue'; describe('Breadcrumb component', () => { let wrapper; const items = [ - { text: 'first_breadcrumb', href: 'https://gitlab.com', avatarPath: avatarPath1 }, + { + text: 'first_breadcrumb', + href: 'https://gitlab.com', + avatarPath: avatarPath1, + }, { text: 'second_breadcrumb', to: 'to_value', @@ -21,41 +26,44 @@ describe('Breadcrumb component', () => { }, ]; - const extraItems = [ - { text: 'fourth_breadcrumb', href: 'https://gitlab.com' }, - { - text: 'fifth_breadcrumb', - to: 'to_value', - }, - ]; - const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]'); const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem); - const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]'); + const findOverflowDropdown = () => wrapper.findComponent(GlDisclosureDropdown); const findVisibleBreadcrumbItems = () => findBreadcrumbItems().wrappers.filter((item) => item.isVisible()); - const findHiddenBreadcrumbItems = () => - findBreadcrumbItems().wrappers.filter((item) => !item.isVisible()); const createComponent = (propsData = { items }) => { - wrapper = shallowMount(GlBreadcrumb, { + wrapper = mount(GlBreadcrumb, { propsData, stubs: { GlBreadcrumbItem, + GlDisclosureDropdown, }, }); + }; + + const mockWrapperWidth = (widthInPx) => { + wrapper.element.style.width = `${widthInPx}px`; + + Object.defineProperty(wrapper.element, 'clientWidth', { + get: () => widthInPx, + configurable: true, + }); + }; - wrapper.vm.$refs.firstItem = [ - { - querySelector: () => ({ focus: jest.fn() }), - }, - ]; + const mockWideWrapperWidth = () => { + mockWrapperWidth(1000); + }; + + const mockSmallWrapperWidth = () => { + mockWrapperWidth(1); }; describe('items', () => { - it('has one breadcrumb-item for each item in the items props', () => { + it('has one breadcrumb-item for each item in the items props', async () => { createComponent(); + await wrapper.vm.$nextTick(); expect(findBreadcrumbItems()).toHaveLength(items.length); }); @@ -75,9 +83,36 @@ describe('Breadcrumb component', () => { }); }); + describe('showMoreLabel', () => { + describe('when provided', () => { + beforeEach(async () => { + createComponent({ items, showMoreLabel: 'More...' }); + mockSmallWrapperWidth(); + await wrapper.vm.$nextTick(); + }); + + it('uses prop', () => { + expect(findOverflowDropdown().props('toggleText')).toBe('More...'); + }); + }); + + describe('when not provided', () => { + beforeEach(async () => { + createComponent(); + mockSmallWrapperWidth(); + await wrapper.vm.$nextTick(); + }); + + it('uses default', () => { + expect(findOverflowDropdown().props('toggleText')).toBe('Show more breadcrumbs'); + }); + }); + }); + describe('avatars', () => { - it('renders 2 avatars when 2 avatarPaths are passed', () => { + it('renders 2 avatars when 2 avatarPaths are passed', async () => { createComponent(); + await wrapper.vm.$nextTick(); expect(findAllAvatars()).toHaveLength(2); }); @@ -86,6 +121,7 @@ describe('Breadcrumb component', () => { describe('bindings', () => { beforeEach(() => { createComponent(); + mockWideWrapperWidth(); }); it('first breadcrumb has text, href && ariaCurrent=`false` bound', () => { @@ -114,12 +150,14 @@ describe('Breadcrumb component', () => { }); describe('collapsible', () => { - describe(`when breadcrumbs list size is NOT larger than ${COLLAPSE_AT_SIZE}`, () => { + describe(`when there is enough room to fit all items`, () => { beforeEach(() => { createComponent(); + mockWideWrapperWidth(); }); + it('should not display collapsed list expander', () => { - expect(findCollapsedListExpander().exists()).toBe(false); + expect(findOverflowDropdown().exists()).toBe(false); }); it('should display all items visible', () => { @@ -127,27 +165,21 @@ describe('Breadcrumb component', () => { }); }); - describe(`when breadcrumbs list size is larger than ${COLLAPSE_AT_SIZE}`, () => { - beforeEach(() => { - createComponent({ items: [...items, ...extraItems] }); - }); - it('should display collapsed list expander', () => { - expect(findCollapsedListExpander().exists()).toBe(true); + describe(`when there is NOT enough room to fit all items`, () => { + beforeEach(async () => { + createComponent(); + mockSmallWrapperWidth(); + await wrapper.vm.$nextTick(); }); - 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 display overflow dropdown', () => { + expect(findOverflowDropdown().exists()).toBe(true); }); - it('should expand the list on expander click', async () => { - findCollapsedListExpander().vm.$emit('click'); - await nextTick(); - expect(findHiddenBreadcrumbItems()).toHaveLength(0); - expect(findVisibleBreadcrumbItems()).toHaveLength(items.length + extraItems.length); + it('moves the overflowing items into the dropdown', () => { + const fittingItems = findBreadcrumbItems().length; + const overflowingItems = wrapper.findAllComponents(GlDisclosureDropdownItem).length; + expect(fittingItems + overflowingItems).toEqual(items.length); }); }); }); diff --git a/src/components/base/breadcrumb/breadcrumb.stories.js b/src/components/base/breadcrumb/breadcrumb.stories.js index eadac915d7..65af2f5f49 100644 --- a/src/components/base/breadcrumb/breadcrumb.stories.js +++ b/src/components/base/breadcrumb/breadcrumb.stories.js @@ -10,6 +10,15 @@ const template = ` /> `; +const collapsedTemplate = ` +
+ +
+`; + const defaultItems = [ { text: 'First item', @@ -45,6 +54,14 @@ const Template = (args, { argTypes }) => ({ export const Default = Template.bind({}); Default.args = generateProps(); +const CollapsedTemplate = (args, { argTypes }) => ({ + components: { + GlBreadcrumb, + }, + props: Object.keys(argTypes), + template: collapsedTemplate, +}); + export default { title: 'base/breadcrumb', component: GlBreadcrumb, @@ -77,5 +94,5 @@ const extraItems = [ }, ]; -export const CollapsedItems = Template.bind({}); +export const CollapsedItems = CollapsedTemplate.bind({}); CollapsedItems.args = generateProps({ items: [...defaultItems, ...extraItems] }); diff --git a/src/components/base/breadcrumb/breadcrumb.vue b/src/components/base/breadcrumb/breadcrumb.vue index 24ca09b60e..a53ac6b127 100644 --- a/src/components/base/breadcrumb/breadcrumb.vue +++ b/src/components/base/breadcrumb/breadcrumb.vue @@ -1,20 +1,20 @@ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-breadcrumb-collapsed-items-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-breadcrumb-collapsed-items-1-snap.png index 6f45b3093c18ccddeee3235ea2dfc9dda1a6f82e..ab58c1a349a5afdb70bfc492df06a9ecce72d440 100644 GIT binary patch literal 14893 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 diff --git a/translations.json b/translations.json index 839bc3d28d..c4927f2cca 100644 --- a/translations.json +++ b/translations.json @@ -4,5 +4,6 @@ "GlSorting.sortDescending": "Sort direction: descending", "GlSearchBoxByType.clearButtonTitle": "Clear", "GlSearchBoxByType.input.placeholder": "Search", + "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs", "GlCollapsibleListbox.srOnlyResultsLabel": "Results count" } -- GitLab From 6aef29519a86cbc187218ebe34437e98ddcdebd1 Mon Sep 17 00:00:00 2001 From: Thomas Hutterer Date: Wed, 28 Feb 2024 09:02:56 +0100 Subject: [PATCH 2/2] fix(GlDisclosureDropdown): Prevent unwanted slot overrides in Vue 3 --- .../base/new_dropdowns/disclosure/disclosure_dropdown.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue index 118f573b56..6784026ada 100644 --- a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +++ b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue @@ -404,7 +404,7 @@ export default {