From eb499dc94e189277a109663aa2e3859c33b95c6e Mon Sep 17 00:00:00 2001 From: David Strack Date: Wed, 1 Nov 2023 16:38:44 -0500 Subject: [PATCH 1/6] support overflow scrolling when maxHeight is set --- src/ActionMenu/ActionMenu.examples.stories.tsx | 17 +++++++++++++++++ src/Overlay/Overlay.tsx | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx index 4b8a40e2eb5..b7dc3e822f5 100644 --- a/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -334,3 +334,20 @@ export const OnRightSide = () => ( ) + +export const SettingMaxHeight = () => { + return ( + + Open menu + + + {Array.from({length: 100}, (_, i) => ( + alert(`Item ${i + 1} clicked`)}> + Item {i + 1} + + ))} + + + + ) +} diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index 817e80ec992..f6845c94d04 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -64,7 +64,7 @@ const StyledOverlay = styled.div` max-height: ${props => props.maxHeight && heightMap[props.maxHeight]}; width: ${props => widthMap[props.width || 'auto']}; border-radius: 12px; - overflow: hidden; + overflow: ${props => (props.maxHeight ? 'scroll' : 'hidden')}; animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')}; @keyframes overlay-appear { From 46d88c74740d430b5087bd0ffeaebe9dbf8ae21b Mon Sep 17 00:00:00 2001 From: David Strack Date: Thu, 16 Nov 2023 15:17:31 -0600 Subject: [PATCH 2/6] pass overflow behavior in as a prop --- src/ActionMenu/ActionMenu.examples.stories.tsx | 2 +- src/Overlay/Overlay.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx index b7dc3e822f5..92553f97ec0 100644 --- a/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -339,7 +339,7 @@ export const SettingMaxHeight = () => { return ( Open menu - + {Array.from({length: 100}, (_, i) => ( alert(`Item ${i + 1} clicked`)}> diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index f6845c94d04..5a2c6c39717 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -17,6 +17,7 @@ type StyledOverlayProps = { maxHeight?: keyof Omit maxWidth?: keyof Omit visibility?: 'visible' | 'hidden' + overflow?: 'auto' | 'hidden' | 'scroll' | 'visible' anchorSide?: AnchorSide } & SxProp @@ -64,7 +65,7 @@ const StyledOverlay = styled.div` max-height: ${props => props.maxHeight && heightMap[props.maxHeight]}; width: ${props => widthMap[props.width || 'auto']}; border-radius: 12px; - overflow: ${props => (props.maxHeight ? 'scroll' : 'hidden')}; + overflow: ${props => props.overflow && overflowMap[props.overflow]}; animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')}; @keyframes overlay-appear { From c73d0f21cb8a9ce15600d8594aced6600056a77b Mon Sep 17 00:00:00 2001 From: David Strack Date: Fri, 17 Nov 2023 13:45:06 -0600 Subject: [PATCH 3/6] only set overflow if prop is provided --- src/Overlay/Overlay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index 5a2c6c39717..902f7116ad3 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -65,7 +65,7 @@ const StyledOverlay = styled.div` max-height: ${props => props.maxHeight && heightMap[props.maxHeight]}; width: ${props => widthMap[props.width || 'auto']}; border-radius: 12px; - overflow: ${props => props.overflow && overflowMap[props.overflow]}; + ${props => (props.overflow ? `overflow: ${props.overflow};` : '')} animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')}; @keyframes overlay-appear { From 0ba90fe01d509242779c0faa4d4e5881c80298f3 Mon Sep 17 00:00:00 2001 From: David Strack Date: Mon, 27 Nov 2023 10:56:20 -0600 Subject: [PATCH 4/6] changeset --- .changeset/ninety-brooms-speak.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-brooms-speak.md diff --git a/.changeset/ninety-brooms-speak.md b/.changeset/ninety-brooms-speak.md new file mode 100644 index 00000000000..24dfe9d9163 --- /dev/null +++ b/.changeset/ninety-brooms-speak.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay From 39c84093f1f1d723062278304bece938784f54a5 Mon Sep 17 00:00:00 2001 From: David Strack Date: Tue, 12 Dec 2023 12:23:33 -0600 Subject: [PATCH 5/6] update snapshot --- src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 8196646c9ce..b054cf909fc 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -178,7 +178,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` height: auto; width: auto; border-radius: 12px; - overflow: hidden; -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1); animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1); visibility: var(--styled-overlay-visibility); From 7fabe576d027d72ec90214fdb0d15615330cd3bc Mon Sep 17 00:00:00 2001 From: David Strack Date: Tue, 12 Dec 2023 13:15:20 -0600 Subject: [PATCH 6/6] keep overflow hidden as default style --- src/Overlay/Overlay.tsx | 2 +- src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index 902f7116ad3..3b1c867fe5d 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -65,7 +65,7 @@ const StyledOverlay = styled.div` max-height: ${props => props.maxHeight && heightMap[props.maxHeight]}; width: ${props => widthMap[props.width || 'auto']}; border-radius: 12px; - ${props => (props.overflow ? `overflow: ${props.overflow};` : '')} + overflow: ${props => (props.overflow ? props.overflow : 'hidden')}; animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')}; @keyframes overlay-appear { diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index b054cf909fc..8196646c9ce 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -178,6 +178,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` height: auto; width: auto; border-radius: 12px; + overflow: hidden; -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1); animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1); visibility: var(--styled-overlay-visibility);