docs(react-popover): add WithArrowAutosize story to demonstrate autosizing behavior

[dmytrokirpa]

Previous Behavior

If you use a popover with the autosize option and an arrow, when the scrollbar appears, the arrow is no longer visible; this is due to the overflow.

There are a multiple ways of how to fix/workaround the issue described #35438 (comment). TLDR, we need to move overflow from PopoverSurface to underlying element

So here is what happens now:

<Popover positioning={{ autoSize: true }} withArrow> 
 <PopoverSurface> // `overflowY: 'auto'` will be applied to the element 
   <PopoverArrow /> // the overflow clips the arrow
    // content
 </PopoverSurface>

And I'm suggest to create an example with consumer-side workaround like this:

<Popover positioning={{ autoSize: true }} withArrow> 
 <PopoverSurface style={{ overflow: 'unset' }}> // no overflow
   <PopoverArrow />  // arrow is not clipped as there is no overflow on `PopoverSurface`
   <div style={{ overflow: 'auto', height: '100%' }}> // add overflow
     // content
   </div>
 </PopoverSurface>

We could technically handle this behind the scenes, but that might break things since it would mean updating the usePositioning hook (which a bunch of components use) and changing their DOM structure. So, I think it's best to just call this a known limitation for now and document a workaround for anyone who runs into it.

New Behavior

Added a new Popover example demonstrating how to use <Popover positioning={{ autoSize: true }} withArrow> without encountering the issue where the arrow gets clipped.

Related Issue(s)

• Partially adresses [Bug]: Popover - autoSize, Arrow, overflow and scroll #35438

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL