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

Beta Give feedback

1. Floating UI: Review, validate, and test alignment - defaults, optional values, fallbackPlacement, fallbackAxisSideDirection #17250
   0 of 12
   package: @carbon/react role: dev 🤖 type: docs 📖 type: infrastructure 🤖 +4
2. Floating UI: Document examples of when autoAlign doesn't work #17017
   status: help wanted 👐 +1
3. 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
   

   
4. Floating UI: Move to stable

@carbon/react

Beta 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
    3 of 4
    +0
    

    
12. Floating UI: Add detectOverflow configurable collision boundary #16879
    1 of 8
    planning: umbrella type: enhancement 💡 +2
    
13. Floating UI: Enable consumers to configure autoAlign-related props from anywhere in their react tree #17003
    adopter: PAL adopter: external adopter: product adopter: strategic-product component: combo-button component: combobox component: context-menu component: dropdown component: filterable-multiselect component: menu component: menu-button component: multiselect component: overflow-menu component: popover component: toggle-tip component: tooltip package: @carbon/react proposal: accepted role: dev 🤖 type: enhancement 💡 +20
14. 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
15. [Feature Request]: Add autoAlign to Button #17168
    component: button package: @carbon/react proposal: accepted severity: 3 type: bug 🐛 type: enhancement 💡 type: infrastructure 🤖 +7
16. [Feature Request]: add autoAlign to CodeSnippet / CopyButton #16709
    component: code-snippet component: copy-button role: dev 🤖 type: enhancement 💡 +4
    

@carbon/web-components

Beta Give feedback

1. Add floating-ui to @carbon/web-components Dropdown carbon-for-ibm-dotcom#11609
   +0
   
2. Add floating-ui to @carbon/web-components ComboBox
3. Add floating-ui to @carbon/web-components MultiSelect and FilterableMultiSelect
4. Create "new" floating element components in @carbon/web-components - Menu, ComboButton, etc.
5. Add floating-ui to @carbon/web-components Menu, ComboButton, MenuButton, "New" OverflowMenu
6. Add floating-ui to the old/existing OverflowMenu @carbon/web-components implementation

@carbon/ibm-products

Beta 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 status: blocked 🧱 +4
   

[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

[kurtwaldowski-b]

Is this still in scope for Q1 this year? Thanks!

[tay1orjones]

@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.

[kurtwaldowski-b]

Thanks! One additional question; will these updates also impact date pickers (flatpickr), or should a separate issue be opened for them? Edit Just saw this mentioned above in questions and concerns

[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