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-And-Link-With-Tooltip-1-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-colorblind-linux.png new file mode 100644 index 00000000000..d1877c4f314 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-dimmed-linux.png new file mode 100644 index 00000000000..7b4d270b4f9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a399a3a82fc Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-linux.png new file mode 100644 index 00000000000..11ed494c9cb Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d1877c4f314 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-colorblind-linux.png new file mode 100644 index 00000000000..6c7ae71c518 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-high-contrast-linux.png new file mode 100644 index 00000000000..cc37a83f933 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-linux.png new file mode 100644 index 00000000000..e264e0e6c6b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-tritanopia-linux.png new file mode 100644 index 00000000000..6c7ae71c518 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-1-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-colorblind-linux.png new file mode 100644 index 00000000000..fecced5a345 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-dimmed-linux.png new file mode 100644 index 00000000000..ef21ae25126 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-high-contrast-linux.png new file mode 100644 index 00000000000..98769e19dbf Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-linux.png new file mode 100644 index 00000000000..ccef55ee4af Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fecced5a345 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-colorblind-linux.png new file mode 100644 index 00000000000..63607f490f3 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-high-contrast-linux.png new file mode 100644 index 00000000000..54d98832f2b Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-linux.png new file mode 100644 index 00000000000..c557e9405d8 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-tritanopia-linux.png new file mode 100644 index 00000000000..63607f490f3 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-With-Tooltip-2-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-colorblind-linux.png similarity index 52% rename from .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png rename to .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-colorblind-linux.png index 42f76c4e048..7bc78307837 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-dimmed-linux.png new file mode 100644 index 00000000000..cee7285d0db Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0ea22aaae06 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-linux.png new file mode 100644 index 00000000000..7bc78307837 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-tritanopia-linux.png new file mode 100644 index 00000000000..7bc78307837 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-colorblind-linux.png similarity index 52% rename from .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png rename to .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-colorblind-linux.png index 6476c4281c9..ce11b0a4c84 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-high-contrast-linux.png new file mode 100644 index 00000000000..dc02acdc501 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-linux.png new file mode 100644 index 00000000000..1a075dbb2a2 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-tritanopia-linux.png similarity index 51% rename from .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png rename to .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-tritanopia-linux.png index c58cc3f248c..ce11b0a4c84 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Button-And-Link-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png index 71edee0078f..95b18887a85 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png index c58cc3f248c..dd8a6774168 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png index 0066cbb0c43..58bca7ea488 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png index 71edee0078f..95b18887a85 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png index 71edee0078f..95b18887a85 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png index 7e2308c1f60..c671e5a16ec 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png index 42f76c4e048..ac5cc9f38d6 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png index 6476c4281c9..c2d7adec17f 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png index 7e2308c1f60..c671e5a16ec 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-colorblind-linux.png new file mode 100644 index 00000000000..4af11261dde Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-dimmed-linux.png new file mode 100644 index 00000000000..5192bdc3e95 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-high-contrast-linux.png new file mode 100644 index 00000000000..05f7486cb1c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-linux.png new file mode 100644 index 00000000000..564bd48541a Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4af11261dde Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-colorblind-linux.png new file mode 100644 index 00000000000..ea9323d1973 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-high-contrast-linux.png new file mode 100644 index 00000000000..5329ef89d51 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-linux.png new file mode 100644 index 00000000000..8f96de86629 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-tritanopia-linux.png new file mode 100644 index 00000000000..ea9323d1973 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-With-Tooltip-1-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png index 1b03a407f82..9633dcc9938 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png index 2b2eeb2a072..8a1e5a58155 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png index 3963ab15c0f..87d466f5b3a 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png index 1b03a407f82..9633dcc9938 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png index 1b03a407f82..9633dcc9938 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png index a2fd494b318..ecbbd234f4d 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png index 95c5fd8b16c..ef1e25a17f2 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png index 593e7070bde..c2a55130495 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png index a2fd494b318..ecbbd234f4d 100644 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-colorblind-linux.png new file mode 100644 index 00000000000..1befd91e964 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-dimmed-linux.png new file mode 100644 index 00000000000..59cd02346e6 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-high-contrast-linux.png new file mode 100644 index 00000000000..dda9dcf30ca Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-linux.png new file mode 100644 index 00000000000..6e75e39e1e9 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-tritanopia-linux.png new file mode 100644 index 00000000000..1befd91e964 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-colorblind-linux.png new file mode 100644 index 00000000000..f49dbf08701 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-high-contrast-linux.png new file mode 100644 index 00000000000..a7dd23b1cfd Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-linux.png new file mode 100644 index 00000000000..8aecba4ae60 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-tritanopia-linux.png new file mode 100644 index 00000000000..f49dbf08701 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-1-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-colorblind-linux.png new file mode 100644 index 00000000000..972a265efd5 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-dimmed-linux.png new file mode 100644 index 00000000000..ad35474ac5c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1e88cf873b7 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-linux.png new file mode 100644 index 00000000000..e4bddd1bc88 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-tritanopia-linux.png new file mode 100644 index 00000000000..972a265efd5 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-colorblind-linux.png new file mode 100644 index 00000000000..7276a664c8c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-high-contrast-linux.png new file mode 100644 index 00000000000..70593455d93 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-linux.png new file mode 100644 index 00000000000..4f21077493e Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-tritanopia-linux.png new file mode 100644 index 00000000000..7276a664c8c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Link-And-Button-With-Tooltip-2-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-colorblind-linux.png new file mode 100644 index 00000000000..216b0ba4179 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-dimmed-linux.png new file mode 100644 index 00000000000..60480f39ed7 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-high-contrast-linux.png new file mode 100644 index 00000000000..10e27bcca33 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-linux.png new file mode 100644 index 00000000000..d5b8e44703c Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-tritanopia-linux.png new file mode 100644 index 00000000000..216b0ba4179 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-colorblind-linux.png new file mode 100644 index 00000000000..cf4ec3f48ae Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-high-contrast-linux.png new file mode 100644 index 00000000000..6274f3955cc Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-linux.png new file mode 100644 index 00000000000..1c66c2d9cc6 Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-linux.png differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-light-tritanopia-linux.png new file mode 100644 index 00000000000..cf4ec3f48ae Binary files /dev/null and b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Links-With-Tooltip-1-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..be5e9213060 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..8d992fffc98 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..c9eb8c3b15d 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..3d276b5a315 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..be5e9213060 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..b6036bd97c7 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..5a4bdb2be8d 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..cf5bbb4ea59 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..b6036bd97c7 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-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-colorblind-linux.png deleted file mode 100644 index 71edee0078f..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png deleted file mode 100644 index 0066cbb0c43..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png deleted file mode 100644 index 71edee0078f..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png deleted file mode 100644 index 71edee0078f..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png deleted file mode 100644 index 7e2308c1f60..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png deleted file mode 100644 index 7e2308c1f60..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-Playground-light-tritanopia-linux.png and /dev/null differ diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index c3ca9822ff7..2166048de7a 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -31,24 +31,24 @@ test.describe('ButtonGroup', () => { } }) - test.describe('Playground', () => { + test.describe('Icon Buttons', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-buttongroup--playground', + id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-buttongroup--playground', + id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, }, @@ -59,24 +59,234 @@ test.describe('ButtonGroup', () => { } }) - test.describe('Icon Buttons', () => { + test.describe('Button And Link', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-buttongroup-features--icon-buttons', + id: 'components-buttongroup-features--button-and-link', globals: { colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Button And Link.${theme}.png`) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-buttongroup-features--icon-buttons', + id: 'components-buttongroup-features--button-and-link', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Button And Link With Tooltip 1', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Button And Link With Tooltip 1.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Button And Link With Tooltip 2', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Button And Link With Tooltip 2.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Icon Buttons With Tooltip 1', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--icon-buttons-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Icon Buttons With Tooltip 1.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--icon-buttons-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Link And Button With Tooltip 1', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Link And Button With Tooltip 1.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Link And Button With Tooltip 2', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Link And Button With Tooltip 2.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Links With Tooltip 1', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--links-with-tooltip-1', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Links With Tooltip 1.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--links-with-tooltip-1', + 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-devonly--links-with-tooltip-2', + globals: { + colorScheme: theme, + }, + }) + + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Links With Tooltip 2.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-devonly--links-with-tooltip-2', globals: { colorScheme: theme, }, diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx new file mode 100644 index 00000000000..94797975c2a --- /dev/null +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -0,0 +1,119 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import ButtonGroup from './ButtonGroup' +import {Button, IconButton} from '../Button' +import {PlusIcon, DashIcon, CopilotIcon} from '@primer/octicons-react' +import {Tooltip as TooltipV2} from '../drafts' +import {Box, Tooltip, ThemeProvider, BaseStyles} from '..' + +const meta: Meta = { + title: 'Components/ButtonGroup/DevOnly', + component: ButtonGroup, + decorators: [ + Story => { + // Add some padding to the wrapper box to make sure tooltip v1 is always in the viewport + return ( + + + {Story()} + + + ) + }, + ], +} + +export default meta + +export const IconButtonsWithTooltip1 = () => ( + + + + + + + + +) + +export const LinksWithTooltip1 = () => ( + + + + + + + + +) + +export const LinksWithTooltip2 = () => ( + + + + + + + + +) + +export const LinkAndButtonWithTooltip1 = () => ( + + + + + + + + +) + +export const ButtonAndLinkWithTooltip1 = () => ( + + + + + + + + +) + +export const LinkAndButtonWithTooltip2 = () => ( + + + + + + + + +) + +export const ButtonAndLinkWithTooltip2 = () => ( + + + + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx index 7e354239e2c..e0416f41a8b 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx @@ -1,13 +1,29 @@ import React from 'react' -import type {ComponentMeta} from '@storybook/react' +import type {Meta} 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} from '../next' +import {Box, ThemeProvider, BaseStyles} from '..' -export default { +const meta: Meta = { title: 'Components/ButtonGroup/Features', component: ButtonGroup, -} as ComponentMeta + decorators: [ + Story => { + // Add some padding to the wrapper box to make sure tooltip v1 is always in the viewport + return ( + + + {Story()} + + + ) + }, + ], +} + +export default meta export const IconButtons = () => ( @@ -15,3 +31,22 @@ export const IconButtons = () => ( ) + +export const IconButtonsWithTooltip = () => ( + + + + + + + + +) +export const ButtonAndLink = () => ( + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 251045b990a..815cc2ad1a7 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -8,21 +8,12 @@ const ButtonGroup = styled.div` vertical-align: middle; isolation: isolate; - && > * { + /* apply these styles to all buttons and links under the group */ + && :is(button, a) { 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 +21,24 @@ const ButtonGroup = styled.div` } } + /* apply the top left and bottom left border styles to the first button or link element (covers elements that use tooltip v2 as well ) */ + && > :first-child:is(button, a), + /* This is needed to select the first button or link element if they are using tooltip v1 */ + && > span[role='tooltip']:first-of-type > :is(button, a) { + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; + } + + /* apply the top right and bottom right border styles to the last button or link element */ + && > :last-child:is(button, a), + /* This is needed to select the last button or link element if they are using tooltip v2 */ + && > :nth-last-child(2):has(+ div[popover='auto']), + /* This is needed to select the last button or link element if they are using tooltip v1 */ + && > span[role='tooltip']:last-of-type > :is(button, a) { + 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 12cfd4038f9..92479ea3715 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -265,14 +265,42 @@ const components = new Map([ id: 'components-buttongroup--default', name: 'Default', }, - { - id: 'components-buttongroup--playground', - name: 'Playground', - }, { id: 'components-buttongroup-features--icon-buttons', name: 'Icon Buttons', }, + { + id: 'components-buttongroup-features--button-and-link', + name: 'Button And Link', + }, + { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-1', + name: 'Button And Link With Tooltip 1', + }, + { + id: 'components-buttongroup-devonly--button-and-link-with-tooltip-2', + name: 'Button And Link With Tooltip 2', + }, + { + id: 'components-buttongroup-devonly--icon-buttons-with-tooltip-1', + name: 'Icon Buttons With Tooltip 1', + }, + { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-1', + name: 'Link And Button With Tooltip 1', + }, + { + id: 'components-buttongroup-devonly--link-and-button-with-tooltip-2', + name: 'Link And Button With Tooltip 2', + }, + { + id: 'components-buttongroup-devonly--links-with-tooltip-1', + name: 'Links With Tooltip 1', + }, + { + id: 'components-buttongroup-devonly--links-with-tooltip-2', + name: 'Links With Tooltip 2', + }, ], }, ],