From 44ffcf0d6160c94463384c579bedbaf8732b3950 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 27 Jan 2022 16:34:14 -0500 Subject: [PATCH 1/3] feat(picker): support responsive delivery of menu --- .storybook/main.js | 3 + .storybook/preview-head.html | 10 +- package.json | 2 +- packages/dialog/src/DialogWrapper.ts | 50 ++++++++- packages/dialog/test/dialog-wrapper.test.ts | 55 ++++++++-- packages/menu/src/menu.css | 5 + packages/modal/src/modal-wrapper.css | 13 +++ packages/modal/src/modal.css | 1 - packages/overlay/src/ActiveOverlay.ts | 40 ++++++- packages/overlay/src/active-overlay.css | 9 +- packages/overlay/src/overlay-stack.ts | 30 +++++- packages/overlay/stories/overlay.stories.ts | 5 +- packages/overlay/test/overlay.test.ts | 96 +++++++++++------ packages/picker/package.json | 2 + packages/picker/src/Picker.ts | 75 ++++++++----- .../picker/test/picker-responsive.test.ts | 102 ++++++++++++++++++ packages/picker/test/picker-sync.test.ts | 31 +++--- packages/picker/test/picker.test.ts | 33 +++--- packages/tray/src/Tray.ts | 75 ++++++++++++- packages/tray/src/spectrum-config.js | 13 +++ packages/tray/src/spectrum-tray-wrapper.css | 31 ++++++ packages/tray/src/tray.css | 22 ++++ packages/tray/test/tray.test.ts | 18 +++- .../story-decorator/src/StoryDecorator.ts | 1 + tools/reactive-controllers/README.md | 1 + tools/reactive-controllers/match-media.md | 47 ++++++++ tools/reactive-controllers/src/MatchMedia.ts | 48 +++++++++ tools/reactive-controllers/src/index.ts | 1 + .../test/match-media.test.ts | 37 +++++++ ...ts => roving-tabindex-integration.test.ts} | 0 ...ollers.test.ts => roving-tabindex.test.ts} | 2 +- yarn.lock | 31 +++++- 32 files changed, 763 insertions(+), 126 deletions(-) create mode 100644 packages/modal/src/modal-wrapper.css create mode 100644 packages/picker/test/picker-responsive.test.ts create mode 100644 packages/tray/src/spectrum-tray-wrapper.css create mode 100644 tools/reactive-controllers/match-media.md create mode 100644 tools/reactive-controllers/src/MatchMedia.ts create mode 100644 tools/reactive-controllers/test/match-media.test.ts rename tools/reactive-controllers/test/{reactive-controllers-integration.test.ts => roving-tabindex-integration.test.ts} (100%) rename tools/reactive-controllers/test/{reactive-controllers.test.ts => roving-tabindex.test.ts} (95%) diff --git a/.storybook/main.js b/.storybook/main.js index 5e1d7b1b929..63ab1ecb387 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,6 +2,9 @@ const rollupJson = require('@rollup/plugin-json'); module.exports = { stories: ['../packages/*/stories/*.stories.js'], + nodeResolve: { + exportConditions: ['browser', 'development'], + }, rollupConfig(config) { // add a new plugin to the build diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 77a7fe37914..e4e6cb0c2b5 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -7,7 +7,6 @@ - + diff --git a/package.json b/package.json index 19954056a24..55ecf550c7d 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "node-fetch": "^3.1.0", "npm-run-all": "^4.1.5", "patch-package": "^6.4.7", - "playwright": "^1.16.3", + "playwright": "^1.18.1", "postcss": "^8.4.5", "postcss-custom-properties": "^12.1.2", "postcss-focus-visible": "^6.0.3", diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts index 418c38154e6..c3c71a1edc6 100644 --- a/packages/dialog/src/DialogWrapper.ts +++ b/packages/dialog/src/DialogWrapper.ts @@ -27,7 +27,8 @@ import '@spectrum-web-components/underlay/sp-underlay.js'; import '@spectrum-web-components/button/sp-button.js'; import '../sp-dialog.js'; -import styles from '@spectrum-web-components/modal/src/modal.css.js'; +import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js'; +import modalStyles from '@spectrum-web-components/modal/src/modal.css.js'; import { Dialog } from './Dialog.js'; import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared'; import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; @@ -43,7 +44,7 @@ import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focu */ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { public static get styles(): CSSResultArray { - return [styles]; + return [modalWrapperStyles, modalStyles]; } @property({ type: Boolean, reflect: true }) @@ -88,6 +89,10 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { @property({ type: Boolean }) public responsive = false; + private transitionPromise = Promise.resolve(); + + private resolveTransitionPromise!: () => void; + @property({ type: Boolean }) public underlay = false; @@ -156,6 +161,27 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { ); } + protected handleUnderlayTransitionend(): void { + if (!this.open) { + this.resolveTransitionPromise(); + } + } + + protected handleModalTransitionend(): void { + if (this.open || !this.underlay) { + this.resolveTransitionPromise(); + } + } + + protected update(changes: PropertyValues): void { + if (changes.has('open') && changes.get('open') !== undefined) { + this.transitionPromise = new Promise( + (res) => (this.resolveTransitionPromise = res) + ); + } + super.update(changes); + } + protected render(): TemplateResult { return html` ${this.underlay @@ -163,10 +189,14 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) { ` : html``} -
+
{ + const complete = (await super.getUpdateComplete()) as boolean; + await this.transitionPromise; + return complete; + } } diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts index 1f33e6c9946..bd8053d075e 100644 --- a/packages/dialog/test/dialog-wrapper.test.ts +++ b/packages/dialog/test/dialog-wrapper.test.ts @@ -10,15 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture } from '@open-wc/testing'; +import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing'; import { spy } from 'sinon'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; import '../sp-dialog-wrapper.js'; import { Dialog, DialogWrapper } from '../'; import { ActionButton } from '@spectrum-web-components/action-button'; import { Button } from '@spectrum-web-components/button'; import { Underlay } from '@spectrum-web-components/underlay'; import { + longContent, wrapperButtons, wrapperButtonsUnderlay, wrapperDismissable, @@ -26,38 +29,68 @@ import { wrapperFullscreen, wrapperLabeledHero, } from '../stories/dialog-wrapper.stories.js'; +import { OverlayTrigger } from '@spectrum-web-components/overlay'; +import { html, TemplateResult } from '@spectrum-web-components/base'; +import { Theme } from '@spectrum-web-components/theme'; + +async function styledFixture( + story: TemplateResult +): Promise { + const test = await fixture(html` + ${story} + `); + return test.children[0] as T; +} describe('Dialog Wrapper', () => { it('loads wrapped dialog accessibly', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads labeled hero dialog accessibly', async () => { - const el = await fixture(wrapperLabeledHero()); + const el = await styledFixture(wrapperLabeledHero()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads fullscreen wrapped dialog accessibly', async () => { - const el = await fixture(wrapperFullscreen()); + const el = await styledFixture(wrapperFullscreen()); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads with underlay and no headline accessibly', async () => { - const el = await fixture(wrapperButtonsUnderlay()); + const el = await styledFixture(wrapperButtonsUnderlay()); await elementUpdated(el); el.headline = ''; await elementUpdated(el); expect(el).to.be.accessible(); }); + it('opens and closes', async () => { + const test = await styledFixture(longContent()); + const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; + + await elementUpdated(el); + + const opened = oneEvent(test, 'sp-opened'); + test.open = 'click'; + await opened; + + expect(el.open).to.be.true; + + const closed = oneEvent(test, 'sp-closed'); + test.open = undefined; + await closed; + + expect(el.open).to.be.false; + }); it('dismisses via clicking the underlay when [dismissable]', async () => { - const test = await fixture( + const test = await styledFixture( wrapperDismissableUnderlayError() ); const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper; @@ -70,7 +103,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('does not dismiss via clicking the underlay :not([dismissable])', async () => { - const el = await fixture(wrapperButtonsUnderlay()); + const el = await styledFixture(wrapperButtonsUnderlay()); await elementUpdated(el); expect(el.open).to.be.true; const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay; @@ -79,7 +112,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.true; }); it('dismisses', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); expect(el.open).to.be.true; @@ -96,7 +129,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('manages entry focus - dismissable', async () => { - const el = await fixture(wrapperDismissable()); + const el = await styledFixture(wrapperDismissable()); await elementUpdated(el); expect(el.open).to.be.true; @@ -122,7 +155,7 @@ describe('Dialog Wrapper', () => { expect(el.open).to.be.false; }); it('manages entry focus - buttons', async () => { - const el = await fixture(wrapperButtons()); + const el = await styledFixture(wrapperButtons()); await elementUpdated(el); expect(el.open).to.be.true; @@ -146,7 +179,7 @@ describe('Dialog Wrapper', () => { const handleConfirm = (): void => confirmSpy(); const handleCancel = (): void => cancelSpy(); const handleSecondary = (): void => secondarySpy(); - const el = await fixture(wrapperButtons()); + const el = await styledFixture(wrapperButtons()); el.addEventListener('confirm', handleConfirm); el.addEventListener('cancel', handleCancel); el.addEventListener('secondary', handleSecondary); diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css index ce45792a609..70fc06ed81a 100644 --- a/packages/menu/src/menu.css +++ b/packages/menu/src/menu.css @@ -22,6 +22,11 @@ governing permissions and limitations under the License. var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap) ); + + /** + * Allow menu elements to be foreced to width 100% when placed inside of a Tray + **/ + width: var(--swc-menu-width); } :host(:focus) { diff --git a/packages/modal/src/modal-wrapper.css b/packages/modal/src/modal-wrapper.css new file mode 100644 index 00000000000..de706fc84d1 --- /dev/null +++ b/packages/modal/src/modal-wrapper.css @@ -0,0 +1,13 @@ +/* +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 './spectrum-modal-wrapper.css'; diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css index b26e1147b56..1916f76adda 100644 --- a/packages/modal/src/modal.css +++ b/packages/modal/src/modal.css @@ -10,7 +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-modal-wrapper.css'; @import './spectrum-modal.css'; :host { diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts index 3cef21ec7ab..ed021f9b5e5 100644 --- a/packages/overlay/src/ActiveOverlay.ts +++ b/packages/overlay/src/ActiveOverlay.ts @@ -123,6 +123,8 @@ export class ActiveOverlay extends SpectrumElement { public trigger!: HTMLElement; public virtualTrigger?: VirtualTrigger; + protected childrenReady!: Promise; + @property() public _state = stateTransition(); public get state(): OverlayStateType { @@ -245,7 +247,12 @@ export class ActiveOverlay extends SpectrumElement { this.state = 'active'; this.feature(); - if (this.placement && this.placement !== 'none') { + if (this.placement === 'none') { + this.style.setProperty( + '--swc-visual-viewport-height', + `${window.innerHeight}px` + ); + } else if (this.placement) { await this.updateOverlayPosition(); document.addEventListener( 'sp-update-overlays', @@ -253,10 +260,27 @@ export class ActiveOverlay extends SpectrumElement { ); window.addEventListener('scroll', this.updateOverlayPosition); } - await this.applyContentAnimation('sp-overlay-fade-in'); + const actions: Promise[] = []; + if (this.placement && this.placement !== 'none') { + actions.push(this.applyContentAnimation('sp-overlay-fade-in')); + } + if ( + typeof (this.overlayContent as SpectrumElement).updateComplete !== + 'undefined' + ) { + actions.push( + (this.overlayContent as SpectrumElement).updateComplete + ); + } + this.childrenReady = Promise.all(actions); + } + + public async openCallback(): Promise { + await this.updateComplete; if (this.receivesFocus) { this.focus(); } + this.trigger.dispatchEvent( new CustomEvent('sp-opened', { bubbles: true, @@ -519,9 +543,15 @@ export class ActiveOverlay extends SpectrumElement { private stealOverlayContentResolver!: () => void; protected async getUpdateComplete(): Promise { - const complete = (await super.getUpdateComplete()) as boolean; - await this.stealOverlayContentPromise; - return complete; + const actions: Promise[] = [ + super.getUpdateComplete(), + this.stealOverlayContentPromise, + ]; + if (this.childrenReady) { + actions.push(this.childrenReady); + } + const [complete] = await Promise.all(actions); + return complete as boolean; } disconnectedCallback(): void { diff --git a/packages/overlay/src/active-overlay.css b/packages/overlay/src/active-overlay.css index 91056c1c274..f8aad268416 100644 --- a/packages/overlay/src/active-overlay.css +++ b/packages/overlay/src/active-overlay.css @@ -47,6 +47,10 @@ governing permissions and limitations under the License. outline: none; } +:host([placement='none']) { + max-height: var(--swc-visual-viewport-height); +} + sp-theme, #contents { height: 100%; @@ -55,7 +59,10 @@ sp-theme, #contents { display: inline-block; pointer-events: none; - animation-duration: var(--spectrum-global-animation-duration-200, 160ms); + animation-duration: var( + --swc-test-duration, + var(--spectrum-global-animation-duration-200, 160ms) + ); animation-timing-function: var( --spectrum-global-animation-ease-out, ease-out diff --git a/packages/overlay/src/overlay-stack.ts b/packages/overlay/src/overlay-stack.ts index 731249e9a8f..9631b101a31 100644 --- a/packages/overlay/src/overlay-stack.ts +++ b/packages/overlay/src/overlay-stack.ts @@ -25,10 +25,18 @@ function hasModifier(event: MouseEvent): boolean { interface ManagedOverlayContent { open: boolean; + // Allow the overlaid content to do something before it is thrown. overlayWillOpenCallback?: (args: { trigger: HTMLElement }) => void; + // Allow the overlaid content to do something when it has been thrown. overlayOpenCallback?: (args: { trigger: HTMLElement }) => void; + // Allow the overlaid content to do something when its throw has been cancelled. overlayOpenCancelledCallback?: (args: { trigger: HTMLElement }) => void; + // Allow the overlaid content to do something before it is recalled, and return `true` if it will self managing the recall. + overlayWillCloseCallback?: (args: { trigger: HTMLElement }) => boolean; + // Allow the overlaid content to do something when it has been recalled. overlayCloseCallback?: (args: { trigger: HTMLElement }) => void; + // Surface possible LitElement lifecycle methods on the synthetically types element. + updateComplete?: Promise; } export class OverlayStack { @@ -132,6 +140,14 @@ export class OverlayStack { '--swc-body-margins-block', `calc(${marginTop} + ${marginBottom})` ); + this.overlayHolder.style.setProperty( + '--swc-body-margins-inline', + `calc(${marginLeft} + ${marginRight})` + ); + this.overlayHolder.style.setProperty( + '--swc-body-margins-block', + `calc(${marginTop} + ${marginBottom})` + ); this._bodyMarginsApplied = !allZero; } @@ -292,9 +308,7 @@ export class OverlayStack { const { trigger } = activeOverlay; contentWithLifecycle.overlayOpenCallback({ trigger }); } - if (details.receivesFocus === 'auto') { - activeOverlay.focus(); - } + activeOverlay.openCallback(); return false; } ); @@ -461,9 +475,17 @@ export class OverlayStack { if (!overlay) { return; } - await overlay.hide(animated); const contentWithLifecycle = overlay.overlayContent as unknown as ManagedOverlayContent; + if ( + typeof contentWithLifecycle.overlayWillCloseCallback !== 'undefined' + ) { + const { trigger } = overlay; + if (contentWithLifecycle.overlayWillCloseCallback({ trigger })) { + return; + } + } + await overlay.hide(animated); if (typeof contentWithLifecycle.open !== 'undefined') { contentWithLifecycle.open = false; } diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index 002dcc79a21..8bec880329f 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -590,7 +590,10 @@ class ComplexModalReady extends HTMLElement { }; handlePickerOpen = async (): Promise => { - await nextFrame(); + const picker = document.querySelector('#test-picker') as Picker; + const actions = [nextFrame, picker.updateComplete]; + + await Promise.all(actions); this.ready(true); }; diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts index 1b3b3b30715..34edf8a4f93 100644 --- a/packages/overlay/test/overlay.test.ts +++ b/packages/overlay/test/overlay.test.ts @@ -672,33 +672,64 @@ describe('Overlay - timing', () => { '[slot="trigger"]' ) as HTMLButtonElement; - trigger1.dispatchEvent( - new MouseEvent('mouseenter', { - bubbles: true, - composed: true, - }) - ); + const boundingRectTrigger1 = trigger1.getBoundingClientRect(); + const boundingRectTrigger2 = trigger2.getBoundingClientRect(); + const trigger1Position: [number, number] = [ + boundingRectTrigger1.left + boundingRectTrigger1.width / 2, + boundingRectTrigger1.top + boundingRectTrigger1.height / 2, + ]; + const outsideTrigger1: [number, number] = [ + boundingRectTrigger1.left + boundingRectTrigger1.width * 2, + boundingRectTrigger1.top + boundingRectTrigger1.height * 2, + ]; + const trigger2Position: [number, number] = [ + boundingRectTrigger2.left + boundingRectTrigger2.width / 2, + boundingRectTrigger2.top + boundingRectTrigger2.height / 2, + ]; + const outsideTrigger2: [number, number] = [ + boundingRectTrigger2.left + boundingRectTrigger2.width * 2, + boundingRectTrigger2.top + boundingRectTrigger2.height / 2, + ]; + + await sendMouse({ + steps: [ + { + type: 'move', + position: trigger1Position, + }, + ], + }); + await nextFrame(); + await nextFrame(); + await sendMouse({ + steps: [ + { + type: 'move', + position: outsideTrigger1, + }, + ], + }); + await nextFrame(); + await nextFrame(); + await sendMouse({ + steps: [ + { + type: 'move', + position: trigger2Position, + }, + ], + }); await nextFrame(); - trigger1.dispatchEvent( - new MouseEvent('mouseleave', { - bubbles: true, - composed: true, - }) - ); - trigger2.dispatchEvent( - new MouseEvent('mouseenter', { - bubbles: true, - composed: true, - }) - ); await nextFrame(); const opened = oneEvent(trigger2, 'sp-opened'); - trigger2.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - composed: true, - }) - ); + sendMouse({ + steps: [ + { + type: 'click', + position: trigger2Position, + }, + ], + }); await opened; expect(overlayTrigger1.hasAttribute('open')).to.be.false; @@ -706,18 +737,21 @@ describe('Overlay - timing', () => { expect(overlayTrigger2.getAttribute('open')).to.equal('click'); const closed = oneEvent(overlayTrigger2, 'sp-closed'); - document.body.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - composed: true, - }) - ); + sendMouse({ + steps: [ + { + type: 'click', + position: outsideTrigger2, + }, + ], + }); await closed; // sometimes safari needs to wait a few frames for the open attribute to update for (let i = 0; i < 3; i++) await nextFrame(); expect(overlayTrigger1.hasAttribute('open')).to.be.false; - expect(overlayTrigger2.hasAttribute('open')).to.be.false; + expect(overlayTrigger2.hasAttribute('open'), overlayTrigger2.open).to.be + .false; }); }); diff --git a/packages/picker/package.json b/packages/picker/package.json index fcb162cc205..d39700dc7c9 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -56,7 +56,9 @@ "@spectrum-web-components/menu": "^0.11.3", "@spectrum-web-components/overlay": "^0.13.4", "@spectrum-web-components/popover": "^0.11.4", + "@spectrum-web-components/reactive-controllers": "^0.1.0", "@spectrum-web-components/shared": "^0.13.3", + "@spectrum-web-components/tray": "^0.2.3", "tslib": "^2.0.0" }, "devDependencies": { diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index 27dc64770b6..2b1c4d9e823 100644 --- a/packages/picker/src/Picker.ts +++ b/packages/picker/src/Picker.ts @@ -41,14 +41,19 @@ import type { MenuItemChildren, MenuItemRemovedEvent, } from '@spectrum-web-components/menu'; +import '@spectrum-web-components/tray/sp-tray.js'; import '@spectrum-web-components/popover/sp-popover.js'; -import { Popover } from '@spectrum-web-components/popover'; +import type { Popover } from '@spectrum-web-components/popover'; import { openOverlay, OverlayOptions, Placement, TriggerInteractions, } from '@spectrum-web-components/overlay'; +import { + IS_MOBILE, + MatchMediaController, +} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; const chevronClass = { s: 'spectrum-UIIcon-ChevronDown75', @@ -79,6 +84,8 @@ export class PickerBase extends SizedMixin(Focusable) { return await openOverlay(target, interaction, content, options); }; + protected isMobile = new MatchMediaController(this, IS_MOBILE); + @query('#button') public button!: HTMLButtonElement; @@ -131,7 +138,7 @@ export class PickerBase extends SizedMixin(Focusable) { @property({ attribute: false }) public selectedItem?: MenuItem; - private closeOverlay?: () => void; + private closeOverlay?: Promise<() => void>; private popover!: Popover; @@ -269,10 +276,10 @@ export class PickerBase extends SizedMixin(Focusable) { private popoverFragment!: DocumentFragment; - private generatePopover(deprecatedMenu: Menu | null): void { - if (this.popoverFragment) return; - - this.popoverFragment = document.createDocumentFragment(); + private async generatePopover(deprecatedMenu: Menu | null): Promise { + if (!this.popoverFragment) { + this.popoverFragment = document.createDocumentFragment(); + } render(this.renderPopover, this.popoverFragment, { host: this }); this.popover = this.popoverFragment.children[0] as Popover; this.optionsMenu = this.popover.children[1] as Menu; @@ -289,7 +296,7 @@ export class PickerBase extends SizedMixin(Focusable) { let reparentableChildren: Element[] = []; const deprecatedMenu = this.querySelector('sp-menu'); - this.generatePopover(deprecatedMenu); + await this.generatePopover(deprecatedMenu); if (deprecatedMenu) { reparentableChildren = Array.from(deprecatedMenu.children); } else { @@ -328,27 +335,27 @@ export class PickerBase extends SizedMixin(Focusable) { }, { once: true } ); - this.closeOverlay = await Picker.openOverlay( - this, - 'modal', - this.popover, - { - placement: this.placement, - receivesFocus: 'auto', - } - ); + this.closeOverlay = Picker.openOverlay(this, 'modal', this.popover, { + placement: this.isMobile.matches ? 'none' : this.placement, + receivesFocus: 'auto', + }); } protected sizePopover(popover: HTMLElement): void { + if (this.isMobile.matches) { + popover.style.setProperty('--swc-menu-width', `100%`); + return; + } if (this.quiet) return; // only use `this.offsetWidth` when Standard variant popover.style.setProperty('min-width', `${this.offsetWidth}px`); } - private closeMenu(): void { + private async closeMenu(): Promise { if (this.closeOverlay) { - this.closeOverlay(); + const closeOverlay = this.closeOverlay; delete this.closeOverlay; + (await closeOverlay)(); } } @@ -445,6 +452,29 @@ export class PickerBase extends SizedMixin(Focusable) { } protected get renderPopover(): TemplateResult { + const content = html` + ${this.dismissHelper} + + ${this.dismissHelper} + `; + if (this.isMobile.matches) { + return html` + + ${content} + + `; + } return html` - ${this.dismissHelper} - - ${this.dismissHelper} + ${content} `; } diff --git a/packages/picker/test/picker-responsive.test.ts b/packages/picker/test/picker-responsive.test.ts new file mode 100644 index 00000000000..5104eb017ba --- /dev/null +++ b/packages/picker/test/picker-responsive.test.ts @@ -0,0 +1,102 @@ +/* +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 '../sync/sp-picker.js'; +import '@spectrum-web-components/field-label/sp-field-label.js'; +import { Picker } from '..'; +import { + elementUpdated, + expect, + fixture, + html, + nextFrame, + oneEvent, + waitUntil, +} from '@open-wc/testing'; +import { setViewport } from '@web/test-runner-commands'; + +describe('Picker, responsive', () => { + let el: Picker; + const pickerFixture = async (): Promise => { + const test = await fixture( + html` +
+ + Where do you live? + + + Deselect + + Select Inverse + + Feather... + Select and Mask... + + Save Selection + Make Work Path + +
+ ` + ); + + await waitUntil( + () => !!window.applyFocusVisiblePolyfill, + 'polyfill loaded' + ); + + return test.querySelector('sp-picker') as Picker; + }; + + describe('container', () => { + beforeEach(async () => { + el = await pickerFixture(); + await elementUpdated(el); + }); + + xit('is a Tray in mobile', async () => { + /** + * 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'); + el.open = true; + await opened; + + const tray = document.querySelector('sp-tray'); + + expect(tray).to.not.be.null; + }); + + it('is a Popover in desktop', async () => { + await setViewport({ width: 701, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + + const opened = oneEvent(el, 'sp-opened'); + el.open = true; + await opened; + + const popover = document.querySelector('sp-popover'); + + expect(popover).to.not.be.null; + }); + }); +}); diff --git a/packages/picker/test/picker-sync.test.ts b/packages/picker/test/picker-sync.test.ts index 85fc0315268..6c76a3ced0e 100644 --- a/packages/picker/test/picker-sync.test.ts +++ b/packages/picker/test/picker-sync.test.ts @@ -767,9 +767,8 @@ describe('Picker, sync', () => { // start at input1 input1.focus(); await nextFrame(); - expect(document.activeElement, 'focuses input 1').to.equal( - input1 - ); + expect(document.activeElement === input1, 'focuses input 1').to + .true; // tab to the picker let focused = oneEvent(el, 'focus'); await sendKeys({ press: 'Tab' }); @@ -777,14 +776,13 @@ describe('Picker, sync', () => { expect(el.focused, 'focused').to.be.true; expect(el.open, 'closed').to.be.false; - expect(document.activeElement, 'focuses el').to.equal(el); + expect(document.activeElement === el, 'focuses el').to.be.true; // tab through the picker to input2 focused = oneEvent(input2, 'focus'); await sendKeys({ press: 'Tab' }); await focused; - expect(document.activeElement, 'focuses input 2').to.equal( - input2 - ); + expect(document.activeElement === input2, 'focuses input 2').to + .true; }); it('shift+tabs backwards through the element', async () => { // start at input1 @@ -929,7 +927,9 @@ describe('Picker, sync', () => { expect(el.open).to.be.false; }); it('scrolls selected into view on open', async () => { - (el as unknown as { generatePopover(): void }).generatePopover(); + await ( + el as unknown as { generatePopover(): void } + ).generatePopover(); (el as unknown as { popover: Popover }).popover.style.height = '40px'; @@ -1146,10 +1146,6 @@ describe('Picker, sync', () => { await waitUntil(() => el1.open && !el2.open, '1 open, 2 closed: again'); }); it('displays selected item text by default', async () => { - const focusSelectedSpy = spy(); - const focusFirstSpy = spy(); - const handleFirstFocus = (): void => focusFirstSpy(); - const handleSelectedFocus = (): void => focusSelectedSpy(); const el = await fixture( html` { 'sp-menu-item:nth-of-type(2)' ) as MenuItem; - firstItem.addEventListener('focus', handleFirstFocus); - secondItem.addEventListener('focus', handleSelectedFocus); - expect(el.value).to.equal('inverse'); expect(el.selectedItem?.itemText).to.equal('Select Inverse'); @@ -1191,10 +1184,14 @@ describe('Picker, sync', () => { sendKeys({ press: 'Enter' }); await opened; - await waitUntil(() => isMenuActiveElement(), 'menu focused'); + const menu = document.querySelector('sp-menu') as Menu; + await elementUpdated(menu); - expect(focusFirstSpy.called, 'do not focus first element').to.be.false; + expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false; expect(secondItem.focused, 'secondItem "focused"').to.be.true; + expect(menu.getAttribute('aria-activedescendant')).to.equal( + secondItem.id + ); }); it('resets value when item not available', async () => { const el = await fixture( diff --git a/packages/picker/test/picker.test.ts b/packages/picker/test/picker.test.ts index ed7162fb2ff..63ec15b41cb 100644 --- a/packages/picker/test/picker.test.ts +++ b/packages/picker/test/picker.test.ts @@ -51,7 +51,7 @@ const isMenuActiveElement = function (): boolean { return document.activeElement instanceof Menu; }; -describe('Picker, sync', () => { +describe('Picker, standard', () => { let el: Picker; const pickerFixture = async (): Promise => { const test = await fixture( @@ -767,9 +767,8 @@ describe('Picker, sync', () => { // start at input1 input1.focus(); await nextFrame(); - expect(document.activeElement, 'focuses input 1').to.equal( - input1 - ); + expect(document.activeElement === input1, 'focuses input 1').to + .true; // tab to the picker let focused = oneEvent(el, 'focus'); await sendKeys({ press: 'Tab' }); @@ -777,14 +776,13 @@ describe('Picker, sync', () => { expect(el.focused, 'focused').to.be.true; expect(el.open, 'closed').to.be.false; - expect(document.activeElement, 'focuses el').to.equal(el); + expect(document.activeElement === el, 'focuses el').to.be.true; // tab through the picker to input2 focused = oneEvent(input2, 'focus'); await sendKeys({ press: 'Tab' }); await focused; - expect(document.activeElement, 'focuses input 2').to.equal( - input2 - ); + expect(document.activeElement === input2, 'focuses input 2').to + .true; }); it('shift+tabs backwards through the element', async () => { // start at input1 @@ -929,7 +927,9 @@ describe('Picker, sync', () => { expect(el.open).to.be.false; }); it('scrolls selected into view on open', async () => { - (el as unknown as { generatePopover(): void }).generatePopover(); + await ( + el as unknown as { generatePopover(): void } + ).generatePopover(); (el as unknown as { popover: Popover }).popover.style.height = '40px'; @@ -1146,10 +1146,6 @@ describe('Picker, sync', () => { await waitUntil(() => el1.open && !el2.open, '1 open, 2 closed: again'); }); it('displays selected item text by default', async () => { - const focusSelectedSpy = spy(); - const focusFirstSpy = spy(); - const handleFirstFocus = (): void => focusFirstSpy(); - const handleSelectedFocus = (): void => focusSelectedSpy(); const el = await fixture( html` { 'sp-menu-item:nth-of-type(2)' ) as MenuItem; - firstItem.addEventListener('focus', handleFirstFocus); - secondItem.addEventListener('focus', handleSelectedFocus); - expect(el.value).to.equal('inverse'); expect(el.selectedItem?.itemText).to.equal('Select Inverse'); @@ -1191,10 +1184,14 @@ describe('Picker, sync', () => { sendKeys({ press: 'Enter' }); await opened; - await waitUntil(() => isMenuActiveElement(), 'menu focused'); + const menu = document.querySelector('sp-menu') as Menu; + await elementUpdated(menu); - expect(focusFirstSpy.called, 'do not focus first element').to.be.false; + expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false; expect(secondItem.focused, 'secondItem "focused"').to.be.true; + expect(menu.getAttribute('aria-activedescendant')).to.equal( + secondItem.id + ); }); it('resets value when item not available', async () => { const el = await fixture( diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts index 6f0a1f3ea39..79051ad2ed6 100644 --- a/packages/tray/src/Tray.ts +++ b/packages/tray/src/Tray.ts @@ -13,6 +13,7 @@ governing permissions and limitations under the License. import { CSSResultArray, html, + PropertyValues, SpectrumElement, TemplateResult, } from '@spectrum-web-components/base'; @@ -22,6 +23,7 @@ import { } from '@spectrum-web-components/base/src/decorators.js'; import '@spectrum-web-components/underlay/sp-underlay.js'; import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js'; +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; import modalStyles from '@spectrum-web-components/modal/src/modal.css.js'; import styles from './tray.css.js'; @@ -41,6 +43,15 @@ export class Tray extends SpectrumElement { @property({ type: Boolean, reflect: true }) public open = false; + protected prefersMotion = new MatchMediaController( + this, + '(prefers-reduced-motion: no-preference)' + ); + + private transitionPromise = Promise.resolve(); + + private resolveTransitionPromise!: () => void; + @query('.tray') private tray!: HTMLDivElement; @@ -55,8 +66,20 @@ export class Tray extends SpectrumElement { } } + public overlayWillCloseCallback(): boolean { + if (!this.open) return false; + this.close(); + return true; + } + public close(): void { this.open = false; + if (!this.prefersMotion.matches) { + this.dispatchClosed(); + } + } + + private dispatchClosed(): void { this.dispatchEvent( new Event('close', { bubbles: true, @@ -64,12 +87,60 @@ export class Tray extends SpectrumElement { ); } + protected handleUnderlayTransitionend(): void { + if (!this.open) { + this.dispatchClosed(); + this.resolveTransitionPromise(); + } + } + + protected handleTrayTransitionend(): void { + if (this.open) { + this.resolveTransitionPromise(); + } + } + + protected update(changes: PropertyValues): void { + if ( + changes.has('open') && + changes.get('open') !== undefined && + this.prefersMotion.matches + ) { + this.transitionPromise = new Promise( + (res) => (this.resolveTransitionPromise = res) + ); + } + super.update(changes); + } + protected render(): TemplateResult { return html` - -
+ +
`; } + + /** + * Bind the open/close transition into the update complete lifecycle so + * that the overlay system can wait for it to be "visibly ready" before + * attempting to throw focus into the content contained herein. Not + * waiting for this can cause small amounts of page scroll to happen + * while opening the Tray when focusable content is included: e.g. Menu + * elements whose selected Menu Item is not the first Menu Item. + */ + protected async getUpdateComplete(): Promise { + const complete = (await super.getUpdateComplete()) as boolean; + await this.transitionPromise; + return complete; + } } diff --git a/packages/tray/src/spectrum-config.js b/packages/tray/src/spectrum-config.js index e50ba937865..c37f2a77604 100644 --- a/packages/tray/src/spectrum-config.js +++ b/packages/tray/src/spectrum-config.js @@ -13,6 +13,19 @@ governing permissions and limitations under the License. const config = { spectrum: 'tray', components: [ + { + name: 'tray-wrapper', + host: { + selector: '.spectrum-Tray-wrapper', + }, + attributes: [ + { + type: 'boolean', + selector: '.is-open', + name: 'open', + }, + ], + }, { name: 'tray', host: { diff --git a/packages/tray/src/spectrum-tray-wrapper.css b/packages/tray/src/spectrum-tray-wrapper.css new file mode 100644 index 00000000000..594f477ad37 --- /dev/null +++ b/packages/tray/src/spectrum-tray-wrapper.css @@ -0,0 +1,31 @@ +/* stylelint-disable */ /* +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. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([dir='ltr']) { + left: 0; /* [dir=ltr] .spectrum-Tray-wrapper */ +} +:host([dir='rtl']) { + right: 0; /* [dir=rtl] .spectrum-Tray-wrapper */ +} +:host { + bottom: 0; + display: flex; + justify-content: center; + position: fixed; /* .spectrum-Tray-wrapper */ + width: 100%; + z-index: 2; +} +@media (max-width: 375px) { + .spectrum-Tray { + border-radius: var(--spectrum-tray-border-radius, 0); + } +} diff --git a/packages/tray/src/tray.css b/packages/tray/src/tray.css index 0b984fc0f33..63a355505b0 100644 --- a/packages/tray/src/tray.css +++ b/packages/tray/src/tray.css @@ -10,10 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +@import './spectrum-tray-wrapper.css'; @import './spectrum-tray.css'; :host { align-items: flex-end; + position: fixed !important; + max-height: var(--swc-visual-viewport-height); +} + +sp-underlay { + touch-action: none; } /** @@ -24,4 +31,19 @@ governing permissions and limitations under the License. **/ .tray { padding: var(--spectrum-tray-padding-y, 0) var(--spectrum-tray-padding-x, 0); + display: inline-flex; + overscroll-behavior: contain; +} + +::slotted(.visually-hidden) { + border: 0; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + height: 1px; + margin: 0 -1px -1px 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; } diff --git a/packages/tray/test/tray.test.ts b/packages/tray/test/tray.test.ts index 72f0897ad11..44b6f0b3a7f 100644 --- a/packages/tray/test/tray.test.ts +++ b/packages/tray/test/tray.test.ts @@ -15,11 +15,14 @@ import { expect, fixture, html, + nextFrame, oneEvent, } from '@open-wc/testing'; import '../sp-tray.js'; import { Tray } from '..'; +import '@spectrum-web-components/theme/sp-theme.js'; +import '@spectrum-web-components/theme/src/themes.js'; describe('Tray', () => { it('loads default tray accessibly', async () => { @@ -52,13 +55,24 @@ describe('Tray', () => { expect(document.activeElement).to.equal(anchor); }); it('closes', async () => { - const el = await fixture( + const test = await fixture( html` - + + + ` ); + const el = test.querySelector('sp-tray') as Tray; + // Ensure closed styles are set before opening so that + // the `transitionend` event will be met below. + await nextFrame(); + await nextFrame(); + expect(el.open).to.be.false; + + el.open = true; await elementUpdated(el); + expect(el.open).to.be.true; const closed = oneEvent(el, 'close'); const overlay = el.shadowRoot.querySelector( diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 171132714d2..ab333714588 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -65,6 +65,7 @@ const reduceMotionProperties = css` --spectrum-global-animation-duration-2000: 0ms; --spectrum-global-animation-duration-4000: 0ms; --spectrum-coachmark-animation-indicator-ring-duration: 0ms; + --swc-test-duration: 1ms; `; ActiveOverlay.prototype.renderTheme = function ( diff --git a/tools/reactive-controllers/README.md b/tools/reactive-controllers/README.md index c104a946949..1029ac77076 100644 --- a/tools/reactive-controllers/README.md +++ b/tools/reactive-controllers/README.md @@ -4,4 +4,5 @@ ### Reactive controllers +- [MatchMediaController](../match-media) - [RovingTabindexController](../roving-tab-index) diff --git a/tools/reactive-controllers/match-media.md b/tools/reactive-controllers/match-media.md new file mode 100644 index 00000000000..83abdcb44f2 --- /dev/null +++ b/tools/reactive-controllers/match-media.md @@ -0,0 +1,47 @@ +## Description + +The [match media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API allows for a developer to query the state of a supplied CSS media query from the JS scope while surfacing an event based API to listen for changes to whether that query is currently matched or not. `MatchMediaController` binds the supplied CSS media query to the supplied Reactive Element and calls for an update in the host element when the query goes between matching and not. This allow for the `matches` property on the reactive controller to be leveraged in your render lifecycle. + +A `MatchMediaController` can be bound to any of the growing number of [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) and any number of `MatchMediaControllers` can be bound to a host element. With this in mind the `MatchMediaController` can support a wide array of complex layouts. + +### Usage + +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/reactive-controllers?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/reactive-controllers) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/reactive-controllers?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/reactive-controllers) + +``` +yarn add @spectrum-web-components/reactive-controllers +``` + +Import the `MatchMediaController` via: + +``` +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/MatchMediaController.js'; +``` + +## Example + +A `Host` element that renders a different message depending on the "orientation" of the window in which is it delivered: + +```js +import { html, LitElement } from 'lit'; +import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/MatchMediaController.js'; + +class Host extends LitElement { + orientationLandscape = new MatchMediaController( + this, + '(orientation: landscape)' + ); + + render() { + if (this.orientationLandscape.matches) { + return html` + The orientation is landscape. + `; + } + return html` + The orientation is portrait. + `; + } +} +``` diff --git a/tools/reactive-controllers/src/MatchMedia.ts b/tools/reactive-controllers/src/MatchMedia.ts new file mode 100644 index 00000000000..8f0dcdbd5b4 --- /dev/null +++ b/tools/reactive-controllers/src/MatchMedia.ts @@ -0,0 +1,48 @@ +/* +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 type { ReactiveController, ReactiveElement } from 'lit'; + +export const DARK_MODE = '(prefers-color-scheme: dark)'; +export const IS_MOBILE = + '(max-width: 700px) and (hover: none) and (pointer: coarse), (max-height: 700px) and (hover: none) and (pointer: coarse)'; + +export class MatchMediaController implements ReactiveController { + key = Symbol('match-media-key'); + + matches = false; + + protected host: ReactiveElement; + + protected media: MediaQueryList; + + constructor(host: ReactiveElement, query: string) { + this.host = host; + this.media = window.matchMedia(query); + this.matches = this.media.matches; + this.onChange = this.onChange.bind(this); + host.addController(this); + } + + public hostConnected(): void { + this.media.addEventListener('change', this.onChange); + } + + public hostDisconnected(): void { + this.media.removeEventListener('change', this.onChange); + } + + protected onChange(event: MediaQueryListEvent): void { + if (this.matches === event.matches) return; + this.matches = event.matches; + this.host.requestUpdate(this.key, !this.matches); + } +} diff --git a/tools/reactive-controllers/src/index.ts b/tools/reactive-controllers/src/index.ts index bb7e3b774b9..b5f2cbf571f 100644 --- a/tools/reactive-controllers/src/index.ts +++ b/tools/reactive-controllers/src/index.ts @@ -10,4 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +export * from './MatchMedia.js'; export * from './RovingTabindex.js'; diff --git a/tools/reactive-controllers/test/match-media.test.ts b/tools/reactive-controllers/test/match-media.test.ts new file mode 100644 index 00000000000..3fc9ecb0b49 --- /dev/null +++ b/tools/reactive-controllers/test/match-media.test.ts @@ -0,0 +1,37 @@ +/* +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 { html, LitElement } from 'lit'; +import { expect, fixture, nextFrame } from '@open-wc/testing'; +import { setViewport } from '@web/test-runner-commands'; +import { MatchMediaController } from '../'; + +describe('Match Media', () => { + it('responds to media changes', async () => { + class TestEl extends LitElement {} + customElements.define('test-match-media-el', TestEl); + const el = await fixture( + html` + + ` + ); + const controller = new MatchMediaController( + el as LitElement & { shadowRoot: ShadowRoot }, + '(min-width: 500px)' + ); + expect(controller.matches).to.be.true; + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); + expect(controller.matches).to.be.false; + }); +}); diff --git a/tools/reactive-controllers/test/reactive-controllers-integration.test.ts b/tools/reactive-controllers/test/roving-tabindex-integration.test.ts similarity index 100% rename from tools/reactive-controllers/test/reactive-controllers-integration.test.ts rename to tools/reactive-controllers/test/roving-tabindex-integration.test.ts diff --git a/tools/reactive-controllers/test/reactive-controllers.test.ts b/tools/reactive-controllers/test/roving-tabindex.test.ts similarity index 95% rename from tools/reactive-controllers/test/reactive-controllers.test.ts rename to tools/reactive-controllers/test/roving-tabindex.test.ts index cb8d291ec9c..05a32d2e8ec 100644 --- a/tools/reactive-controllers/test/reactive-controllers.test.ts +++ b/tools/reactive-controllers/test/roving-tabindex.test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { LitElement } from 'lit'; import { expect } from '@open-wc/testing'; -import { RovingTabindexController } from '../'; +import { RovingTabindexController } from '../src'; describe('RovingTabindex', () => { it('constructs with defaults', async () => { diff --git a/yarn.lock b/yarn.lock index cbe62d533a7..467a4c2673a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17773,13 +17773,42 @@ playwright-core@=1.16.3: yauzl "^2.10.0" yazl "^2.5.1" -playwright@^1.14.0, playwright@^1.16.3: +playwright-core@=1.18.1: + version "1.18.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.18.1.tgz#a5cf3f212d10692382e2acd1f7bc8c9ff9bbb849" + integrity sha512-NALGl8R1GHzGLlhUApmpmfh6M1rrrPcDTygWvhTbprxwGB9qd/j9DRwyn4HTQcUB6o0/VOpo46fH9ez3+D/Rog== + dependencies: + commander "^8.2.0" + debug "^4.1.1" + extract-zip "^2.0.1" + https-proxy-agent "^5.0.0" + jpeg-js "^0.4.2" + mime "^2.4.6" + pngjs "^5.0.0" + progress "^2.0.3" + proper-lockfile "^4.1.1" + proxy-from-env "^1.1.0" + rimraf "^3.0.2" + socks-proxy-agent "^6.1.0" + stack-utils "^2.0.3" + ws "^7.4.6" + yauzl "^2.10.0" + yazl "^2.5.1" + +playwright@^1.14.0: version "1.16.3" resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.16.3.tgz#27a292d9fa54fbac923998d3af58cd2b691f5ebe" integrity sha512-nfJx/OpIb/8OexL3rYGxNN687hGyaM3XNpfuMzoPlrekURItyuiHHsNhC9oQCx3JDmCn5O3EyyyFCnrZjH6MpA== dependencies: playwright-core "=1.16.3" +playwright@^1.18.1: + version "1.18.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.18.1.tgz#45c2ca6ee25c44e336985de9b51955727b5f17cf" + integrity sha512-8EaX9EtbtAoMq5tnzIsoA3b/V86V/6Mq2skuOU4qEw+5OVxs1lwesDwmjy/RVU1Qfx5UuwSQzhp45wyH22oa+A== + dependencies: + playwright-core "=1.18.1" + please-upgrade-node@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942" From 4ba1b2ca83dc3ab41161cf545de5a14757055bf4 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 31 Jan 2022 23:17:39 -0500 Subject: [PATCH 2/3] ci: updated golden images cache --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index a74e86fd776..31786756c86 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -9,7 +9,7 @@ executors: parameters: current_golden_images_hash: type: string - default: dd3a2e0c32c10a166d37b82df17bebb9f2b1b17a + default: c5094224659a6e73ec66f0bd28731c309fab5136 commands: downstream: steps: From ec6d5880ec4050382cb2eda7ca6739c03830f5bb Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Tue, 1 Feb 2022 15:44:30 -0500 Subject: [PATCH 3/3] fix(split-button): remove "popover" from render path --- packages/split-button/src/SplitButton.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts index 0d3d54b4f5a..cd209aef5cf 100644 --- a/packages/split-button/src/SplitButton.ts +++ b/packages/split-button/src/SplitButton.ts @@ -168,7 +168,7 @@ export class SplitButton extends SizedMixin(PickerBase) { buttons.reverse(); } return html` - ${buttons} ${this.renderPopover} + ${buttons} `; }