Implement Floating UI for positioning floating elements

tay1orjones commented 1 year ago

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

DataTable

General tooltip

https://github.com/carbon-design-system/carbon/discussions/13881

Popover

https://github.com/carbon-design-system/carbon/issues/13849

Previously marked complete

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

- [ ] 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-for-ibm-dotcom/issues/11609
- [ ] https://github.com/carbon-design-system/carbon/issues/16470
- [ ] Add floating-ui to `@carbon/web-components` ComboBox
- [ ] https://github.com/carbon-design-system/carbon/issues/16507
- [ ] Add floating-ui to `@carbon/web-components` MultiSelect and FilterableMultiSelect
- [ ] Implement "new" floating element components in `@carbon/web-components` - Menu, ComboButton, etc.
- [ ] 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
- [ ] Add floating-ui to `@carbon/web-components` Menu, ComboButton, MenuButton, "New" OverflowMenu
- [ ] https://github.com/carbon-design-system/carbon/issues/16542
- [ ] Add floating-ui to the old/existing OverflowMenu `@carbon/web-components` implementation
- [ ] Review with design on how Floating UI works - support for more alignments outside of just 4 axis? Do we want it positioned totally dynamically in some cases? https://floating-ui.com/docs/arrow
- [ ] https://github.com/carbon-design-system/carbon/issues/16879
- [ ] Gather feedback on the implementation from DSAG (could inform above items)
- [ ] Figure out how we want to move this from experimental to stable
- [ ] https://github.com/carbon-design-system/carbon/issues/16698

### @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 commented 10 months ago

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.

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

kurtwaldowski-b commented 5 months ago

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

tay1orjones commented 3 months ago

@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/react@1.54.0. We're targeting the remaining pieces for Q2.

kurtwaldowski-b commented 1 month ago

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 commented 1 month ago

@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 commented 5 days ago

@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/react@1.54.0. 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!

carbon-design-system / carbon