Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(autoalign): @floating-ui/dom implementation #11549

Merged
merged 21 commits into from
Feb 20, 2024
Merged

feat(autoalign): @floating-ui/dom implementation #11549

merged 21 commits into from
Feb 20, 2024

Conversation

annawen1
Copy link
Member

@annawen1 annawen1 commented Feb 17, 2024 •
edited
Loading

Related Ticket(s)

Closes #11506

Description

This PR adds the @floating-ui/dom library to address the clipping issue seen with adopters when placing the popover/tooltip/toogletip/slug in a parent container with overflow:hidden set.

Screenshot 2024-02-07 at 10 11 36 AM

The changes will be made under the autoalign property so the original components are not affected.

AFTER:
Screenshot 2024-02-17 at 3 13 24 PM

Changelog

New

  • @floating-ui/dom added to dependencies
  • floating-ui global internal util
  • Codesandbox example for toggletip
  • floating-ui internal global utility to handle the positioning in popover and toggletip
  • Codesandbox example for the components with the autoalign feature
  • Storybook for autoalign in the experimental section
  • Storybook docs for autoalign story

Changed

  • toggletip story docs updated
  • popover, toggletip, tooltip, icon-button, slug have the autoalign property added

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Feb 17, 2024 •
edited
Loading

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11549/index.html

Built with commit: 56557a708ca924b19513fc3c00e176d14b3d14d9

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Feb 17, 2024 •
edited
Loading

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11549/index.html

Built with commit: 56557a708ca924b19513fc3c00e176d14b3d14d9

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Feb 17, 2024 •
edited
Loading

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11549/index.html

Built with commit: 56557a708ca924b19513fc3c00e176d14b3d14d9

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Feb 17, 2024 •
edited
Loading

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11549/index.html

Built with commit: 56557a708ca924b19513fc3c00e176d14b3d14d9

@annawen1 annawen1 marked this pull request as ready for review February 17, 2024 21:45
@annawen1 annawen1 requested a review from a team as a code owner February 17, 2024 21:45
@annawen1 annawen1 requested review from emyarod and ariellalgilmore and removed request for a team February 17, 2024 21:45
@annawen1 annawen1 changed the title feat(popover): @floating-ui/dom implementation feat(autoalign): @floating-ui/dom implementation Feb 19, 2024
ariellalgilmore
ariellalgilmore approved these changes Feb 20, 2024
View reviewed changes
Copy link
Member

@ariellalgilmore ariellalgilmore left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! just wonder if we should update all the examples the slug examples to use autoalign too or the readme's assuming people copy and paste that. Also need to redirect to the release branch

@annawen1 annawen1 changed the base branch from main to release/v2.4.0 February 20, 2024 14:15
@annawen1
Copy link
Member Author

LGTM! just wonder if we should update all the examples the slug examples to use autoalign too or the readme's assuming people copy and paste that. Also need to redirect to the release branch

@ariellalgilmore I did consider changing all the slug examples to use the autoalign but I think we should give adopters time to test it out since it is a new library before we push it forward

@annawen1 annawen1 merged commit 85db5f4 into carbon-design-system:release/v2.4.0 Feb 20, 2024
11 of 19 checks passed
@annawen1 annawen1 deleted the feat/floating-ui branch February 20, 2024 15:16
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this pull request Jun 11, 2024
@annawen1 @ibmdotcom-bot
feat(autoalign): @floating-ui/dom implementation (carbon-design-syste…
126dcdf 
…m#11549)

* feat(popover): bring floating-ui in popover

* feat(toggletip): toggletip with floating-ui

* chore(toggletip): update toggletip story and add CSB

* feat(tooltip): autoalign functionality with tooltip

* feat(autoalign): slug styles

* docs(autoalign): update storybook docs

* docs(codesandbox): add CSB for autoalign

* chore(docs): adjust spacing

* feat(slug): optimize slug styles

* feat(toggletip): adjust styles

* feat(slug): separate the styles out

* feat(slug): add after psuedo elem back

* feat(slug): break out from parent selector

* feat(slug): separate from parent selector

* feat(slug): slug caret styles

---------

Co-authored-by: Carbon for IBM.com Bot <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ariellalgilmore ariellalgilmore ariellalgilmore approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod was automatically assigned from carbon-design-system/carbon-for-ibm-com-members

Assignees
No one assigned
Labels
package: carbon web components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[CWC]: Implement Floating-UI to Popover components
3 participants
@annawen1 @ibmdotcom-bot @ariellalgilmore