From 3651e57a90a05e551e6ee650e8ccc73aa05d3e7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=BAben=20Carvalho?= <rubcar@sapo.pt>
Date: Tue, 28 Jan 2025 09:02:17 +0100
Subject: [PATCH] feat(picker): add forcePopover property (#5041)

Co-authored-by: Casey Eickhoff <ceickhoff@adobe.com>
---
 .circleci/config.yml                          |   2 +-
 packages/action-menu/README.md                |  34 +++-
 .../stories/action-menu.stories.ts            |  44 ++++-
 packages/action-menu/stories/index.ts         |   8 +-
 .../test/action-menu-responsive.test.ts       | 181 ++++++++++++++++++
 packages/overlay/test/overlay.test.ts         |   6 +-
 packages/picker/README.md                     |  37 +++-
 packages/picker/src/InteractionController.ts  |   7 +-
 packages/picker/src/Picker.ts                 |  18 +-
 packages/picker/stories/picker.stories.ts     |  73 ++++++-
 .../picker/test/picker-responsive.test.ts     |  83 +++++++-
 11 files changed, 449 insertions(+), 44 deletions(-)
 create mode 100644 packages/action-menu/test/action-menu-responsive.test.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f11a0272f5..21c0e27874 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 93ad92a2fc031db0277fee635434955e438e94a9
+        default: 266fb37749bc59cbde0e81148dddea4d1bae2053
     wireit_cache_name:
         type: string
         default: wireit
diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md
index e3dcf729a6..e9ef24d5b2 100644
--- a/packages/action-menu/README.md
+++ b/packages/action-menu/README.md
@@ -189,7 +189,7 @@ In order to deliver an `<sp-action-menu>` without an icon, use the `label-only`
 
 ### No visible label
 
-The visible label that is be provided via the default `<slot>` interface can be ommitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` continued to be accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<button>` element that toggles the menu list.
+The visible label that is be provided via the default `<slot>` interface can be omitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` continued to be accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<button>` element that toggles the menu list.
 
 <!-- prettier-ignore -->
 ```html
@@ -249,7 +249,7 @@ A custom icon can be supplied via the `icon` slot in order to replace the defaul
 </sp-action-menu>
 ```
 
-### Selection.
+### Selection
 
 When `selects` is set to `single`, the `<sp-action-menu>` element will maintain one selected item after an initial selection is made.
 
@@ -272,13 +272,33 @@ When `selects` is set to `single`, the `<sp-action-menu>` element will maintain
 </sp-action-menu>
 ```
 
-## Accessibility
+## Force Popover on Mobile Devices
 
-An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
+On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-action-menu` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `forcePopover` to the `sp-action-menu`.
+
+Usage Guidance:
+
+-   Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
+-   Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
+
+To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
+
+```html
+<sp-action-menu forcePopover>
+    <span slot="label">Action Menu</span>
+    <sp-menu-item>Deselect</sp-menu-item>
+    <sp-menu-item>Select Inverse</sp-menu-item>
+    <sp-menu-item>Feather...</sp-menu-item>
+    <sp-menu-item>Select and Mask...</sp-menu-item>
+    <sp-menu-divider></sp-menu-divider>
+    <sp-menu-item>Save Selection</sp-menu-item>
+    <sp-menu-item disabled>Make Work Path</sp-menu-item>
+</sp-action-menu>
+```
 
 ## Adding tootip in action menu
 
-Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.
+Tooltip in action menu can be attached via adding `<sp-tooltip>` and can be customized by using various parameters (e.g. placement, content, etc) as needed.
 
 ```html
 <sp-action-menu>
@@ -291,3 +311,7 @@ Tooltip in action menu can be attached via adding <sp-tooltip> and can be custom
     <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
 </sp-action-menu>
 ```
+
+## Accessibility
+
+An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
index 39fa0f8bff..9e598690c9 100644
--- a/packages/action-menu/stories/action-menu.stories.ts
+++ b/packages/action-menu/stories/action-menu.stories.ts
@@ -13,21 +13,21 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
+import '@spectrum-web-components/menu/sp-menu-group.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
+import '@spectrum-web-components/menu/sp-menu.js';
 import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
-import { ActionMenuMarkup } from './';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { makeOverBackground } from '../../button/stories/index.js';
 import { isOverlayOpen } from '../../overlay/stories/index.js';
+import { ActionMenuMarkup } from './';
 
+import type { ActionMenu } from '@spectrum-web-components/action-menu';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
+import { Menu } from '@spectrum-web-components/menu';
 import type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';
 import { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
-import { Menu } from '@spectrum-web-components/menu';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
 
 export default {
     component: 'sp-action-menu',
@@ -160,6 +160,7 @@ export default {
         align: 'start',
         visibleLabel: 'More Actions',
         disabled: false,
+        forcePopover: false,
         open: false,
         quiet: false,
         tooltipDescription: '',
@@ -180,6 +181,7 @@ interface StoryArgs {
     staticValue?: 'white' | 'black' | undefined;
     tooltipDescription?: string | 'none';
     tooltipPlacement?: Placement;
+    forcePopover?: boolean;
 }
 
 const Template = (args: StoryArgs = {}): TemplateResult =>
@@ -204,6 +206,34 @@ quiet.args = {
     quiet: true,
 };
 
+export const forcePopoverOnMobile = (): TemplateResult => html`
+    <h1>Force Popover on Mobile</h1>
+    <p>
+        The forcePopover attribute overrides the mobile device functionality of
+        rendering a tray so that a popover will always render no matter the
+        device.
+    </p>
+    <ol>
+        <li>Open Chrome DevTools (or equivalent).</li>
+        <li>Toggle the Device Toolbar (the phone/tablet icon).</li>
+        <li>Select a device preset (e.g. iPhone 12).</li>
+        <li>
+            Chrome will set user-agent strings, simulate touch, and adjust DPI.
+        </li>
+        <li>Reload the page</li>
+        <li>Click the Action Menu and see a popover</li>
+    </ol>
+    <sp-action-menu forcePopover>
+        <span slot="label">Action Menu</span>
+        <sp-menu-item>Deselect</sp-menu-item>
+        <sp-menu-item>Select Inverse</sp-menu-item>
+        <sp-menu-item>Feather...</sp-menu-item>
+        <sp-menu-item>Select and Mask...</sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item>Save Selection</sp-menu-item>
+        <sp-menu-item disabled>Make Work Path</sp-menu-item>
+    </sp-action-menu>
+`;
 export const labelOnly = ({
     align = 'start',
     changeHandler = (() => undefined) as (event: Event) => void,
diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
index 6b0c3ae234..5306be3670 100644
--- a/packages/action-menu/stories/index.ts
+++ b/packages/action-menu/stories/index.ts
@@ -10,16 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
+import type { ActionMenu } from '@spectrum-web-components/action-menu';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
 
 export const ActionMenuMarkup = ({
     align = 'start',
@@ -27,6 +27,7 @@ export const ActionMenuMarkup = ({
     onChange = (() => undefined) as (value: string) => void,
     changeHandler = (() => undefined) as (value: string) => void,
     disabled = false,
+    forcePopover = false,
     open = false,
     quiet = false,
     staticValue = '',
@@ -44,6 +45,7 @@ export const ActionMenuMarkup = ({
             ?disabled=${disabled}
             ?open=${open}
             ?quiet=${quiet}
+            ?forcePopover=${forcePopover}
             static-color=${ifDefined(
                 staticValue === 'none'
                     ? undefined
diff --git a/packages/action-menu/test/action-menu-responsive.test.ts b/packages/action-menu/test/action-menu-responsive.test.ts
new file mode 100644
index 0000000000..391b324ee8
--- /dev/null
+++ b/packages/action-menu/test/action-menu-responsive.test.ts
@@ -0,0 +1,181 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+    elementUpdated,
+    expect,
+    fixture,
+    html,
+    nextFrame,
+    oneEvent,
+} from '@open-wc/testing';
+import { ActionMenu } from '@spectrum-web-components/action-menu';
+import '@spectrum-web-components/action-menu/sync/sp-action-menu.js';
+import '@spectrum-web-components/menu/sp-menu-divider.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
+import { setViewport } from '@web/test-runner-commands';
+import { spreadProps } from '../../../test/lit-helpers.js';
+import { sendMouse } from '../../../test/plugins/browser.js';
+
+describe('ActionMenu, responsive', () => {
+    let el: ActionMenu;
+    const actionMenuFixture = async (args?: {
+        forcePopover: boolean;
+    }): Promise<ActionMenu> => {
+        const test = await fixture<HTMLDivElement>(html`
+            <div>
+                <sp-action-menu id="action-menu" ${spreadProps(args || {})}>
+                    <span slot="label">Action Menu</span>
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item>Select Inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and Mask...</sp-menu-item>
+                    <sp-menu-divider></sp-menu-divider>
+                    <sp-menu-item>Save Selection</sp-menu-item>
+                    <sp-menu-item disabled>Make Work Path</sp-menu-item>
+                </sp-action-menu>
+            </div>
+        `);
+
+        return test.querySelector('sp-action-menu') as ActionMenu;
+    };
+
+    describe('container', () => {
+        beforeEach(async () => {
+            el = await actionMenuFixture();
+            await elementUpdated(el);
+        });
+
+        it('is a Tray in mobile', async () => {
+            /**
+             * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+             */
+            el.isMobile.matches = true;
+            el.bindEvents();
+
+            /**
+             * While we can set the view port, but not `(hover: none) and (pointer: coarse)`
+             * which prevents us from testing this at unit time. Hopefully there will be
+             * a future version of Playwright and/or @web/test-runner that does allow this.
+             * See: https://github.com/microsoft/playwright/issues/11781
+             **/
+            await setViewport({ width: 360, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+
+            const boundingRect = el.button.getBoundingClientRect();
+            sendMouse({
+                steps: [
+                    {
+                        type: 'click',
+                        position: [
+                            boundingRect.x + boundingRect.width / 2,
+                            boundingRect.y + boundingRect.height / 2,
+                        ],
+                    },
+                ],
+            });
+
+            await opened;
+
+            const tray = el.shadowRoot.querySelector('sp-tray');
+            const popover = el.shadowRoot.querySelector('sp-popover');
+
+            expect(tray).to.not.be.null;
+            expect(popover).to.be.null;
+        });
+
+        it('is a Popover in desktop', async () => {
+            await setViewport({ width: 701, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+            el.open = true;
+            await opened;
+
+            const popover = el.shadowRoot.querySelector('sp-popover');
+            const tray = el.shadowRoot.querySelector('sp-tray');
+
+            expect(popover).to.not.be.null;
+            expect(tray).to.be.null;
+        });
+    });
+
+    describe('forcePopover', () => {
+        beforeEach(async () => {
+            el = await actionMenuFixture({ forcePopover: true });
+            await elementUpdated(el);
+        });
+
+        it('is a Popover in mobile', async () => {
+            /**
+             * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+             */
+            el.isMobile.matches = true;
+            el.bindEvents();
+
+            /**
+             * While we can set the view port, but not `(hover: none) and (pointer: coarse)`
+             * which prevents us from testing this at unit time. Hopefully there will be
+             * a future version of Playwright and/or @web/test-runner that does allow this.
+             * See: https://github.com/microsoft/playwright/issues/11781
+             **/
+            await setViewport({ width: 360, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+
+            const boundingRect = el.button.getBoundingClientRect();
+            sendMouse({
+                steps: [
+                    {
+                        type: 'click',
+                        position: [
+                            boundingRect.x + boundingRect.width / 2,
+                            boundingRect.y + boundingRect.height / 2,
+                        ],
+                    },
+                ],
+            });
+
+            await opened;
+
+            const tray = el.shadowRoot.querySelector('sp-tray');
+            const popover = el.shadowRoot.querySelector('sp-popover');
+
+            expect(tray).to.be.null;
+            expect(popover).to.not.be.null;
+        });
+
+        it('is a Popover in desktop', async () => {
+            await setViewport({ width: 701, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+            el.open = true;
+            await opened;
+
+            const popover = el.shadowRoot.querySelector('sp-popover');
+            const tray = el.shadowRoot.querySelector('sp-tray');
+
+            expect(popover).to.not.be.null;
+            expect(tray).to.be.null;
+        });
+    });
+});
diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts
index 6b6146afa5..196cef0cc2 100644
--- a/packages/overlay/test/overlay.test.ts
+++ b/packages/overlay/test/overlay.test.ts
@@ -850,7 +850,6 @@ describe('Overlay - type="modal"', () => {
         expect(document.activeElement === trigger, 'trigger focused').to.be
             .true;
     });
-
 });
 describe('Overlay - timing', () => {
     it('manages multiple modals in a row without preventing them from closing', async () => {
@@ -972,8 +971,7 @@ describe('Overlay - timing', () => {
 
 describe('maintains focus consistency in webkit', () => {
     it('should apply remove-focus-ring class in webkit when focus happens after click', async () => {
-
-        if (!isWebKit()){
+        if (!isWebKit()) {
             return;
         }
 
@@ -1017,4 +1015,4 @@ describe('maintains focus consistency in webkit', () => {
 
         expect(trigger.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
     });
-});
\ No newline at end of file
+});
diff --git a/packages/picker/README.md b/packages/picker/README.md
index dc852ec312..7399f1c384 100644
--- a/packages/picker/README.md
+++ b/packages/picker/README.md
@@ -8,25 +8,25 @@ An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-i
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/picker?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/picker)
 [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/guTpKeAjgecibF150Qbg/src/index.ts)
 
-```
+```bash
 yarn add @spectrum-web-components/picker
 ```
 
 Import the side effectful registration of `<sp-picker>` via:
 
-```
+```bash
 import '@spectrum-web-components/picker/sp-picker.js';
 ```
 
 The default of `<sp-picker>` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<sp-picker>` as follows:
 
-```
+```bash
 import '@spectrum-web-components/picker/sync/sp-picker.js';
 ```
 
 When looking to leverage the `Picker` base class as a type and/or for extension purposes, do so via:
 
-```
+```bash
 import { Picker } from '@spectrum-web-components/picker';
 ```
 
@@ -459,6 +459,35 @@ When in pending state, `<sp-picker>` elements will not respond to click events a
 </sp-picker>
 ```
 
+## Force Popover on Mobile Devices
+
+On mobile, the menu can be exposed in either a `sp-popover` or `sp-tray`. By default, `sp-picker` will render an `sp-tray`. If you would like to render `sp-popover` on mobile, add the attribute `forcePopover` to the `sp-picker`.
+
+Usage Guidance:
+
+-   Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
+-   Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
+
+To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
+
+```html
+<sp-field-label for="picker-tray">
+    Do you want to see a tray menu?
+</sp-field-label>
+<sp-picker id="picker-tray" label="Select an option">
+    <sp-menu-item value="option-1">Yes</sp-menu-item>
+    <sp-menu-item value="option-2">No</sp-menu-item>
+</sp-picker>
+<br />
+<sp-field-label for="picker-popover">
+    Do you want to see a popover menu?
+</sp-field-label>
+<sp-picker id="picker-popover" label="Select an option" forcePopover>
+    <sp-menu-item value="option-1">Yes</sp-menu-item>
+    <sp-menu-item value="option-2">No</sp-menu-item>
+</sp-picker>
+```
+
 ## Accessibility
 
 To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.
diff --git a/packages/picker/src/InteractionController.ts b/packages/picker/src/InteractionController.ts
index 15a70c9d79..af35c7d72a 100644
--- a/packages/picker/src/InteractionController.ts
+++ b/packages/picker/src/InteractionController.ts
@@ -133,9 +133,10 @@ export class InteractionController implements ReactiveController {
             });
             this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';
             this.overlay.triggerElement = this.host as HTMLElement;
-            this.overlay.placement = this.host.isMobile.matches
-                ? undefined
-                : this.host.placement;
+            this.overlay.placement =
+                this.host.isMobile.matches && !this.host.forcePopover
+                    ? undefined
+                    : 'bottom';
             this.overlay.receivesFocus = 'true';
             this.overlay.willPreventClose =
                 this.preventNextToggle !== 'no' && this.open;
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 9d38aed057..b4fd8c0ee0 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -96,6 +96,14 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     @property({ type: Boolean, reflect: true })
     public invalid = false;
 
+    /**
+     * Forces the Picker to render as a popover on mobile instead of a tray.
+     *
+     * @memberof PickerBase
+     */
+    @property({ type: Boolean, reflect: true })
+    public forcePopover = false;
+
     /** Whether the items are currently loading. */
     @property({ type: Boolean, reflect: true })
     public pending = false;
@@ -517,8 +525,11 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
 
     protected override update(changes: PropertyValues<this>): void {
         if (this.selects) {
-            // Always force `selects` to "single" when set.
-            // TODO: Add support functionally and visually for "multiple"
+            /**
+             * Always force `selects` to "single" when set.
+             *
+             * @todo: Add support functionally and visually for "multiple"
+             */
             this.selects = 'single';
         }
         if (changes.has('disabled') && this.disabled) {
@@ -618,8 +629,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
             ${this.dismissHelper} ${menu} ${this.dismissHelper}
         `;
         // @todo: test in mobile
-        /* c8 ignore next 11 */
-        if (this.isMobile.matches) {
+        if (this.isMobile.matches && !this.forcePopover) {
             this.dependencyManager.add('sp-tray');
             import('@spectrum-web-components/tray/sp-tray.js');
             return html`
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index ad82b8f647..3bd4b8b796 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -12,21 +12,22 @@ governing permissions and limitations under the License.
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/field-label/sp-field-label.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/link/sp-link.js';
-import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
+import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
-import { states } from './states.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { spreadProps } from '../../../test/lit-helpers.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
 import '../../overlay/stories/index.js';
-import { handleChange, StoryArgs, Template } from './template.js';
+import { isOverlayOpen } from '../../overlay/stories/index.js';
 import { argTypes } from './args.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { states } from './states.js';
+import { handleChange, StoryArgs, Template } from './template.js';
 
 export default {
     title: 'Picker',
@@ -95,6 +96,60 @@ export const Default = (args: StoryArgs): TemplateResult => {
     `;
 };
 
+export const forcePopoverOnMobile = (args: StoryArgs): TemplateResult => {
+    return html`
+        <h1>Force Popover on Mobile</h1>
+        <p>
+            The forcePopover attribute overrides the mobile device functionality
+            of rendering a tray so that a popover will always render no matter
+            the device.
+        </p>
+        <ol>
+            <li>Open Chrome DevTools (or equivalent).</li>
+            <li>Toggle the Device Toolbar (the phone/tablet icon).</li>
+            <li>Select a device preset (e.g. iPhone 12).</li>
+            <li>
+                Chrome will set user-agent strings, simulate touch, and adjust
+                DPI.
+            </li>
+            <li>Reload the page</li>
+            <li>Click the Picker 1 and see a tray</li>
+            <li>Click the Picker 2 and see a popover</li>
+        </ol>
+        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+            Do you want to see a tray menu?
+        </sp-field-label>
+        <sp-picker
+            id="picker-1"
+            @change=${handleChange(args)}
+            label="Select an option"
+        >
+            <sp-menu-item value="option-1">Yes</sp-menu-item>
+            <sp-menu-item value="option-2">No</sp-menu-item>
+        </sp-picker>
+        <sp-field-label for="picker-2" size=${ifDefined(args.size)}>
+            Do you want to see a popover menu?
+        </sp-field-label>
+        <sp-picker
+            id="picker-2"
+            forcePopover
+            @change=${handleChange(args)}
+            label="Select an option"
+        >
+            <sp-menu-item value="option-1">Yes</sp-menu-item>
+            <sp-menu-item value="option-2">No</sp-menu-item>
+        </sp-picker>
+        <div>
+            <p>
+                This button should't be clickable if a popover is open over it.
+            </p>
+            <sp-button @click=${() => console.log('Whoops! I was clicked.')}>
+                Shouldn't be clickable
+            </sp-button>
+        </div>
+    `;
+};
+
 export const disabled = (args: StoryArgs): TemplateResult => Template(args);
 disabled.args = {
     disabled: true,
diff --git a/packages/picker/test/picker-responsive.test.ts b/packages/picker/test/picker-responsive.test.ts
index 2a7062a7d3..7e8d905a55 100644
--- a/packages/picker/test/picker-responsive.test.ts
+++ b/packages/picker/test/picker-responsive.test.ts
@@ -10,9 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sync/sp-picker.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { Picker } from '@spectrum-web-components/picker';
 import {
     elementUpdated,
     expect,
@@ -21,18 +18,27 @@ import {
     nextFrame,
     oneEvent,
 } from '@open-wc/testing';
+import '@spectrum-web-components/field-label/sp-field-label.js';
+import '@spectrum-web-components/menu/sp-menu-divider.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
+import { Picker } from '@spectrum-web-components/picker';
+import '@spectrum-web-components/picker/sync/sp-picker.js';
 import { setViewport } from '@web/test-runner-commands';
+import { spreadProps } from '../../../test/lit-helpers.js';
 import { sendMouse } from '../../../test/plugins/browser.js';
 
 describe('Picker, responsive', () => {
     let el: Picker;
-    const pickerFixture = async (): Promise<Picker> => {
+    const pickerFixture = async (args?: {
+        forcePopover: boolean;
+    }): Promise<Picker> => {
         const test = await fixture<HTMLDivElement>(html`
             <div>
                 <sp-field-label for="picker">Where do you live?</sp-field-label>
                 <sp-picker
                     id="picker"
                     style="width: 200px; --spectrum-alias-ui-icon-chevron-size-100: 10px;"
+                    ${spreadProps(args || {})}
                 >
                     <sp-menu-item>Deselect</sp-menu-item>
                     <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
@@ -89,8 +95,75 @@ describe('Picker, responsive', () => {
             await opened;
 
             const tray = el.shadowRoot.querySelector('sp-tray');
+            const popover = el.shadowRoot.querySelector('sp-popover');
 
             expect(tray).to.not.be.null;
+            expect(popover).to.be.null;
+        });
+
+        it('is a Popover in desktop', async () => {
+            await setViewport({ width: 701, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+            el.open = true;
+            await opened;
+
+            const popover = el.shadowRoot.querySelector('sp-popover');
+            const tray = el.shadowRoot.querySelector('sp-tray');
+
+            expect(popover).to.not.be.null;
+            expect(tray).to.be.null;
+        });
+    });
+
+    describe('forcePopover', () => {
+        beforeEach(async () => {
+            el = await pickerFixture({ forcePopover: true });
+            await elementUpdated(el);
+        });
+
+        it('is a Popover in mobile', async () => {
+            /**
+             * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+             */
+            el.isMobile.matches = true;
+            el.bindEvents();
+
+            /**
+             * While we can set the view port, but not `(hover: none) and (pointer: coarse)`
+             * which prevents us from testing this at unit time. Hopefully there will be
+             * a future version of Playwright and/or @web/test-runner that does allow this.
+             * See: https://github.com/microsoft/playwright/issues/11781
+             **/
+            await setViewport({ width: 360, height: 640 });
+            // Allow viewport update to propagate.
+            await nextFrame();
+
+            const opened = oneEvent(el, 'sp-opened');
+
+            const boundingRect = el.button.getBoundingClientRect();
+            sendMouse({
+                steps: [
+                    {
+                        type: 'click',
+                        position: [
+                            boundingRect.x + boundingRect.width / 2,
+                            boundingRect.y + boundingRect.height / 2,
+                        ],
+                    },
+                ],
+            });
+
+            await opened;
+
+            const tray = el.shadowRoot.querySelector('sp-tray');
+            const popover = el.shadowRoot.querySelector('sp-popover');
+
+            expect(popover).to.not.be.null;
+            expect(tray).to.be.null;
         });
 
         it('is a Popover in desktop', async () => {
@@ -104,7 +177,9 @@ describe('Picker, responsive', () => {
             await opened;
 
             const popover = el.shadowRoot.querySelector('sp-popover');
+            const tray = el.shadowRoot.querySelector('sp-tray');
 
+            expect(tray).to.be.null;
             expect(popover).to.not.be.null;
         });
     });