Skip to content

Commit

Permalink
feat(picker,action-group,split-button): leverage Overlay v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Aug 18, 2023
1 parent cde0a16 commit 170a223
Show file tree
Hide file tree
Showing 17 changed files with 489 additions and 493 deletions.
1 change: 0 additions & 1 deletion packages/action-group/src/ActionGroup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
target.tabIndex = 0;
target.setAttribute('aria-checked', 'true');
this.setSelected([target.value], true);
target.focus();
break;
}
case 'multiple': {
Expand Down
2 changes: 2 additions & 0 deletions packages/action-group/test/action-group.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1099,6 +1099,7 @@ describe('ActionGroup', () => {
expect(el.selected.length).to.equal(1);
expect(el.selected[0]).to.equal('Second');

thirdElement.focus();
thirdElement.click();

await elementUpdated(el);
Expand Down Expand Up @@ -1204,6 +1205,7 @@ describe('ActionGroup', () => {
await elementUpdated(el);
expect(el.selected.length).to.equal(0);

thirdElement.focus();
thirdElement.click();

await elementUpdated(el);
Expand Down
2 changes: 2 additions & 0 deletions packages/action-menu/src/ActionMenu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,12 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
@blur=${this.onButtonBlur}
@click=${this.onButtonClick}
@focus=${this.onButtonFocus}
@pointerdown=${this.handlePointerdown}
?disabled=${this.disabled}
>
${this.buttonContent}
</sp-action-button>
${this.renderOverlay}
`;
}

Expand Down
1 change: 0 additions & 1 deletion packages/action-menu/src/action-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ governing permissions and limitations under the License.
#popover {
width: auto;
max-width: none;
display: none;
}

:host([dir='ltr']) ::slotted([slot='icon']),
Expand Down
1 change: 1 addition & 0 deletions packages/action-menu/stories/action-menu.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
import { html, TemplateResult } from '@spectrum-web-components/base';

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';
Expand Down
70 changes: 40 additions & 30 deletions packages/action-menu/test/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,25 @@ import { testForLitDevWarnings } from '../../../test/testing-helpers';

import { spy } from 'sinon';

import type { ActionMenu } from '@spectrum-web-components/action-menu';
import { ActionMenu } from '@spectrum-web-components/action-menu';
import type { Menu, MenuItem } from '@spectrum-web-components/menu';
import { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/dialog/sp-dialog-base.js';
import { Theme } from '@spectrum-web-components/theme';
import { TemplateResult } from '@spectrum-web-components/base';

async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="dark">
${story}
</sp-theme>
`);
return test.children[0] as T;
}

ignoreResizeObserverLoopError(before, after);

Expand Down Expand Up @@ -163,14 +179,12 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
const opened = oneEvent(el, 'sp-opened');
el.click();
await opened;
await elementUpdated(el);

expect(el.open).to.be.true;

const closed = oneEvent(el, 'sp-closed');
menuItem2.click();
await closed;
await elementUpdated(el);

expect(el.open).to.be.false;
expect(changeSpy.callCount).to.equal(1);
Expand All @@ -182,7 +196,9 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
html`
<sp-action-menu
label="More Actions"
@change=${() => changeSpy()}
@change=${() => {
changeSpy();
}}
>
<sp-icon-settings slot="icon"></sp-icon-settings>
<sp-menu-item href="#">Deselect</sp-menu-item>
Expand All @@ -208,21 +224,18 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
const opened = oneEvent(el, 'sp-opened');
el.click();
await opened;
await elementUpdated(el);

expect(el.open).to.be.true;

const closed = oneEvent(el, 'sp-closed');
menuItem2.click();
await closed;
await elementUpdated(el);

expect(el.open).to.be.false;
expect(changeSpy.callCount).to.equal(0);
});
it('can be `quiet`', async () => {
const el = await actionMenuFixture();
await elementUpdated(el);

expect(el.quiet).to.be.false;

Expand All @@ -234,8 +247,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
it('stay `valid`', async () => {
const el = await actionMenuFixture();

await elementUpdated(el);

expect(el.invalid).to.be.false;

el.invalid = true;
Expand All @@ -246,8 +257,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
it('focus()', async () => {
const el = await actionMenuFixture();

await elementUpdated(el);

el.focus();

expect(document.activeElement).to.equal(el);
Expand All @@ -257,8 +266,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
el.open = true;
await opened;

expect(document.activeElement).to.not.equal(el);

const closed = oneEvent(el, 'sp-closed');
el.open = false;
await closed;
Expand All @@ -269,7 +276,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
it('opens unmeasured', async () => {
const el = await actionMenuFixture();

await elementUpdated(el);
const button = el.button as HTMLButtonElement;

button.click();
Expand All @@ -282,7 +288,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
it('opens unmeasured with deprecated syntax', async () => {
const el = await deprecatedActionMenuFixture();

await elementUpdated(el);
const button = el.button as HTMLButtonElement;

button.click();
Expand All @@ -299,19 +304,13 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
expect(button).to.have.attribute('aria-expanded', 'false');
expect(button).not.to.have.attribute('aria-controls');

let items = el.querySelectorAll('sp-menu-item');
const count = items.length;
expect(items.length).to.equal(count);

let opened = oneEvent(el, 'sp-opened');
el.open = true;
await opened;

expect(el.open).to.be.true;
expect(button).to.have.attribute('aria-expanded', 'true');
expect(button).to.have.attribute('aria-controls', 'menu');
items = el.querySelectorAll('sp-menu-item');
expect(items.length).to.equal(0);

let closed = oneEvent(el, 'sp-closed');
el.open = false;
Expand All @@ -320,8 +319,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
expect(el.open).to.be.false;
expect(button).to.have.attribute('aria-expanded', 'false');
expect(button).not.to.have.attribute('aria-controls');
items = el.querySelectorAll('sp-menu-item');
expect(items.length).to.equal(count);

opened = oneEvent(el, 'sp-opened');
el.open = true;
Expand All @@ -330,8 +327,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
expect(el.open).to.be.true;
expect(button).to.have.attribute('aria-expanded', 'true');
expect(button).to.have.attribute('aria-controls', 'menu');
items = el.querySelectorAll('sp-menu-item');
expect(items.length).to.equal(0);

closed = oneEvent(el, 'sp-closed');
el.open = false;
Expand All @@ -340,8 +335,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
expect(el.open).to.be.false;
expect(button).to.have.attribute('aria-expanded', 'false');
expect(button).not.to.have.attribute('aria-controls');
items = el.querySelectorAll('sp-menu-item');
expect(items.length).to.equal(count);
});
it('allows submenu items to be selected', async () => {
const root = await actionSubmenuFixture();
Expand All @@ -366,8 +359,6 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
new PointerEvent('pointerenter', { bubbles: true })
);
await opened;
const overlays = document.querySelectorAll('active-overlay');
expect(overlays.length).to.equal(2);

await elementUpdated(submenu);
expect(
Expand All @@ -376,7 +367,25 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
).to.be.true;
});
it('allows top-level selection state to change', async () => {
const root = await actionSubmenuFixture();
const root = await styledFixture<ActionMenu>(html`
<sp-action-menu label="More Actions">
<sp-menu-item>One</sp-menu-item>
<sp-menu-item selected id="root-selected-item">
Two
</sp-menu-item>
<sp-menu-item id="item-with-submenu">
B should be selected
<sp-menu slot="submenu">
<sp-menu-item>A</sp-menu-item>
<sp-menu-item selected id="sub-selected-item">
B
</sp-menu-item>
<sp-menu-item>C</sp-menu-item>
</sp-menu>
</sp-menu-item>
</sp-action-menu>
`);

const unselectedItem = root.querySelector(
'sp-menu-item'
) as MenuItem;
Expand Down Expand Up @@ -405,6 +414,7 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
selectedItem.click();
await closed;

expect(root.open).to.be.false;
opened = oneEvent(root, 'sp-opened');
root.click();
await opened;
Expand Down
4 changes: 4 additions & 0 deletions packages/modal/src/modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@ governing permissions and limitations under the License.

height: 100dvh;
}

.modal {
overflow: visible;
}
Loading

0 comments on commit 170a223

Please sign in to comment.