fix(ui5-breadcrumbs): enable current location text truncation

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

@@ -886,6 +886,62 @@ describe("Breadcrumbs general interaction", () => {
 				"Max stack of calling not hit for invalidation of control").to.equal(1);
 		});
 	});
+
+	it("current location link truncates", () => {
+		cy.mount(
+			<>
+				<div style={{ width: "900px" }}>
+					<Breadcrumbs id="breadcrumbs1">
+							<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+							<BreadcrumbsItem href="#">Link2</BreadcrumbsItem>
+					</Breadcrumbs>
+				</div>
+				<div style={{ width: "300px" }}>
+					<Breadcrumbs id="breadcrumbs2">
+						<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+						<BreadcrumbsItem href="#">Link2</BreadcrumbsItem>
+						<BreadcrumbsItem href="#">Link3</BreadcrumbsItem>
+						<BreadcrumbsItem href="#">Link4</BreadcrumbsItem>
+						<BreadcrumbsItem href="#">Link5</BreadcrumbsItem>
+						<BreadcrumbsItem href="#">Link6</BreadcrumbsItem>
+						<BreadcrumbsItem id="currentLocation">This is a very long current location text that should be truncated</BreadcrumbsItem>
+					</Breadcrumbs>
+				</div>
+			</>
+		);
+
+		// assert that last link in the narrow Breadcrumbs is truncated
+		cy.get("#breadcrumbs2")
+			.shadow()
+			.find("li:last-child")
+			.then(($lastLink) => {
+				const linkRect = $lastLink[0].getBoundingClientRect();
+				const maxExpectedWidth = 300;
+
+				expect(linkRect.width, "link wrapper should be shrinkable and less than parent width")
+					.to.be.lessThan(maxExpectedWidth);
+		});
+
+		// assert that height of both Breadcrumbs (one that fits and one that truncates)
+		// is the same
+		cy.get("#breadcrumbs1")
+			.then(($breadcrumbs1) => {
+				const breadcrumbs1DOMRef = ($breadcrumbs1[0] as Breadcrumbs).getDomRef();
+				const breadcrumbs1Rect = breadcrumbs1DOMRef.getBoundingClientRect();
+				const breadcrumbs1Height = breadcrumbs1Rect.height;
+
+
+				cy.get("#breadcrumbs2")
+					.then(($breadcrumbs2) => {
+						const breadcrumbs2DOMRef = ($breadcrumbs2[0] as Breadcrumbs).getDomRef();
+						const breadcrumbs2Rect = breadcrumbs2DOMRef.getBoundingClientRect();
+						const breadcrumbs2Height = breadcrumbs2Rect.height;
+
+						expect(breadcrumbs2Height, "link height should remain the same")
+							.to.be.equal(breadcrumbs1Height);
+				});
+		});
+	});
 });
 
 describe("Breadcrumbs with item for current page", () => {

packages/main/src/BreadcrumbsTemplate.tsx

@@ -56,7 +56,7 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>
-							<Label>
+							<Label wrappingType="None">
 								{this._currentLocationText}
 							</Label>
 						</span>

packages/main/src/themes/Breadcrumbs.css

@@ -23,13 +23,17 @@
 }
 
 .ui5-breadcrumbs-current-location {
-    min-width: 1%;
     flex: 1 1 auto;
     /* Fix extra height in ul -> li element */
     font-size: 0;
     align-self: center;
 }
 
+.ui5-breadcrumbs-current-location,
+.ui5-breadcrumbs-link-wrapper:last-child {
+	min-width: 1%;
+}
+
 .ui5-breadcrumbs-current-location > span:focus {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
     border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);

packages/main/test/pages/Breadcrumbs.html

@@ -164,6 +164,41 @@ <h2>Breadcrumbs with hardcoded width</h2>
 		<ui5-breadcrumbs-item>Bourgogne-Franche-Comté</ui5-breadcrumbs-item>
 	</ui5-breadcrumbs>
 
+	<h2>Breadcrumbs with hardcoded width: 900px with all links fit</h2>
+	<div style="width: 900px;"></div>
+		<ui5-breadcrumbs>
+			<ui5-breadcrumbs-item href="#">Link1</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item>Link2</ui5-breadcrumbs-item>
+		</ui5-breadcrumbs>
+	</div>
+
+	<h2>Breadcrumbs with hardcoded width: 300px and long current location</h2>
+	<div style="width: 300px;">
+		<ui5-breadcrumbs design="Standard">
+			<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item>This is a very long current location text that should be truncated</ui5-breadcrumbs-item>
+		</ui5-breadcrumbs>
+	</div>
+
+	<h2>Breadcrumbs with hardcoded width: 300px and design="NoCurrentPage"</h2>
+	<div style="width: 300px;">
+		<ui5-breadcrumbs design="NoCurrentPage">
+			<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item>This is a very long current location text that should be truncated</ui5-breadcrumbs-item>
+		</ui5-breadcrumbs>
+	</div>
 
 	<script>
 		// HCB button