Skip to content

Commit 1154eaf

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Stepper: rename Step.title to Step.label (DevExpress#29621)
1 parent 9ff2eaa commit 1154eaf

File tree

34 files changed

+208
-208
lines changed

34 files changed

+208
-208
lines changed

‎apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,30 @@
2020
border-radius: 4px;
2121
}
2222

23-
::ng-deep #titleOnly {
23+
::ng-deep #labelOnly {
2424
margin-bottom: 64px;
2525
align-items: center;
2626
}
2727

28-
::ng-deep #titleOnly .dx-step {
28+
::ng-deep #labelOnly .dx-step {
2929
padding-inline: 2px;
3030
}
3131

32-
::ng-deep #titleOnly .dx-step-content {
32+
::ng-deep #labelOnly .dx-step-content {
3333
padding-block: 4px;
3434
}
3535

36-
::ng-deep #titleOnly .dx-step-label {
36+
::ng-deep #labelOnly .dx-step-caption {
3737
width: auto;
3838
max-width: 100%;
3939
}
4040

41-
::ng-deep #titleOnly .dx-step-title {
41+
::ng-deep #labelOnly .dx-step-label {
4242
background-color: var(--dx-color-main-bg);
4343
padding-inline: 8px;
4444
}
4545

46-
::ng-deep #titleOnly .dx-step.dx-state-focused .dx-step-label {
46+
::ng-deep #labelOnly .dx-step.dx-state-focused .dx-step-caption {
4747
box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg);
4848
border-radius: 4px;
4949
}

‎apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
<div class="dx-step-indicator">
1111
<i class="dx-icon" [ngClass]="'dx-icon-' + data.icon"></i>
1212
</div>
13-
<div class="dx-step-label">
14-
<div class="dx-step-title">{{ data.title }}</div>
13+
<div class="dx-step-caption">
14+
<div class="dx-step-label">{{ data.label }}</div>
1515
<div class="dx-step-optional-mark" *ngIf="data.optional">(Optional)</div>
1616
</div>
1717
</div>
1818
</dx-stepper>
19-
<div id="label-titleOnly" class="stepper-label">Title Only</div>
19+
<div id="label-labelOnly" class="stepper-label">Title Only</div>
2020
<dx-stepper
21-
id="titleOnly"
21+
id="labelOnly"
2222
[dataSource]="steps"
2323
[selectedIndex]="2"
2424
[linear]="false"
25-
[elementAttr]="{ 'aria-labelledby': 'label-titleOnly' }"
25+
[elementAttr]="{ 'aria-labelledby': 'label-labelOnly' }"
2626
>
2727
<div *dxTemplate="let data of 'item'">
28-
<div class="dx-step-label">
29-
<div class="dx-step-title">{{ data.title }}</div>
28+
<div class="dx-step-caption">
29+
<div class="dx-step-label">{{ data.label }}</div>
3030
</div>
3131
</div>
3232
</dx-stepper>

