diff --git a/.changeset/purple-pigs-check.md b/.changeset/purple-pigs-check.md new file mode 100644 index 00000000000..08a4fa2cc92 --- /dev/null +++ b/.changeset/purple-pigs-check.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +Fix: ActionMenu with overflow contains scrollbars within its rounded border + + diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css index 15a2fbd9834..4c9b063d239 100644 --- a/packages/react/src/ActionMenu/ActionMenu.module.css +++ b/packages/react/src/ActionMenu/ActionMenu.module.css @@ -2,4 +2,46 @@ &:where([data-variant='fullscreen']) { padding-top: var(--base-size-36); } + + /* Overflow variants */ + &:where([data-overflow-auto]) { + overflow: auto; + } + + &:where([data-overflow-hidden]) { + overflow: hidden; + } + + &:where([data-overflow-scroll]) { + overflow: scroll; + } + + &:where([data-overflow-visible]) { + overflow: visible; + } + + /* Max-height size tokens (mirror Overlay sizes) */ + &:where([data-max-height-xsmall]) { + max-height: 192px; + } + + &:where([data-max-height-small]) { + max-height: 256px; + } + + &:where([data-max-height-medium]) { + max-height: 320px; + } + + &:where([data-max-height-large]) { + max-height: 432px; + } + + &:where([data-max-height-xlarge]) { + max-height: 600px; + } + + &:where([data-max-height-fit-content]) { + max-height: fit-content; + } } diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index 2041d27f6e4..c2c722cb895 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -316,7 +316,13 @@ const Overlay: FCWithSlotMarker> = ({ onPositionChange={onPositionChange} variant={variant} > -
+