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.

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

fix: floating ui on combobutton #16586

Conversation

riddhybansal
Copy link
Contributor

Closes #16540

This PR enhances ComboButton 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, ComboButton floating elements will no longer be clipped by parents with overflow: hidden.

Changed

  • Use floating-ui for positioning floating element.
  • Feed floating-ui the values of ComboButton custom properties (flip,size) when possible.

Removed

  • Sending X and Y coordinates for the floating element (Menu) from ComboButton. All the calculations like width of floating element , X and Y positions are calculated by floating UI itself.

Testing / Reviewing

  • View the ComboButton stories, there is autoalign experiment story in there. Ensure it works as intended and there's no regressions.
  • Make sure that the menu does not detach itself from ComboButton when you scroll.

@riddhybansal riddhybansal requested a review from a team as a code owner May 28, 2024 12:08
Copy link

netlify bot commented May 28, 2024

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 53397bc
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/6655c94314c0ea0008fea9f6
😎 Deploy Preview https://deploy-preview-16586--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented May 28, 2024

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 53397bc
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/6655c943f0a03e00086c8c23
😎 Deploy Preview https://deploy-preview-16586--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Contributor

@guidari guidari left a comment

Choose a reason for hiding this comment

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

Awesome! LGTM! 🚀

Copy link
Member

@alisonjoseph alisonjoseph left a comment

Choose a reason for hiding this comment

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

LGTM!

@alisonjoseph alisonjoseph added this pull request to the merge queue Jun 3, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jun 3, 2024
@riddhybansal riddhybansal added this pull request to the merge queue Jun 3, 2024
Merged via the queue into carbon-design-system:main with commit aa51092 Jun 3, 2024
21 checks passed
@riddhybansal riddhybansal deleted the Floating_UI_implementation_for_comboButton branch June 3, 2024 16:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add floating-ui to @carbon/react ComboButton
3 participants