fix(ui5-badge): add wrapping mode

SAP · Nov 24, 2023 · d39c743 · d39c743
1 parent 3f9b174
commit d39c743
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 40 deletions.
diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css
@@ -2,13 +2,12 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
+	line-height: 0;
 }
 
 .ui5-badge-root {
-	display: flex;
-	align-items: center;
+	display: inline-block;
 	width: 100%;
-	height: var(--_ui5-badge-height);
 	min-width: 1.125em;
 	max-width: 100%;
 	box-sizing: border-box;
@@ -18,8 +17,9 @@
 	font-family: var(--_ui5-badge-font);
 	font-weight: var(--_ui5-badge-font-weight);
 	text-align: center;
-	letter-spacing: var(--_ui5-badge-letter-spacing);
 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 :host([interactive]) .ui5-badge-root {
@@ -32,41 +32,19 @@
 	outline-offset: 1px;
 }
 
-:host([wrapping-type="Normal"]) {
-	line-height: 0;
-}
-
 :host([wrapping-type="Normal"]) .ui5-badge-root {
-	height: auto;
-	display: inline-block;
-	overflow: hidden;
 	white-space: normal;
-	text-overflow: ellipsis;
 	text-align: left;
 }
 
-:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) {
-	height: var(--_ui5-badge-height);
-	min-height: var(--_ui5-badge-height);
-	vertical-align: bottom;
-}
-
-:host([wrapping-type="Normal"]) .ui5-badge-root .ui5-badge-text {
-	line-height: var(--_ui5-badge-height);
-	vertical-align: center;
-	white-space: normal;
-}
-
 .ui5-badge-text {
-	width: 100%;
-	overflow: hidden;
-	white-space: nowrap;
 	font-weight: inherit;
-	text-overflow: ellipsis;
 	text-transform: var(--_ui5-badge-text-transform);
-	letter-spacing: inherit;
 	font-size: var(--_ui5-badge-font-size);
 	pointer-events: none;
+	line-height: var(--_ui5-badge-height);
+	vertical-align: center;
+	letter-spacing: var(--_ui5-badge-letter-spacing);
 }
 
 :host([_icon-only]) {
@@ -76,15 +54,16 @@
 [ui5-icon],
 ::slotted([ui5-icon]) {
 	width: 0.75em;
-	height: 0.75em;
 	min-width: 0.75em;
-	min-height: 0.75em;
+	height: var(--_ui5-badge-height);
+	min-height: var(--_ui5-badge-height);
 	color: inherit;
 	pointer-events: none;
+	vertical-align: bottom;
 }
 
 :host([_has-icon]) .ui5-badge-text {
-	padding-inline-start: var(--_ui5-badge-icon-gap);
+	margin-inline-start: var(--_ui5-badge-icon-gap);
 }
 
 /* Color Scheme Design Type */

diff --git a/packages/main/src/themes/base/Badge-parameters.css b/packages/main/src/themes/base/Badge-parameters.css
@@ -5,6 +5,7 @@
 	--_ui5-badge-padding-inline: 0.3125em;
 	--_ui5-badge-padding-inline-icon-only: 0.1875rem;
 	--_ui5-badge-text-transform: uppercase;
+	--_ui5-badge-icon-height: 0.75em;
 	--_ui5-badge-icon-gap: 0.125rem;
 	--_ui5-badge-font-size: var(--sapFontSmallSize);
 	--_ui5-badge-font: "72override", var(--sapFontFamily);

diff --git a/packages/main/src/themes/sap_horizon/Badge-parameters.css b/packages/main/src/themes/sap_horizon/Badge-parameters.css
@@ -7,6 +7,7 @@
 	--_ui5-badge-padding-inline: 0.375em;
 	--_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline);
 	--_ui5-badge-text-transform: none;
+	--_ui5-badge-icon-height: 1rem;
 	--_ui5-badge-icon-gap: 0.25rem;
 	--_ui5-badge-font-size: var(--sapFontSize);
 	--_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily);

diff --git a/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css b/packages/main/src/themes/sap_horizon_dark/Badge-parameters.css
@@ -7,6 +7,7 @@
 	--_ui5-badge-padding-inline: 0.375em;
 	--_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline);
 	--_ui5-badge-text-transform: none;
