From 2a882479ed0aac4ba15e52f3c3cf6564306590dd Mon Sep 17 00:00:00 2001 From: Alex Sutcliffe Date: Wed, 18 Aug 2021 09:33:16 -0700 Subject: [PATCH] [ProgressBar] Add critical color to progress bar color prop options --- UNRELEASED.md | 1 + src/components/ProgressBar/ProgressBar.scss | 5 +++++ src/components/ProgressBar/ProgressBar.tsx | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) 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 { /**