fix(ui5-badge): test wrapping mode

SAP · Nov 22, 2023 · ce3f7e3 · ce3f7e3
1 parent d599679
commit ce3f7e3
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 30 deletions.
diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css
@@ -19,6 +19,7 @@
  font-weight: var(--_ui5-badge-font-weight);
  text-align: center;
  letter-spacing: var(--_ui5-badge-letter-spacing);
+ white-space: nowrap;
 }
 
 :host([interactive]) .ui5-badge-root {
@@ -31,6 +32,31 @@
  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;

diff --git a/packages/main/test/pages/Badge.html b/packages/main/test/pages/Badge.html
@@ -21,6 +21,55 @@
 <body class="badge1auto" onload="initializeBadges()">
  <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>
+ <ui5-badge id="badgeWithTextAndIcon" style="width: 300px" color-scheme="1">
+ <ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
+ </ui5-badge>
+ <ui5-badge id="badgeIconOnly" color-scheme="2">
+ <ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
+ </ui5-badge>
+ <ui5-badge color-scheme="3">
+ In Process
+ </ui5-badge>
+ <ui5-badge color-scheme="4">
+ <ui5-icon name="lab" slot="icon"></ui5-icon>
+ </ui5-badge>
+ <ui5-badge color-scheme="5">
+ <ui5-icon name="email-read" slot="icon"></ui5-icon>
+ </ui5-badge>
+ <ui5-badge color-scheme="6">
+ <ui5-icon name="pending" slot="icon"></ui5-icon>Pending
+ </ui5-badge>
+ <ui5-badge color-scheme="7">
+ <ui5-icon name="lightbulb" slot="icon"></ui5-icon>
+ </ui5-badge>
+ <ui5-badge color-scheme="8">
+ <ui5-icon name="locked" slot="icon"></ui5-icon>
+ </ui5-badge>
+ <br>
+ <ui5-badge color-scheme="6">
+ <ui5-icon name="pending" slot="icon"></ui5-icon>Pending
+ </ui5-badge>
+ <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">
+ 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-badge>
+ <ui5-badge wrapping-type="Normal">
+ <ui5-icon name="email-read" slot="icon"></ui5-icon>
+ </ui5-badge>
+ </section>
  <section class="group gaps">
  <h2>Set 1</h2>
  <div id="set1Content">
@@ -74,36 +123,6 @@ <h2>Value states</h2>
  </ui5-badge>
  </div>
  </section>
- <section class="group gaps">
- <h2>Custom Badges</h2>
- <ui5-badge>
- Default color
- </ui5-badge>
- <ui5-badge id="badgeWithTextAndIcon" color-scheme="1">
- <ui5-icon name="accept" slot="icon"></ui5-icon>Done
- </ui5-badge>
- <ui5-badge id="badgeIconOnly" color-scheme="2">
- <ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
- </ui5-badge>
- <ui5-badge color-scheme="3">
- In Process
- </ui5-badge>
- <ui5-badge color-scheme="4">
- <ui5-icon name="lab" slot="icon"></ui5-icon>
- </ui5-badge>
- <ui5-badge color-scheme="5">
- <ui5-icon name="email-read" slot="icon"></ui5-icon>
- </ui5-badge>
- <ui5-badge color-scheme="6">
- <ui5-icon name="pending" slot="icon"></ui5-icon>Pending
- </ui5-badge>
- <ui5-badge color-scheme="7">
- <ui5-icon name="lightbulb" slot="icon"></ui5-icon>
- </ui5-badge>
- <ui5-badge color-scheme="8">
- <ui5-icon name="locked" slot="icon"></ui5-icon>
- </ui5-badge>
- </section>
 </body>
 
 </html>