+	--_ui5-badge-icon-height: 1rem;
 	--_ui5-badge-icon-gap: 0.25rem;
 	--_ui5-badge-font-size: var(--sapFontSize);
 	--_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily);

diff --git a/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Badge-parameters.css
@@ -7,6 +7,7 @@
 	--_ui5-badge-padding-inline: 0.375em;
 	--_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline);
 	--_ui5-badge-text-transform: none;
+	--_ui5-badge-icon-height: 1rem;
 	--_ui5-badge-icon-gap: 0.25rem;
 	--_ui5-badge-font-size: var(--sapFontSize);
 	--_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily);

diff --git a/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Badge-parameters.css
@@ -7,6 +7,7 @@
 	--_ui5-badge-padding-inline: 0.375em;
 	--_ui5-badge-padding-inline-icon-only: var(--_ui5-badge-padding-inline);
 	--_ui5-badge-text-transform: none;
+	--_ui5-badge-icon-height: 1rem;
 	--_ui5-badge-icon-gap: 0.25rem;
 	--_ui5-badge-font-size: var(--sapFontSize);
 	--_ui5-badge-font: "72override", var(--sapFontSemiboldDuplexFamily);

diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html
@@ -23,8 +23,8 @@ <h1>Badges</h1>
 	<ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
 	<section class="group gaps">
 		<h2>Custom Badges</h2>
-		<ui5-badge>
-			Default color
+		<ui5-badge style="width: 200px">
+			Default color truncate truncate
 		</ui5-badge>
 		<ui5-badge id="badgeWithTextAndIcon" style="width: 300px" color-scheme="1">
 			<ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
@@ -44,6 +44,7 @@ <h2>Custom Badges</h2>
 		<ui5-badge color-scheme="6">
 			<ui5-icon name="pending" slot="icon"></ui5-icon>Pending
 		</ui5-badge>
+		<ui5-badge color-scheme="6"><ui5-icon name="pending" slot="icon"></ui5-icon>same line</ui5-badge>
 		<ui5-badge color-scheme="7">
 			<ui5-icon name="lightbulb" slot="icon"></ui5-icon>
 		</ui5-badge>
@@ -57,14 +58,11 @@ <h2>Custom Badges</h2>
 		<ui5-badge wrapping-type="Normal" color-scheme="6">
 			<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="true"
 		</ui5-badge>
-		<ui5-badge wrapping-type="Normal">
+		<ui5-badge>
 			wrapping-type="true"
 		</ui5-badge>
-		<ui5-badge wrapping-type="Normal">
-			<ui5-icon name="email-read" slot="icon"></ui5-icon>
-		</ui5-badge>
 		<ui5-badge wrapping-type="Normal" style="width: 150px">
-			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some truncated text with more lines text wrapping-type="true"
+			<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="true"
 		</ui5-badge>
 		<ui5-badge wrapping-type="Normal">
 			<ui5-icon name="email-read" slot="icon"></ui5-icon>
@@ -105,7 +103,6 @@ <h2>Value states</h2>
 			</ui5-badge>
 			<br />
 			<br />
-
 			<ui5-badge hide-state-icon design="Neutral">
 				Neutral - No icon
 			</ui5-badge>
@@ -121,6 +118,24 @@ <h2>Value states</h2>
 			<ui5-badge hide-state-icon design="Critical">
 				Critical - No icon
 			</ui5-badge>
+			<br />
+			<br />
+			<ui5-badge design="Neutral">
+				<ui5-icon name="email-read" slot="icon"></ui5-icon>Neutral - Custom icon
+			</ui5-badge>
+			<ui5-badge design="Information">
+				<ui5-icon name="email-read" slot="icon"></ui5-icon>Information - Custom icon
+			</ui5-badge>
+			<ui5-badge design="Positive">
+				<ui5-icon name="email-read" slot="icon"></ui5-icon>Positive - Custom icon
+			</ui5-badge>
+			<ui5-badge design="Negative">
+				<ui5-icon name="email-read" slot="icon"></ui5-icon>Negative - Custom icon
+			</ui5-badge>
+			<ui5-badge design="Critical">
+				<ui5-icon name="email-read" slot="icon"></ui5-icon>Critical - Custom icon
+			</ui5-badge>
+
 		</div>
 	</section>
 </body>