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

• https://github.com/carbon-design-system/carbon/issues/7565
• https://github.com/carbon-design-system/carbon/issues/13279

Issues already resolved by this workstream

• https://github.com/carbon-design-system/carbon/issues/9524
• https://github.com/carbon-design-system/carbon/issues/14137
• https://github.com/carbon-design-system/carbon/issues/5318
• https://github.com/carbon-design-system/carbon/issues/4686
• https://github.com/carbon-design-system/carbon/issues/14395
• https://github.com/carbon-design-system/carbon/issues/14296
• https://github.com/carbon-design-system/carbon/issues/6288
• https://github.com/carbon-design-system/carbon/issues/13918
• https://github.com/carbon-design-system/carbon/issues/15521
• https://github.com/carbon-design-system/carbon/issues/15566
• https://github.com/carbon-design-system/carbon/issues/15981
• https://github.com/carbon-design-system/carbon/issues/13849
• https://github.com/carbon-design-system/carbon/discussions/13881
• https://github.com/carbon-design-system/carbon/issues/6728
• https://github.com/carbon-design-system/carbon/issues/14428
• https://github.com/carbon-design-system/carbon/issues/6551

Popover's autoAlign prop was a step towards attempting to rectify this situation by adding some logic for overflow detection and reflow carbon-design-system/carbon#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:

• https://github.com/carbon-design-system/carbon/issues/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
- [ ] https://github.com/carbon-design-system/carbon/issues/17250
- [ ] https://github.com/carbon-design-system/carbon/issues/17017
- [ ] https://github.com/carbon-design-system/carbon/issues/17018
- [ ] Floating UI: Move to stable

### `@carbon/react`
- [ ] https://github.com/carbon-design-system/carbon/issues/14492
- [ ] https://github.com/carbon-design-system/carbon/issues/14493
- [ ] https://github.com/carbon-design-system/carbon/issues/16009
- [ ] https://github.com/carbon-design-system/carbon/issues/15865
- [ ] https://github.com/carbon-design-system/carbon/issues/16470
- [ ] https://github.com/carbon-design-system/carbon/issues/16507
- [ ] https://github.com/carbon-design-system/carbon/issues/15521
- [ ] https://github.com/carbon-design-system/carbon/issues/16540
- [ ] https://github.com/carbon-design-system/carbon/issues/16541
- [ ] https://github.com/carbon-design-system/carbon/issues/16542
- [ ] https://github.com/carbon-design-system/carbon/issues/16698
- [ ] https://github.com/carbon-design-system/carbon/issues/16879
- [ ] https://github.com/carbon-design-system/carbon/issues/17003
- [ ] https://github.com/carbon-design-system/carbon/issues/17007
- [ ] https://github.com/carbon-design-system/carbon/issues/17168
- [ ] https://github.com/carbon-design-system/carbon/issues/16709

### `@carbon/web-components`
- [ ] https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11609
- [ ] Add floating-ui to `@carbon/web-components` ComboBox
- [ ] Add floating-ui to `@carbon/web-components` MultiSelect and FilterableMultiSelect
- [ ] Create "new" floating element components in `@carbon/web-components` - Menu, ComboButton, etc.
- [ ] Add floating-ui to `@carbon/web-components` Menu, ComboButton, MenuButton, "New" OverflowMenu
- [ ] Add floating-ui to the old/existing OverflowMenu `@carbon/web-components` implementation

### `@carbon/ibm-products`
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5356
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5354
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5355
- [ ] https://github.com/carbon-design-system/ibm-products/issues/5357

[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 https://github.com/carbon-design-system/carbon/issues/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 https://github.com/carbon-design-system/carbon/pull/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: https://github.com/carbon-design-system/carbon/issues/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 :/