Skip to content

Commit

Permalink
feat(elements): close drawer when pressing Escape
Browse files Browse the repository at this point in the history
Related to #3370
  • Loading branch information
hugo-vrijswijk committed Aug 21, 2024
1 parent 811f49e commit 33fda1c
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 3 deletions.
24 changes: 21 additions & 3 deletions packages/elements/src/components/drawer/drawer.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
import { html, LitElement, nothing, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import type { Ref } from 'lit/directives/ref.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
Expand Down Expand Up @@ -63,9 +64,26 @@ export class MutationTestReportDrawer extends LitElement {
event.stopImmediatePropagation();
};

connectedCallback(): void {
super.connectedCallback();
window.addEventListener('keydown', this.#handleKeyDown);
}

disconnectedCallback(): void {
window.removeEventListener('keydown', this.#handleKeyDown);
super.disconnectedCallback();
}

#handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
this.mode = 'closed';
}
};

render() {
const contentHeight = this.#contentHeightController.value;
const styles = styleMap({ height: contentHeight ? `${contentHeight}px` : undefined });
const isOpen = this.mode === 'open';
const height = this.#contentHeightController.value;
const contentStyles = styleMap({ height: height && isOpen ? `${height}px` : undefined });

return html`<aside @click="${(event: Event) => event.stopPropagation()}" class="ml-6 mr-4">
<header class="w-full py-4" ${ref(this.#headerRef)}>
Expand All @@ -77,7 +95,7 @@ export class MutationTestReportDrawer extends LitElement {
)}
</h2>
</header>
<div style="${styles}" class="mb-4 overflow-y-auto motion-safe:transition-max-width">
<div style="${contentStyles}" class="${classMap({ ['mb-4 motion-safe:transition-max-width']: true, 'overflow-y-auto': isOpen })}">
<slot name="summary"></slot>
${renderIf(this.hasDetail && this.mode === 'open', html`<slot name="detail"></slot>`)}
</div>
Expand Down
11 changes: 11 additions & 0 deletions packages/elements/test/unit/components/drawer.component.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { MutationTestReportDrawer } from '../../../src/components/drawer/drawer.component.js';
import { CustomElementFixture } from '../helpers/CustomElementFixture.js';
import { userEvent } from '@vitest/browser/context';

describe(MutationTestReportDrawer.name, () => {
let sut: CustomElementFixture<MutationTestReportDrawer>;
Expand Down Expand Up @@ -72,6 +73,16 @@ describe(MutationTestReportDrawer.name, () => {
const event = await sut.catchNativeEvent('click', () => sut.$<HTMLElement>('header').click());
expect(event).undefined;
});

it('should close when escape is pressed', async () => {
sut.element.mode = 'open';
await sut.whenStable();

await userEvent.keyboard('{Escape}');
await sut.whenStable();

expect(sut.element).toHaveProperty('mode', 'closed');
});
});

function readMoreToggle(): HTMLElement {
Expand Down

0 comments on commit 33fda1c

Please sign in to comment.