Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Improve breadcrumb group responsivness #3025

Merged
merged 17 commits into from
Dec 9, 2024

Conversation

gethinwebster
Copy link
Member

@gethinwebster gethinwebster commented Nov 18, 2024

Description

Improves breadcrumb group responsiveness so that:

  1. Links are not truncated (only the final, non-link item can be truncated) due to challenges with tooltips on interactive elements
  2. All items are collapsed into a dropdown when insufficient space is available

Related links, issue #, if available: 3SICARmRNK32

How has this been tested?

Updated unit and integ tests

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Nov 18, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.36%. Comparing base (3c11f26) to head (88759d0).
Report is 6 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3025      +/-   ##
==========================================
+ Coverage   96.35%   96.36%   +0.01%     
==========================================
  Files         779      781       +2     
  Lines       21925    21935      +10     
  Branches     7112     7521     +409     
==========================================
+ Hits        21125    21138      +13     
+ Misses        793      790       -3     
  Partials        7        7              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

src/button-dropdown/item-element/styles.scss Outdated Show resolved Hide resolved
src/breadcrumb-group/utils.ts Outdated Show resolved Hide resolved
src/breadcrumb-group/utils.ts Outdated Show resolved Hide resolved
src/breadcrumb-group/full-dropdown.tsx Outdated Show resolved Hide resolved
src/breadcrumb-group/full-dropdown.tsx Outdated Show resolved Hide resolved
src/breadcrumb-group/full-dropdown.tsx Outdated Show resolved Hide resolved
src/breadcrumb-group/implementation.tsx Outdated Show resolved Hide resolved
src/breadcrumb-group/styles.scss Outdated Show resolved Hide resolved
src/breadcrumb-group/__tests__/utils.test.ts Show resolved Hide resolved
src/breadcrumb-group/__tests__/full-dropdown.test.tsx Outdated Show resolved Hide resolved
@@ -258,6 +258,7 @@ export interface ItemProps {

export interface InternalItem extends ButtonDropdownProps.Item {
badge?: boolean;
isCurrentPage?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think it worths adding a doc comment to the new isCurrentPage and fullWidth to explain the purpose.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update: is isCurrentPage used? I think it was replaced by the isCurrentBreadcrumb, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch! took the opportunity to deduplicate these interfaces a bit too

// SPDX-License-Identifier: Apache-2.0
import clsx from 'clsx';

export const spinWhenOpen = (styles: Record<string, string>, className: string, open: boolean) =>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice 👍

pan-kot
pan-kot previously approved these changes Nov 29, 2024
@gethinwebster gethinwebster added this pull request to the merge queue Dec 9, 2024
@gethinwebster gethinwebster removed this pull request from the merge queue due to a manual request Dec 9, 2024
@gethinwebster gethinwebster added this pull request to the merge queue Dec 9, 2024
Merged via the queue into main with commit 336bcf6 Dec 9, 2024
39 checks passed
@gethinwebster gethinwebster deleted the dev-v3-gethinw-breadcrumb-mobile branch December 9, 2024 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants