Skip to content

Commit b0e73ad

Browse files
fifoosidfifoosid
authored
fix(ui5-wizard-step): rename properties (#3334)
Part of #3107 BREAKING_CHANGE: heading/subheading properties of WizardStep are renamed to titleText/subtitleText
1 parent 1cb43f2 commit b0e73ad

11 files changed

+80
-76
lines changed

‎packages/fiori/src/Wizard.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<div class="ui5-wiz-nav-list" role="list" aria-label="{{listAriaLabelText}}" aria-controls="{{_id}}-wiz-content">
44
{{#each _stepsInHeader}}
55
<ui5-wizard-tab
6-
heading="{{heading}}"
7-
subheading="{{subheading}}"
6+
title-text="{{titleText}}"
7+
subtitle-text="{{subtitleText}}"
88
icon="{{icon}}"
99
number="{{number}}"
1010
?disabled="{{disabled}}"

‎packages/fiori/src/Wizard.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const metadata = {
161161
* It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
162162
* <ul>
163163
* <li> Steps can have different visual representations - numbers or icons.
164-
* <li> Steps might have labels for better readability - heading and subheding.</li>
164+
* <li> Steps might have labels for better readability - titleText and subTitleText.</li>
165165
* <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code></li>
166166
* </ul>
167167
*
@@ -205,7 +205,7 @@ const metadata = {
205205
* When the task has less than 3 steps.
206206
*
207207
* <h3>Responsive Behavior</h3>
208-
* On small widths the step's heading, subheading and separators in the navigation area
208+
* On small widths the step's titleText, subtitleText and separators in the navigation area
209209
* will start truncate and shrink and from particular point they will hide to free as much space as possible.
210210
*
211211
* <h3>ES6 Module Import</h3>
@@ -818,8 +818,8 @@ class Wizard extends UI5Element {
818818
// Hide separator if it's the last step and it's not a branching one
819819
const hideSeparator = (idx === stepsCount - 1) && !step.branching;
820820

821-
const isOptional = step.subheading ? this.optionalStepText : "";
822-
const ariaLabel = (step.heading ? `${pos} ${step.heading} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${isOptional}`).trim();
821+
const isOptional = step.subtitleText ? this.optionalStepText : "";
822+
const ariaLabel = (step.titleText ? `${pos} ${step.titleText} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${isOptional}`).trim();
823823
const isAfterCurrent = (idx > selectedStepIndex);
824824

825825
accInfo = {
@@ -830,8 +830,8 @@ class Wizard extends UI5Element {
830830

831831
return {
832832
icon: step.icon,
833-
heading: step.heading,
834-
subheading: step.subheading,
833+
titleText: step.titleText,
834+
subtitleText: step.subtitleText,
835835
number: pos,
836836
selected: step.selected,
837837
disabled: step.disabled,

‎packages/fiori/src/WizardStep.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const metadata = {
77
tag: "ui5-wizard-step",
88
properties: /** @lends sap.ui.webcomponents.fiori.WizardStep.prototype */ {
99
/**
10-
* Defines the <code>heading</code> of the step.
10+
* Defines the <code>titleText</code> of the step.
1111
* <br><br>
1212
*
1313
* <b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header.
@@ -16,13 +16,14 @@ const metadata = {
1616
* @type {String}
1717
* @defaultvalue ""
1818
* @public
19+
* @since 1.0.0-rc.15
1920
*/
20-
heading: {
21+
titleText: {
2122
type: String,
2223
},
2324

2425
/**
25-
* Defines the <code>subheading</code> of the step.
26+
* Defines the <code>subtitleText</code> of the step.
2627
* <br><br>
2728
*
2829
* <b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header.
@@ -31,8 +32,9 @@ const metadata = {
3132
* @type {String}
3233
* @defaultvalue ""
3334
* @public
35+
* @since 1.0.0-rc.15
3436
*/
35-
subheading: {
37+
subtitleText: {
3638
type: String,
3739
},
3840

@@ -146,7 +148,7 @@ const metadata = {
146148
* <h3>Structure</h3>
147149
* <ul>
148150
* <li>Each wizard step has arbitrary content</li>
149-
* <li>Each wizard step might have texts - defined by the <code>heading</code> and <code>subheading</code> properties</li>
151+
* <li>Each wizard step might have texts - defined by the <code>titleText</code> and <code>subtitleText</code> properties</li>
150152
* <li>Each wizard step might have an icon - defined by the <code>icon</code> property</li>
151153
* <li>Each wizard step might display a number in place of the <code>icon</code>, when it's missing</li>
152154
* </ul>

‎packages/fiori/src/WizardTab.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
</div>
2222
{{#if hasTexts}}
2323
<div class="ui5-wiz-step-texts">
24-
<div class="ui5-wiz-step-heading">{{heading}}</div>
25-
<div class="ui5-wiz-step-subheading">{{subheading}}</div>
24+
<div class="ui5-wiz-step-title-text">{{titleText}}</div>
25+
<div class="ui5-wiz-step-subtitle-text">{{subtitleText}}</div>
2626
</div>
2727
{{/if}}
2828
</div>

‎packages/fiori/src/WizardTab.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,24 @@ const metadata = {
2020
},
2121

2222
/**
23-
* Defines the <code>heading</code> of the step.
23+
* Defines the <code>titleText</code> of the step.
2424
* @type {String}
2525
* @defaultvalue ""
2626
* @private
27+
* @since 1.0.0-rc.15
2728
*/
28-
heading: {
29+
titleText: {
2930
type: String,
3031
},
3132

3233
/**
33-
* Defines the <code>subheading</code> of the step.
34+
* Defines the <code>subtitleText</code> of the step.
3435
* @type {String}
3536
* @defaultvalue ""
3637
* @private
38+
* @since 1.0.0-rc.15
3739
*/
38-
subheading: {
40+
subtitleText: {
3941
type: String,
4042
},
4143

@@ -210,7 +212,7 @@ class WizardTab extends UI5Element {
210212
}
211213

212214
get hasTexts() {
213-
return this.heading || this.subheading;
215+
return this.titleText || this.subtitleText;
214216
}
215217

216218
get accInfo() {

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -106,23 +106,23 @@
106106
background: var(--sapObjectHeader_Background);
107107
}
108108

109-
.ui5-wiz-step-heading,
110-
.ui5-wiz-step-subheading {
109+
.ui5-wiz-step-title-text,
110+
.ui5-wiz-step-subtitle-text {
111111
color: var(--sapContent_LabelColor);
112112
white-space: nowrap;
113113
text-overflow: ellipsis;
114114
overflow: hidden;
115115
}
116116

117-
:host([data-ui5-wizard-expanded-tab-prev="true"]) .ui5-wiz-step-heading,
118-
:host([data-ui5-wizard-expanded-tab-prev="true"]) .ui5-wiz-step-subheading,
117+
:host([data-ui5-wizard-expanded-tab-prev="true"]) .ui5-wiz-step-title-text,
118+
:host([data-ui5-wizard-expanded-tab-prev="true"]) .ui5-wiz-step-subtitle-text,
119119
:host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-texts,
120-
:host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-heading,
121-
:host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-subheading {
120+
:host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-title-text,
121+
:host([data-ui5-wizard-expanded-tab="false"]) .ui5-wiz-step-subtitle-text {
122122
display: none;
123123
}
124124

125-
.ui5-wiz-step-subheading {
125+
.ui5-wiz-step-subtitle-text {
126126
font-size: var(--sapFontSmallSize);
127127
}
128128

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
<!-- mid column -->
8585
<div style="box-sizing: border-box; height: 100%" slot="midColumn">
8686
<ui5-wizard id="wiz">
87-
<ui5-wizard-step icon="sap-icon://home" heading="Product type">
87+
<ui5-wizard-step icon="sap-icon://home" title-text="Product type">
8888
<div style="display: flex; min-height: 200px; flex-direction: column;">
8989
<ui5-title>1. Product Type</ui5-title><br>
9090

@@ -100,7 +100,7 @@
100100
<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
101101
</ui5-wizard-step>
102102

103-
<ui5-wizard-step heading="Product Information">
103+
<ui5-wizard-step title-text="Product Information">
104104
<div style="display: flex;flex-direction: column">
105105
<ui5-title>2. Product Information</ui5-title><br>
106106
<ui5-label wrap>
@@ -137,7 +137,7 @@
137137
<ui5-button id="toStep3" design="Emphasized" hidden>Step 3</ui5-button>
138138
</ui5-wizard-step>
139139

140-
<ui5-wizard-step heading="Options">
140+
<ui5-wizard-step title-text="Options">
141141
<div style="display: flex; flex-direction: column;">
142142
<ui5-title>3. Options</ui5-title><br>
143143

@@ -178,7 +178,7 @@
178178
<ui5-button id="toStep4" design="Emphasized" hidden>Step 4</ui5-button>
179179
</ui5-wizard-step>
180180

181-
<ui5-wizard-step heading="Pricing">
181+
<ui5-wizard-step title-text="Pricing">
182182
<div style="display: flex; flex-direction: column;">
183183
<ui5-title>4. Pricing</ui5-title><br>
184184
<ui5-label wrap>

0 commit comments

Comments
 (0)