diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index c23d2ecaee6f..fac73c714ad5 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -20453,6 +20453,7 @@ Progress indicator styles margin-left: $carbon--spacing-06; margin-top: rem(28px); color: $text-01; + text-align: start; } //CURRENT STYLING @@ -20489,6 +20490,7 @@ Progress indicator styles //interactive button .#{$prefix}--progress-step-button { + @include button-reset(); display: flex; } diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss index c9033a7dcbfb..e461c30eb2c7 100644 --- a/packages/components/src/components/progress-indicator/_progress-indicator.scss +++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss @@ -132,6 +132,7 @@ margin-left: $carbon--spacing-06; margin-top: rem(28px); color: $text-01; + text-align: start; } //CURRENT STYLING @@ -168,6 +169,7 @@ //interactive button .#{$prefix}--progress-step-button { + @include button-reset(); display: flex; } diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js index 4cc84bdd2f5b..f470f95a11a5 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator-test.js @@ -88,7 +88,7 @@ describe('ProgressIndicator', () => { mountedList .find(ProgressStep) .at(0) - .find('[role="button"]') + .find('button') .simulate('click'); expect(mockOnChange).toHaveBeenCalledWith(0); }); diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js index 4ffc3d7aa035..6ec5ee36afd8 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js @@ -13,21 +13,33 @@ import { CheckmarkOutline16, Warning16 } from '@carbon/icons-react'; import { keys, matches } from '../../internal/keyboard'; const { prefix } = settings; + const defaultRenderLabel = props =>
; -export const ProgressStep = ({ ...props }) => { - const { - label, - description, - className, - current, - complete, - invalid, - secondaryLabel, - disabled, - onClick, - renderLabel: ProgressStepLabel, - } = props; +const defaultTranslations = { + 'carbon.progress-step.complete': 'Complete', + 'carbon.progress-step.incomplete': 'Incomplete', + 'carbon.progress-step.current': 'Current', + 'carbon.progress-step.invalid': 'Invalid', +}; + +function translateWithId(messageId) { + return defaultTranslations[messageId]; +} + +export function ProgressStep({ + label, + description, + className, + current, + complete, + invalid, + secondaryLabel, + disabled, + onClick, + renderLabel: ProgressStepLabel, + translateWithId: t, +}) { const classes = classnames({ [`${prefix}--progress-step`]: true, [`${prefix}--progress-step--current`]: current, @@ -70,16 +82,31 @@ export const ProgressStep = ({ ...props }) => { ); }; + let message = t('carbon.progress-step.incomplete'); + + if (current) { + message = t('carbon.progress-step.current'); + } + + if (complete) { + message = t('carbon.progress-step.complete'); + } + + if (invalid) { + message = t('carbon.progress-step.invalid'); + } + return ( -