diff --git a/.changeset/three-wombats-invite.md b/.changeset/three-wombats-invite.md new file mode 100644 index 00000000000..f872bb6d424 --- /dev/null +++ b/.changeset/three-wombats-invite.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add experimental TopicTag and TopicTag.Group components diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-md-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-md-linux.png new file mode 100644 index 00000000000..ef3a086e91f Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-md-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-sm-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-sm-linux.png new file mode 100644 index 00000000000..d5100f80a23 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-sm-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-xs-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-xs-linux.png new file mode 100644 index 00000000000..a7944c9753d Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-As-Group-xs-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-hover-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..d01590eb417 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..77950fdf254 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-hover-linux.png new file mode 100644 index 00000000000..77950fdf254 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..0de477a5d0d Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-focus-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..44f131e6bcf Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-hover-linux.png new file mode 100644 index 00000000000..44f131e6bcf Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ce019e0df96 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-hover-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-linux.png new file mode 100644 index 00000000000..d01590eb417 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-hover-linux.png new file mode 100644 index 00000000000..054eb17720a Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d01590eb417 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-hover-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..d0a278a8555 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-focus-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..5d0aa714d18 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-hover-linux.png new file mode 100644 index 00000000000..5d0aa714d18 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..0fb64d9079d Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-hover-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-linux.png new file mode 100644 index 00000000000..d0a278a8555 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-hover-linux.png new file mode 100644 index 00000000000..d1ceb1ed3cb Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..d0a278a8555 Binary files /dev/null and b/.playwright/snapshots/components/TopicTag.test.ts-snapshots/TopicTag-Default-light-tritanopia-linux.png differ diff --git a/e2e/components/TopicTag.test.ts b/e2e/components/TopicTag.test.ts new file mode 100644 index 00000000000..a6871a82721 --- /dev/null +++ b/e2e/components/TopicTag.test.ts @@ -0,0 +1,69 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' +import {viewports} from '../test-helpers/viewports' + +const stories = [ + { + title: 'Default', + id: 'experimental-components-topictag--default', + }, +] as const + +test.describe('TopicTag', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + await page.setViewportSize({width: 400, height: 200}) + + // Default state + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.${theme}.png`) + + // Hover state + await page.getByText('React').hover() + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.${theme}.hover.png`) + + // Focus state + // eslint-disable-next-line github/no-blur + await page.getByText('React').blur() + await page.getByText('React').focus() + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.${theme}.focus.png`) + }) + }) + } + }) + } + + test.describe('As Group', () => { + const story = { + title: 'As Group', + id: 'experimental-components-topictag-features--as-group', + } + + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + }) + + // Viewport: xs + await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 500}) + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.xs.png`) + + // Viewport: sm + await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 500}) + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.sm.png`) + + // Viewport: md + await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 500}) + await expect(page).toHaveScreenshot(`TopicTag.${story.title}.md.png`) + }) + }) +}) diff --git a/packages/postcss-preset-primer/src/mixins/buttonReset.css b/packages/postcss-preset-primer/src/mixins/buttonReset.css new file mode 100644 index 00000000000..2a68a55d846 --- /dev/null +++ b/packages/postcss-preset-primer/src/mixins/buttonReset.css @@ -0,0 +1,17 @@ +@define-mixin buttonReset { + margin: 0; + display: inline-flex; + padding: 0; + border: 0; + appearance: none; + background: none; + cursor: pointer; + text-align: start; + font: inherit; + color: inherit; + align-items: center; + + &::-moz-focus-inner { + border: 0; + } +} diff --git a/packages/react/src/TopicTag/TopicTag.docs.json b/packages/react/src/TopicTag/TopicTag.docs.json new file mode 100644 index 00000000000..0a566b3b2d4 --- /dev/null +++ b/packages/react/src/TopicTag/TopicTag.docs.json @@ -0,0 +1,32 @@ +{ + "id": "topic_tag", + "name": "TopicTag", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "importPath": "@primer/react/experimental", + "props": [ + { + "name": "as", + "type": "React.ElementType", + "description": "The HTML element or React component to render as the root element" + }, + { + "name": "className", + "type": "string", + "description": "Provide a class name for styling on the outermost element" + } + ], + "subcomponents": [ + { + "name": "TopicTag.Group", + "props": [ + { + "name": "className", + "type": "string", + "description": "Provide a class name for styling on the outermost element" + } + ] + } + ] +} diff --git a/packages/react/src/TopicTag/TopicTag.features.stories.tsx b/packages/react/src/TopicTag/TopicTag.features.stories.tsx new file mode 100644 index 00000000000..9573a489560 --- /dev/null +++ b/packages/react/src/TopicTag/TopicTag.features.stories.tsx @@ -0,0 +1,35 @@ +import type {Meta} from '@storybook/react-vite' +import {TopicTag} from './TopicTag' +import {TopicTagGroup} from './TopicTagGroup' + +export default { + title: 'Experimental/Components/TopicTag/Features', + component: TopicTag, +} satisfies Meta + +export const AsButton = () => react + +export const AsGroup = () => { + const tags = [ + 'react', + 'nodejs', + 'javascript', + 'd3', + 'teachers', + 'community', + 'education', + 'programming', + 'curriculum', + 'math', + ] + + return ( + + {tags.map(tag => ( + + {tag} + + ))} + + ) +} diff --git a/packages/react/src/TopicTag/TopicTag.module.css b/packages/react/src/TopicTag/TopicTag.module.css new file mode 100644 index 00000000000..a7fe21b0130 --- /dev/null +++ b/packages/react/src/TopicTag/TopicTag.module.css @@ -0,0 +1,32 @@ +/* Add a reset for when TopicTag is an element since our link styles apply an underline text-decoration by default */ +.TopicTag:where(a) { + text-decoration: none; +} + +/* Add a reset for when TopicTag is a