From 59932260dffb36f7d8689207095adf45e0551f5a Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Mon, 24 Nov 2025 18:07:08 +0100 Subject: [PATCH 1/3] docs(react-popover): add WithArrowAutosize story to demonstrate auto-sizing behavior --- .../PopoverWithArrowAutosize.stories.tsx | 98 +++++++++++++++++++ .../stories/src/Popover/index.stories.tsx | 1 + 2 files changed, 99 insertions(+) create mode 100644 packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx new file mode 100644 index 0000000000000..3cc973537e9bb --- /dev/null +++ b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; +import type { JSXElement } from '@fluentui/react-components'; +import { makeStyles, Button, Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-components'; + +const useContentStyles = makeStyles({ + root: { + overflowY: 'auto', + height: '100%', + }, + header: { + marginTop: '0', + }, +}); + +const ExampleContent = () => { + const styles = useContentStyles(); + return ( +
+

Popover content

+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh + ultricies risus, eget tincidunt neque nisl non nunc. Integer tempus augue nec facilisis suscipit. Aenean finibus + orci id turpis euismod, sit amet varius neque porta. Curabitur et urna vel orci luctus dictum. Mauris sed eros + euismod, cursus justo non, facilisis nibh. Aliquam blandit leo ut nisl tincidunt, sit amet ultrices lacus + molestie. Phasellus aliquet massa non vestibulum condimentum. Vivamus posuere, ligula eu pharetra fringilla, + lorem leo elementum risus, vitae tempor odio purus sed libero. Vestibulum porta nisl a metus ultricies, vel + dignissim lectus facilisis. Etiam interdum mi a suscipit aliquet. Nullam rhoncus molestie purus, id porta neque + consequat vitae. Sed id aliquam elit. Praesent nunc libero, vulputate vitae porta nec, venenatis sed augue. +
+
+ ); +}; + +export const WithArrowAutosize = (): JSXElement => ( + + + + + + {/* 1. Reset the overflow behavior on `PopoverSurface` to avoid clipping of arrow */} + + {/* 2. Set the height of the popover content to 100% to fill the available space and allow scrolling */} + + + +); + +WithArrowAutosize.parameters = { + docs: { + description: { + story: [ + 'When using the arrow with the `autoSize` positioning feature,', + 'make sure to move the `overflow` from the popover to an inner element to avoid clipping the arrow.', + ].join(' '), + }, + }, +}; diff --git a/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx index de167c34ee118..04c374d044140 100644 --- a/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx +++ b/packages/react-components/react-popover/stories/src/Popover/index.stories.tsx @@ -5,6 +5,7 @@ import bestPracticesMd from './PopoverBestPractices.md'; export { Default } from './PopoverDefault.stories'; export { WithArrow } from './PopoverWithArrow.stories'; +export { WithArrowAutosize } from './PopoverWithArrowAutosize.stories'; export { TrappingFocus } from './PopoverTrappingFocus.stories'; export { ControllingOpenAndClose } from './PopoverControllingOpenAndClose.stories'; export { NestedPopovers } from './PopoverNestedPopovers.stories'; From a38dcc44fafac28e8ca754be4f56ed726f822868 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Wed, 10 Dec 2025 16:12:34 +0100 Subject: [PATCH 2/3] fixup --- .../stories/src/Popover/PopoverWithArrowAutosize.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx index 3cc973537e9bb..6d2269313f910 100644 --- a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx +++ b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx @@ -4,6 +4,8 @@ import { makeStyles, Button, Popover, PopoverTrigger, PopoverSurface } from '@fl const useContentStyles = makeStyles({ root: { + boxSizing: 'border-box', + padding: '16px', overflowY: 'auto', height: '100%', }, @@ -79,7 +81,7 @@ export const WithArrowAutosize = (): JSXElement => ( {/* 1. Reset the overflow behavior on `PopoverSurface` to avoid clipping of arrow */} - + {/* 2. Set the height of the popover content to 100% to fill the available space and allow scrolling */} From 68e0cfc3a7e5de1885ecf12ab84d7c999fc6794f Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Wed, 10 Dec 2025 16:51:27 +0100 Subject: [PATCH 3/3] fixup --- .../stories/src/Popover/PopoverWithArrowAutosize.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx index 6d2269313f910..9e4dfdce14b75 100644 --- a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx +++ b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx @@ -81,7 +81,7 @@ export const WithArrowAutosize = (): JSXElement => ( {/* 1. Reset the overflow behavior on `PopoverSurface` to avoid clipping of arrow */} - + {/* 2. Set the height of the popover content to 100% to fill the available space and allow scrolling */}