Skip to content

Commit 2461b73

Browse files
ilhan007ilhan007
authoredMay 28, 2021
refactor(ui5-product-switch-item): rename heading/subtitle to titleText/subtitleText (#3270)
The "subtitle" property has been removed, use "subheading" property instead. Related to: #3107 BREAKING_CHANGE: The `heading ` and `subtitle` properties have been renamed to `titleText` and `subtitleText`.
·
v2.10.0-rc.2v0.0.0-7b49a7ff1
1 parent 4343100 commit 2461b73

File tree

7 files changed

+75
-74
lines changed

7 files changed

+75
-74
lines changed
 

‎packages/fiori/src/ProductSwitchItem.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@
3434
></ui5-icon>
3535
{{/if}}
3636
<span class="ui5-product-switch-item-text-content">
37-
{{#if heading}}
38-
<span class="ui5-product-switch-item-heading">{{heading}}</span>
37+
{{#if titleText}}
38+
<span class="ui5-product-switch-item-title">{{titleText}}</span>
3939
{{/if}}
40-
{{#if subtitle}}
41-
<span class="ui5-product-switch-item-subtitle">{{subtitle}}</span>
40+
{{#if subtitleText}}
41+
<span class="ui5-product-switch-item-subtitle">{{subtitleText}}</span>
4242
{{/if}}
4343
</span>
4444
{{/inline}}

‎packages/fiori/src/ProductSwitchItem.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,29 @@ const metadata = {
1414
tag: "ui5-product-switch-item",
1515
properties: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
1616
/**
17-
* Defines the title of the <code>ui5-product-switch-item</code>.
17+
* Defines the title of the component.
1818
* @type {string}
1919
* @defaultvalue ""
20+
* @since 1.0.0-rc.15
2021
* @public
2122
*/
22-
heading: {
23+
titleText: {
2324
type: String,
2425
},
2526

2627
/**
27-
* Defines the subtitle of the <code>ui5-product-switch-item</code>.
28+
* Defines the subtitle of the component.
2829
* @type {string}
2930
* @defaultvalue ""
31+
* @since 1.0.0-rc.15
3032
* @public
3133
*/
32-
subtitle: {
34+
subtitleText: {
3335
type: String,
3436
},
3537

3638
/**
37-
* Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>.
39+
* Defines the icon to be displayed as a graphical element within the component.
3840
* <br><br>
3941
* Example:
4042
* <br>
@@ -72,7 +74,7 @@ const metadata = {
7274
},
7375

7476
/**
75-
* Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.
77+
* Defines the component target URI. Supports standard hyperlink behavior.
7678
* @type {string}
7779
* @defaultvalue ""
7880
* @public
@@ -82,7 +84,7 @@ const metadata = {
8284
},
8385

8486
/**
85-
* Used to switch the active state (pressed or not) of the <code>ui5-product-switch-item</code>.
87+
* Used to switch the active state (pressed or not) of the component.
8688
* @private
8789
*/
8890
active: {
@@ -135,7 +137,6 @@ const metadata = {
135137
* <ul>
136138
* <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
137139
* </ul>
138-
* <br><br>
139140
*
140141
* <h3>ES6 Module Import</h3>
141142
* <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>

‎packages/fiori/src/themes/ProductSwitchItem.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-icon,
19-
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading,
19+
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title,
2020
:host([active]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle {
2121
color:var(--sapList_Active_TextColor);
2222
}
@@ -69,7 +69,7 @@
6969
}
7070

7171
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
72-
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading {
72+
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
7373
line-height: 1.25rem;
7474
white-space: nowrap;
7575
overflow: hidden;
@@ -78,7 +78,7 @@
7878
pointer-events: none;
7979
}
8080

81-
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading {
81+
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
8282
font-size:var( --sapFontHeader6Size);
8383
color:var(--sapGroup_TitleTextColor);
8484
}
@@ -124,7 +124,7 @@
124124

125125

126126
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-subtitle,
127-
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-heading {
127+
.ui5-product-switch-item-root .ui5-product-switch-item-text-content .ui5-product-switch-item-title {
128128
line-height: normal;
129129
}
130130

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

+18-18
Original file line numberDiff line numberDiff line change
@@ -25,27 +25,27 @@
2525

2626
<body style="background-color: var(--sapBackgroundColor);">
2727
<ui5-product-switch id="productSwitchThreeColumn">
28-
<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="home"></ui5-product-switch-item>
29-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
30-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="contacts"></ui5-product-switch-item>
31-
<ui5-product-switch-item heading="Guided Buying" icon="credit-card"></ui5-product-switch-item>
28+
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
29+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
30+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
31+
<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
3232
</ui5-product-switch>
3333

3434
<ui5-product-switch id="productSwitchFourColumn">
35-
<ui5-product-switch-item id="firstItem" heading="Home" subtitle="Central Home" icon="home"></ui5-product-switch-item>
36-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
37-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="contacts"></ui5-product-switch-item>
38-
<ui5-product-switch-item heading="Guided Buying" icon="credit-card"></ui5-product-switch-item>
39-
<ui5-product-switch-item heading="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
40-
<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="flight"></ui5-product-switch-item>
41-
<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
42-
<ui5-product-switch-item heading="Human Capital Management" icon="customer"></ui5-product-switch-item>
43-
<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
44-
<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
45-
<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
46-
<ui5-product-switch-item heading="Service Cloud" icon="family-care"></ui5-product-switch-item>
47-
<ui5-product-switch-item heading="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
48-
<ui5-product-switch-item heading="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
35+
<ui5-product-switch-item id="firstItem" title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
36+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
37+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
38+
<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
39+
<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
40+
<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
41+
<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
42+
<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
43+
<ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
44+
<ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
45+
<ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
46+
<ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
47+
<ui5-product-switch-item title-text="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
48+
<ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
4949
</ui5-product-switch>
5050

5151
<ui5-input id="eventTest"></ui5-input>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</head>
2525

2626
<body style="background-color: var(--sapBackgroundColor);">
27-
<ui5-product-switch-item id="productSwitchItem" heading="Home" subtitle="Central Home" icon="home"></ui5-product-switch-item>
27+
<ui5-product-switch-item id="productSwitchItem" heading="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
2828
</body>
2929

3030
</html>

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

+38-38
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ <h2 class="control-header">ProductSwitch</h2>
1313
<h3>Basic sample</h3>
1414
<div class="snippet">
1515
<ui5-product-switch style="display:flex;">
16-
<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
17-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
18-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
19-
<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
16+
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
17+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
18+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
19+
<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
2020
</ui5-product-switch>
2121
</div>
2222
<pre class="prettyprint lang-html"><xmp>
2323
<ui5-product-switch>
24-
<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
25-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
26-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
27-
<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
24+
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
25+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
26+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
27+
<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
2828
</ui5-product-switch>
2929
</xmp></pre>
3030
</section>
@@ -42,20 +42,20 @@ <h3>ProductSwitch within ShellBar</h3>
4242
</ui5-shellbar>
4343
<ui5-popover id="productswitch-popover" placement-type="Bottom">
4444
<ui5-product-switch>
45-
<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
46-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
47-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
48-
<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
49-
<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
50-
<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
51-
<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
52-
<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
53-
<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
54-
<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
55-
<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
56-
<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
57-
<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
58-
<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
45+
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
46+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
47+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
48+
<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
49+
<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
50+
<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
51+
<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
52+
<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
53+
<ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
54+
<ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
55+
<ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
56+
<ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
57+
<ui5-product-switch-item title-text="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
58+
<ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
5959
</ui5-product-switch>
6060
</ui5-popover>
6161

@@ -76,36 +76,36 @@ <h3>ProductSwitch within ShellBar</h3>
7676
<pre class="prettyprint lang-html"><xmp>
7777
<ui5-shellbar
7878
id="shellbar"
79-
heading="Corporate Portal"
79+
title-text="Corporate Portal"
8080
secondary-title="secondary title"
8181
logo="../../../assets/images/sap-logo-svg.svg"
8282
show-product-switch
8383
show-co-pilot>
8484
</ui5-shellbar>
8585
<ui5-popover id="productswitch-popover" placement-type="Bottom">
8686
<ui5-product-switch>
87-
<ui5-product-switch-item heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
88-
<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
89-
<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
90-
<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
91-
<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
92-
<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
93-
<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
94-
<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
95-
<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
96-
<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
97-
<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
98-
<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
99-
<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
100-
<ui5-product-switch-item heading="S/4HANA" icon="sap-icon://batch-payments"></ui5-product-switch-item>
87+
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
88+
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
89+
<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
90+
<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
91+
<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
92+
<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
93+
<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
94+
<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
95+
<ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
96+
<ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
97+
<ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
98+
<ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
99+
<ui5-product-switch-item title-text="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
100+
<ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
101101
</ui5-product-switch>
102102
</ui5-popover>
103103

104104
<script>
105105
var shellBar = document.getElementById("shellbar");
106106
var popover = document.getElementById("productswitch-popover");
107107

108-
shellbar.addEventListener("product-switch-click", function(event) {
108+
shellbar.addEventListener("product-switch-click", event => {
109109
if (popover.opened) {
110110
popover.close();
111111
} else {

‎packages/fiori/test/specs/ProductSwitchItem.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe("ProductSwitchItem general interaction", () => {
1010
const productSwitchItem = browser.$("#productSwitchItem");
1111

1212
assert.ok(productSwitchItem.shadow$(".ui5-product-switch-item-icon"), "Icon is rendered.");
13-
assert.ok(productSwitchItem.shadow$(".ui5-product-switch-item-heading"), "Title is rendered.");
13+
assert.ok(productSwitchItem.shadow$(".ui5-product-switch-item-title"), "Title is rendered.");
1414
assert.ok(productSwitchItem.shadow$(".ui5-product-switch-item-subtitle"), "SubTitle is rendered.");
1515
});
1616
});

0 commit comments

Comments
 (0)
Please sign in to comment.