Skip to content
New issue

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

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

Already on GitHub? # to your account

feat(picker): add forcePopover property #5041

Merged
merged 10 commits into from
Jan 28, 2025
Merged

Conversation

rubencarvalho
Copy link
Contributor

@rubencarvalho rubencarvalho commented Jan 21, 2025

Description

This PR introduces functionality for sp-picker and sp-action-menu to force a popover to render over the default tray.

  • introduces forcePopover attribute

Related 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

    1. Go to the Force Popover On Mobile story in the Picker component
    2. Open Chrome DevTools (or equivalent).
    3. Toggle the Device Toolbar (the phone/tablet icon).
    4. Select a device preset (e.g. iPhone 12).
    5. Chrome will set user-agent strings, simulate touch, and adjust DPI.
    6. Reload the page
    7. Click the Picker 1 and see a tray
    8. Click the Picker 2 and see a popover
  • Test case 2

    1. Go to the Force Popover On Mobile story in the Action Menu component
    2. Open Chrome DevTools (or equivalent).
    3. Toggle the Device Toolbar (the phone/tablet icon).
    4. Select a device preset (e.g. iPhone 12).
    5. Chrome will set user-agent strings, simulate touch, and adjust DPI.
    6. Reload the page
    7. 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)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • 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.

Copy link

changeset-bot bot commented Jan 21, 2025

⚠️ No Changeset found

Latest commit: da624d6

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.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

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.

Copy link

Tachometer results

Currently, no packages are changed by this PR...

@coveralls
Copy link
Collaborator

coveralls commented Jan 21, 2025

Pull Request Test Coverage Report for Build 12996269172

Details

  • 18 of 18 (100.0%) changed or added relevant lines in 2 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.001%) to 98.19%

Totals Coverage Status
Change from base Build 12990312109: 0.001%
Covered Lines: 33063
Relevant Lines: 33492

💛 - Coveralls

@Rajdeepc
Copy link
Contributor

@rubencarvalho @caseyisonit Are we waiting on something to make this ready for review? Please let me know if I can help here?

@caseyisonit
Copy link
Contributor

@Rajdeepc i've wrapped it up today. it needed some fine tuning, docs, and tests. should be complete. ill fill out the details and switch it from draft

@caseyisonit caseyisonit changed the title feat(picker): add forcePopover property feat(picker, action-menu): add forcePopover property Jan 23, 2025
@Rajdeepc Rajdeepc changed the title feat(picker, action-menu): add forcePopover property feat(picker): add forcePopover property Jan 24, 2025
Copy link

github-actions bot commented Jan 24, 2025

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.98 0.98
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

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.

Transfer Size

Category Latest Main Branch
Total 250.732 kB 236.537 kB 236.469 kB 🏆
Scripts 60.776 kB 54.539 kB 🏆 54.549 kB
Stylesheet 53.863 kB 47.549 kB 47.497 kB 🏆
Document 6.242 kB 5.462 kB 5.458 kB 🏆
Font 126.855 kB 126.636 kB 126.615 kB 🏆

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

@caseyisonit caseyisonit marked this pull request as ready for review January 24, 2025 17:52
@caseyisonit caseyisonit requested a review from a team as a code owner January 24, 2025 17:52
@caseyisonit caseyisonit requested a review from Rajdeepc January 27, 2025 18:59
@rubencarvalho
Copy link
Contributor Author

LGTM! 🚢

@caseyisonit caseyisonit self-requested a review January 27, 2025 22:00
@rubencarvalho rubencarvalho merged commit 3651e57 into main Jan 28, 2025
27 checks passed
@rubencarvalho rubencarvalho deleted the ruben/force-popover branch January 28, 2025 08:02
rubencarvalho added a commit that referenced this pull request Jan 31, 2025
Co-authored-by: Casey Eickhoff <ceickhoff@adobe.com>
nikkimk pushed a commit that referenced this pull request Feb 27, 2025
Co-authored-by: Casey Eickhoff <ceickhoff@adobe.com>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants