refactor(ui5-tag): wrap text by default (#9126)

* refactor(ui5-tag): wrap text by default The text of `ui5-tag` now wraps by default. BREAKING CHANGE: `wrapping-type` property default value has changed from `None` to `Normal`. Before: ```html <ui5-tag>In Process</ui5-tag> ``` Now: ```html <ui5-tag>In Process</ui5-tag> ``` Related to #8461 * refactor(ui5-tag): fix test texsts * refactor(ui5-tag): fix height of the tags to be the same No matter if the tag is with wrapping-type="None" or wrapping-type="Normal" the height when there is only one line of text should be the same. * refactor(ui5-tag): merge adjustments and code review comments * refactor(ui5-tag): fix height
SAP · Jun 12, 2024 · 96704b8 · 96704b8
1 parent e25b090
commit 96704b8
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 56 deletions.
diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
@@ -12,7 +12,7 @@
 	<div class="{{contentClasses}}">
 
 			{{#if hasImportance}}
-				<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2">
+				<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
 					<ui5-icon name="high-priority" slot="icon"></ui5-icon>
 					{{importanceText}}
 				</ui5-tag>

diff --git a/packages/main/src/Tag.ts b/packages/main/src/Tag.ts
@@ -120,11 +120,11 @@ class Tag extends UI5Element {
 	 *
 	 * **Note:** For option "Normal" the text will wrap and the
 	 * words will not be broken based on hyphenation.
-	 * @default "None"
+	 * @default "Normal"
 	 * @public
 	 * @since 1.22.0
 	 */
-	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	@property({ type: WrappingType, defaultValue: WrappingType.Normal })
 	wrappingType!: `${WrappingType}`;
 
 	/**

diff --git a/packages/main/src/themes/Tag.css b/packages/main/src/themes/Tag.css
@@ -19,12 +19,12 @@
 	min-width: 1.125em;
 	max-width: 100%;
 	min-height: var(--_ui5-tag-height);
-	height: var(--_ui5-tag-height);
+	height: auto;
 	box-sizing: border-box;
 	padding: 0 0.25rem;
 	border: 0.0625rem solid;
 	border-radius: var(--sapButton_BorderCornerRadius);
-	white-space: nowrap;
+	white-space: normal;
 	font-size: inherit;
 	font-family: inherit;
 	font-weight: inherit;
@@ -46,9 +46,9 @@
 	outline-offset: 1px;
 }
 
-:host([wrapping-type="Normal"]) .ui5-tag-root {
-	white-space: normal;
-	height: auto;
+:host([wrapping-type="None"]) .ui5-tag-root {
+	white-space: nowrap;
+	height: var(--_ui5-tag-height);
 }
 
 :host([_icon-only]) .ui5-tag-root {
@@ -71,15 +71,15 @@
 ::slotted([ui5-icon]) {
 	width: var(--_ui5-tag-icon-width);
 	min-width: var(--_ui5-tag-icon-width);
-	height: var(--_ui5-tag-height);
-	min-height: var(--_ui5-tag-height);
+	height:  calc(var(--_ui5-tag-height) - 0.125rem); /* remove width of the border since tag root is with box-sizing:border-box*/
 	color: inherit;
 	pointer-events: none;
+	align-self: flex-start;
 }
 
-:host([wrapping-type="Normal"]) [ui5-icon],
-:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) {
-	align-self: flex-start;
+:host([wrapping-type="None"]) [ui5-icon],
+:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
+	align-self: auto;
 }
 
 /* Set3 (BTP) Design Type */

diff --git a/packages/main/test/pages/Tag.html b/packages/main/test/pages/Tag.html
@@ -15,15 +15,14 @@
 	</script>
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 	<link rel="stylesheet" type="text/css" href="./styles/Tag.css">
-	<script src="Tag.js"></script>
 </head>
 
-<body class="tag1auto" onload="initializeTags()">
+<body class="tag1auto">
 	<ui5-title level="H1">Tags</ui5-title>
 <ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
 	<section class="group gaps">
 		<ui5-title level="H2">Custom Tags</ui5-title>
-		<ui5-tag class="width200px">
+		<ui5-tag class="width200px" wrapping-type="None">
 			Default color truncate truncate truncate
 		</ui5-tag>
 		<br>
@@ -39,7 +38,7 @@
 			Interactive
 		</ui5-tag>
 		<br>
-		<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3">
+		<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3" wrapping-type="None">
 			<ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
 		</ui5-tag>
 		<br>
@@ -78,30 +77,36 @@
 		<ui5-tag design="Set1" color-scheme="6">
 			<ui5-icon name="pending" slot="icon"></ui5-icon>Pending
 		</ui5-tag>
-		<ui5-tag design="Set1" wrapping-type="Normal" color-scheme="6">
-			<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="true"
+		<ui5-tag design="Set1" color-scheme="6">
+			<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="Normal"
 		</ui5-tag>
 		<ui5-tag>
-			wrapping-type="true"
+			wrapping-type="Normal"
+		</ui5-tag>
+		<ui5-tag id="tagWithWrappingDefault" design="Set2" class="width200px" color-scheme="6">
+			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
+		</ui5-tag>
+		<ui5-tag id="tagWithWrappingNormal" design="Set2" class="width200px" color-scheme="6">
+			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
 		</ui5-tag>
-		<ui5-tag design="Set1" wrapping-type="Normal" class="width200px" color-scheme="6">
-			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="true"
+		<ui5-tag id="tagWithWrappingNone" design="Set2" wrapping-type="None" class="width200px" color-scheme="6">
+			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="None"
 		</ui5-tag>
-		<ui5-tag wrapping-type="Normal">
+		<ui5-tag>
 			<ui5-icon name="email-read" slot="icon"></ui5-icon>
 		</ui5-tag>
 	</section>
 	<section class="group gaps">
 		<ui5-title level="H2">Large Tags</ui5-title>
-		<ui5-tag id="tagIconOnly" size="L" design="Negative">
+		<ui5-tag id="tagIconOnly" size="L" design="Negative" wrapping-type="None">
 		</ui5-tag>
-		<ui5-tag design="Neutral" size="L">
+		<ui5-tag design="Neutral" size="L" wrapping-type="None">
 			Planned
 		</ui5-tag>
-		<ui5-tag hide-state-icon design="Neutral" size="L">
+		<ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
 			Planned
 		</ui5-tag>
-		<ui5-tag design="Set1" color-scheme="3" size="L">
+		<ui5-tag design="Set1" color-scheme="3" size="L" wrapping-type="None">
 			<ui5-icon name="error" slot="icon"></ui5-icon>
 		</ui5-tag>
 	</section>
@@ -118,56 +123,57 @@
 	<section class="group gaps">
 		<ui5-title level="H2">Value states</ui5-title>
 		<div>
-			<ui5-tag design="Neutral">
+			<ui5-tag design="Neutral" wrapping-type="None">
 				Neutral
 			</ui5-tag>
-			<ui5-tag design="Information">
+			<ui5-tag design="Information" wrapping-type="None">
 				Information
 			</ui5-tag>
-			<ui5-tag design="Positive">
+			<ui5-tag design="Positive" wrapping-type="None">
 				Positive
 			</ui5-tag>
-			<ui5-tag design="Negative">
+			<ui5-tag design="Negative" wrapping-type="None">
 				Negative
 			</ui5-tag>
-			<ui5-tag design="Critical">
+			<ui5-tag design="Critical" wrapping-type="None">
 				Critical
 			</ui5-tag>
 			<br />
 			<br />
-			<ui5-tag hide-state-icon design="Neutral">
+			<ui5-tag hide-state-icon design="Neutral" wrapping-type="None">
 				Neutral - No icon
 			</ui5-tag>
-			<ui5-tag hide-state-icon design="Information">
+			<ui5-tag hide-state-icon design="Information" wrapping-type="None">
 				Information - No icon
 			</ui5-tag>
-			<ui5-tag hide-state-icon design="Positive">
+			<ui5-tag hide-state-icon design="Positive" wrapping-type="None">
 				Positive - No icon
 			</ui5-tag>
-			<ui5-tag hide-state-icon design="Negative">
+			<ui5-tag hide-state-icon design="Negative" wrapping-type="None">
 				Negative - No icon
 			</ui5-tag>
-			<ui5-tag hide-state-icon design="Critical">
+			<ui5-tag hide-state-icon design="Critical" wrapping-type="None">
 				Critical - No icon
 			</ui5-tag>
 			<br />
 			<br />
-			<ui5-tag design="Neutral">
+			<ui5-tag design="Neutral" wrapping-type="None">
 				<ui5-icon name="email-read" slot="icon"></ui5-icon>Neutral - Custom icon
 			</ui5-tag>
-			<ui5-tag design="Information">
+			<ui5-tag design="Information" wrapping-type="None">
 				<ui5-icon name="email-read" slot="icon"></ui5-icon>Information - Custom icon
 			</ui5-tag>
 			<ui5-tag design="Positive">
 				<ui5-icon name="email-read" slot="icon"></ui5-icon>Positive - Custom icon
 			</ui5-tag>
-			<ui5-tag design="Negative">
+			<ui5-tag design="Negative" wrapping-type="None">
 				<ui5-icon name="email-read" slot="icon"></ui5-icon>Negative - Custom icon
 			</ui5-tag>
-			<ui5-tag design="Critical">
+			<ui5-tag design="Critical" wrapping-type="None">
 				<ui5-icon name="email-read" slot="icon"></ui5-icon>Critical - Custom icon
 			</ui5-tag>
 		</div>
 	</section>
+	<script src="Tag.js"></script>
 </body>
 </html>
diff --git a/packages/main/test/pages/Tag.js b/packages/main/test/pages/Tag.js
@@ -1,4 +1,4 @@
-function initializeTags() {
+(function initializeTags() {
 	const colorSchemes = [
 		"1",
 		"2",
@@ -53,4 +53,4 @@ function initializeTags() {
 
 		set2Content.insertAdjacentHTML("beforeend", "<br><br>");
 	});
-}
+})();
diff --git a/packages/main/test/specs/Tag.spec.js b/packages/main/test/specs/Tag.spec.js
@@ -48,3 +48,27 @@ describe("Tag rendering", async () => {
 		assert.notOk(await tagLabel.isExisting(), "tag label tag shouldn't be rendered.");
 	});
 });
