diff --git a/.changeset/stale-pets-tan.md b/.changeset/stale-pets-tan.md new file mode 100644 index 00000000000..fcbdf4f75c8 --- /dev/null +++ b/.changeset/stale-pets-tan.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ProgressBar: Adding default gap between sections for progressbars with more than one section diff --git a/packages/react/src/ProgressBar/ProgressBar.stories.tsx b/packages/react/src/ProgressBar/ProgressBar.stories.tsx index e566a3003c3..97cb0d2c450 100644 --- a/packages/react/src/ProgressBar/ProgressBar.stories.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.stories.tsx @@ -1,6 +1,8 @@ import React from 'react' -import type {Meta, StoryFn} from '@storybook/react' -import {ProgressBar} from '..' +import type {Meta} from '@storybook/react' +import {ProgressBar, type ProgressBarProps} from '..' + +const sectionColors = ['success.emphasis', 'done.emphasis', 'severe.emphasis', 'danger.emphasis', 'attention.emphasis'] export default { title: 'Components/ProgressBar', @@ -9,15 +11,26 @@ export default { export const Default = () => -export const Playground: StoryFn = args => ( - -) +export const Playground = ({sections, ...args}: ProgressBarProps & {sections: number}) => { + if (sections === 1) { + return + } else { + return ( + + {[...Array(sections).keys()].map(i => ( + + ))} + + ) + } +} Playground.args = { progress: 66, barSize: 'default', inline: false, bg: 'success.emphasis', + sections: 1, } Playground.argTypes = { @@ -37,4 +50,12 @@ Playground.argTypes = { type: 'boolean', }, }, + sections: { + control: { + type: 'number', + min: 1, + max: 5, + step: 1, + }, + }, } diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 409f8ff58dc..ac476810532 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -52,7 +52,7 @@ const ProgressContainer = styled.span` background-color: ${get('colors.border.default')}; border-radius: ${get('radii.1')}; height: ${props => sizeMap[props.barSize || 'default']}; - + gap: 2px; ${width} ${sx}; ` diff --git a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap index df65e057b10..b5110c8cbc4 100644 --- a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -16,6 +16,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = ` background-color: var(--borderColor-default,var(--color-border-default,#d0d7de)); border-radius: 3px; height: 8px; + gap: 2px; } @media (prefers-reduced-motion:no-preference) {