Skip to content

Commit

Permalink
Remove modal property and mark as deprecated in Drawer (#7238)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdvg
sdvg authored Jan 16, 2025
2 parents ba3bc65 + 3e5c28e commit 77d36c1
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 125 deletions.
18 changes: 4 additions & 14 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 { KoliBriModalEventCallbacks, LabelPropType, DrawerAPI, AlignPropType, OpenPropType, ModalPropType, DrawerStates } from '../../schema';
import { setState, validateLabel, validateOpen, validateAlign, validateModal } from '../../schema';
import { setState, validateLabel, validateOpen, validateAlign } from '../../schema';
import { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';

import type { JSX } from '@stencil/core';
Expand All @@ -27,11 +27,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 @@ -67,9 +63,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={`kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
<Host class={`kol-drawer drawer`} ref={(el) => (this.hostElement = el as HTMLElement)}>
<dialog class="drawer__dialog" ref={this.getRef}>
{this.renderDialogContent()}
</dialog>
Expand All @@ -93,6 +88,7 @@ export class KolDrawer implements DrawerAPI {
@Prop() public _label!: LabelPropType;

/**
* @deprecated
* Indicates whether the drawer is a modal.
*/
@Prop() public _modal?: ModalPropType;
Expand Down Expand Up @@ -120,11 +116,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 @@ -177,7 +168,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);
}
}
94 changes: 5 additions & 89 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,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
<kol-drawer class="drawer kol-drawer">
<template shadowrootmode="open">
<dialog class="drawer__dialog">
Expand All @@ -14,7 +14,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
exports[`kol-drawer should render with _label="Label" _open=true _variant="bottom" 1`] = `
<kol-drawer _variant="bottom" class="drawer kol-drawer">
<template shadowrootmode="open">
<dialog class="drawer__dialog">
Expand All @@ -28,7 +28,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
exports[`kol-drawer should render with _label="Label" _open=true _variant="left" 1`] = `
<kol-drawer _variant="left" class="drawer kol-drawer">
<template shadowrootmode="open">
<dialog class="drawer__dialog">
Expand All @@ -42,7 +42,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
exports[`kol-drawer should render with _label="Label" _open=true _variant="right" 1`] = `
<kol-drawer _variant="right" class="drawer kol-drawer">
<template shadowrootmode="open">
<dialog class="drawer__dialog">
Expand All @@ -56,7 +56,7 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
</kol-drawer>
`;

exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
exports[`kol-drawer should render with _label="Label" _open=true _variant="top" 1`] = `
<kol-drawer _variant="top" class="drawer kol-drawer">
<template shadowrootmode="open">
<dialog class="drawer__dialog">
Expand All @@ -70,90 +70,6 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
</kol-drawer>
`;

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

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

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

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

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

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

exports[`kol-drawer should render with _label="Label" 1`] = `
<kol-drawer class="drawer kol-drawer">
<template shadowrootmode="open">
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

0 comments on commit 77d36c1

Please sign in to comment.