+
+describe("Wrapping", async () => {
+	before(async () => {
+		await browser.url(`test/pages/Tag.html`);
+	});
+
+	it("tests if tag text wraps - default wrappingType", async () => {
+		const tag = await browser.$("#tagWithWrappingDefault").shadow$(".ui5-tag-root");
+
+		assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
+	});
+
+	it("tests if tag text wraps - wrappingType Normal", async () => {
+		const tag = await browser.$("#tagWithWrappingNormal").shadow$(".ui5-tag-root");
+
+		assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
+	});
+
+	it("tests if tag text wraps - wrappingType None", async () => {
+		const tag = await browser.$("#tagWithWrappingNone").shadow$(".ui5-tag-root");
+
+		assert.strictEqual((await tag.getCSSProperty("white-space")).value, "nowrap", "tag label is truncated");
+	});
+});
diff --git a/packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html b/packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html
@@ -31,7 +31,7 @@
             <p slot="subheading" class="text">PO-48865</p>
             <p slot="snappedSubheading" class="text">PO-48865</p>
 
-            <ui5-tag color-scheme="7">Special 157.4M EUR</ui5-tag>
+            <ui5-tag color-scheme="7" wrapping-type="None">Special 157.4M EUR</ui5-tag>
 
             <ui5-toolbar id="actionsToolbar" slot="actionsBar">
                 <ui5-toolbar-button text="Create"></ui5-toolbar-button>