‎apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.service.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,28 @@ export class AppService {
1010
constructor() {
1111
this.steps = [{
1212
text: 'A',
13-
title: 'Cart',
13+
label: 'Cart',
1414
icon: 'cart',
1515
},
1616
{
1717
text: 'B',
18-
title: 'Shipping Info',
18+
label: 'Shipping Info',
1919
icon: 'clipboardtasklist',
2020
},
2121
{
2222
text: 'C',
23-
title: 'Promo Code',
23+
label: 'Promo Code',
2424
icon: 'gift',
2525
optional: true,
2626
},
2727
{
2828
text: 'D',
29-
title: 'Checkout',
29+
label: 'Checkout',
3030
icon: 'packagebox',
3131
},
3232
{
3333
text: 'E',
34-
title: 'Ordered',
34+
label: 'Ordered',
3535
icon: 'checkmarkcircle',
3636
}];
3737
}

‎apps/demos/Demos/Stepper/StepTemplate/React/App.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Stepper from 'devextreme-react/stepper';
33

44
import { steps } from './data.ts';
55
import CustomStepShape from './CustomStepShape.tsx';
6-
import TitleOnly from './TitleOnly.tsx';
6+
import LabelOnly from './LabelOnly.tsx';
77
import IconOnly from './IconOnly.tsx';
88

99
export default function App() {
@@ -18,14 +18,14 @@ export default function App() {
1818
linear={false}
1919
itemRender={CustomStepShape}
2020
/>
21-
<div id="label-titleOnly" className="stepper-label">Title Only</div>
21+
<div id="label-labelOnly" className="stepper-label">Title Only</div>
2222
<Stepper
23-
id="titleOnly"
24-
elementAttr={{ 'aria-labelledby': 'label-titleOnly' }}
23+
id="labelOnly"
24+
elementAttr={{ 'aria-labelledby': 'label-labelOnly' }}
2525
dataSource={steps}
2626
defaultSelectedIndex={2}
2727
linear={false}
28-
itemRender={TitleOnly}
28+
itemRender={LabelOnly}
2929
/>
3030
<div id="label-iconOnly" className="stepper-label">Icon Only</div>
3131
<Stepper

‎apps/demos/Demos/Stepper/StepTemplate/React/CustomStepShape.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default function CustomStepShape(data) {
66
<div className="dx-step-indicator">
77
<i className={`dx-icon dx-icon-${data.icon}`}></i>
88
</div>
9-
<div className="dx-step-label">
10-
<div className="dx-step-title">{data.title}</div>
9+
<div className="dx-step-caption">
10+
<div className="dx-step-label">{data.label}</div>
1111
{data.optional && <div className="dx-step-optional-mark">(Optional)</div>}
1212
</div>
1313
</>

‎apps/demos/Demos/Stepper/StepTemplate/React/LabelOnly.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export default function LabelOnly(data) {
4+
return (
5+
<div className="dx-step-caption">
6+
<div className="dx-step-label">{data.label}</div>
7+
</div>
8+
);
9+
}

‎apps/demos/Demos/Stepper/StepTemplate/React/TitleOnly.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/demos/Demos/Stepper/StepTemplate/React/data.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
export const steps = [{
22
text: 'A',
3-
title: 'Cart',
3+
label: 'Cart',
44
icon: 'cart',
55
}, {
66
text: 'B',
7-
title: 'Shipping Info',
7+
label: 'Shipping Info',
88
icon: 'clipboardtasklist',
99
}, {
1010
text: 'C',
11-
title: 'Promo Code',
11+
label: 'Promo Code',
1212
icon: 'gift',
1313
optional: true,
1414
}, {
1515
text: 'D',
16-
title: 'Checkout',
16+
label: 'Checkout',
1717
icon: 'packagebox',
1818
}, {
1919
text: 'E',
20-
title: 'Ordered',
20+
label: 'Ordered',
2121
icon: 'checkmarkcircle',
2222
}];

‎apps/demos/Demos/Stepper/StepTemplate/React/styles.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,30 @@
2020
border-radius: 4px;
2121
}
2222

23-
#titleOnly {
23+
#labelOnly {
2424
margin-bottom: 64px;
2525
align-items: center;
2626
}
2727

28-
#titleOnly .dx-step {
28+
#labelOnly .dx-step {
2929
padding-inline: 2px;
3030
}
3131

32-
#titleOnly .dx-step-content {
32+
#labelOnly .dx-step-content {
3333
padding-block: 4px;
3434
}
3535

36-
#titleOnly .dx-step-label {
36+
#labelOnly .dx-step-caption {
3737
width: auto;
3838
max-width: 100%;
3939
}
4040

41-
#titleOnly .dx-step-title {
41+
#labelOnly .dx-step-label {
4242
background-color: var(--dx-color-main-bg);
4343
padding-inline: 8px;
4444
}
4545

46-
#titleOnly .dx-step.dx-state-focused .dx-step-label {
46+
#labelOnly .dx-step.dx-state-focused .dx-step-caption {
4747
box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg);
4848
border-radius: 4px;
4949
}

‎apps/demos/Demos/Stepper/StepTemplate/ReactJs/App.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Stepper from 'devextreme-react/stepper';
33
import { steps } from './data.js';
44
import CustomStepShape from './CustomStepShape.js';
5-
import TitleOnly from './TitleOnly.js';
5+
import LabelOnly from './LabelOnly.js';
66
import IconOnly from './IconOnly.js';
77

88
export default function App() {
@@ -23,18 +23,18 @@ export default function App() {
2323
itemRender={CustomStepShape}
2424
/>
2525
<div
26-
id="label-titleOnly"
26+
id="label-labelOnly"
2727
className="stepper-label"
2828
>
2929
Title Only
3030
</div>
3131
<Stepper
32-
id="titleOnly"
33-
elementAttr={{ 'aria-labelledby': 'label-titleOnly' }}
32+
id="labelOnly"
33+
elementAttr={{ 'aria-labelledby': 'label-labelOnly' }}
3434
dataSource={steps}
3535
defaultSelectedIndex={2}
3636
linear={false}
37-
itemRender={TitleOnly}
37+
itemRender={LabelOnly}
3838
/>
3939
<div
4040
id="label-iconOnly"

0 commit comments

Comments
 (0)