Skip to content

Commit

Permalink
Remove modal property in Drawer (#7247)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdvg
sdvg authored Jan 20, 2025
2 parents 65a16a0 + 29e839b commit 01bb5c0
Show file tree
Hide file tree
Showing 23 changed files with 31 additions and 171 deletions.
4 changes: 2 additions & 2 deletions packages/components/src/components/drawer/drawer.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { KolEvent } from '../../utils/events';
test.describe('kol-drawer', () => {
test.describe('Callbacks', () => {
test(`should call 'onClose' callback when drawer is closed`, async ({ page }) => {
await page.setContent('<kol-drawer _label="Details" _modal>Drawer content</kol-drawer>');
await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');
const kolDrawer = page.locator('kol-drawer');

const callbackPromise = kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
Expand All @@ -27,7 +27,7 @@ test.describe('kol-drawer', () => {

test.describe('DOM events', () => {
test(`should emit 'close' when drawer is closed`, async ({ page }) => {
await page.setContent('<kol-drawer _label="Details" _modal>Drawer content</kol-drawer>');
await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');
const kolDrawer = page.locator('kol-drawer');

const eventPromise = kolDrawer.evaluate((element: HTMLKolDrawerElement, KolEvent) => {
Expand Down
28 changes: 4 additions & 24 deletions packages/components/src/components/drawer/shadow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import type { AlignPropType, DrawerAPI, DrawerStates, KoliBriModalEventCallbacks, LabelPropType, ModalPropType, OpenPropType } from '../../schema';
import { setState, validateAlign, validateLabel, validateModal, validateOpen } from '../../schema';
import type { AlignPropType, DrawerAPI, DrawerStates, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';
import { setState, validateAlign, validateLabel, validateOpen } from '../../schema';
import type { JSX } from '@stencil/core';
import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
import { dispatchDomEvent, KolEvent } from '../../utils/events';
Expand Down Expand Up @@ -28,11 +28,7 @@ export class KolDrawer implements DrawerAPI {
...this.state,
_open: true,
};
if (this.state._modal) {
this.dialogElement?.showModal();
} else {
this.dialogElement?.show();
}
this.dialogElement?.showModal();
}

@Method()
Expand Down Expand Up @@ -71,13 +67,8 @@ export class KolDrawer implements DrawerAPI {

private getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);
public render(): JSX.Element {
const isModal = this.state._modal;
return (
<Host
class={clsx('kol-drawer--modal', {
'kol-drawer--modal': isModal,
})}
>
<Host class="kol-drawer">
<dialog class="kol-drawer__dialog" ref={this.getRef}>
{this.renderDialogContent()}
</dialog>
Expand All @@ -100,11 +91,6 @@ export class KolDrawer implements DrawerAPI {
*/
@Prop() public _label!: LabelPropType;

/**
* Indicates whether the drawer is a modal.
*/
@Prop() public _modal?: ModalPropType;

/**
* Specifies the EventCallback function to be called when the drawer is closing.
*/
Expand All @@ -128,11 +114,6 @@ export class KolDrawer implements DrawerAPI {
validateAlign(this, value);
}

@Watch('_modal')
public validateModal(value?: ModalPropType): void {
validateModal(this, value);
}

@Watch('_open')
public async validateOpen(value?: OpenPropType): Promise<void> {
if (typeof value === 'boolean') {
Expand Down Expand Up @@ -188,7 +169,6 @@ export class KolDrawer implements DrawerAPI {
this.validateLabel(this._label);
await this.validateOpen(this._open);
this.validateAlign(this._align);
this.validateModal(this._modal);
this.validateOn(this._on);
}
}
106 changes: 11 additions & 95 deletions packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
<kol-drawer class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
<kol-drawer _variant="bottom" class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
<kol-drawer _variant="left" class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
<kol-drawer _variant="right" class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
<kol-drawer _variant="top" class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`] = `
<kol-drawer class="kol-drawer--modal">
exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
<kol-drawer class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
Expand All @@ -84,8 +14,8 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="bottom" 1`] = `
<kol-drawer _variant="bottom" class="kol-drawer--modal">
exports[`kol-drawer should render with _label="Label" _open=true _variant="bottom" 1`] = `
<kol-drawer _variant="bottom" class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
Expand All @@ -98,8 +28,8 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="left" 1`] = `
<kol-drawer _variant="left" class="kol-drawer--modal">
exports[`kol-drawer should render with _label="Label" _open=true _variant="left" 1`] = `
<kol-drawer _variant="left" class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
Expand All @@ -112,8 +42,8 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="right" 1`] = `
<kol-drawer _variant="right" class="kol-drawer--modal">
exports[`kol-drawer should render with _label="Label" _open=true _variant="right" 1`] = `
<kol-drawer _variant="right" class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
Expand All @@ -126,8 +56,8 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="top" 1`] = `
<kol-drawer _variant="top" class="kol-drawer--modal">
exports[`kol-drawer should render with _label="Label" _open=true _variant="top" 1`] = `
<kol-drawer _variant="top" class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
Expand All @@ -140,22 +70,8 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
<kol-drawer class="kol-drawer--modal">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
<div class="kol-drawer__content">
<slot></slot>
</div>
</div>
</dialog>
</template>
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" 1`] = `
<kol-drawer class="kol-drawer--modal">
<kol-drawer class="kol-drawer">
<template shadowrootmode="open">
<dialog class="kol-drawer__dialog">
<div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
Expand Down
27 changes: 9 additions & 18 deletions packages/components/src/components/drawer/test/snapshot.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,16 @@ import { executeSnapshotTests } from '../../../utils/testing';

import { KolDrawer } from '../shadow';

function getVariantsByModalMode(modal: boolean) {
return ['top', 'right', 'bottom', 'left'].map((variant) => ({
const variants = ['top', 'right', 'bottom', 'left'];

const testCases: DrawerProps[] = [
...variants.map((variant) => ({
_label: 'Label',
_modal: modal,
_open: true,
_variant: variant,
}));
}

executeSnapshotTests<DrawerProps>(
KolDrawerTag,
[KolDrawer],
[
{ _label: 'Label' },
{ _label: 'Label', _open: false },
{ _label: 'Label', _modal: false, _open: false },
{ _label: 'Label', _modal: true, _open: false },
})),
{ _label: 'Label' },
{ _label: 'Label', _open: false },
];

...getVariantsByModalMode(false),
...getVariantsByModalMode(true),
],
);
executeSnapshotTests<DrawerProps>(KolDrawerTag, [KolDrawer], testCases);
7 changes: 3 additions & 4 deletions packages/components/src/schema/components/drawer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import type { Generic } from 'adopted-style-sheets';

import type { PropLabel, PropOpen, PropAlign, PropModal } from '../props';
import type { PropLabel, PropOpen, PropAlign } from '../props';
import type { KoliBriModalEventCallbacks } from '../types';

type RequiredProps = PropLabel;
type OptionalProps = PropAlign &
PropOpen &
PropModal & {
PropOpen & {
on: KoliBriModalEventCallbacks;
};
type RequiredStates = PropAlign & PropOpen & PropLabel;
type OptionalStates = PropModal & {
type OptionalStates = {
on: KoliBriModalEventCallbacks;
};

Expand Down
22 changes: 2 additions & 20 deletions packages/samples/react/src/components/drawer/basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,17 @@ export const DrawerBasic: FC = () => {
const defaultAlign = searchParams.get('align') as AlignPropType;
const hideMenus = useContext(HideMenusContext);
const drawerElement = useRef<HTMLKolDrawerElement>(null);
const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
useEffect(() => {
if (defaultAlign) {
drawerModalElement.current?.open();
drawerElement.current?.open();
}
}, [defaultAlign]);
return (
<>
{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
<SampleDescription>
<p>
KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments and the modal- and
non-modal modes.
</p>
<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>
</SampleDescription>

<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
Expand All @@ -41,20 +37,6 @@ export const DrawerBasic: FC = () => {
<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
</KolDrawer>
<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
<KolDrawer
ref={drawerModalElement}
_modal
_align={align}
_label="I am a Drawer Modal"
_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</p>
<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
</KolDrawer>
<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
</div>
</>
);
Expand Down
8 changes: 0 additions & 8 deletions packages/samples/react/src/components/drawer/controlled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const DrawerControlled: FC = () => {
const defaultAlign = searchParams.get('align') as AlignPropType;
const hideMenus = useContext(HideMenusContext);
const [open, setOpen] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
return (
<div>
Expand All @@ -34,13 +33,6 @@ export const DrawerControlled: FC = () => {
</div>
</KolDrawer>
<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
<KolDrawer _open={modalOpen} _modal _align={align} _label="I'm a controlled modal drawer" _on={{ onClose: () => setModalOpen(false) }}>
<div>
<p>Lorem ipsum dolor sit amet,</p>
<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />
</div>
</KolDrawer>
<KolButton _label="Open drawer as modal" _on={{ onClick: () => setModalOpen(true) }} />
</div>
</div>
);
Expand Down
Binary file modified ...napshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...r/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...napshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ots/theme-default/snapshot-for-drawer-basic-align-bottom-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../snapshots/theme-default/snapshot-for-drawer-basic-align-left-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/theme-default/snapshot-for-drawer-basic-align-left-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hots/theme-default/snapshot-for-drawer-basic-align-right-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t/snapshots/theme-default/snapshot-for-drawer-basic-align-top-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/theme-default/snapshot-for-drawer-basic-align-top-zoom-firefox-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 01bb5c0

Please sign in to comment.