From 96704b8e893a777206c00efbc57282e56429d687 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Wed, 12 Jun 2024 10:29:05 +0300 Subject: [PATCH] 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 In Process ``` Now: ```html In Process ``` Related to https://github.com/SAP/ui5-webcomponents/issues/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 --- packages/fiori/src/NotificationListItem.hbs | 2 +- packages/main/src/Tag.ts | 4 +- packages/main/src/themes/Tag.css | 20 +++--- packages/main/test/pages/Tag.html | 62 ++++++++++--------- packages/main/test/pages/Tag.js | 4 +- packages/main/test/specs/Tag.spec.js | 24 +++++++ .../fiori/DynamicPage/Basic/sample.html | 2 +- .../main/Avatar/WithBadge/sample.html | 2 +- .../_samples/main/Tag/Designs/sample.html | 14 ++--- .../_samples/main/Tag/Interactive/sample.html | 2 +- .../docs/_samples/main/Tag/Size/sample.html | 4 +- .../main/Tag/WrappingTypes/sample.html | 2 +- 12 files changed, 86 insertions(+), 56 deletions(-) diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index e12e3d7c67d8..ce2287add7d9 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -12,7 +12,7 @@
{{#if hasImportance}} - + {{importanceText}} diff --git a/packages/main/src/Tag.ts b/packages/main/src/Tag.ts index 52c3dc8c6558..5e3e12e7c3dd 100644 --- 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 index bb270a2c12ad..323d6658fcd6 100644 --- 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 index 791759259913..648858bd7afb 100644 --- a/packages/main/test/pages/Tag.html +++ b/packages/main/test/pages/Tag.html @@ -15,15 +15,14 @@ - - + Tags
Custom Tags - + Default color truncate truncate truncate
@@ -39,7 +38,7 @@ Interactive
- +
@@ -78,30 +77,36 @@ Pending - - P wrapping-type="true" + + P wrapping-type="Normal" - wrapping-type="true" + wrapping-type="Normal" + + + Some long text with more lines text wrapping-type="Normal" + + + Some long text with more lines text wrapping-type="Normal" - - Some long text with more lines text wrapping-type="true" + + Some long text with more lines text wrapping-type="None" - +
Large Tags - + - + Planned - + Planned - +
@@ -118,56 +123,57 @@
Value states
- + Neutral - + Information - + Positive - + Negative - + Critical

- + Neutral - No icon - + Information - No icon - + Positive - No icon - + Negative - No icon - + Critical - No icon

- + Neutral - Custom icon - + Information - Custom icon Positive - Custom icon - + Negative - Custom icon - + Critical - Custom icon
+ diff --git a/packages/main/test/pages/Tag.js b/packages/main/test/pages/Tag.js index 54f7c94e1202..344e4ac7e9ef 100644 --- 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", "

"); }); -} \ No newline at end of file +})(); diff --git a/packages/main/test/specs/Tag.spec.js b/packages/main/test/specs/Tag.spec.js index 86bdbeea88fa..4068130ba77f 100644 --- 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 index 499d00d0f997..e8b36061806c 100644 --- a/packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html @@ -31,7 +31,7 @@

PO-48865

PO-48865

- Special 157.4M EUR + Special 157.4M EUR diff --git a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html index 5d1e3b25c919..a8d4572f24db 100644 --- a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html +++ b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html @@ -12,7 +12,7 @@ - + diff --git a/packages/website/docs/_samples/main/Tag/Designs/sample.html b/packages/website/docs/_samples/main/Tag/Designs/sample.html index 007e11f354dc..09510d1d3df4 100644 --- a/packages/website/docs/_samples/main/Tag/Designs/sample.html +++ b/packages/website/docs/_samples/main/Tag/Designs/sample.html @@ -12,25 +12,25 @@
- + Neutral - + Information - + Positive - + Negative - + Critical - + Set1 - + Set2
diff --git a/packages/website/docs/_samples/main/Tag/Interactive/sample.html b/packages/website/docs/_samples/main/Tag/Interactive/sample.html index e29ecadd25ec..6c15f6c7230c 100644 --- a/packages/website/docs/_samples/main/Tag/Interactive/sample.html +++ b/packages/website/docs/_samples/main/Tag/Interactive/sample.html @@ -11,7 +11,7 @@ - + Success diff --git a/packages/website/docs/_samples/main/Tag/Size/sample.html b/packages/website/docs/_samples/main/Tag/Size/sample.html index 74ee11a37144..148f3ea3d4b1 100644 --- a/packages/website/docs/_samples/main/Tag/Size/sample.html +++ b/packages/website/docs/_samples/main/Tag/Size/sample.html @@ -12,10 +12,10 @@
- + Planned - +
diff --git a/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html b/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html index bdf2147cba4e..887cee902701 100644 --- a/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html +++ b/packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html @@ -15,7 +15,7 @@ This would truncate as it is too long - + This would wrap as it is too long