Skip to content

Commit a7a0da1

Browse files
georgimkvgeorgimkv
authored
fix(ui5-tab): rename semanticColor property to design (#3336)
Part of #3107 BREAKING_CHANGE: The property `semanticColor` is renamed to `design`
1 parent 5272977 commit a7a0da1

File tree

8 files changed

+45
-45
lines changed

8 files changed

+45
-45
lines changed

‎docs/How To Use.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ Now, let's have a look at a Web Component that is intended to have only certain
139139
<ui5-tabcontainer id="tc1" fixed collapsed show-overflow>
140140
<ui5-tab text="Laptops" additional-text="125"></ui5-tab>
141141
<ui5-tab-separator></ui5-tab-separator>
142-
<ui5-tab text="Phones" icon-color="Positive" additional-text="25"></ui5-tab>
143-
<ui5-tab text="Tablets" icon-color="Negative" additional-text="40"></ui5-tab>
142+
<ui5-tab text="Phones" design="Positive" additional-text="25"></ui5-tab>
143+
<ui5-tab text="Tablets" design="Negative" additional-text="40"></ui5-tab>
144144
</ui5-tabcontainer>
145145
```
146146

@@ -152,7 +152,7 @@ The manipulation is exactly the same as with the other Web Components. For examp
152152
const tc = document.getElementById("tc1");
153153
const newTab = document.createElement("ui5-tab");
154154
newTab.text = "Smart Watches";
155-
newTab.iconColor = "Positive";
155+
newTab.design = "Positive";
156156
tc.appendChild(newTab);
157157
```
158158

‎packages/fiori/test/pages/FCL.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -643,15 +643,15 @@
643643
<ui5-tab text="Products" additional-text="125">
644644
</ui5-tab>
645645
<ui5-tab-separator></ui5-tab-separator>
646-
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
646+
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
647647
</ui5-tab>
648-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
648+
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
649649
</ui5-tab>
650-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
650+
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
651651
</ui5-tab>
652-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" semantic-color="Negative" additional-text="40">
652+
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
653653
</ui5-tab>
654-
<ui5-tab icon="sap-icon://menu2" text="Neutral" semantic-color="Neutral" additional-text="40">
654+
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
655655
</ui5-tab>
656656
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
657657
</ui5-tab>

‎packages/fiori/test/pages/FCLApp.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -124,23 +124,23 @@
124124
This is the best product
125125
</ui5-tab>
126126
<ui5-tab-separator></ui5-tab-separator>
127-
<ui5-tab icon="sap-icon://menu2" text="Specification" semantic-color="Positive" additional-text="25">
127+
<ui5-tab icon="sap-icon://menu2" text="Specification" design="Positive" additional-text="25">
128128
Width: 100cm
129129
<br>
130130
Height: 200cm
131131
<br>
132132
Length: 500cm
133133
</ui5-tab>
134-
<ui5-tab icon="sap-icon://menu" text="User manual" selected semantic-color="Critical" additional-text="45">
134+
<ui5-tab icon="sap-icon://menu" text="User manual" selected design="Critical" additional-text="45">
135135
Read the manual
136136
</ui5-tab>
137-
<ui5-tab icon="sap-icon://menu2" text="Reviews" semantic-color="Negative" additional-text="15">
137+
<ui5-tab icon="sap-icon://menu2" text="Reviews" design="Negative" additional-text="15">
138138
<ui5-rating-indicator style="font-size: 1rem;"></ui5-rating-indicator>
139139
</ui5-tab>
140-
<ui5-tab icon="sap-icon://menu2" disabled text="Buy (Not available)" semantic-color="Negative" additional-text="40">
140+
<ui5-tab icon="sap-icon://menu2" disabled text="Buy (Not available)" design="Negative" additional-text="40">
141141

142142
</ui5-tab>
143-
<ui5-tab icon="sap-icon://menu2" text="Comments" semantic-color="Neutral" additional-text="40">
143+
<ui5-tab icon="sap-icon://menu2" text="Comments" design="Neutral" additional-text="40">
144144
<ui5-taxtarea></ui5-taxtarea>
145145
</ui5-tab>
146146
<ui5-tab icon="sap-icon://menu2" text="Related products" additional-text="3">

‎packages/fiori/test/samples/FlexibleColumnLayout.sample.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -171,15 +171,15 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
171171
<ui5-tab text="Products" additional-text="125">
172172
</ui5-tab>
173173
<ui5-tab-separator></ui5-tab-separator>
174-
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
174+
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
175175
</ui5-tab>
176-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
176+
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
177177
</ui5-tab>
178-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
178+
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
179179
</ui5-tab>
180-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" semantic-color="Negative" additional-text="40">
180+
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
181181
</ui5-tab>
182-
<ui5-tab icon="sap-icon://menu2" text="Neutral" semantic-color="Neutral" additional-text="40">
182+
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
183183
</ui5-tab>
184184
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
185185
</ui5-tab>

‎packages/main/src/Tab.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -80,25 +80,25 @@ const metadata = {
8080
},
8181

8282
/**
83-
* Defines the component semantic color.
83+
* Defines the component's design color.
8484
* <br><br>
85-
* The color is applied to:
85+
* The design is applied to:
8686
* <ul>
8787
* <li>the component icon</li>
8888
* <li>the <code>text</code> when the component overflows</li>
8989
* <li>the tab selection line</li>
9090
* </ul>
9191
*
9292
* <br><br>
93-
* Available semantic colors are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
93+
* Available designs are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.
9494
*
9595
* <br><br>
96-
* <b>Note:</b> The color value depends on the current theme.
96+
* <b>Note:</b> The design depends on the current theme.
9797
* @type {SemanticColor}
9898
* @defaultvalue "Default"
9999
* @public
100100
*/
101-
semanticColor: {
101+
design: {
102102
type: SemanticColor,
103103
defaultValue: SemanticColor.Default,
104104
},
@@ -271,8 +271,8 @@ class Tab extends UI5Element {
271271
classes.push("ui5-tab-strip-item--mixedMode");
272272
}
273273

274-
if (this.semanticColor !== SemanticColor.Default) {
275-
classes.push(`ui5-tab-strip-item--${this.semanticColor.toLowerCase()}`);
274+
if (this.design !== SemanticColor.Default) {
275+
classes.push(`ui5-tab-strip-item--${this.design.toLowerCase()}`);
276276
}
277277

278278
return classes.join(" ");
@@ -281,8 +281,8 @@ class Tab extends UI5Element {
281281
get headerSemanticIconClasses() {
282282
const classes = ["ui5-tab-strip-item-semanticIcon"];
283283

284-
if (this.semanticColor !== SemanticColor.Default) {
285-
classes.push(`ui5-tab-strip-item-semanticIcon--${this.semanticColor.toLowerCase()}`);
284+
if (this.design !== SemanticColor.Default) {
285+
classes.push(`ui5-tab-strip-item-semanticIcon--${this.design.toLowerCase()}`);
286286
}
287287

288288
return classes.join(" ");
@@ -291,8 +291,8 @@ class Tab extends UI5Element {
291291
get overflowClasses() {
292292
const classes = ["ui5-tab-overflow-item"];
293293

294-
if (this.semanticColor !== SemanticColor.Default) {
295-
classes.push(`ui5-tab-overflow-item--${this.semanticColor.toLowerCase()}`);
294+
if (this.design !== SemanticColor.Default) {
295+
classes.push(`ui5-tab-overflow-item--${this.design.toLowerCase()}`);
296296
}
297297

298298
if (this.disabled) {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -357,19 +357,19 @@
357357

358358
<ui5-tab-separator></ui5-tab-separator>
359359

360-
<ui5-tab key="item2" text="Drinks" icon="pharmacy" semantic-color="Critical">
360+
<ui5-tab key="item2" text="Drinks" icon="pharmacy" design="Critical">
361361
<ui5-button>Wine</ui5-button>
362362
</ui5-tab>
363363

364-
<ui5-tab key="item3" text="Music" icon="widgets" semantic-color="Positive">
364+
<ui5-tab key="item3" text="Music" icon="widgets" design="Positive">
365365
<ui5-button>Pop</ui5-button>
366366
</ui5-tab>
367367

368368
<ui5-tab key="item4" text="Clothes" icon="basket">
369369
<ui5-button>Dress</ui5-button>
370370
</ui5-tab>
371371

372-
<ui5-tab key="item5" text="Team" icon="group" semantic-color="Neutral">
372+
<ui5-tab key="item5" text="Team" icon="group" design="Neutral">
373373
<ui5-button>Gravity</ui5-button>
374374
</ui5-tab>
375375
</ui5-tabcontainer>

‎packages/main/test/pages/Kitchen.openui5.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -325,19 +325,19 @@
325325

326326
<ui5-tab-separator></ui5-tab-separator>
327327

328-
<ui5-tab key="item2" text="Drinks" icon="pharmacy" icon-color="Critical">
328+
<ui5-tab key="item2" text="Drinks" icon="pharmacy" design="Critical">
329329
<ui5-button>Wine</ui5-button>
330330
</ui5-tab>
331331

332-
<ui5-tab key="item3" text="Music" icon="widgets" icon-color="Positive">
332+
<ui5-tab key="item3" text="Music" icon="widgets" design="Positive">
333333
<ui5-button>Pop</ui5-button>
334334
</ui5-tab>
335335

336336
<ui5-tab key="item4" text="Clothes" icon="basket">
337337
<ui5-button>Dress</ui5-button>
338338
</ui5-tab>
339339

340-
<ui5-tab key="item5" text="Team" icon="group" icon-color="Neutral">
340+
<ui5-tab key="item5" text="Team" icon="group" design="Neutral">
341341
<ui5-button>Gravity</ui5-button>
342342
</ui5-tab>
343343
</ui5-tabcontainer>

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ <h2>Tab Container</h2>
5858
<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125">
5959
</ui5-tab>
6060
<ui5-tab-separator></ui5-tab-separator>
61-
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
61+
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
6262
</ui5-tab>
63-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
63+
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
6464
</ui5-tab>
65-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
65+
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
6666
</ui5-tab>
67-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" semantic-color="Negative" additional-text="40">
67+
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
6868
</ui5-tab>
69-
<ui5-tab icon="sap-icon://menu2" text="Neutral" semantic-color="Neutral" additional-text="40">
69+
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
7070
</ui5-tab>
7171
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
7272
</ui5-tab>
@@ -368,15 +368,15 @@ <h2>Tab Container With Custom Menu Button</h2>
368368
<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125">
369369
</ui5-tab>
370370
<ui5-tab-separator></ui5-tab-separator>
371-
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
371+
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
372372
</ui5-tab>
373-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
373+
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
374374
</ui5-tab>
375-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
375+
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
376376
</ui5-tab>
377-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" semantic-color="Negative" additional-text="40">
377+
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
378378
</ui5-tab>
379-
<ui5-tab icon="sap-icon://menu2" text="Neutral" semantic-color="Neutral" additional-text="40">
379+
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
380380
</ui5-tab>
381381
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
382382
</ui5-tab>

0 commit comments

Comments
 (0)