Skip to content

Commit 9bf1192

Browse files
chirag64interactivellama
chirag64
and
interactivellama
authored
Fixes #2766: Vertical Progress Indicator: Added support for onClick event which is documented but doesn't work (#2767)
* Progress Indicator: Add support for onClick event which is documented but doesn't work * Progress Indicator: Added missing props for onClick * Progress Indicator: Added missing data object * Progress Indicator: Added tests and fixes for them * Progress Indicator: Use button tag when vertical orientation has an onClick event for accessibility purposes Co-authored-by: Stephen James <[email protected]>
1 parent c4effed commit 9bf1192

File tree

5 files changed

+241
-97
lines changed

5 files changed

+241
-97
lines changed

‎components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot

Lines changed: 81 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1102,8 +1102,10 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11021102
<li
11031103
className="slds-progress__item slds-is-active"
11041104
>
1105-
<span
1106-
className="slds-progress__marker"
1105+
<button
1106+
className="slds-button slds-progress__marker"
1107+
onClick={[Function]}
1108+
type="button"
11071109
/>
11081110
<div
11091111
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1140,8 +1142,10 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11401142
<li
11411143
className="slds-progress__item"
11421144
>
1143-
<span
1144-
className="slds-progress__marker"
1145+
<button
1146+
className="slds-button slds-progress__marker"
1147+
onClick={[Function]}
1148+
type="button"
11451149
/>
11461150
<div
11471151
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1178,8 +1182,10 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
11781182
<li
11791183
className="slds-progress__item"
11801184
>
1181-
<span
1182-
className="slds-progress__marker"
1185+
<button
1186+
className="slds-button slds-progress__marker"
1187+
onClick={[Function]}
1188+
type="button"
11831189
/>
11841190
<div
11851191
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1219,8 +1225,10 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
12191225
<li
12201226
className="slds-progress__item"
12211227
>
1222-
<span
1223-
className="slds-progress__marker"
1228+
<button
1229+
className="slds-button slds-progress__marker"
1230+
onClick={[Function]}
1231+
type="button"
12241232
/>
12251233
<div
12261234
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1278,8 +1286,10 @@ exports[`DOM snapshots SLDSProgressIndicator SetupAssistant 1`] = `
12781286
<li
12791287
className="slds-progress__item"
12801288
>
1281-
<span
1282-
className="slds-progress__marker"
1289+
<button
1290+
className="slds-button slds-progress__marker"
1291+
onClick={[Function]}
1292+
type="button"
12831293
/>
12841294
<div
12851295
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1583,8 +1593,10 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
15831593
<li
15841594
className="slds-progress__item slds-is-active"
15851595
>
1586-
<span
1587-
className="slds-progress__marker"
1596+
<button
1597+
className="slds-button slds-progress__marker"
1598+
onClick={[Function]}
1599+
type="button"
15881600
/>
15891601
<div
15901602
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1596,8 +1608,10 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
15961608
<li
15971609
className="slds-progress__item"
15981610
>
1599-
<span
1600-
className="slds-progress__marker"
1611+
<button
1612+
className="slds-button slds-progress__marker"
1613+
onClick={[Function]}
1614+
type="button"
16011615
/>
16021616
<div
16031617
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1609,8 +1623,10 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16091623
<li
16101624
className="slds-progress__item"
16111625
>
1612-
<span
1613-
className="slds-progress__marker"
1626+
<button
1627+
className="slds-button slds-progress__marker"
1628+
onClick={[Function]}
1629+
type="button"
16141630
/>
16151631
<div
16161632
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1622,8 +1638,10 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16221638
<li
16231639
className="slds-progress__item"
16241640
>
1625-
<span
1626-
className="slds-progress__marker"
1641+
<button
1642+
className="slds-button slds-progress__marker"
1643+
onClick={[Function]}
1644+
type="button"
16271645
/>
16281646
<div
16291647
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1635,8 +1653,10 @@ exports[`DOM snapshots SLDSProgressIndicator Vertical 1`] = `
16351653
<li
16361654
className="slds-progress__item"
16371655
>
1638-
<span
1639-
className="slds-progress__marker"
1656+
<button
1657+
className="slds-button slds-progress__marker"
1658+
onClick={[Function]}
1659+
type="button"
16401660
/>
16411661
<div
16421662
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1672,8 +1692,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
16721692
<li
16731693
className="slds-progress__item slds-is-completed slds-is-active"
16741694
>
1675-
<span
1676-
className="slds-progress__marker slds-progress__marker_icon"
1695+
<button
1696+
className="slds-button slds-progress__marker slds-progress__marker_icon"
1697+
onClick={[Function]}
1698+
type="button"
16771699
>
16781700
<span>
16791701
<svg
@@ -1686,7 +1708,7 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
16861708
</svg>
16871709

