Skip to content

Commit 08c15b5

Browse files
LidiyaGeorgievailhan007
LidiyaGeorgieva
authored and
ilhan007
committed
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><!-- would truncate the text if there is not enough space --> ``` Now: ```html <ui5-tag>In Process</ui5-tag><!-- would let the text wrap if there is not enough space --> ``` 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
1 parent a77626f commit 08c15b5

File tree

12 files changed

+86
-56
lines changed

12 files changed

+86
-56
lines changed

‎packages/fiori/src/NotificationListItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="{{contentClasses}}">
1313

1414
{{#if hasImportance}}
15-
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2">
15+
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
1616
<ui5-icon name="high-priority" slot="icon"></ui5-icon>
1717
{{importanceText}}
1818
</ui5-tag>

‎packages/main/src/Tag.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,11 @@ class Tag extends UI5Element {
120120
*
121121
* **Note:** For option "Normal" the text will wrap and the
122122
* words will not be broken based on hyphenation.
123-
* @default "None"
123+
* @default "Normal"
124124
* @public
125125
* @since 1.22.0
126126
*/
127-
@property({ type: WrappingType, defaultValue: WrappingType.None })
127+
@property({ type: WrappingType, defaultValue: WrappingType.Normal })
128128
wrappingType!: `${WrappingType}`;
129129

130130
/**

‎packages/main/src/themes/Tag.css

+10-10
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
min-width: 1.125em;
2020
max-width: 100%;
2121
min-height: var(--_ui5-tag-height);
22-
height: var(--_ui5-tag-height);
22+
height: auto;
2323
box-sizing: border-box;
2424
padding: 0 0.25rem;
2525
border: 0.0625rem solid;
2626
border-radius: var(--sapButton_BorderCornerRadius);
27-
white-space: nowrap;
27+
white-space: normal;
2828
font-size: inherit;
2929
font-family: inherit;
3030
font-weight: inherit;
@@ -46,9 +46,9 @@
4646
outline-offset: 1px;
4747
}
4848

49-
:host([wrapping-type="Normal"]) .ui5-tag-root {
50-
white-space: normal;
51-
height: auto;
49+
:host([wrapping-type="None"]) .ui5-tag-root {
50+
white-space: nowrap;
51+
height: var(--_ui5-tag-height);
5252
}
5353

5454
:host([_icon-only]) .ui5-tag-root {
@@ -71,15 +71,15 @@
7171
::slotted([ui5-icon]) {
7272
width: var(--_ui5-tag-icon-width);
7373
min-width: var(--_ui5-tag-icon-width);
74-
height: var(--_ui5-tag-height);
75-
min-height: var(--_ui5-tag-height);
74+
height: calc(var(--_ui5-tag-height) - 0.125rem); /* remove width of the border since tag root is with box-sizing:border-box*/
7675
color: inherit;
7776
pointer-events: none;
77+
align-self: flex-start;
7878
}
7979

80-
:host([wrapping-type="Normal"]) [ui5-icon],
81-
:host([wrapping-type="Normal"]) ::slotted([ui5-icon]) {
82-
align-self: flex-start;
80+
:host([wrapping-type="None"]) [ui5-icon],
81+
:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
82+
align-self: auto;
8383
}
8484

8585
/* Set3 (BTP) Design Type */

‎packages/main/test/pages/Tag.html

+34-28
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,14 @@
1515
</script>
1616
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
1717
<link rel="stylesheet" type="text/css" href="./styles/Tag.css">
18-
<script src="Tag.js"></script>
1918
</head>
2019

21-
<body class="tag1auto" onload="initializeTags()">
20+
<body class="tag1auto">
2221
<ui5-title level="H1">Tags</ui5-title>
2322
<ui5-checkbox text="Interactive" id="checkboxId"></ui5-checkbox>
2423
<section class="group gaps">
2524
<ui5-title level="H2">Custom Tags</ui5-title>
26-
<ui5-tag class="width200px">
25+
<ui5-tag class="width200px" wrapping-type="None">
2726
Default color truncate truncate truncate
2827
</ui5-tag>
2928
<br>
@@ -39,7 +38,7 @@
3938
Interactive
4039
</ui5-tag>
4140
<br>
42-
<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3">
41+
<ui5-tag id="tagIconOnly" design="Positive" title="Step Completed" color-scheme="3" wrapping-type="None">
4342
<ui5-icon name="sap-ui5" slot="icon"></ui5-icon>
4443
</ui5-tag>
4544
<br>
@@ -78,30 +77,36 @@
7877
<ui5-tag design="Set1" color-scheme="6">
7978
<ui5-icon name="pending" slot="icon"></ui5-icon>Pending
8079
</ui5-tag>
81-
<ui5-tag design="Set1" wrapping-type="Normal" color-scheme="6">
82-
<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="true"
80+
<ui5-tag design="Set1" color-scheme="6">
81+
<ui5-icon name="pending" slot="icon"></ui5-icon>P wrapping-type="Normal"
8382
</ui5-tag>
8483
<ui5-tag>
85-
wrapping-type="true"
84+
wrapping-type="Normal"
85+
</ui5-tag>
86+
<ui5-tag id="tagWithWrappingDefault" design="Set2" class="width200px" color-scheme="6">
87+
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
88+
</ui5-tag>
89+
<ui5-tag id="tagWithWrappingNormal" design="Set2" class="width200px" color-scheme="6">
90+
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
8691
</ui5-tag>
87-
<ui5-tag design="Set1" wrapping-type="Normal" class="width200px" color-scheme="6">
88-
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="true"
92+
<ui5-tag id="tagWithWrappingNone" design="Set2" wrapping-type="None" class="width200px" color-scheme="6">
93+
<ui5-icon name="email-read" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="None"
8994
</ui5-tag>
90-
<ui5-tag wrapping-type="Normal">
95+
<ui5-tag>
9196
<ui5-icon name="email-read" slot="icon"></ui5-icon>
9297
</ui5-tag>
9398
</section>
9499
<section class="group gaps">
95100
<ui5-title level="H2">Large Tags</ui5-title>
96-
<ui5-tag id="tagIconOnly" size="L" design="Negative">
101+
<ui5-tag id="tagIconOnly" size="L" design="Negative" wrapping-type="None">
97102
</ui5-tag>
98-
<ui5-tag design="Neutral" size="L">
103+
<ui5-tag design="Neutral" size="L" wrapping-type="None">
99104
Planned
100105
</ui5-tag>
101-
<ui5-tag hide-state-icon design="Neutral" size="L">
106+
<ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
102107
Planned
103108
</ui5-tag>
104-
<ui5-tag design="Set1" color-scheme="3" size="L">
109+
<ui5-tag design="Set1" color-scheme="3" size="L" wrapping-type="None">
105110
<ui5-icon name="error" slot="icon"></ui5-icon>
106111
</ui5-tag>
107112
</section>
@@ -118,56 +123,57 @@
118123
<section class="group gaps">
119124
<ui5-title level="H2">Value states</ui5-title>
120125
<div>
121-
<ui5-tag design="Neutral">
126+
<ui5-tag design="Neutral" wrapping-type="None">
122127
Neutral
123128
</ui5-tag>
124-
<ui5-tag design="Information">
129+
<ui5-tag design="Information" wrapping-type="None">
125130
Information
126131
</ui5-tag>
127-
<ui5-tag design="Positive">
132+
<ui5-tag design="Positive" wrapping-type="None">
128133
Positive
129134
</ui5-tag>
130-
<ui5-tag design="Negative">
135+
<ui5-tag design="Negative" wrapping-type="None">
131136
Negative
132137
</ui5-tag>
133-
<ui5-tag design="Critical">
138+
<ui5-tag design="Critical" wrapping-type="None">
134139
Critical
135140
</ui5-tag>
136141
<br />
137142
<br />
138-
<ui5-tag hide-state-icon design="Neutral">
143+
<ui5-tag hide-state-icon design="Neutral" wrapping-type="None">
139144
Neutral - No icon
140145
</ui5-tag>
141-
<ui5-tag hide-state-icon design="Information">
146+
<ui5-tag hide-state-icon design="Information" wrapping-type="None">
142147
Information - No icon
143148
</ui5-tag>
144-
<ui5-tag hide-state-icon design="Positive">
149+
<ui5-tag hide-state-icon design="Positive" wrapping-type="None">
145150
Positive - No icon
146151
</ui5-tag>
147-
<ui5-tag hide-state-icon design="Negative">
152+
<ui5-tag hide-state-icon design="Negative" wrapping-type="None">
148153
Negative - No icon
149154
</ui5-tag>
150-
<ui5-tag hide-state-icon design="Critical">
155+
<ui5-tag hide-state-icon design="Critical" wrapping-type="None">
151156
Critical - No icon
152157
</ui5-tag>
153158
<br />
154159
<br />
155-
<ui5-tag design="Neutral">
160+
<ui5-tag design="Neutral" wrapping-type="None">
156161
<ui5-icon name="email-read" slot="icon"></ui5-icon>Neutral - Custom icon
157162
</ui5-tag>
158-
<ui5-tag design="Information">
163+
<ui5-tag design="Information" wrapping-type="None">
159164
<ui5-icon name="email-read" slot="icon"></ui5-icon>Information - Custom icon
160165
</ui5-tag>
161166
<ui5-tag design="Positive">
162167
<ui5-icon name="email-read" slot="icon"></ui5-icon>Positive - Custom icon
163168
</ui5-tag>
164-
<ui5-tag design="Negative">
169+
<ui5-tag design="Negative" wrapping-type="None">
165170
<ui5-icon name="email-read" slot="icon"></ui5-icon>Negative - Custom icon
166171
</ui5-tag>
167-
<ui5-tag design="Critical">
172+
<ui5-tag design="Critical" wrapping-type="None">
168173
<ui5-icon name="email-read" slot="icon"></ui5-icon>Critical - Custom icon
169174
</ui5-tag>
170175
</div>
171176
</section>
177+
<script src="Tag.js"></script>
172178
</body>
173179
</html>

‎packages/main/test/pages/Tag.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
function initializeTags() {
1+
(function initializeTags() {
22
const colorSchemes = [
33
"1",
44
"2",
@@ -53,4 +53,4 @@ function initializeTags() {
5353

5454
set2Content.insertAdjacentHTML("beforeend", "<br><br>");
5555
});
56-
}
56+
})();

‎packages/main/test/specs/Tag.spec.js

+24
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,27 @@ describe("Tag rendering", async () => {
4848
assert.notOk(await tagLabel.isExisting(), "tag label tag shouldn't be rendered.");
4949
});
5050
});
51+
52+
describe("Wrapping", async () => {
53+
before(async () => {
54+
await browser.url(`test/pages/Tag.html`);
55+
});
56+
57+
it("tests if tag text wraps - default wrappingType", async () => {
58+
const tag = await browser.$("#tagWithWrappingDefault").shadow$(".ui5-tag-root");
59+
60+
assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
61+
});
62+
63+
it("tests if tag text wraps - wrappingType Normal", async () => {
64+
const tag = await browser.$("#tagWithWrappingNormal").shadow$(".ui5-tag-root");
65+
66+
assert.strictEqual((await tag.getCSSProperty("white-space")).value, "normal", "tag label is wrapped");
67+
});
68+
69+
it("tests if tag text wraps - wrappingType None", async () => {
70+
const tag = await browser.$("#tagWithWrappingNone").shadow$(".ui5-tag-root");
71+
72+
assert.strictEqual((await tag.getCSSProperty("white-space")).value, "nowrap", "tag label is truncated");
73+
});
74+
});

‎packages/website/docs/_samples/fiori/DynamicPage/Basic/sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<p slot="subheading" class="text">PO-48865</p>
3232
<p slot="snappedSubheading" class="text">PO-48865</p>
3333

34-
<ui5-tag color-scheme="7">Special 157.4M EUR</ui5-tag>
34+
<ui5-tag color-scheme="7" wrapping-type="None">Special 157.4M EUR</ui5-tag>
3535

3636
<ui5-toolbar id="actionsToolbar" slot="actionsBar">
3737
<ui5-toolbar-button text="Create"></ui5-toolbar-button>

‎packages/website/docs/_samples/main/Avatar/WithBadge/sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<!-- playground-fold-end -->
1313

1414
<ui5-avatar initials="AB">
15-
<ui5-tag slot="badge">
15+
<ui5-tag slot="badge" wrapping-type="None">
1616
<ui5-icon slot="icon" name="accelerated"></ui5-icon>
1717
</ui5-tag>
1818
</ui5-avatar>

‎packages/website/docs/_samples/main/Tag/Designs/sample.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@
1212
<!-- playground-fold-end -->
1313

1414
<div style="display: flex; flex-direction: column; align-items: start; gap: 1rem">
15-
<ui5-tag design="Neutral">
15+
<ui5-tag design="Neutral" wrapping-type="None">
1616
Neutral
1717
</ui5-tag>
18-
<ui5-tag design="Information">
18+
<ui5-tag design="Information" wrapping-type="None">
1919
Information
2020
</ui5-tag>
21-
<ui5-tag design="Positive">
21+
<ui5-tag design="Positive" wrapping-type="None">
2222
Positive
2323
</ui5-tag>
24-
<ui5-tag design="Negative">
24+
<ui5-tag design="Negative" wrapping-type="None">
2525
Negative
2626
</ui5-tag>
27-
<ui5-tag design="Critical">
27+
<ui5-tag design="Critical" wrapping-type="None">
2828
Critical
2929
</ui5-tag>
30-
<ui5-tag design="Set1">
30+
<ui5-tag design="Set1" wrapping-type="None">
3131
Set1
3232
</ui5-tag>
33-
<ui5-tag design="Set2">
33+
<ui5-tag design="Set2" wrapping-type="None">
3434
Set2
3535
</ui5-tag>
3636
</div>

‎packages/website/docs/_samples/main/Tag/Interactive/sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<body style="background-color: var(--sapBackgroundColor)">
1212
<!-- playground-fold-end -->
1313

14-
<ui5-tag design="Positive" interactive>
14+
<ui5-tag design="Positive" interactive wrapping-type="None">
1515
Success
1616
</ui5-tag>
1717
<!-- playground-fold -->

‎packages/website/docs/_samples/main/Tag/Size/sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<!-- playground-fold-end -->
1313

1414
<div style="display: flex; flex-direction: row; align-items: start; gap: 1rem">
15-
<ui5-tag hide-state-icon design="Neutral" size="L">
15+
<ui5-tag hide-state-icon design="Neutral" size="L" wrapping-type="None">
1616
Planned
1717
</ui5-tag>
18-
<ui5-tag design="Negative" size="L"></ui5-tag>
18+
<ui5-tag design="Negative" size="L" wrapping-type="None"></ui5-tag>
1919
</div>
2020
<!-- playground-fold -->
2121
<script type="module" src="main.js"></script>

‎packages/website/docs/_samples/main/Tag/WrappingTypes/sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<ui5-tag wrapping-type="None" style="width: 200px;">
1616
This would truncate as it is too long
1717
</ui5-tag>
18-
<ui5-tag wrapping-type="Normal" style="width: 200px;">
18+
<ui5-tag style="width: 200px;">
1919
This would wrap as it is too long
2020
</ui5-tag>
2121
</div>

0 commit comments

Comments
 (0)