diff --git a/UNRELEASED.md b/UNRELEASED.md index 8de7ba2dce5..98fd56384c5 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -14,6 +14,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Add `lastColumnSticky` prop to `IndexTable` to create a sticky last cell and optional sticky last heading on viewports larger than small ([#4150](https://github.com/Shopify/polaris-react/pull/4150)) - Allow promoted actions to be rendered as a menu on the `BulkAction` component ([#4266](https://github.com/Shopify/polaris-react/pull/4266)) - Add `extraSmall` prop to `Avatar` ([#4371](https://github.com/Shopify/polaris-react/pull/4371)) +- Add `critical` color option to `ProgressBar` component ([#4408](https://github.com/Shopify/polaris-react/pull/4408)) ### Bug fixes diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index 928265de67c..aded78e2c15 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -55,6 +55,11 @@ --p-progressbar-indicator: var(--p-border-success); } +.colorCritical { + --p-progressbar-background: var(--p-surface-neutral); + --p-progressbar-indicator: var(--p-interactive-critical); +} + .Indicator { height: inherit; width: 0; diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 9194746d912..16418a0b3e6 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -6,7 +6,7 @@ import {useI18n} from '../../utilities/i18n'; import styles from './ProgressBar.scss'; type Size = 'small' | 'medium' | 'large'; -type Color = 'highlight' | 'primary' | 'success'; +type Color = 'highlight' | 'primary' | 'success' | 'critical'; export interface ProgressBarProps { /**