16881710
</span>
1689-
</span>
1711+
</button>
16901712
<div
16911713
className="slds-progress__item_content slds-grid slds-grid_align-spread"
16921714
id="progress-indicator-vertical-label-0"
@@ -1697,8 +1719,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
16971719
<li
16981720
className="slds-progress__item slds-is-completed"
16991721
>
1700-
<span
1701-
className="slds-progress__marker slds-progress__marker_icon"
1722+
<button
1723+
className="slds-button slds-progress__marker slds-progress__marker_icon"
1724+
onClick={[Function]}
1725+
type="button"
17021726
>
17031727
<span>
17041728
<svg
@@ -1711,7 +1735,7 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17111735
</svg>
17121736

17131737
</span>
1714-
</span>
1738+
</button>
17151739
<div
17161740
className="slds-progress__item_content slds-grid slds-grid_align-spread"
17171741
id="progress-indicator-vertical-label-1"
@@ -1722,8 +1746,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17221746
<li
17231747
className="slds-progress__item slds-is-completed"
17241748
>
1725-
<span
1726-
className="slds-progress__marker slds-progress__marker_icon"
1749+
<button
1750+
className="slds-button slds-progress__marker slds-progress__marker_icon"
1751+
onClick={[Function]}
1752+
type="button"
17271753
>
17281754
<span>
17291755
<svg
@@ -1736,7 +1762,7 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17361762
</svg>
17371763

17381764
</span>
1739-
</span>
1765+
</button>
17401766
<div
17411767
className="slds-progress__item_content slds-grid slds-grid_align-spread"
17421768
id="progress-indicator-vertical-label-2"
@@ -1747,8 +1773,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17471773
<li
17481774
className="slds-progress__item slds-is-completed"
17491775
>
1750-
<span
1751-
className="slds-progress__marker slds-progress__marker_icon"
1776+
<button
1777+
className="slds-button slds-progress__marker slds-progress__marker_icon"
1778+
onClick={[Function]}
1779+
type="button"
17521780
>
17531781
<span>
17541782
<svg
@@ -1761,7 +1789,7 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17611789
</svg>
17621790

17631791
</span>
1764-
</span>
1792+
</button>
17651793
<div
17661794
className="slds-progress__item_content slds-grid slds-grid_align-spread"
17671795
id="progress-indicator-vertical-label-3"
@@ -1772,8 +1800,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17721800
<li
17731801
className="slds-progress__item slds-has-error"
17741802
>
1775-
<span
1776-
className="slds-progress__marker slds-progress__marker_icon"
1803+
<button
1804+
className="slds-button slds-progress__marker slds-progress__marker_icon"
1805+
onClick={[Function]}
1806+
type="button"
17771807
>
17781808
<span>
17791809
<svg
@@ -1786,7 +1816,7 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17861816
</svg>
17871817

