Feature branch pull-request from feature/floating-ui to main#2832
Draft
Feature branch pull-request from feature/floating-ui to main#2832
feature/floating-ui to main#2832Conversation
🦋 Changeset detectedLatest commit: a06997c The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +2.95 kB (+2.69%) Total Size: 113 kB
ℹ️ View Unchanged
|
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-qvsijgockb.chromatic.com/ Chromatic results:
|
## Summary: - Adds `@floating-ui/react` dependency to the project. - Adds Floating folder structure and initial Floating component. **NOTE:** The next PR will include the base version of the `Floating` component. I'll be making more adjustments to that component as soon as I start converting existing Popper cases to use this component. Issue: https://khanacademy.atlassian.net/browse/WB-2111 ## Test plan: Verify that all checks pass. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2835
… feature/floating-ui
… feature/floating-ui
## Summary: This PR introduces the Floating component to Wonder Blocks. This is the first version of the component with basic properties and middleware support. Also included the Storybook documentation and snapshot tests for the component. <img width="864" height="493" alt="Screenshot 2025-10-29 at 10 20 14 AM" src="https://github.com/user-attachments/assets/3aa899fe-d039-434d-ae7b-c13e31c2ae60" /> **NOTE:** Next PRs will add more features and props to the Floating component. Issue: https://khanacademy.atlassian.net/browse/WB-2111 ## Test plan: - Verify that the docs look correct in Storybook: `/?path=/docs/packages-floating-floating--docs` - Also verify that the snapshot tests look good: `/?path=/story/packages-floating-testing-snapshots-floating--scenarios` Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2842
… feature/floating-ui
… feature/floating-ui
## Summary: Next step on the Floating component: - Adds portal prop and copies maybeGetPortalMountedModalHostElement from WB Modal. ### Implementation plan: 1. #2835 2. #2842 3. Add portal prop to Floating component (this PR) 4. Add focus management 5. Add `style` prop and RTL support Issue: https://khanacademy.atlassian.net/browse/WB-2111 ## Test plan: Navigate to the Floating component stories and verify that the portal example works as expected. This means that the floating content should be rendered inside the modal host element. Also verify that this looks and works good in the Floating Testing Snapshots story. Author: jandrade Reviewers: jandrade, somewhatabstract, beaesguerra, marcysutton Required Reviewers: Approved By: somewhatabstract, beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2844
… feature/floating-ui
… feature/floating-ui
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (eb0425d) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR2832"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2832 |
## Summary: - Adds focus management support to Wonder Blocks Floating Implementation plan: - #2835 - #2842 - #2844 - Add focus management (this PR) - Add style prop and RTL support Issue: WB-2111 ## Test plan: Navigate to the Floating component stories and verify that the focus management works as expected in the "Focus Manager" section. Author: jandrade Reviewers: beaesguerra, jandrade, marcysutton Required Reviewers: Approved By: beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #2846
… feature/floating-ui
… feature/floating-ui
## Summary: Next floating PR that adds the `styles` prop to customize the look and feel of the floating element. Note that this slightly differs from the implementation spec as we use SVG for the arrow element, so we expose different keys in the `styles.arrow` object. Issue: WB-2111 ## Test plan: Navigate to `/?path=/docs/packages-floating--docs&globals=direction:ltr#custom-styles`. Verify that the docs are correct and the styles are looking as expected. Also verify that the "Custom styles" case is added to the scenarios snapshot. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ 11 checks were successful, ⏭️ 4 checks have been skipped Pull Request URL: #2880
… feature/floating-ui
## Summary: Adds right-to-left support to Floating component. To support this, I've created a custom middleware to be able to mirror the floating placement in RTL contexts. Issue: https://khanacademy.atlassian.net/browse/WB-2162 ## Test plan: Navigate to any floating stories, select the `RTL` mode, and verify that the floating element flips when the `placement` is `left*` or `right*`. Author: jandrade Reviewers: marcysutton, beaesguerra, jandrade Required Reviewers: Approved By: marcysutton, beaesguerra Checks: ✅ 11 checks were successful, ⏭️ 4 checks have been skipped Pull Request URL: #2881
… feature/floating-ui
… feature/floating-ui
## Summary: Updated some Floating stories that don't require focus manager to be enabled, so that it doesn't cause a11y issues. Also made some changes to the `Middlewares` story to ensure that the floating element is correctly positioned within the scrolling container. Issue: "none" ## Test plan: Navigate to `/?path=/docs/packages-floating--docs` and verify that the stories render correctly. Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ⏭️ 3 checks have been skipped, ✅ 13 checks were successful Pull Request URL: #2922
… feature/floating-ui
…rdRef (#2914) ## Summary: This PR starts the work to refactor the `Popover` component to use the `Floating` component. It does the following: - Refactor the `Popover` and `PopoverAnchor` components to function components - Add forwardRef to the `PopoverAnchor` component - Modifies the `PopoverAnchor` component to pass the forwardRef while allowing to pass a custom ref to the anchor element. Issue: WB-2119 ## Test plan: Verify that the snapshots and stories are working as expected. Author: jandrade Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #2914
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary:
This PR includes the following commits:
Issue: WB-1680
Test plan: