You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The Action Menu forces the menu to load in a tray at small viewports and consumers need a way to override that functionality so the menu is always a popover at any screen size. ActionMenu extends PickerBase thus affecting both ActionMenu and Picker components.
How has this been tested?
Test case 1
Go to the Force Popover On Mobile story in the Picker component
Open Chrome DevTools (or equivalent).
Toggle the Device Toolbar (the phone/tablet icon).
Select a device preset (e.g. iPhone 12).
Chrome will set user-agent strings, simulate touch, and adjust DPI.
Reload the page
Click the Picker 1 and see a tray
Click the Picker 2 and see a popover
Test case 2
Go to the Force Popover On Mobile story in the Action Menu component
Open Chrome DevTools (or equivalent).
Toggle the Device Toolbar (the phone/tablet icon).
Select a device preset (e.g. iPhone 12).
Chrome will set user-agent strings, simulate touch, and adjust DPI.
Reload the page
Click the Action Menu and see a tray
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?
Screenshots (if appropriate)
Types of changes
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
[ x] All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.
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.
Description
This PR introduces functionality for
sp-picker
andsp-action-menu
to force a popover to render over the default tray.forcePopover
attributeRelated issue(s)
Motivation and context
The
Action Menu
forces the menu to load in a tray at small viewports and consumers need a way to override that functionality so the menu is always a popover at any screen size. ActionMenu extends PickerBase thus affecting both ActionMenu and Picker components.How has this been tested?
Test case 1
Force Popover On Mobile
story in the Picker componentTest case 2
Force Popover On Mobile
story in the Action Menu componentDid it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?
Screenshots (if appropriate)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main
.