Remove modal property in Drawer

Refs: #6899
public-ui · Jan 16, 2025 · 02c60bd · 02c60bd
1 parent 6d32161
commit 02c60bd
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 48 deletions.
diff --git a/packages/components/src/components/drawer/drawer.e2e.ts b/packages/components/src/components/drawer/drawer.e2e.ts
@@ -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) => {
@@ -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) => {

diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
@@ -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';
@@ -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()
@@ -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>
@@ -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.
 	 */
@@ -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') {
@@ -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);
 	}
 }
diff --git a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
@@ -154,6 +154,62 @@ exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
 </kol-drawer>
 `;
 
+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">
+        <div class="kol-drawer__content">
+          <slot></slot>
+        </div>
+      </div>
+    </dialog>
+  </template>
+</kol-drawer>
+`;
+
+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">
+        <div class="kol-drawer__content">
+          <slot></slot>
+        </div>
+      </div>
+    </dialog>
+  </template>
+</kol-drawer>
+`;
+
+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">
+        <div class="kol-drawer__content">
+          <slot></slot>
+        </div>
+      </div>
+    </dialog>
+  </template>
+</kol-drawer>
+`;
+
+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">
+        <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">
   <template shadowrootmode="open">

diff --git a/packages/components/src/components/drawer/test/snapshot.spec.tsx b/packages/components/src/components/drawer/test/snapshot.spec.tsx
@@ -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);
diff --git a/packages/components/src/schema/components/drawer.ts b/packages/components/src/schema/components/drawer.ts
@@ -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;
 };