diff --git a/.changeset/datatable-stable-selectors.md b/.changeset/datatable-stable-selectors.md new file mode 100644 index 00000000000..13ed25a58a6 --- /dev/null +++ b/.changeset/datatable-stable-selectors.md @@ -0,0 +1,20 @@ +--- +'@primer/react': minor +--- + +Add stable `data-component` selectors to multiple components following ADR-023: + +- **ActionBar** +- **ActionList** and friends +- **Button** +- **FilteredActionList** and friends +- **Link** +- **LinkButton** +- **Pagination** +- **SelectPanel** and friends +- **Table** and friends +- **TextInput** +- **TextInputWithTokens** +- **TooltipV2** + +This enables consumers to query and test components using stable selectors like `[data-component="Table.Row"]`. diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-colorblind-linux.png index 53843129669..c54bc3c9d7d 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-dimmed-linux.png index c8bc699cb6a..10e19a02d8f 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-high-contrast-linux.png index 3896259014b..a6794c90d74 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-linux.png index 53843129669..c54bc3c9d7d 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-tritanopia-linux.png index 53843129669..c54bc3c9d7d 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png index 6c66f745e38..612034b0c68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png index a5da27a5a66..1738542c8ff 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png index d990b9d9852..4b61da94d90 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png index 6c66f745e38..612034b0c68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png index 6c66f745e38..612034b0c68 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png index 10358472a0a..c75f01d6193 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png index 982766fe6db..e8a6cb5d0e0 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png index 10358472a0a..c75f01d6193 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png index 10358472a0a..c75f01d6193 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-focus-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-colorblind-linux.png index b0c45f53641..7f87e549ff3 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png index e963ac77553..520cd63b617 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-linux.png index b0c45f53641..7f87e549ff3 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-tritanopia-linux.png index b0c45f53641..7f87e549ff3 100644 Binary files a/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Checkbox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png index e8d320e3fe9..18b539a30b0 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png index b62d802e6ff..440516b946c 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png index 92289401ba7..2270341a0b5 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png index e8d320e3fe9..18b539a30b0 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png index e8d320e3fe9..18b539a30b0 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png index 37aa0a97d67..f8907daa6bd 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png index d8647fa128c..50d0aa37be2 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png index 37aa0a97d67..f8907daa6bd 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png index 37aa0a97d67..f8907daa6bd 100644 Binary files a/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/FormControl.test.ts-snapshots/FormControl-With-Leading-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png index 04c891c493e..da2012260c2 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png index 4a1b14e61b6..8849cb46afb 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png index b17b739a2cf..eb822c87c1a 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png index 04c891c493e..da2012260c2 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png index 04c891c493e..da2012260c2 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png index a0c68af11a7..ea3898b3c60 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png index 9e01775b785..759d1f2c08b 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png index a0c68af11a7..ea3898b3c60 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png index a0c68af11a7..ea3898b3c60 100644 Binary files a/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-colorblind-linux.png index 3a5e502a256..d0bf50b9adc 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-dimmed-linux.png index 51ed8ff9ebe..7a77953b658 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-high-contrast-linux.png index 6df3e99fc5c..f4e8aa37319 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-linux.png index 3a5e502a256..d0bf50b9adc 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-tritanopia-linux.png index 3a5e502a256..d0bf50b9adc 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-colorblind-linux.png index 92b4f57f557..69a44606029 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png index 2eef45190a4..59926ee583a 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-linux.png index 92b4f57f557..69a44606029 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-tritanopia-linux.png index 92b4f57f557..69a44606029 100644 Binary files a/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-tritanopia-linux.png differ diff --git a/package-lock.json b/package-lock.json index 777a073e8b3..c5930be2599 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6770,9 +6770,9 @@ } }, "node_modules/@primer/octicons-react": { - "version": "19.21.1", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.21.1.tgz", - "integrity": "sha512-DHaErpn2ZLMOJRxTdLf73eCDRvvil3xRmsOvKzg+I5KY0PsclYvEs/OX/Xb6fTK+PTteehidFvHBxrLYyEQ9Mg==", + "version": "19.24.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.24.1.tgz", + "integrity": "sha512-Y4EqqNb6VrFWfs9HDu3EUpFNm2xbOWMh6uEyXn968gQgXDxfRjBKhWoogrMsbo74S3mGAP0KYSxL8ZebWHDRtA==", "license": "MIT", "engines": { "node": ">=8" @@ -27638,7 +27638,7 @@ "@oddbird/popover-polyfill": "^0.5.2", "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1", - "@primer/octicons-react": "^19.21.0", + "@primer/octicons-react": "^19.24.1", "@primer/primitives": "10.x || 11.x", "@tanstack/react-virtual": "^3.13.18", "clsx": "^2.1.1", diff --git a/packages/react/package.json b/packages/react/package.json index 4e1594917b3..bf354b115d6 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -81,7 +81,7 @@ "@oddbird/popover-polyfill": "^0.5.2", "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1", - "@primer/octicons-react": "^19.21.0", + "@primer/octicons-react": "^19.24.1", "@primer/primitives": "10.x || 11.x", "@tanstack/react-virtual": "^3.13.18", "clsx": "^2.1.1", diff --git a/packages/react/src/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx index f176d5e7add..bce7afda03f 100644 --- a/packages/react/src/ActionBar/ActionBar.test.tsx +++ b/packages/react/src/ActionBar/ActionBar.test.tsx @@ -417,3 +417,65 @@ describe('ActionBar.Menu returnFocusRef', () => { expect(document.activeElement).toEqual(menuButton) }) }) + +describe('ActionBar data-component attributes', () => { + it('renders ActionBar with data-component attribute', () => { + const {container} = render( + + + , + ) + + const actionBar = container.querySelector('[data-component="ActionBar"]') + expect(actionBar).toBeInTheDocument() + }) + + it('renders ActionBar.IconButton with data-component attribute', () => { + const {container} = render( + + + , + ) + + const iconButton = container.querySelector('[data-component="ActionBar"] [data-component="IconButton"]') + expect(iconButton).toBeInTheDocument() + }) + + it('renders ActionBar.VerticalDivider with data-component attribute', () => { + const {container} = render( + + + + + , + ) + + const divider = container.querySelector('[data-component="ActionBar.VerticalDivider"]') + expect(divider).toBeInTheDocument() + }) + + it('renders ActionBar.Group with data-component attribute', () => { + const {container} = render( + + + + + + , + ) + + const group = container.querySelector('[data-component="ActionBar.Group"]') + expect(group).toBeInTheDocument() + }) + + it('renders ActionBar.Menu.IconButton with data-component attribute', () => { + render( + + + , + ) + + const menuButton = screen.getByRole('button', {name: 'More options'}) + expect(menuButton).toHaveAttribute('data-component', 'ActionBar.Menu.IconButton') + }) +}) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 83712ce21fd..a2c03125535 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -353,7 +353,7 @@ export const ActionBar: React.FC> = prop return ( -
+
-
+
{children}
@@ -571,7 +571,14 @@ export const ActionBarMenu = forwardRef( return ( - + {items.map((item, index) => renderMenuItem(item, index))} diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 49e44022c7f..c46ce4a11df 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -258,3 +258,169 @@ describe('ActionList', () => { expect(linkElements[2]).toHaveAttribute('data-size', 'medium') // default should be medium }) }) + +describe('ActionList data-component attributes', () => { + it('renders ActionList with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const actionList = container.querySelector('[data-component="ActionList"]') + expect(actionList).toBeInTheDocument() + }) + + it('renders ActionList.Item with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const item = container.querySelector('[data-component="ActionList.Item"]') + expect(item).toBeInTheDocument() + }) + + it('renders ActionList.Item.Label with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const label = container.querySelector('[data-component="ActionList.Item.Label"]') + expect(label).toBeInTheDocument() + }) + + it('renders ActionList.Item--DividerContainer with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const dividerContainer = container.querySelector('[data-component="ActionList.Item--DividerContainer"]') + expect(dividerContainer).toBeInTheDocument() + }) + + it('renders ActionList.Group with data-component attribute', () => { + const {container} = HTMLRender( + + + Group + Item + + , + ) + + const group = container.querySelector('[data-component="ActionList.Group"]') + expect(group).toBeInTheDocument() + }) + + it('renders ActionList.GroupHeading with data-component attribute', () => { + const {container} = HTMLRender( + + + Group Heading + Item + + , + ) + + const groupHeading = container.querySelector('[data-component="GroupHeadingWrap"]') + expect(groupHeading).toBeInTheDocument() + }) + + it('renders ActionList.Divider with data-component attribute', () => { + const {container} = HTMLRender( + + Item 1 + + Item 2 + , + ) + + const divider = container.querySelector('[data-component="ActionList.Divider"]') + expect(divider).toBeInTheDocument() + }) + + it('renders ActionList.Description with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + Description + + , + ) + + const description = container.querySelector('[data-component="ActionList.Description"]') + expect(description).toBeInTheDocument() + }) + + it('renders ActionList.LeadingVisual with data-component attribute', () => { + const {container} = HTMLRender( + + + Icon + Item + + , + ) + + const leadingVisual = container.querySelector('[data-component="ActionList.LeadingVisual"]') + expect(leadingVisual).toBeInTheDocument() + }) + + it('renders ActionList.TrailingVisual with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + Icon + + , + ) + + const trailingVisual = container.querySelector('[data-component="ActionList.TrailingVisual"]') + expect(trailingVisual).toBeInTheDocument() + }) + + it('renders ActionList.Selection with data-component attribute', () => { + const {container} = HTMLRender( + + Item + , + ) + + const selection = container.querySelector('[data-component="ActionList.Selection"]') + expect(selection).toBeInTheDocument() + }) + + it('renders ActionList.Heading with data-component attribute', () => { + const {container} = HTMLRender( + + Heading + Item + , + ) + + const heading = container.querySelector('[data-component="ActionList.Heading"]') + expect(heading).toBeInTheDocument() + }) + + it('renders ActionList.TrailingAction with data-component attribute', () => { + const {container} = HTMLRender( + + + Item + + + , + ) + + const trailingAction = container.querySelector('[data-component="ActionList.TrailingAction"]') + expect(trailingAction).toBeInTheDocument() + }) +}) diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index 441e79302c9..dbfae9838db 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -98,7 +98,12 @@ export const Group: FCWithSlotMarker +
  • {title && !slots.groupHeading ? ( // Escape hatch: supports old API in a non breaking way @@ -177,6 +182,7 @@ export const GroupHeading: FCWithSlotMarker