feat(popover): use floating-ui for autoAlign #14654
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for carbon-elements ready!
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
1 task
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…493-floating-ui-poc
…493-floating-ui-poc
…493-floating-ui-poc
|
@tay1orjones All good with the changes in the |
tw15egan
approved these changes
Mar 11, 2024
2 tasks
alisonjoseph
approved these changes
Mar 13, 2024
laurenmrice
previously requested changes
Mar 13, 2024
There was a problem hiding this comment.
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!
|
@laurenmrice Thank you for catching both of those! They should be fixed now. |
|
Toggletip Experimental Auto Align story
|
|
@laurenmrice Thanks! I just pushed up a commit that fixes that issue. I also removed the autoalign story from VRT for now because
I added the popover playground story to vrt instead. |
Merged
via the queue into
carbon-design-system:main
with commit Mar 20, 2024
afce28d
20 checks passed
This was referenced Mar 22, 2024
preetibansalui
pushed a commit
to tay1orjones/carbon
that referenced
this pull request
Apr 24, 2024
) * 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #14493
This PR enhances Popover's experimental
autoAlignfunctionality to automatically position the floating element to be within view, even on scroll.This uses
floating-uiand relies solely on thefixedstrategy, usingposition: fixedon the floating element. In the majority of cases, Popover floating elements will no longer be clipped by parents withoverflow: hidden.This implementation requires two important changes I'd like to highlight:
.#{$prefix}--popover-containermust not haveposition: relativeChangelog
Changed
offset, caret size, etc) when possible.autoAlign={true}autoAlignRemoved
Testing / Reviewing