Implement Floating UI for positioning floating elements

[tay1orjones]

The problem

All across the system we have components that render various types of floating elements. Each of these cannot be rendered via a portal because it fails SC 1.3.2: meaningful sequence.

Due to this, there are a bunch of situations where floating elements don't render properly above other elements:

Modal

• Dropdown menus should overlay scrollable areas #7565
• [Enhancement]: Popover doesn't auto align inside of modal #13279

Issues already resolved by this workstream

• TooltipDefinition and TooltipIcon are cut by modal overlay #9524
• [Bug]: tooltips render under icons #14137
• Dropdown/Multiselect: Element within parent #5318
• Dropdown component does not automatically drop up vs. down like native Select element #4686
• [Bug]: Tooltips are clipped in Table component #14395
• [Bug]: MenuButton menu items remain fixed on page scroll #14296
• Modal overflow #6288
• [Bug]: Tooltip does not render when inside TableHeader #13918
• Add floating-ui to @carbon/react Menu, MenuButton #15521
• [Bug]: When autoAlign prop is set, and the viewport is too small, caret / popover positioning is off #15566
• [Bug]: Tooltips broken when used inside DataTable #15981
• [Bug]: ContainedList within Popover can cause visual defects when placed too high on page #13849
• Tooltip with different value for overflow-x and y. #13881
• [DataTable] Overflow of DataTable does not work properly if there are tooltips inside #6728
• [Bug]: Tooltip and DefinitionTooltips don't work well in tables with sticky headers #14428
• Adding "auto" direction to OverflowMenu in DataTable #6551

Popover's autoAlign prop was a step towards attempting to rectify this situation by adding some logic for overflow detection and reflow #11508, but it has a few limitations/drawbacks:

• Lots of rendering/calculation logic encapsulated in the component that isn't reusable across the system
• Overall hasn't been optimized and is still experimental
• Only works on the first render
• Only detects window/viewport boundaries, doesn't detect container boundaries
• Can't be modified to include additional padding for overflow detection

Proposed solution

Use floating-ui for positioning of floating elements.

It's licensed MIT, has an intuitive api, is extensible, and is quickly becoming a de-facto solution for this type of positioning. It's the successor to the popular popper.js library.

It includes collision detection and we could enable the feature behind experimental props.

There are ready-made packages for react, react-native, and vue. The @floating-ui/dom package can be used for other framework implementations of Carbon (web components, angular, etc).

It's worth mentioning Radix UI and Fluent UI Web are using it, as are some others

This also could open up the possibility for more easily implementing advanced positioning features such as:

• TooltipDefinition and TooltipIcon are cut by modal overlay #9524

Questions and concerns

• Does this work with flatpickr and downshift?
• Would we be better off buying into browser-based specs like the new Popover API, and the CSS Anchoring API?
  • floating-ui discussion on integrating the Popover API

    • there'll be a polyfill coming soon from the same folks who are working on the (Popover) API

  • floating-ui discussion on integrating the CSS Anchoring API

General items, open questions to resolve

Preview Give feedback

1. Floating UI: Allow floating-ui-based positioning without autoAlign collision detection #17018
   role: dev 🤖 status: help wanted 👐 status: needs more info status: waiting for maintainer response 💬 +4
   

   

@carbon/react

Preview Give feedback

1. Refactor Popover to use Popover API - POC #14492
   component: popover role: dev 🤖 type: infrastructure 🤖 +3
2. Refactor Popover to use FloatingUI #14493
   component: popover role: dev 🤖 type: infrastructure 🤖 +3
   
3. Properly deprecate PopoverAlignment type values #16009
   1 of 1
   area: typescript role: dev 🤖 type: bug 🐛 +3
   
4. Add floating-ui to @carbon/react Dropdown #15865
   component: dropdown role: dev 🤖 +2
   
5. Add floating-ui to @carbon/react ComboBox #16470
   component: combobox +1
   
6. Add floating-ui to @carbon/react MultiSelect and FilterableMultiSelect #16507
   +0
   
7. Add floating-ui to @carbon/react Menu, MenuButton #15521
   role: dev 🤖 severity: 2 type: bug 🐛 +3
   
8. Add floating-ui to @carbon/react ComboButton #16540
   component: combo-button package: @carbon/react +2
   
