diff --git a/.changeset/timeline-badge-variant-clip-sidebar.md b/.changeset/timeline-badge-variant-clip-sidebar.md new file mode 100644 index 00000000000..06db13f58dc --- /dev/null +++ b/.changeset/timeline-badge-variant-clip-sidebar.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Timeline: add `variant` prop to `Timeline.Badge` for built-in color schemes (`accent`, `success`, `attention`, `severe`, `danger`, `done`, `open`, `closed`, `sponsors`) diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png index c8558833cd3..faf8c8eaec9 100644 Binary files a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-colorblind-linux.png new file mode 100644 index 00000000000..e7e048bd3a6 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-dimmed-linux.png new file mode 100644 index 00000000000..08b8a08aae2 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a145ed66f8c Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-linux.png new file mode 100644 index 00000000000..db989d1e050 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-tritanopia-linux.png new file mode 100644 index 00000000000..481b5d3fd0a Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-colorblind-linux.png new file mode 100644 index 00000000000..9999dc1048f Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-high-contrast-linux.png new file mode 100644 index 00000000000..7a2851dfdd4 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-linux.png new file mode 100644 index 00000000000..6e528e7c2d6 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-tritanopia-linux.png new file mode 100644 index 00000000000..941a3a3e0c0 Binary files /dev/null and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Badge-Variants-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png index f46bfb8c7a8..de1eed5cc62 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png index 2ed415a6a41..1ac9262d250 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png index 302d5fbac79..89a5e9bba8b 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png index f46bfb8c7a8..de1eed5cc62 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png index f46bfb8c7a8..de1eed5cc62 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png index 2f811af0553..00fbc8c89ca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png index 6ec2901a6c9..47d399c44e0 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png index 2f811af0553..00fbc8c89ca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png index 2f811af0553..00fbc8c89ca 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-Timeline-Break-light-tritanopia-linux.png differ diff --git a/e2e/components/Timeline.test.ts b/e2e/components/Timeline.test.ts index 316d88faaf8..53ed90c5677 100644 --- a/e2e/components/Timeline.test.ts +++ b/e2e/components/Timeline.test.ts @@ -27,6 +27,10 @@ const stories = [ title: 'Timeline Break', id: 'components-timeline-features--timeline-break', }, + { + title: 'Badge Variants', + id: 'components-timeline-features--badge-variants', + }, ] as const test.describe('Timeline', () => { diff --git a/packages/doc-gen/src/__tests__/ts-utils.patterns.test.ts b/packages/doc-gen/src/__tests__/ts-utils.patterns.test.ts index 0956fa0becb..0794acef1da 100644 --- a/packages/doc-gen/src/__tests__/ts-utils.patterns.test.ts +++ b/packages/doc-gen/src/__tests__/ts-utils.patterns.test.ts @@ -5,7 +5,7 @@ import {parseTypeInfo} from '../ts-utils' const directory = path.resolve(import.meta.dirname) const FIXTURE_PATH = path.join(directory, 'fixtures') -describe('getPropTypeForComponent', () => { +describe('getPropTypeForComponent', {timeout: 30_000}, () => { it('extracts props for FunctionComponent', () => { const info = parseTypeInfo(FIXTURE_PATH, 'FunctionComponent') expect(info.props.foo).toMatchObject({name: 'foo', type: 'string', required: true}) diff --git a/packages/react/src/Timeline/Timeline.docs.json b/packages/react/src/Timeline/Timeline.docs.json index 159297b9183..b3a1895e0a6 100644 --- a/packages/react/src/Timeline/Timeline.docs.json +++ b/packages/react/src/Timeline/Timeline.docs.json @@ -22,6 +22,9 @@ { "id": "components-timeline-features--timeline-break" }, + { + "id": "components-timeline-features--badge-variants" + }, { "id": "components-timeline-features--with-inline-links" } @@ -47,7 +50,13 @@ }, { "name": "Timeline.Badge", - "props": [] + "props": [ + { + "name": "variant", + "type": "'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'open' | 'closed' | 'sponsors'", + "description": "The color variant of the badge." + } + ] }, { "name": "Timeline.Body", diff --git a/packages/react/src/Timeline/Timeline.features.stories.module.css b/packages/react/src/Timeline/Timeline.features.stories.module.css index 8b13298a377..f7da0223915 100644 --- a/packages/react/src/Timeline/Timeline.features.stories.module.css +++ b/packages/react/src/Timeline/Timeline.features.stories.module.css @@ -1,7 +1,3 @@ -.BadgeWithDoneBackground { - background-color: var(--bgColor-done-emphasis); -} - .LinkWithBoldStyle { font-weight: var(--base-text-weight-semibold); color: var(--fgColor-default); @@ -11,7 +7,3 @@ .LinkWithBoldStyle:hover { color: var(--fgColor-accent); } - -.GitMergeIcon { - color: var(--fgColor-onEmphasis); -} diff --git a/packages/react/src/Timeline/Timeline.features.stories.tsx b/packages/react/src/Timeline/Timeline.features.stories.tsx index b997ad10baf..34875f3a739 100644 --- a/packages/react/src/Timeline/Timeline.features.stories.tsx +++ b/packages/react/src/Timeline/Timeline.features.stories.tsx @@ -2,7 +2,18 @@ import type {Meta} from '@storybook/react-vite' import type {ComponentProps} from '../utils/types' import Timeline from './Timeline' import Octicon from '../Octicon' -import {GitBranchIcon, GitCommitIcon, GitMergeIcon} from '@primer/octicons-react' +import { + FlameIcon, + GitBranchIcon, + GitCommitIcon, + GitMergeIcon, + GitPullRequestIcon, + HeartIcon, + IssueClosedIcon, + IssueOpenedIcon, + SkipIcon, + XIcon, +} from '@primer/octicons-react' import Link from '../Link' import classes from './Timeline.features.stories.module.css' @@ -101,8 +112,8 @@ export const CondensedItems = () => ( export const TimelineBreak = () => ( - - + + This is a message @@ -116,6 +127,65 @@ export const TimelineBreak = () => ( ) +export const BadgeVariants = () => ( + + + + + + Accent + + + + + + Success + + + + + + Attention + + + + + + Severe + + + + + + Danger + + + + + + Done + + + + + + Open + + + + + + Closed + + + + + + Sponsors + + +) + export const WithInlineLinks = () => ( diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css index a841e6b909d..90fd6597246 100644 --- a/packages/react/src/Timeline/Timeline.module.css +++ b/packages/react/src/Timeline/Timeline.module.css @@ -87,6 +87,47 @@ border-radius: 50%; align-items: center; justify-content: center; + + &:where([data-variant]) { + color: var(--fgColor-onEmphasis); + border-color: transparent; + } + + &:where([data-variant='accent']) { + background-color: var(--bgColor-accent-emphasis); + } + + &:where([data-variant='success']) { + background-color: var(--bgColor-success-emphasis); + } + + &:where([data-variant='attention']) { + background-color: var(--bgColor-attention-emphasis); + } + + &:where([data-variant='severe']) { + background-color: var(--bgColor-severe-emphasis); + } + + &:where([data-variant='danger']) { + background-color: var(--bgColor-danger-emphasis); + } + + &:where([data-variant='done']) { + background-color: var(--bgColor-done-emphasis); + } + + &:where([data-variant='open']) { + background-color: var(--bgColor-open-emphasis); + } + + &:where([data-variant='closed']) { + background-color: var(--bgColor-closed-emphasis); + } + + &:where([data-variant='sponsors']) { + background-color: var(--bgColor-sponsors-emphasis); + } } .TimelineBody { diff --git a/packages/react/src/Timeline/Timeline.tsx b/packages/react/src/Timeline/Timeline.tsx index 00ccee8345b..8abec1e5d99 100644 --- a/packages/react/src/Timeline/Timeline.tsx +++ b/packages/react/src/Timeline/Timeline.tsx @@ -50,15 +50,28 @@ const TimelineItem = React.forwardRef( TimelineItem.displayName = 'TimelineItem' +export type TimelineBadgeVariant = + | 'accent' + | 'success' + | 'attention' + | 'severe' + | 'danger' + | 'done' + | 'open' + | 'closed' + | 'sponsors' + export type TimelineBadgeProps = { children?: React.ReactNode className?: string + /** The color variant of the badge */ + variant?: TimelineBadgeVariant } & React.ComponentPropsWithoutRef<'div'> -const TimelineBadge = ({className, ...props}: TimelineBadgeProps) => { +const TimelineBadge = ({className, variant, ...props}: TimelineBadgeProps) => { return (
-
+
) } diff --git a/packages/react/src/Timeline/__tests__/Timeline.test.tsx b/packages/react/src/Timeline/__tests__/Timeline.test.tsx index 11a575a3e09..c4031c5a84c 100644 --- a/packages/react/src/Timeline/__tests__/Timeline.test.tsx +++ b/packages/react/src/Timeline/__tests__/Timeline.test.tsx @@ -53,6 +53,16 @@ describe('Timeline.Item', () => { describe('Timeline.Badge', () => { implementsClassName(Timeline.Badge, classes.TimelineBadge) + + it('renders with variant prop', () => { + const {container} = render() + expect(container.querySelector(`.${classes.TimelineBadge}`)).toHaveAttribute('data-variant', 'done') + }) + + it('does not render data-variant when variant is omitted', () => { + const {container} = render() + expect(container.querySelector(`.${classes.TimelineBadge}`)).not.toHaveAttribute('data-variant') + }) }) describe('Timeline.Body', () => { diff --git a/packages/react/src/Timeline/index.ts b/packages/react/src/Timeline/index.ts index 55b0dce49f6..e1a60723c81 100644 --- a/packages/react/src/Timeline/index.ts +++ b/packages/react/src/Timeline/index.ts @@ -3,6 +3,7 @@ export type { TimelineProps, TimelineItemsProps, TimelineItemProps, + TimelineBadgeVariant, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index cec11bdd137..661b82bf8d5 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -186,6 +186,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] = "ThemeShadowPaths", "Timeline", "type TimelineBadgeProps", + "type TimelineBadgeVariant", "type TimelineBodyProps", "type TimelineBreakProps", "type TimelineItemProps", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 81c0fae44ad..d3cc41e64d9 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -177,6 +177,7 @@ export type {TextProps} from './Text' export {default as Timeline} from './Timeline' export type { TimelineProps, + TimelineBadgeVariant, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps,