feat(popover): use floating-ui for autoAlign #14654

tay1orjones · 2023-09-14T18:04:00Z

This PR enhances Popover's experimental autoAlign functionality to automatically position the floating element to be within view, even on scroll.

This uses floating-ui and relies solely on the fixed strategy, using position: fixed on the floating element. In the majority of cases, Popover floating elements will no longer be clipped by parents with overflow: hidden.

This implementation requires two important changes I'd like to highlight:

The caret must be a child of the popover content instead of a sibling, so there is a dom change here.
The .#{$prefix}--popover-container must not have position: relative

Changelog

Changed

Add new alignment options to match the floating-ui api with backwards compatibility. These also more properly reflect the "logical property" naming convention of start/end instead of left/right, for instance.
Use floating-ui for positioning the caret and floating element, apply styles via CSSOM to comply with CSP.
Feed floating-ui the values of popover's custom properties (offset, caret size, etc) when possible.
Update Popover styling so no positioning styling is used when autoAlign={true}
Update ToggletipButton to use forwardRef
Update Slug styling to be compatible with autoAlign

Removed

There was an unused ref on Tooltip, I removed it.

Testing / Reviewing

View the popover stories, there are a few autoalign experiment stories in there. Ensure it works as intended and there's no regressions.
View the Tooltip autoalign story and ensure the autoAlign functionality works with no regressions
View the ToggleTip autoalign story and ensure the autoAlign functionality works with no regressions
View the slug stories and ensure ensure the autoAlign functionality works with no regressions

netlify · 2023-09-14T18:11:57Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`63aa6c1`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/65aea87ae15a560008a2d2e9
😎 Deploy Preview	https://deploy-preview-14654--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…add autoUpdate, add arrow, add offset

… logical property

…493-floating-ui-poc

netlify · 2024-01-25T19:52:54Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`13ada6b`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65fb2096b28510000854a425
😎 Deploy Preview	https://deploy-preview-14654--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…493-floating-ui-poc

guidari · 2024-03-08T18:19:16Z

@tay1orjones All good with the changes in the ToggletipButton. There is no a11y errors 🚀

tw15egan

This looks awesome! I noticed a small issue with the Slug storybook alignments using the old values, but I will create a separate issue for that and tackle that with the upcoming Slug changes.

alisonjoseph

🔥🚀 Awesome, LGTM!! (other than a couple merge conflicts)

laurenmrice

Looks Awesome @tay1orjones ! 🌟 Just two comments:

Tab tip experimental auto align story
The example of the popover with no caret should be sitting directly underneath the icon box with no space between them.

Example:

Playground story
Align prop: When the caret is set to to true, there is no caret present in the popover for right-top alignment. All other alignments with caret and without caret look great!

…493-floating-ui-poc

tay1orjones · 2024-03-19T19:37:04Z

@laurenmrice Thank you for catching both of those! They should be fixed now.

outdated

laurenmrice · 2024-03-20T16:55:11Z

Toggletip Experimental Auto Align story

@tay1orjones The only thing I see now is that the label and the info icon is wrapping to two lines no matter how wide your screen size is. I am assuming that is a bug and the label should be on one line? The open toggletip itself looks fine, it is just the label I was wondering about.

tay1orjones · 2024-03-20T18:05:07Z

@laurenmrice Thanks! I just pushed up a commit that fixes that issue.

I also removed the autoalign story from VRT for now because

It's experimental
It was larger than percy would snapshot, so it was just an empty snapshot file

I added the popover playground story to vrt instead.

) * WIP: add floating-ui to popover * WIP: use scss for align positioning, update CSSOM styling, add flip, add autoUpdate, add arrow, add offset * wip(popover): explore logical properties support, popover offset from logical property * WIP * WIP: add fixed strategy, remove default popover styling when autoAlign * WIP: properly set refs on reference element and floating element * WIP * wip(popover): correct caret placement * wip(popover): update styles to support new alignment names * feat(popover): cleanup autoalign implementation/styles * fix(popover): improve autoAlign * fix(popover): add forwardRef to ToggletipButton * fix(popover): improve autoAlign compatibility with slug * fix(popover): position absolute is not necessary on the container * fix(slug): scope popover selectors for autoalign functionality * chore: yarn dedupe * chore(popover): remove console logs * fix(popover): improve tests, cloneElement logic * fix(popover): update align props across the entire system * chore(popover): fix typescript issues * fix(popover): ensure component api table in docs works * chore(popover): typescript fixes * fix(popover): ensure autoAlign properly pads out the slug caret * fix(popover): typescript error * fix(popover): remove offset when isTabTip * fix(popover): correct caret style typo * docs(popover): clean up stories * test(popover): update story name * chore: fix toggletip story width, vrt popover playground --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

WIP: add floating-ui to popover

17537c6

WIP: use scss for align positioning, update CSSOM styling, add flip, …

7557ef1

…add autoUpdate, add arrow, add offset

tay1orjones assigned tay1orjones and unassigned tay1orjones Nov 2, 2023

tay1orjones added 2 commits January 22, 2024 11:40

wip(popover): explore logical properties support, popover offset from…

63aa6c1

