diff --git a/.changeset/big-jokes-jog.md b/.changeset/big-jokes-jog.md new file mode 100644 index 00000000000..dfe2c30e235 --- /dev/null +++ b/.changeset/big-jokes-jog.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +BugFix: Fix issue in ButtonGroup Overlay screenshots by updating the selector to use `:is(button, a)` and `:first-of-type` and `:last-of-type` pseudo-classes. diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png index 15c7c89e0fc..b765e93e58c 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png index 38bb73c0bba..94e5a3b029c 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png index 7390ebf1e9c..64e55dc46e3 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png index bc2921e4ba2..d5b00846cb0 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png index 15c7c89e0fc..b765e93e58c 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png index 83c6dd9acf8..9ae8d928529 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png index 2a7d1ad9849..1aefa187299 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png index 61e5794f0c7..79caf1daaf6 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png index afe9e626188..9ae8d928529 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png index 6fc363ea5cc..e7044ecb701 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png index 5de6ccd568d..ca0c6d21145 100644 Binary files a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png differ diff --git a/packages/react/src/ButtonGroup/ButtonGroup.module.css b/packages/react/src/ButtonGroup/ButtonGroup.module.css index 56e5b808a2a..e6ae5017e69 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.module.css +++ b/packages/react/src/ButtonGroup/ButtonGroup.module.css @@ -3,18 +3,18 @@ vertical-align: middle; isolation: isolate; - & > *:not([data-loading-wrapper]) { + & > *:not([data-loading-wrapper]):is(button, a) { /* stylelint-disable-next-line primer/spacing */ margin-inline-end: -1px; position: relative; border-radius: 0; - &:first-child { + &:first-of-type { border-top-left-radius: var(--borderRadius-medium); border-bottom-left-radius: var(--borderRadius-medium); } - &:last-child { + &:last-of-type { border-top-right-radius: var(--borderRadius-medium); border-bottom-right-radius: var(--borderRadius-medium); } diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index c901875909b..dd9761424eb 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -19,17 +19,17 @@ const StyledButtonGroup = toggleStyledComponent( vertical-align: middle; isolation: isolate; - && > *:not([data-loading-wrapper]) { + && > *:not([data-loading-wrapper]):is(button, a) { margin-inline-end: -1px; position: relative; border-radius: 0; - :first-child { + :first-of-type { border-top-left-radius: ${get('radii.2')}; border-bottom-left-radius: ${get('radii.2')}; } - :last-child { + :last-of-type { border-top-right-radius: ${get('radii.2')}; border-bottom-right-radius: ${get('radii.2')}; }