Skip to content

feat(Breadcrumb): add middle-ellipsis label truncation with ellipsisThreshold prop - #897

Open
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:fix/breadcrumb-middle-ellipsis-846
Open

feat(Breadcrumb): add middle-ellipsis label truncation with ellipsisThreshold prop#897
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:fix/breadcrumb-middle-ellipsis-846

Conversation

@waterWang

Copy link
Copy Markdown

Closes #846

Summary

Add middle-ellipsis label truncation to the Breadcrumb component. When an individual breadcrumb label exceeds the configurable ellipsisThreshold (default 30 chars), it is truncated with a middle ellipsis (e.g. ABCDEFGHIJKLMNOPABCD…NOP).

Changes

  • Add exported middleEllipsis utility function for string truncation
  • Add ellipsisThreshold prop to Breadcrumb (default 30)
  • Apply middle-ellipsis truncation to labels that exceed the threshold
  • Add title attribute with full text for accessibility
  • Support href as alias for to in BreadcrumbItem

Tests

  • All 15 tests in src/components/__tests__/Breadcrumb.test.tsx pass
  • All 8 existing tests in src/components/Breadcrumb.test.tsx pass (no regressions)

…hreshold prop

Add  utility function that truncates long breadcrumb
labels with a middle ellipsis (e.g. 'ABCDEFGHIJKLMNOP' -> 'ABCD…NOP').

- Add  prop to Breadcrumb (default 30)
- Apply middle-ellipsis truncation to individual labels that exceed
  the threshold
- Add  attribute with full text for accessibility
- Support  as alias for  in BreadcrumbItem

Closes Creditra#846
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.

Polish SavingsCard breadcrumb overflow with middle-ellipsis [b#033]

1 participant