Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(progress-indicator): adds hidden span to announce state of completion #5125

Merged
merged 10 commits into from
Jan 24, 2020
Merged

feat(progress-indicator): adds hidden span to announce state of completion #5125

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
89356d0
fix(progress-indicator): adds hidden span to announce completion state
abbeyhrt Jan 21, 2020
5faa922
fix(progress-indicator): update tests and build
abbeyhrt Jan 21, 2020
d266178
Merge branch 'master' into progress-indicator-VO
tw15egan Jan 22, 2020
89ccea5
Merge branch 'master' into progress-indicator-VO
tw15egan Jan 22, 2020
53e98eb
Merge branch 'master' into progress-indicator-VO
tw15egan Jan 22, 2020
8877ac6
Merge branch 'master' into progress-indicator-VO
tw15egan Jan 22, 2020
07aa881
feat(progress-indicator): add translatewithid prop for translations
abbeyhrt Jan 23, 2020
9fe6730
Merge branch 'progress-indicator-VO' of https://github.com/abbeyhrt/m…
abbeyhrt Jan 23, 2020
c4c7859
Merge branch 'master' into progress-indicator-VO
asudoh Jan 24, 2020
b0fd7f4
Merge branch 'master' into progress-indicator-VO
abbeyhrt Jan 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20398,6 +20398,7 @@ Progress indicator styles
margin-left: $carbon--spacing-06;
margin-top: rem(28px);
color: $text-01;
text-align: start;
}

//CURRENT STYLING
Expand Down Expand Up @@ -20434,6 +20435,7 @@ Progress indicator styles

//interactive button
.#{$prefix}--progress-step-button {
@include button-reset();
display: flex;
}

Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/components/progress-indicator/_progress-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@
margin-left: $carbon--spacing-06;
margin-top: rem(28px);
color: $text-01;
text-align: start;
}

//CURRENT STYLING
Expand Down Expand Up @@ -168,6 +169,7 @@

//interactive button
.#{$prefix}--progress-step-button {
@include button-reset();
display: flex;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ describe('ProgressIndicator', () => {
mountedList
.find(ProgressStep)
.at(0)
.find('[role="button"]')
.find('button')
.simulate('click');
expect(mockOnChange).toHaveBeenCalledWith(0);
});
Expand Down
51 changes: 33 additions & 18 deletions packages/react/src/components/ProgressIndicator/ProgressIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ import { CheckmarkOutline16, Warning16 } from '@carbon/icons-react';
import { keys, matches } from '../../internal/keyboard';

const { prefix } = settings;

const defaultRenderLabel = props => <p {...props} />;
export const ProgressStep = ({ ...props }) => {
const {
label,
description,
className,
current,
complete,
invalid,
secondaryLabel,
disabled,
onClick,
renderLabel: ProgressStepLabel,
} = props;

export function ProgressStep({
label,
description,
className,
current,
complete,
invalid,
secondaryLabel,
disabled,
onClick,
renderLabel: ProgressStepLabel,
}) {
const classes = classnames({
[`${prefix}--progress-step`]: true,
[`${prefix}--progress-step--current`]: current,
Expand Down Expand Up @@ -70,16 +70,31 @@ export const ProgressStep = ({ ...props }) => {
);
};

let message = 'Incomplete';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

g11n; Do we want to add a prop to let app specify the assistive text? (Though translate-ability for assistive text didn't use to be a hard-requirements, I have seen several issues asking for it)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! I added it, it's the first time I've done it so let me know if it all looks good!


if (current) {
message = 'Current';
}

if (complete) {
message = 'Complete';
}

if (invalid) {
message = 'Invalid';
}

return (
<li className={classes} aria-disabled={disabled}>
<div
<li className={classes}>
<button
className={classnames(`${prefix}--progress-step-button`, {
[`${prefix}--progress-step-button--unclickable`]: !onClick || current,
})}
role="button"
aria-disabled={disabled}
tabIndex={!current && onClick ? 0 : -1}
onClick={!current ? onClick : undefined}
onKeyDown={handleKeyDown}>
<span className={`${prefix}--assistive-text`}>{message}</span>
<SVGIcon
complete={complete}
current={current}
Expand All @@ -94,10 +109,10 @@ export const ProgressStep = ({ ...props }) => {
<p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
) : null}
<span className={`${prefix}--progress-line`} />
</div>
</button>
</li>
);
};
}

ProgressStep.propTypes = {
/**
Expand Down