diff --git a/.changeset/twenty-baboons-pull.md b/.changeset/twenty-baboons-pull.md new file mode 100644 index 00000000000..8a503674316 --- /dev/null +++ b/.changeset/twenty-baboons-pull.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Remove overflow property from popover (It has no usage) diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png index d9daf3707d6..43e09aa2cb9 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png index 12fca831119..9fa716e71ca 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png index a6c186e21b8..73adec29e4d 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png index fba07c70013..6be57b27250 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png index a6c186e21b8..73adec29e4d 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png index 4403f827367..bbeb1c517f5 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png index fba07c70013..6be57b27250 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-colorblind-linux.png deleted file mode 100644 index cfc631b3443..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-dimmed-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-dimmed-linux.png deleted file mode 100644 index 9fa6d5f3734..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-high-contrast-linux.png deleted file mode 100644 index 198f94d65a2..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-linux.png deleted file mode 100644 index cfc631b3443..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-tritanopia-linux.png deleted file mode 100644 index cfc631b3443..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-colorblind-linux.png deleted file mode 100644 index 5e031d8f289..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-high-contrast-linux.png deleted file mode 100644 index 56a8bbf5ba7..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-linux.png deleted file mode 100644 index 5e031d8f289..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-tritanopia-linux.png deleted file mode 100644 index 5e031d8f289..00000000000 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-Popover-Overflow-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-high-contrast-linux.png index 796325f100a..665db3b8f50 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-high-contrast-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-high-contrast-linux.png index ddd42dc82c0..a96c0fb0b04 100644 Binary files a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-high-contrast-linux.png and b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-high-contrast-linux.png differ diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts index f4ba769c838..99a4fde5546 100644 --- a/e2e/components/IconButton.test.ts +++ b/e2e/components/IconButton.test.ts @@ -45,6 +45,9 @@ const stories = [ disableAnimations: true, async setup(page: Page) { await page.keyboard.press('Tab') // focus on icon button + await page.getByText('Bold').waitFor({ + state: 'visible', + }) }, }, { diff --git a/e2e/components/Popover.test.ts b/e2e/components/Popover.test.ts index 3e934fb7458..8061b4a31a9 100644 --- a/e2e/components/Popover.test.ts +++ b/e2e/components/Popover.test.ts @@ -15,10 +15,6 @@ const stories = [ title: 'SX Props', id: 'components-popover-dev--sx-props', }, - { - title: 'Popover Overflow', - id: 'components-popover-dev--popover-overflow', - }, ] as const test.describe('Popover', () => { diff --git a/packages/react/src/Popover/Popover.dev.stories.tsx b/packages/react/src/Popover/Popover.dev.stories.tsx index 85cb6fd85cb..fe33a72bea6 100644 --- a/packages/react/src/Popover/Popover.dev.stories.tsx +++ b/packages/react/src/Popover/Popover.dev.stories.tsx @@ -35,19 +35,3 @@ export const SxProps = () => ( ) - -export const PopoverOverflow = () => ( - - - Popover heading - Message about popovers - Message about popovers - Message about popovers - Message about popovers - Message about popovers - Message about popovers - Message about popovers - - - -) diff --git a/packages/react/src/Popover/Popover.module.css b/packages/react/src/Popover/Popover.module.css index cba048e5d52..5eacfae88c4 100644 --- a/packages/react/src/Popover/Popover.module.css +++ b/packages/react/src/Popover/Popover.module.css @@ -20,7 +20,6 @@ background-color: var(--overlay-bgColor); border: var(--borderWidth-thin) solid var(--borderColor-default); border-radius: var(--borderRadius-medium); - overflow: hidden; /* Carets */ &::before, @@ -253,20 +252,4 @@ &:where([data-height='auto']) { height: auto; } - - &:where([data-overflow='auto']) { - overflow: auto; - } - - &:where([data-overflow='hidden']) { - overflow: hidden; - } - - &:where([data-overflow='scroll']) { - overflow: scroll; - } - - &:where([data-overflow='visible']) { - overflow: visible; - } } diff --git a/packages/react/src/Popover/Popover.stories.tsx b/packages/react/src/Popover/Popover.stories.tsx index f06fe9a1456..68e4c6244c8 100644 --- a/packages/react/src/Popover/Popover.stories.tsx +++ b/packages/react/src/Popover/Popover.stories.tsx @@ -21,7 +21,7 @@ export const Default = () => ( export const Playground: StoryFn = args => ( - + Popover heading Message about popovers @@ -79,10 +79,4 @@ Playground.argTypes = { }, options: ['small', 'medium', 'large', 'auto', 'xlarge', 'fit-content'], }, - overflow: { - control: { - type: 'radio', - }, - options: ['auto', 'hidden', 'scroll', 'visible'], - }, } diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx index 4b624942fe7..295014c4255 100644 --- a/packages/react/src/Popover/Popover.tsx +++ b/packages/react/src/Popover/Popover.tsx @@ -57,7 +57,6 @@ export type PopoverContentProps = { as?: React.ElementType width?: 'xsmall' | 'small' | 'large' | 'medium' | 'auto' | 'xlarge' height?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content' - overflow?: 'auto' | 'hidden' | 'scroll' | 'visible' } & StyledPopoverProps & HTMLProps @@ -65,14 +64,12 @@ const PopoverContent: React.FC> = ( className, width = 'small', height = 'fit-content', - overflow = 'auto', ...props }) => { return (