BugFix: Use first-of-type for buttongroup selector (#5343)

* BugFix: Use first-of-type for buttongroup selector * test(vrt): update snapshots * Create big-jokes-jog.md --------- Co-authored-by: jonrohan <[email protected]>
primer · Dec 3, 2024 · 70005b8 · 70005b8
1 parent d1dc7fa
commit 70005b8
Show file tree

Hide file tree

Showing 14 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/big-jokes-jog.md 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/...erlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png b/...erlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-colorblind-linux.png
diff --git a/...s/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png b/...s/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-dimmed-linux.png
diff --git a/...ay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png b/...ay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-high-contrast-linux.png
diff --git a/...mponents/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png b/...mponents/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-linux.png
diff --git a/...erlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png b/...erlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-dark-tritanopia-linux.png
diff --git a/...rlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png b/...rlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-colorblind-linux.png
diff --git a/...y.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png b/...y.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-high-contrast-linux.png
diff --git a/...ponents/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png b/...ponents/Overlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-linux.png
diff --git a/...rlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png b/...rlay.test.ts-snapshots/Overlay-Memex-Nested-Overlays-light-tritanopia-linux.png
diff --git a/.../Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png b/.../Overlay.test.ts-snapshots/Overlay-Nested-Overlays-dark-high-contrast-linux.png
diff --git a/...Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png b/...Overlay.test.ts-snapshots/Overlay-Nested-Overlays-light-high-contrast-linux.png
diff --git 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
@@ -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')};
       }