Skip to content

Commit 1014b34

Browse files
CopilotCopilot
authored
fix(ui5-breadcrumbs): enable current location text truncation (#12220)
The fix addresses issue #12219. Previously the current location used to wrap, while now it truncates with ellipsis when space is limited, maintaining single-line breadcrumb layout. Fixes: #12219
1 parent 78ef431 commit 1014b34

File tree

4 files changed

+97
-2
lines changed

4 files changed

+97
-2
lines changed

‎packages/main/cypress/specs/Breadcrumbs.cy.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -886,6 +886,62 @@ describe("Breadcrumbs general interaction", () => {
886886
"Max stack of calling not hit for invalidation of control").to.equal(1);
887887
});
888888
});
889+
890+
it("current location link truncates", () => {
891+
cy.mount(
892+
<>
893+
<div style={{ width: "900px" }}>
894+
<Breadcrumbs id="breadcrumbs1">
895+
<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
896+
<BreadcrumbsItem href="#">Link2</BreadcrumbsItem>
897+
</Breadcrumbs>
898+
</div>
899+
<div style={{ width: "300px" }}>
900+
<Breadcrumbs id="breadcrumbs2">
901+
<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
902+
<BreadcrumbsItem href="#">Link2</BreadcrumbsItem>
903+
<BreadcrumbsItem href="#">Link3</BreadcrumbsItem>
904+
<BreadcrumbsItem href="#">Link4</BreadcrumbsItem>
905+
<BreadcrumbsItem href="#">Link5</BreadcrumbsItem>
906+
<BreadcrumbsItem href="#">Link6</BreadcrumbsItem>
907+
<BreadcrumbsItem id="currentLocation">This is a very long current location text that should be truncated</BreadcrumbsItem>
908+
</Breadcrumbs>
909+
</div>
910+
</>
911+
);
912+
913+
// assert that last link in the narrow Breadcrumbs is truncated
914+
cy.get("#breadcrumbs2")
915+
.shadow()
916+
.find("li:last-child")
917+
.then(($lastLink) => {
918+
const linkRect = $lastLink[0].getBoundingClientRect();
919+
const maxExpectedWidth = 300;
920+
921+
expect(linkRect.width, "link wrapper should be shrinkable and less than parent width")
922+
.to.be.lessThan(maxExpectedWidth);
923+
});
924+
925+
// assert that height of both Breadcrumbs (one that fits and one that truncates)
926+
// is the same
927+
cy.get("#breadcrumbs1")
928+
.then(($breadcrumbs1) => {
929+
const breadcrumbs1DOMRef = ($breadcrumbs1[0] as Breadcrumbs).getDomRef();
930+
const breadcrumbs1Rect = breadcrumbs1DOMRef.getBoundingClientRect();
931+
const breadcrumbs1Height = breadcrumbs1Rect.height;
932+
933+
934+
cy.get("#breadcrumbs2")
935+
.then(($breadcrumbs2) => {
936+
const breadcrumbs2DOMRef = ($breadcrumbs2[0] as Breadcrumbs).getDomRef();
937+
const breadcrumbs2Rect = breadcrumbs2DOMRef.getBoundingClientRect();
938+
const breadcrumbs2Height = breadcrumbs2Rect.height;
939+
940+
expect(breadcrumbs2Height, "link height should remain the same")
941+
.to.be.equal(breadcrumbs1Height);
942+
});
943+
});
944+
});
889945
});
890946

891947
describe("Breadcrumbs with item for current page", () => {

‎packages/main/src/BreadcrumbsTemplate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
5656
aria-current="page"
5757
aria-label={this._currentLocationAccName}
5858
>
59-
<Label>
59+
<Label wrappingType="None">
6060
{this._currentLocationText}
6161
</Label>
6262
</span>

‎packages/main/src/themes/Breadcrumbs.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,17 @@
2323
}
2424

2525
.ui5-breadcrumbs-current-location {
26-
min-width: 1%;
2726
flex: 1 1 auto;
2827
/* Fix extra height in ul -> li element */
2928
font-size: 0;
3029
align-self: center;
3130
}
3231

32+
.ui5-breadcrumbs-current-location,
33+
.ui5-breadcrumbs-link-wrapper:last-child {
34+
min-width: 1%;
35+
}
36+
3337
.ui5-breadcrumbs-current-location > span:focus {
3438
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
3539
border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);

‎packages/main/test/pages/Breadcrumbs.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,41 @@ <h2>Breadcrumbs with hardcoded width</h2>
164164
<ui5-breadcrumbs-item>Bourgogne-Franche-Comté</ui5-breadcrumbs-item>
165165
</ui5-breadcrumbs>
166166

167+
<h2>Breadcrumbs with hardcoded width: 900px with all links fit</h2>
168+
<div style="width: 900px;"></div>
169+
<ui5-breadcrumbs>
170+
<ui5-breadcrumbs-item href="#">Link1</ui5-breadcrumbs-item>
171+
<ui5-breadcrumbs-item>Link2</ui5-breadcrumbs-item>
172+
</ui5-breadcrumbs>
173+
</div>
174+
175+
<h2>Breadcrumbs with hardcoded width: 300px and long current location</h2>
176+
<div style="width: 300px;">
177+
<ui5-breadcrumbs design="Standard">
178+
<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
179+
<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
180+
<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
181+
<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
182+
<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
183+
<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
184+
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
185+
<ui5-breadcrumbs-item>This is a very long current location text that should be truncated</ui5-breadcrumbs-item>
186+
</ui5-breadcrumbs>
187+
</div>
188+
189+
<h2>Breadcrumbs with hardcoded width: 300px and design="NoCurrentPage"</h2>
190+
<div style="width: 300px;">
191+
<ui5-breadcrumbs design="NoCurrentPage">
192+
<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
193+
<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
194+
<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
195+
<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
196+
<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
197+
<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
198+
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
199+
<ui5-breadcrumbs-item>This is a very long current location text that should be truncated</ui5-breadcrumbs-item>
200+
</ui5-breadcrumbs>
201+
</div>
167202

168203
<script>
169204
// HCB button

0 commit comments

Comments
 (0)