diff --git a/.changeset/wild-bears-pay.md b/.changeset/wild-bears-pay.md new file mode 100644 index 00000000000..a447186e0da --- /dev/null +++ b/.changeset/wild-bears-pay.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ButtonGroup: Fix button and icon button styling when tooltips are used on them diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-colorblind-linux.png new file mode 100644 index 00000000000..fd92130673e Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-dimmed-linux.png new file mode 100644 index 00000000000..0905298720d Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a3814a5ba78 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-linux.png new file mode 100644 index 00000000000..efc628c9d63 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cca02f29cea Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-colorblind-linux.png new file mode 100644 index 00000000000..eceb226b3e2 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-high-contrast-linux.png new file mode 100644 index 00000000000..d82b4849422 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-linux.png new file mode 100644 index 00000000000..80890b51f9f Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-tritanopia-linux.png new file mode 100644 index 00000000000..eceb226b3e2 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-2-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-colorblind-linux.png new file mode 100644 index 00000000000..9ec92f9ef19 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-dimmed-linux.png new file mode 100644 index 00000000000..b44baedae2c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a885a664061 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-linux.png new file mode 100644 index 00000000000..f3d8ba4af1d Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3b8be6612d9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-colorblind-linux.png new file mode 100644 index 00000000000..a3222b8ce86 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-high-contrast-linux.png new file mode 100644 index 00000000000..581e6f1be53 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-linux.png new file mode 100644 index 00000000000..205a90f5c95 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-tritanopia-linux.png new file mode 100644 index 00000000000..a3222b8ce86 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-Group-With-Tooltip-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-colorblind-linux.png new file mode 100644 index 00000000000..6a3fa732d68 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-dimmed-linux.png new file mode 100644 index 00000000000..bb946fbf4ea Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-high-contrast-linux.png new file mode 100644 index 00000000000..83b9103319e Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-linux.png new file mode 100644 index 00000000000..f305a27ce12 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-tritanopia-linux.png new file mode 100644 index 00000000000..6a3fa732d68 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-colorblind-linux.png new file mode 100644 index 00000000000..5f28810981b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-high-contrast-linux.png new file mode 100644 index 00000000000..ce4ceec15d1 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-linux.png new file mode 100644 index 00000000000..dcf32e8bff4 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-tritanopia-linux.png new file mode 100644 index 00000000000..5f28810981b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-2-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-colorblind-linux.png new file mode 100644 index 00000000000..c104d009f53 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-dimmed-linux.png new file mode 100644 index 00000000000..3295847b3d2 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ae9eed0c9d4 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-linux.png new file mode 100644 index 00000000000..9305b0f0ab4 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-tritanopia-linux.png new file mode 100644 index 00000000000..c104d009f53 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-colorblind-linux.png new file mode 100644 index 00000000000..d2f5518b9c9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-high-contrast-linux.png new file mode 100644 index 00000000000..337212f7902 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-linux.png new file mode 100644 index 00000000000..a0cacd209e6 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-tritanopia-linux.png new file mode 100644 index 00000000000..d2f5518b9c9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-colorblind-linux.png new file mode 100644 index 00000000000..6a3fa732d68 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-dimmed-linux.png new file mode 100644 index 00000000000..bb946fbf4ea Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-high-contrast-linux.png new file mode 100644 index 00000000000..83b9103319e Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-linux.png new file mode 100644 index 00000000000..f305a27ce12 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-tritanopia-linux.png new file mode 100644 index 00000000000..6a3fa732d68 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-colorblind-linux.png new file mode 100644 index 00000000000..5f28810981b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-high-contrast-linux.png new file mode 100644 index 00000000000..ce4ceec15d1 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-linux.png new file mode 100644 index 00000000000..dcf32e8bff4 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-tritanopia-linux.png new file mode 100644 index 00000000000..5f28810981b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-2-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-colorblind-linux.png new file mode 100644 index 00000000000..3b8be6612d9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-dimmed-linux.png new file mode 100644 index 00000000000..b44baedae2c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-high-contrast-linux.png new file mode 100644 index 00000000000..517859b3f6f Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-linux.png new file mode 100644 index 00000000000..f3d8ba4af1d Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3b8be6612d9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-colorblind-linux.png new file mode 100644 index 00000000000..bb0b0944c6a Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-high-contrast-linux.png new file mode 100644 index 00000000000..24b282237d7 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-linux.png new file mode 100644 index 00000000000..205a90f5c95 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-tritanopia-linux.png new file mode 100644 index 00000000000..bb0b0944c6a Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-light-tritanopia-linux.png differ diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index c3ca9822ff7..56ecc4d3e31 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -86,4 +86,207 @@ test.describe('ButtonGroup', () => { }) } }) + test.describe('Button Group With Tooltip', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--button-group-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Button Group With Tooltip.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--button-group-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Button Group With Tooltip 2', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--button-group-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Button Group With Tooltip 2.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--button-group-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Icon Buttons With Tooltip', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--icon-buttons-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Icon Buttons With Tooltip.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--icon-buttons-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Icon Buttons With Tooltip 2', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--icon-buttons-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Icon Buttons With Tooltip 2.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--icon-buttons-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Links With Tooltip', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--links-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Links With Tooltip.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--links-with-tooltip', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Links With Tooltip 2', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--links-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + // Default state + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Links With Tooltip 2.${theme}.png`, + { + threshold: 0.1, + }, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--links-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) }) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx index 43e57953da7..1b2554fa851 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx @@ -1,9 +1,10 @@ import React from 'react' import {ComponentMeta} from '@storybook/react' import ButtonGroup from './ButtonGroup' -import {IconButton} from '../Button' +import {Button, IconButton} from '../Button' import {PlusIcon, DashIcon} from '@primer/octicons-react' - +import {Tooltip as TooltipV2} from '../drafts' +import {Tooltip} from '..' export default { title: 'Components/ButtonGroup/Features', component: ButtonGroup, @@ -15,3 +16,73 @@ export const IconButtons = () => ( ) + +export const IconButtonsWithTooltip = () => ( + + + + + + + + +) + +export const ButtonGroupWithTooltip = () => ( + + + + + + + + +) + +export const LinksWithTooltip = () => ( + + + + + + + + +) + +export const IconButtonsWithTooltip2 = () => ( + + + + + + + + +) + +export const LinksWithTooltip2 = () => ( + + + + + + + + +) + +export const ButtonGroupWithTooltip2 = () => ( + + + + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 9e49b669aca..6493f3c5afe 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -8,21 +8,13 @@ const ButtonGroup = styled.div` vertical-align: middle; isolation: isolate; - && > * { + && > [type='button'], + /* this specific selection is required to cover for tooltip. Because the buttons are wrapped with the tooltip span */ + && > span[role='tooltip'] > [type='button'] { margin-inline-end: -1px; position: relative; border-radius: 0; - :first-child { - border-top-left-radius: ${get('radii.2')}; - border-bottom-left-radius: ${get('radii.2')}; - } - - :last-child { - border-top-right-radius: ${get('radii.2')}; - border-bottom-right-radius: ${get('radii.2')}; - } - :focus, :active, :hover { @@ -30,6 +22,18 @@ const ButtonGroup = styled.div` } } + && > [type='button']:first-child, + && > span[role='tooltip']:first-of-type > [type='button'] { + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; + } + + && > [type='button']:last-of-type, + && > span[role='tooltip']:last-of-type > [type='button'] { + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; + } + ${sx}; ` diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 484e0f90814..4f7ee9f35ea 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -273,6 +273,31 @@ const components = new Map([ id: 'components-buttongroup-features--icon-buttons', name: 'Icon Buttons', }, + { + id: 'components-buttongroup-features--button-group-with-tooltip', + name: 'Button Group With Tooltip', + }, + + { + id: 'components-buttongroup-features--button-group-with-tooltip-2', + name: 'Button Group With Tooltip 2', + }, + { + id: 'components-buttongroup-features--icon-buttons-with-tooltip', + name: 'Icon Buttons With Tooltip', + }, + { + id: 'components-buttongroup-features--icon-buttons-with-tooltip-2', + name: 'Icon Buttons With Tooltip 2', + }, + { + id: 'components-buttongroup-features--links-with-tooltip', + name: 'Links With Tooltip', + }, + { + id: 'components-buttongroup-features--links-with-tooltip-2', + name: 'Links With Tooltip 2', + }, ], }, ],