Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(Dialog): use CSS logical properties instead of physical values #1146

Merged
merged 6 commits into from
Jul 14, 2024
Merged

refactor(Dialog): use CSS logical properties instead of physical values #1146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90ac2d9
refactor(Dialog): use CSS logical properties instead of physical values
Cata1989 Jul 3, 2024
00ef6a7
fix(Dialog): use margin auto for proper positioning and remove translate
dgonzalezr Jul 12, 2024
ef35130
refactor(Dialog): remove wrapper around button close slot
dgonzalezr Jul 12, 2024
705554e
docs(Dialog): add Custom Close Button example
dgonzalezr Jul 12, 2024
d0e427c
refactor(Dialog): remove `orientation` property, no longer needed
dgonzalezr Jul 12, 2024
0e2561f
fix(Dialog): center position when the backdrop is disabled
dgonzalezr Jul 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/beeq/src/components/dialog/_storybook/bq-dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Args, Meta, StoryObj } from '@storybook/web-components';
import { html, nothing } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined.js';

import mdx from './bq-dialog.mdx';
import { DIALOG_BORDER_RADIUS, DIALOG_FOOTER_APPEARANCE, DIALOG_SIZE } from '../bq-dialog.types';
Expand Down Expand Up @@ -30,6 +31,7 @@ const meta: Meta = {
// Not part of the public API
noContent: { control: 'boolean', table: { disable: true } },
noFooter: { control: 'boolean', table: { disable: true } },
customClose: { control: 'text', table: { disable: true } },
},
args: {
'disable-backdrop': false,
Expand Down Expand Up @@ -73,6 +75,7 @@ const Template = (args: Args) => {
@bqAfterOpen=${args.bqAfterOpen}
@bqAfterClose=${args.bqAfterClose}
>
${ifDefined(args.customClose)}
<h5 class="bold flex items-center gap-s" slot="title">
<bq-icon name="info" size="30" color="text--accent" role="img" title="Info"></bq-icon>
Title
Expand Down Expand Up @@ -130,6 +133,29 @@ export const NoBackdrop: Story = {
},
};

export const CustomCloseButton: Story = {
render: Template,
args: {
open: true,
customClose: html`
<style>
bq-button[slot='button-close']::part(button) {
border-radius: var(--bq-radius--full);
/* Paddings */
padding-block: 0;
padding-inline: 0;
/* Size (width/height) */
block-size: var(--bq-spacing-xl);
inline-size: var(--bq-spacing-xl);
}
</style>
<bq-button appearance="text" size="small" slot="button-close">
<bq-icon class="cursor-pointer" name="x" role="img" title="Close"></bq-icon>
</bq-button>
`,
},
};

const ConfirmTemplate = (args: Args) => {
const handleOpenDialog = async () => {
const dialogElem = document.querySelector('bq-dialog');
Expand Down
46 changes: 28 additions & 18 deletions packages/beeq/src/components/dialog/bq-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class BqDialog {
private dialogElem: HTMLDialogElement;
private contentElem: HTMLElement;
private footerElem: HTMLElement;
private closeSlotElem: HTMLElement;
private OPEN_CSS_CLASS = 'bq-dialog--open';

// Reference to host HTML element
Expand Down Expand Up @@ -119,6 +120,12 @@ export class BqDialog {

componentDidLoad() {
this.handleOpenChange();
this.closeSlotElem = this.el.shadowRoot.querySelector('slot[name="button-close"]');
this.closeSlotElem?.addEventListener('click', () => this.hide());
}

disconnectedCallback() {
this.closeSlotElem?.removeEventListener('click', () => this.hide());
}

// Listeners
Expand Down Expand Up @@ -197,8 +204,8 @@ export class BqDialog {
private handleClose = async () => {
if (!this.dialogElem) return;

this.dialogElem.close();
await leave(this.dialogElem);
this.dialogElem.close();
// Emit bqAfterClose event after the dialog is closed
this.handleTransitionEnd();
};
Expand Down Expand Up @@ -244,37 +251,40 @@ export class BqDialog {
return (
<dialog
style={style}
class={`bq-dialog hidden ${this.size} focus-visible:outline-none`}
class={{
[`bq-dialog hidden ${this.size} m-auto focus-visible:outline-none`]: true,
'inset-be-[50%] inset-bs-[50%]': this.disableBackdrop,
}}
data-transition-enter="transition ease-in duration-300"
data-transition-enter-start="opacity-0 scale-75"
data-transition-enter-start="opacity-0 scale-90"
data-transition-enter-end="opacity-100 scale-100"
data-transition-leave="transition ease-out duration-300"
data-transition-leave-start="opacity-100 scale-100"
data-transition-leave-end="opacity-0 scale-75"
data-transition-leave-end="opacity-0 scale-90"
inert={this.open ? undefined : true}
ref={(dialogElem) => (this.dialogElem = dialogElem)}
aria-modal="true"
aria-labelledby="bq-dialog--title"
part="dialog"
>
<main class="flex flex-col gap-[var(--bq-dialog--title-body-gap)] overflow-hidden" part="content">
<main class="flex flex-col gap-[--bq-dialog--title-body-gap] overflow-hidden" part="content">
<header class="bq-dialog--header" part="header">
<div class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
<div id="bq-dialog--title" class="bq-dialog--title flex flex-1 items-center justify-between" part="title">
<slot name="title" />
</div>
<div class="flex" onClick={() => this.hide()} role="button" part="button-close">
<slot name="button-close">
{!this.hideCloseButton && (
<bq-button class="bq-dialog--close" appearance="text" size="small" slot="button-close">
<bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
</bq-button>
)}
</slot>
</div>
<slot name="button-close">
{!this.hideCloseButton && (
<bq-button class="bq-dialog--close" appearance="text" size="small">
<bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
</bq-button>
)}
</slot>
</header>
<div
class={{
'!hidden': !this.hasContent,
'overflow-y-auto px-[var(--bq-dialog--padding)]': this.hasContent,
'!pb-[var(--bq-dialog--padding)]': !this.hasFooter,
'overflow-y-auto p-i-[--bq-dialog--padding]': this.hasContent,
'!p-be-[--bq-dialog--padding]': !this.hasFooter,
}}
ref={(mainElem) => (this.contentElem = mainElem)}
part="body"
Expand All @@ -286,7 +296,7 @@ export class BqDialog {
class={{
'!hidden': !this.hasFooter,
'bq-dialog--footer': this.hasFooter,
'bg-ui-alt !py-s': this.footerAppearance === 'highlight',
'bg-ui-alt !p-b-s': this.footerAppearance === 'highlight',
}}
ref={(footerElem) => (this.footerElem = footerElem)}
part="footer"
Expand Down
22 changes: 9 additions & 13 deletions packages/beeq/src/components/dialog/scss/bq-dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* -------------------------------------------------------------------------- */
/* Dialog styles */
/* Dialog styles */
/* -------------------------------------------------------------------------- */

@import './bq-dialog.variables';
Expand All @@ -15,28 +15,24 @@
/* --------------------------------- Dialog --------------------------------- */

.bq-dialog {
@apply absolute left-1/2 top-1/2 flex;
@apply flex-col gap-[var(--bq-dialog--content-footer-gap)] p-0;
@apply absolute flex flex-col gap-[--bq-dialog--content-footer-gap] p-b-0 p-i-0;
@apply bg-[--bq-dialog--background] text-[--bq-dialog--text-color] shadow-[shadow:--bq-dialog--box-shadow];
@apply rounded-[var(--bq-dialog--border-radius)] border-[color:--bq-dialog--border-color] [length:--bq-dialog--border-width];
// After setting `optimizeUniversalDefaults` to `true` in `tailwind.config.js`,
// `!important` is required to avoid default --tw-* variables to override custom transform values
@apply -translate-x-1/2 -translate-y-1/2 #{!important};
@apply rounded-[--bq-dialog--border-radius] border-[length:--bq-dialog--border-width] border-[color:--bq-dialog--border-color];
// If mobile resolution, dialog will be full width
@apply w-[90vw];
@apply is-[90vw];

border-style: var(--bq-dialog--border-style);

&.small {
@apply sm:w-[--bq-dialog--width-small];
@apply sm:is-[--bq-dialog--width-small];
}

&.medium {
@apply sm:w-[--bq-dialog--width-medium];
@apply sm:is-[--bq-dialog--width-medium];
}

&.large {
@apply sm:w-[--bq-dialog--width-large];
@apply sm:is-[--bq-dialog--width-large];
}
}

Expand All @@ -53,13 +49,13 @@
/* ------------------------------ Dialog header ----------------------------- */

.bq-dialog--header {
@apply sticky top-0 flex items-center gap-m p-[--bq-dialog--padding] pb-0;
@apply sticky flex items-center gap-m inset-bs-0 p-b-[--bq-dialog--padding] p-be-0 p-i-[--bq-dialog--padding];
}

/* ------------------------------ Dialog footer ----------------------------- */

.bq-dialog--footer {
@apply sticky top-full flex w-full items-center justify-end gap-xs p-[--bq-dialog--padding] pt-0;
@apply sticky flex items-center justify-end gap-xs is-full inset-bs-[100%] p-b-[--bq-dialog--padding] p-bs-0 p-i-[--bq-dialog--padding];
}

/* --------------------------- Dialog close button -------------------------- */
Expand Down