9. Add floating-ui to @carbon/react new OverflowMenu (behind the enable-v12-overflowmenu flag) #16541
   component: overflow-menu package: @carbon/react +2
   
10. Add floating-ui to the old/existing OverflowMenu @carbon/react implementation #16542
    component: overflow-menu package: @carbon/react +2
    
11. Floating UI: Close out related issues listed in the umbrella by writing an example stackblitz proving the issue is fixed and closing the issue linking to the umbrella issue #16698
    4 of 4
    +0
    

    
12. Floating UI: Add detectOverflow configurable collision boundary #16879
    planning: umbrella type: enhancement 💡 +2
    
13. Floating UI: Memoize problematic downshift prop getters to prevent infinite loops #17007
    4 of 4
    component: combobox component: dropdown component: filterable-multiselect component: multiselect planning: umbrella severity: 2 type: bug 🐛 +7
14. [Feature Request]: Add autoAlign to Button for IconButton's tooltip #17168
    component: button package: @carbon/react proposal: accepted severity: 3 type: bug 🐛 type: enhancement 💡 type: infrastructure 🤖 +7
    
15. [Feature Request]: add autoAlign to CodeSnippet / CopyButton #16709
    component: code-snippet component: copy-button role: dev 🤖 type: enhancement 💡 +4
    

@carbon/ibm-products

Preview Give feedback

1. Add floating-ui to @carbon/ibm-products Coachmarks ibm-products#5356
   0 of 2
   area: plg ✨ role: dev +2
   
2. Add floating-ui to @carbon/ibm-products TagSet ibm-products#5354
   2 of 2
   component: TagSet role: dev +2
   
3. Add floating-ui to @carbon/ibm-products TagOverflow ibm-products#5355
   0 of 2
   component: TagSet role: dev +2
   
4. Add floating-ui to @carbon/ibm-products ActionBar ibm-products#5357
   0 of 1
   area: migration ➡️ component: PageHeader role: dev +3
   

[matthewgallo]

I did some exploration into floating-ui after you presented a bit about it last Friday @tay1orjones. It definitely feels like a good solution to some of the issues that are linked above (popover elements inside of modals, ie OverflowMenus, Dropdowns, menu button issues). It also addresses #6551, allowing floating menus to auto align based on available space.

I have put together two prototypes using floating-ui to do some research here, one that is most akin to the new MenuButton component and another to add that new MenuButton to Carbon for IBM Products Datagrid to test in context.

1. MenuButton - https://stackblitz.com/edit/github-28pu2z-tyjd7f
2. MenuButton in Datagrid - https://stackblitz.com/edit/github-j7ci5k

[tay1orjones]

@kurtwaldowski-b right now Datepicker isn't on the list because it doesn't have any alignment or positioning options/props. The only reason to add floating-ui to it would be to avoid the issue of it being clipped within another component like a modal. To my knowledge we don't have an issue reporting that. Could you provide an example in a stackblitz of it not working properly? With that reproduction we can open a new issue for it.

[kurtwaldowski-b]

@kurtwaldowski-b Yes, but we had to break this up into different phases. The initial phase to add this to Popover, Tooltip, Toggletip and Slug has been delivered in #14654 and should go out in @carbon/[email protected]. We're targeting the remaining pieces for Q2.

Thanks! Do you know if the floating-ui updates will be applied to IconButtons? We are still seeing IconButton tooltips being cut off by parent containers for example:

Curious as well on autoAlign

Thanks!

[kurtwaldowski-b]

Following up here; this update should be applied to both Buttons and IconButtons for consistent behavior. I opened the following to address it with a stackblitz: #17168

Its forcing us to do some wonky things like add a Tooltip around an IconButton and then hide the built in tooltip with styling :/

[elycheea]

@kurtwaldowski-b right now Datepicker isn't on the list because it doesn't have any alignment or positioning options/props. The only reason to add floating-ui to it would be to avoid the issue of it being clipped within another component like a modal. To my knowledge we don't have an issue reporting that. Could you provide an example in a stackblitz of it not working properly? With that reproduction we can open a new issue for it.

@rodet just opened an issue in our repo on DatePicker being clipped, which links to our Storybook.
carbon-design-system/ibm-products#6083

[sstrubberg]

Follow-on work for Floating UI.

https://github.com/orgs/carbon-design-system/projects/51/views/2?filterQuery=status%3A%22Later+%F0%9F%A7%8A%22+floating