From 0a8869991b61f45b67746ae636d92e4fd864dde5 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 23 Sep 2024 09:32:11 +0200 Subject: [PATCH 1/3] add bg prop to ProgressBar.Item --- .changeset/slow-walls-drum.md | 5 +++++ .../ProgressBar.features.stories.tsx | 6 +++--- .../src/ProgressBar/ProgressBar.figma.tsx | 20 ++++++++---------- .../src/ProgressBar/ProgressBar.stories.tsx | 21 ++++++++++++++++--- .../react/src/ProgressBar/ProgressBar.tsx | 10 +++++---- .../__snapshots__/ProgressBar.test.tsx.snap | 1 - 6 files changed, 41 insertions(+), 22 deletions(-) create mode 100644 .changeset/slow-walls-drum.md diff --git a/.changeset/slow-walls-drum.md b/.changeset/slow-walls-drum.md new file mode 100644 index 00000000000..4bcacbfeb8c --- /dev/null +++ b/.changeset/slow-walls-drum.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +add bg prop to ProgressBar.Item diff --git a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx index 75780e75e7b..adc98d3546b 100644 --- a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx @@ -20,9 +20,9 @@ export const Color = () => ( - - - + + + ) diff --git a/packages/react/src/ProgressBar/ProgressBar.figma.tsx b/packages/react/src/ProgressBar/ProgressBar.figma.tsx index dc55095bc16..f30cbc928b1 100644 --- a/packages/react/src/ProgressBar/ProgressBar.figma.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.figma.tsx @@ -28,18 +28,16 @@ figma.connect( { props: { color: figma.enum('color', { - green: 'var(--data-green-color)', - teal: 'var(--data-teal-color)', - blue: 'var(--data-blue-color)', - purple: 'var(--data-purple-color)', - orange: 'var(--data-orange-color)', - red: 'var(--data-red-color)', - pink: 'var(--data-pink-color)', - yellow: 'var(--data-yellow-color)', - auburn: 'var(--data-auburn-color)', - gray: 'var(--data-gray-color)', + green: 'success.empahsis', + blue: 'accent.emphasis', + purple: 'done.emphasis', + orange: 'severe.empahsis', + red: 'danger.emphasis', + pink: 'sponsors.emphasis', + yellow: 'attention.emphasis', + gray: 'neutral.epmhasis', }), }, - example: ({color}) => , + example: ({color}) => , }, ) diff --git a/packages/react/src/ProgressBar/ProgressBar.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.stories.tsx index 97cb0d2c450..356f22cc116 100644 --- a/packages/react/src/ProgressBar/ProgressBar.stories.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.stories.tsx @@ -1,8 +1,15 @@ -import React from 'react' +import React, {useEffect} from 'react' import type {Meta} from '@storybook/react' import {ProgressBar, type ProgressBarProps} from '..' -const sectionColors = ['success.emphasis', 'done.emphasis', 'severe.emphasis', 'danger.emphasis', 'attention.emphasis'] +const sectionColorsDefault = [ + 'success.emphasis', + 'accent.emphasis', + 'done.emphasis', + 'severe.emphasis', + 'danger.emphasis', + 'attention.emphasis', +] export default { title: 'Components/ProgressBar', @@ -12,13 +19,21 @@ export default { export const Default = () => export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => { + const [sectionColors, setSectionColors] = React.useState(sectionColorsDefault) + + useEffect(() => { + if (args.bg && args.bg !== '') { + setSectionColors([args.bg, ...sectionColorsDefault]) + } + }, [args.bg]) + if (sections === 1) { return } else { return ( {[...Array(sections).keys()].map(i => ( - + ))} ) diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index ac476810532..757158bae6e 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -7,16 +7,18 @@ import type {SxProp} from '../sx' import sx from '../sx' import {warning} from '../utils/warning' -type ProgressProp = {progress?: string | number} +type ProgressProp = { + progress?: string | number +} const shimmer = keyframes` from { mask-position: 200%; } to { mask-position: 0%; } ` -export const Item = styled.span` +export const Item = styled.span` width: ${props => (props.progress ? `${props.progress}%` : 0)}; - background-color: ${get('colors.success.emphasis')}; + background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)}; @media (prefers-reduced-motion: no-preference) { &[data-animated='true'] { @@ -86,7 +88,7 @@ export const ProgressBar = forwardRef( return ( - {children ?? } + {children ?? } ) }, diff --git a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap index b5110c8cbc4..e8f28759a8b 100644 --- a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -4,7 +4,6 @@ exports[`ProgressBar respects the "progress" prop 1`] = ` .c1 { width: 80%; background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d)); - background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d)); } .c0 { From c7088a234ec84c1b6664aa0077654c27da3fa6cd Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 23 Sep 2024 16:02:47 +0200 Subject: [PATCH 2/3] Update .changeset/slow-walls-drum.md Co-authored-by: Siddharth Kshetrapal --- .changeset/slow-walls-drum.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slow-walls-drum.md b/.changeset/slow-walls-drum.md index 4bcacbfeb8c..bcfad1e6bb6 100644 --- a/.changeset/slow-walls-drum.md +++ b/.changeset/slow-walls-drum.md @@ -2,4 +2,4 @@ '@primer/react': minor --- -add bg prop to ProgressBar.Item +ProgressBar: Add `bg` prop to `ProgressBar.Item` From 2ef06acdf0c93d0962ce6b81b2fe86fc24f17cbf Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 24 Sep 2024 08:47:16 +0200 Subject: [PATCH 3/3] fixes --- .../react/src/ProgressBar/ProgressBar.features.stories.tsx | 2 +- packages/react/src/ProgressBar/ProgressBar.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx index adc98d3546b..145dae260e7 100644 --- a/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.features.stories.tsx @@ -20,7 +20,7 @@ export const Color = () => ( - + diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 757158bae6e..6c760bbd77d 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -9,6 +9,7 @@ import {warning} from '../utils/warning' type ProgressProp = { progress?: string | number + bg?: string } const shimmer = keyframes` @@ -16,7 +17,7 @@ const shimmer = keyframes` to { mask-position: 0%; } ` -export const Item = styled.span` +export const Item = styled.span` width: ${props => (props.progress ? `${props.progress}%` : 0)}; background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)};