diff --git a/.changeset/dry-weeks-compete.md b/.changeset/dry-weeks-compete.md new file mode 100644 index 00000000000..801b09cbf3e --- /dev/null +++ b/.changeset/dry-weeks-compete.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Adds the option to declare multiple segments in a ProgressBar. diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx index d14377636c6..888cccf8d15 100644 --- a/docs/content/ProgressBar.mdx +++ b/docs/content/ProgressBar.mdx @@ -28,6 +28,19 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s ``` +### Multiple Segments + +If you want to show multiple segments in a ProgressBar, pass separate `Item`s as children **instead** of a `progress` value. + +```jsx live +<> + + + + + +``` + ## Props diff --git a/src/ProgressBar/ProgressBar.features.stories.tsx b/src/ProgressBar/ProgressBar.features.stories.tsx index 789bc6e9140..de3b28d9735 100644 --- a/src/ProgressBar/ProgressBar.features.stories.tsx +++ b/src/ProgressBar/ProgressBar.features.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import {ComponentMeta} from '@storybook/react' -import ProgressBar from './ProgressBar' +import {ProgressBar} from '..' export default { title: 'Components/ProgressBar/Features', @@ -17,3 +17,11 @@ export const SizeLarge = () => export const Inline = () => export const Color = () => + +export const MultipleItems = () => ( + + + + + +) diff --git a/src/ProgressBar/ProgressBar.stories.tsx b/src/ProgressBar/ProgressBar.stories.tsx index 9deb464d641..36628e8a777 100644 --- a/src/ProgressBar/ProgressBar.stories.tsx +++ b/src/ProgressBar/ProgressBar.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Meta, ComponentStory} from '@storybook/react' -import ProgressBar from './ProgressBar' +import {ProgressBar} from '..' export default { title: 'Components/ProgressBar', diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx index 1bc9b183b07..88c8dbbf500 100644 --- a/src/ProgressBar/ProgressBar.tsx +++ b/src/ProgressBar/ProgressBar.tsx @@ -6,12 +6,14 @@ import sx, {SxProp} from '../sx' type ProgressProp = {progress?: string | number} -const Bar = styled.span` +export const Item = styled.span` width: ${props => (props.progress ? `${props.progress}%` : 0)}; - + background-color: ${get('colors.success.emphasis')}; ${sx}; ` +Item.displayName = 'ProgressBar.Item' + const sizeMap = { small: '5px', large: '10px', @@ -35,14 +37,22 @@ const ProgressContainer = styled.span` ${sx}; ` -export type ProgressBarProps = {bg?: string} & StyledProgressContainerProps & ProgressProp +export type ProgressBarProps = React.PropsWithChildren & {bg?: string} & StyledProgressContainerProps & ProgressProp + +export const ProgressBar = ({ + progress, + bg = 'success.emphasis', + barSize = 'default', + children, + ...rest +}: ProgressBarProps) => { + if (children && progress) { + throw new Error('You should pass `progress` or children, not both.') + } -function ProgressBar({progress, bg = 'success.emphasis', barSize = 'default', ...rest}: ProgressBarProps) { return ( - + {children ?? } ) } - -export default ProgressBar diff --git a/src/ProgressBar/index.ts b/src/ProgressBar/index.ts index 77528695eef..6c0452114df 100644 --- a/src/ProgressBar/index.ts +++ b/src/ProgressBar/index.ts @@ -1 +1,8 @@ -export {default, ProgressBarProps} from './ProgressBar' +import {ProgressBar as Bar, Item} from './ProgressBar' + +export type {ProgressBarProps} from './ProgressBar' + +/** + * Collection of ProgressBar related components. + */ +export const ProgressBar = Object.assign(Bar, {Item}) diff --git a/src/__tests__/ProgressBar.test.tsx b/src/__tests__/ProgressBar.test.tsx index 7b8f7444dd9..19735c739e6 100644 --- a/src/__tests__/ProgressBar.test.tsx +++ b/src/__tests__/ProgressBar.test.tsx @@ -10,7 +10,8 @@ describe('ProgressBar', () => { behavesAsComponent({Component: ProgressBar}) checkExports('ProgressBar', { - default: ProgressBar, + default: undefined, + ProgressBar, }) it('should have no axe violations', async () => { diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap index fed8bb153f6..7050d8d3b7d 100644 --- a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -4,6 +4,7 @@ exports[`ProgressBar renders consistently 1`] = ` .c1 { width: 0; background-color: #1f883d; + background-color: #1f883d; } .c0 { @@ -30,6 +31,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = ` .c1 { width: 80%; background-color: #1f883d; + background-color: #1f883d; } .c0 { diff --git a/src/index.ts b/src/index.ts index f8db192ecec..335f542f443 100644 --- a/src/index.ts +++ b/src/index.ts @@ -129,7 +129,7 @@ export {default as Popover} from './Popover' export type {PopoverProps, PopoverContentProps} from './Popover' export {default as Portal, registerPortalRoot} from './Portal' export type {PortalProps} from './Portal' -export {default as ProgressBar} from './ProgressBar' +export {ProgressBar} from './ProgressBar' export type {ProgressBarProps} from './ProgressBar' export {default as RadioGroup} from './RadioGroup' export type {RelativeTimeProps} from './RelativeTime'