diff --git a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html
@@ -12,7 +12,7 @@
     <!-- playground-fold-end -->
 
     <ui5-avatar initials="AB">
-        <ui5-tag slot="badge">
+        <ui5-tag slot="badge" wrapping-type="None">
             <ui5-icon slot="icon" name="accelerated"></ui5-icon>
         </ui5-tag>
     </ui5-avatar>

diff --git a/packages/website/docs/_samples/main/Tag/Designs/sample.html b/packages/website/docs/_samples/main/Tag/Designs/sample.html
@@ -12,25 +12,25 @@
     <!-- playground-fold-end -->
 
     <div style="display: flex; flex-direction: column; align-items: start; gap: 1rem">
-        <ui5-tag design="Neutral">
+        <ui5-tag design="Neutral" wrapping-type="None">
             Neutral
         </ui5-tag>
-        <ui5-tag design="Information">
+        <ui5-tag design="Information" wrapping-type="None">
             Information
         </ui5-tag>
-        <ui5-tag design="Positive">
+        <ui5-tag design="Positive" wrapping-type="None">
             Positive
         </ui5-tag>
-        <ui5-tag design="Negative">
+        <ui5-tag design="Negative" wrapping-type="None">
             Negative
         </ui5-tag>
-        <ui5-tag design="Critical">
+        <ui5-tag design="Critical" wrapping-type="None">
             Critical
         </ui5-tag>
-        <ui5-tag design="Set1">
+        <ui5-tag design="Set1" wrapping-type="None">
             Set1
         </ui5-tag>
-        <ui5-tag design="Set2">
+        <ui5-tag design="Set2" wrapping-type="None">
             Set2
         </ui5-tag>
     </div>

diff --git a/packages/website/docs/_samples/main/Tag/Interactive/sample.html b/packages/website/docs/_samples/main/Tag/Interactive/sample.html
@@ -11,7 +11,7 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-    <ui5-tag design="Positive" interactive>
+    <ui5-tag design="Positive" interactive wrapping-type="None">
         Success
     </ui5-tag>
     <!-- playground-fold -->

diff --git a/packages/website/docs/_samples/main/Tag/Size/sample.html b/packages/website/docs/_samples/main/Tag/Size/sample.html
@@ -12,10 +12,10 @@
     <!-- playground-fold-end -->
 
     <div style="display: flex; flex-direction: row; align-items: start; gap: 1rem">
-        <ui5-tag hide-state-icon design="Neutral" size="L">
+        <ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
 			Planned
 		</ui5-tag>
-		<ui5-tag design="Negative" size="L"></ui5-tag>
+		<ui5-tag design="Negative" size="L" wrapping-type="None"></ui5-tag>
     </div>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>

diff --git a/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html b/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html
@@ -15,7 +15,7 @@
         <ui5-tag wrapping-type="None" style="width: 200px;">
             This would truncate as it is too long
         </ui5-tag>
-        <ui5-tag wrapping-type="Normal" style="width: 200px;">
+        <ui5-tag style="width: 200px;">
             This would wrap as it is too long
         </ui5-tag>
     </div>