17881818
</span>
1789-
</span>
1819+
</button>
17901820
<div
17911821
className="slds-progress__item_content slds-grid slds-grid_align-spread"
17921822
id="progress-indicator-vertical-label-4"
@@ -1797,8 +1827,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
17971827
<li
17981828
className="slds-progress__item"
17991829
>
1800-
<span
1801-
className="slds-progress__marker"
1830+
<button
1831+
className="slds-button slds-progress__marker"
1832+
onClick={[Function]}
1833+
type="button"
18021834
/>
18031835
<div
18041836
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1810,8 +1842,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18101842
<li
18111843
className="slds-progress__item"
18121844
>
1813-
<span
1814-
className="slds-progress__marker"
1845+
<button
1846+
className="slds-button slds-progress__marker"
1847+
onClick={[Function]}
1848+
type="button"
18151849
/>
18161850
<div
18171851
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1823,8 +1857,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18231857
<li
18241858
className="slds-progress__item"
18251859
>
1826-
<span
1827-
className="slds-progress__marker"
1860+
<button
1861+
className="slds-button slds-progress__marker"
1862+
onClick={[Function]}
1863+
type="button"
18281864
/>
18291865
<div
18301866
className="slds-progress__item_content slds-grid slds-grid_align-spread"
@@ -1836,8 +1872,10 @@ exports[`DOM snapshots SLDSProgressIndicator VerticalStepError 1`] = `
18361872
<li
18371873
className="slds-progress__item"
18381874
>
1839-
<span
1840-
className="slds-progress__marker"
1875+
<button
1876+
className="slds-button slds-progress__marker"
1877+
onClick={[Function]}
1878+
type="button"
18411879
/>
18421880
<div
18431881
className="slds-progress__item_content slds-grid slds-grid_align-spread"

‎components/progress-indicator/__tests__/progress-indicator.browser-test.jsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,35 @@ describe('SLDSProgressIndicator: ', () => {
261261
});
262262
});
263263

264+
describe('Click Event for Vertical Orientation', () => {
265+
const clickHandler = sinon.spy();
266+
267+
beforeEach(
268+
mountComponent(
269+
<DemoComponent
270+
steps={steps}
271+
selectedStep={steps[2]}
272+
completedSteps={steps.slice(0, 2)}
273+
onStepClick={clickHandler}
274+
orientation="vertical"
275+
/>
276+
)
277+
);
278+
279+
afterEach(unmountComponent);
280+
281+
// EVENTS
282+
it('calls onStepClick()', function () {
283+
const step = this.wrapper
284+
.find('.slds-progress')
285+
.find('li')
286+
.find('span')
287+
.first();
288+
step.simulate('click'); // <-- this is causing some errors on tab tests
289+
expect(clickHandler.callCount).to.equal(1);
290+
});
291+
});
292+
264293
describe('Assistive Technology', () => {
265294
/* Detect if presence of accessibility features such as ARIA
266295
* roles and screen reader text is present in the DOM.

‎components/progress-indicator/private/step-vertical.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ declare module '@salesforce/design-system-react/components/progress-indicator/pr
1717
* Determines if the step is currently selected (active)
1818
*/
1919
isSelected?: boolean;
20+
/**
21+
* Triggered when click on individual steps. By default, it receives an event and returns all info passed to that step.
22+
* users are able to re-define it by passing a function as a prop
23+
*/
24+
onClick?: (v: any) => any;
2025
/**
2126
* Step object. This is passed into event callbacks.
2227
*/

‎components/progress-indicator/private/step-vertical.jsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ const propTypes = {
3434
* Determines if the step is currently selected (active)
3535
*/
3636
isSelected: PropTypes.bool,
37+
/**
38+
* Triggered when click on individual steps. By default, it receives an event and returns all info passed to that step.
39+
* users are able to re-define it by passing a function as a prop
40+
*/
41+
onClick: PropTypes.func,
3742
/**
3843
* Step object. This is passed into event callbacks.
3944
*/
@@ -52,6 +57,13 @@ class StepVertical extends React.Component {
5257
* stepIcon represents the icon used for each step.
5358
*/
5459
stepIcon = (renderIcon) => {
60+
const data = {
61+
isSelected: this.props.isSelected,
62+
isError: this.props.isError,
63+
isCompleted: this.props.isCompleted,
64+
step: this.props.step,
65+
};
66+
5567
const icon = renderIcon ? (
5668
<Icon
5769
category="utility"
@@ -60,7 +72,23 @@ class StepVertical extends React.Component {
6072
/>
6173
) : null;
6274

63-
return (
75+
const handleClick = (event) => this.props.onClick(event, data);
76+
77+
return this.props.onClick ? (
78+
<button
79+
className={classNames('slds-button slds-progress__marker', {
80+
'slds-progress__marker_icon': renderIcon,
81+
'slds-progress__marker_icon-success':
82+
this.props.variant === 'setup-assistant' &&
83+
renderIcon &&
84+
!this.props.isError,
85+
})}
86+
type="button"
87+
onClick={handleClick}
88+
>
89+
{icon}
90+
</button>
91+
) : (
6492
<span
6593
className={classNames('slds-progress__marker', {
6694
'slds-progress__marker_icon': renderIcon,

0 commit comments

Comments
 (0)