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..01f6ce12efd 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..e8add88f084 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..577cc3773d7 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..01f6ce12efd 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..01f6ce12efd 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..4f11bac73d9 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..46ee3f6941a 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..4f11bac73d9 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..4f11bac73d9 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..800657d337f 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..8f0e9b8918d 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..fbf3af25f96 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..800657d337f 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..800657d337f 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..2663cf613b6 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..5b7e9faa755 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..2663cf613b6 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..2663cf613b6 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-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..f6c40c8ca4d 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..ffda1fb96b6 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..6dd5fd846b9 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..f6c40c8ca4d 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..f6c40c8ca4d 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..c2fbeb8d8cf 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..a20d7be7417 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..c2fbeb8d8cf 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..c2fbeb8d8cf 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-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..3efbfdad813 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..a815a1ef6d2 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..12b0a6d791f 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..3efbfdad813 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..3efbfdad813 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..8c20ea49dd0 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..dcc252ed548 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..8c20ea49dd0 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..8c20ea49dd0 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-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..d6c5613cb27 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..fb6d2ab20de 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..bab25487e03 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..d6c5613cb27 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..d6c5613cb27 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..9fc0da9a879 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..e3b5d3eb750 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..9fc0da9a879 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..9fc0da9a879 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..6d795ea8375 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..432cb0c274b 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..c745309bc30 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..6d795ea8375 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..6d795ea8375 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..d43492d75e7 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..6a6fa9082dc 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..d43492d75e7 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..d43492d75e7 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..d44540833c4 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..859a5da3bf4 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..2d9060c50cb 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..d44540833c4 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..d44540833c4 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..6fee3f48a31 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..209c110d44b 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..6fee3f48a31 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..6fee3f48a31 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-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..f12d4d5ef27 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..83e0eb850cf 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..5cd6d56670d 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..f12d4d5ef27 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..f12d4d5ef27 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..a5d487e1117 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..96812be796c 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..a5d487e1117 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..a5d487e1117 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..c9004b92a75 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -86,4 +86,260 @@ test.describe('ButtonGroup', () => { }) } }) + + 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 + // focus on the first button to make sure the tooltip is visible + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Icon Buttons with Tooltip.${theme}.png`, + ) + }) + + 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('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 + // focus on the first button to make sure the tooltip is visible + await page.keyboard.press('Tab') + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ButtonGroup.Links with Tooltip.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--links-with-tooltip', + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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, + }, + }) + + // Default state + // focus on the first button to make sure the tooltip is visible + 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() + }) + }) + } + }) }) 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..53e6da1e1c4 --- /dev/null +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -0,0 +1,100 @@ +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 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 301c8ded983..77b757ad231 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx @@ -1,13 +1,16 @@ import React from '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' -export default { +const meta = { title: 'Components/ButtonGroup/Features', component: ButtonGroup, -} as Meta +} satisfies Meta + +export default meta export const IconButtons = () => ( @@ -15,3 +18,33 @@ export const IconButtons = () => ( ) + +export const IconButtonsWithTooltip = () => ( + + + + +) +export const ButtonAndLink = () => ( + + + + +) + +export const LinksWithTooltip = () => ( + + + + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 251045b990a..36e48bc23df 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -1,28 +1,24 @@ import styled from 'styled-components' import {get} from '../constants' -import sx from '../sx' +import {type SxProp} from '../sx' +import React from 'react' +import Box from '../Box' +import {defaultSxProp} from '../utils/defaultSxProp' import type {ComponentProps} from '../utils/types' +import {useProvidedRefOrCreate} from '../hooks' -const ButtonGroup = styled.div` +export type ButtonGroupProps = React.PropsWithChildren> + +const StyledButtonGroup = styled.div` display: inline-flex; vertical-align: middle; isolation: isolate; - && > * { + && :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,8 +26,27 @@ const ButtonGroup = styled.div` } } - ${sx}; + && > :first-child :is(button, a) { + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; + } + + && > :last-child :is(button, a) { + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; + } ` +const ButtonGroup = React.forwardRef( + ({children, sx = defaultSxProp, ...rest}: ButtonGroupProps, forwardedRef) => { + const ref = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const buttons = React.Children.map(children, (child, index) => {child}) + + return ( + + {buttons} + + ) + }, +) -export type ButtonGroupProps = ComponentProps export default ButtonGroup diff --git a/packages/react/src/__tests__/deprecated/Button.test.tsx b/packages/react/src/__tests__/deprecated/Button.test.tsx index 14b12d2e34d..0f8bef2c9f1 100644 --- a/packages/react/src/__tests__/deprecated/Button.test.tsx +++ b/packages/react/src/__tests__/deprecated/Button.test.tsx @@ -8,7 +8,6 @@ import { ButtonInvisible, ButtonTableList, } from '../../deprecated' -import {ButtonGroup} from '../..' import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' @@ -27,9 +26,6 @@ describe('Button', () => { ButtonTableList, ButtonClose, }) - checkExports('ButtonGroup', { - default: ButtonGroup, - }) it('renders a