ButtonGroup: Fix button and icon button styling when tooltips are used on them

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()
+        })
+      })
+    }
+  })
 })

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<typeof ButtonGroup> = {
+  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 (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box padding={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+}
+
+export default meta
+
+export const IconButtonsWithTooltip1 = () => (
+  <ButtonGroup>
+    <Tooltip text="Add" direction="s">
+      <IconButton icon={PlusIcon} aria-label="Add" />
+    </Tooltip>
+    <Tooltip text="Subtract" direction="s">
+      <IconButton icon={DashIcon} aria-label="Subtract" />
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const LinksWithTooltip1 = () => (
+  <ButtonGroup>
+    <Tooltip text="Additonal text for link 1" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 1
+      </Button>
+    </Tooltip>
+    <Tooltip text="Additonal text for link 2" direction="s">
+      <Button as="a" href="https://primer.style">
+        Sample Link 2
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const LinkAndButtonWithTooltip1 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <Tooltip text="Additional info">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+    <Tooltip text="Open GitHub Copilot chat" direction="s">
+      <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const ButtonAndLinkWithTooltip1 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <Tooltip text="Open GitHub Copilot chat" direction="se">
+      <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
+    </Tooltip>
+    <Tooltip text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </Tooltip>
+  </ButtonGroup>
+)
+
+export const LinkAndButtonWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <TooltipV2 text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </TooltipV2>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" unsafeDisableTooltip={false} />
+  </ButtonGroup>
+)
+
+export const ButtonAndLinkWithTooltip2 = () => (
+  <ButtonGroup sx={{pl: 2}}>
+    <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" unsafeDisableTooltip={false} />
+    <TooltipV2 text="Additional info about the link">
+      <Button as="a" href="https://primer.style">
+        Link
+      </Button>
+    </TooltipV2>
+  </ButtonGroup>
+)