… logical property

Merge branch 'main' of github.com:carbon-design-system/carbon into 14…

f9434c0

…493-floating-ui-poc

tay1orjones mentioned this pull request Jan 24, 2024

Menu and Friends workstream #15398

Merged

1 task

WIP

45a19de

tay1orjones added 14 commits February 12, 2024 14:28

Merge branch 'main' of github.com:carbon-design-system/carbon into 14…

aa67930

…493-floating-ui-poc

WIP: add fixed strategy, remove default popover styling when autoAlign

ea6fcf0

WIP: properly set refs on reference element and floating element

acfc064

Merge branch 'main' of github.com:carbon-design-system/carbon into 14…

bf07bd5

…493-floating-ui-poc

WIP

baf4128

wip(popover): correct caret placement

6cd0a14

wip(popover): update styles to support new alignment names

2b7206d

feat(popover): cleanup autoalign implementation/styles

e663586

fix(popover): improve autoAlign

6e10e63

fix(popover): add forwardRef to ToggletipButton

8f24466

fix(popover): improve autoAlign compatibility with slug

7bb6fe2

Merge branch 'main' of github.com:carbon-design-system/carbon into 14…

e329f1d

…493-floating-ui-poc

fix(popover): position absolute is not necessary on the container

0e0450f

fix(slug): scope popover selectors for autoalign functionality

99de4aa

tay1orjones marked this pull request as ready for review February 26, 2024 20:49

tay1orjones requested a review from a team as a code owner February 26, 2024 20:49

tay1orjones requested review from alisonjoseph and tw15egan February 26, 2024 20:49

tay1orjones added status: ready for review 👀 status: visual review 🔍 labels Feb 26, 2024

fix(popover): typescript error

05fbc3a

tw15egan approved these changes Mar 11, 2024

View reviewed changes

tw15egan mentioned this pull request Mar 11, 2024

[Bug]: Slug storybook controls using outdated alignments #15935

Closed

2 tasks

alisonjoseph approved these changes Mar 13, 2024

View reviewed changes

laurenmrice previously requested changes Mar 13, 2024

View reviewed changes

tay1orjones and others added 4 commits March 18, 2024 15:02

Merge branch 'main' of github.com:carbon-design-system/carbon into 14…

f908e2d

…493-floating-ui-poc

fix(popover): remove offset when isTabTip

4c215fb

Merge branch 'main' into 14493-floating-ui-poc

a0b6251

fix(popover): correct caret style typo

1d17a14

tay1orjones requested a review from laurenmrice March 19, 2024 19:36

tay1orjones mentioned this pull request Mar 19, 2024

Properly deprecate PopoverAlignment type values #16009

Closed

docs(popover): clean up stories

1b3a863

tay1orjones enabled auto-merge March 19, 2024 20:09

test(popover): update story name

fa36988

chore: fix toggletip story width, vrt popover playground

13ada6b

tay1orjones added this pull request to the merge queue Mar 20, 2024

Merged via the queue into carbon-design-system:main with commit afce28d Mar 20, 2024
20 checks passed

tay1orjones deleted the 14493-floating-ui-poc branch March 20, 2024 18:25

tw15egan mentioned this pull request Mar 21, 2024

fix: tooltip correctly displayed inside table #16020

Closed

This was referenced Mar 22, 2024

Implement Floating UI for positioning floating elements #14139

Open

[Bug]: Tooltips broken when used inside DataTable #15981

Closed

2nikhiltom mentioned this pull request May 8, 2024

fix(popover): Deprecate PopoverAlignment type values #16346

Merged

tay1orjones mentioned this pull request Jun 26, 2024

[Bug]: ContainedList within Popover can cause visual defects when placed too high on page #13849

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(popover): use floating-ui for autoAlign #14654

feat(popover): use floating-ui for autoAlign #14654

tay1orjones commented Sep 14, 2023 •

edited

Loading

netlify bot commented Sep 14, 2023 •

edited

Loading

netlify bot commented Jan 25, 2024 •

edited

Loading

guidari commented Mar 8, 2024

tw15egan left a comment

alisonjoseph left a comment

laurenmrice left a comment

tay1orjones commented Mar 19, 2024

laurenmrice commented Mar 20, 2024 •

edited

Loading

tay1orjones commented Mar 20, 2024

feat(popover): use floating-ui for autoAlign #14654

feat(popover): use floating-ui for autoAlign #14654

Conversation

tay1orjones commented Sep 14, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Sep 14, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Jan 25, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

guidari commented Mar 8, 2024

tw15egan left a comment

Choose a reason for hiding this comment

alisonjoseph left a comment

Choose a reason for hiding this comment

laurenmrice left a comment

Choose a reason for hiding this comment

tay1orjones commented Mar 19, 2024

laurenmrice commented Mar 20, 2024 • edited Loading

tay1orjones commented Mar 20, 2024

tay1orjones commented Sep 14, 2023 •

edited

Loading

netlify bot commented Sep 14, 2023 •

edited

Loading

netlify bot commented Jan 25, 2024 •

edited

Loading

laurenmrice commented Mar 20, 2024 •

edited

Loading