Skip to content

Commit

Permalink
refactor(dialog): rename closable and info
Browse files Browse the repository at this point in the history
  • Loading branch information
@endv-bogdanb
endv-bogdanb committed Jun 19, 2023
1 parent cf765fd commit 7849293
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 115 deletions.
20 changes: 10 additions & 10 deletions packages/bee-q/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,22 +173,22 @@ export namespace Components {
"value": string;
}
interface BqDialog {
/**
* If true renders x icon
*/
"closable": boolean;
/**
* Hides the dialog
*/
"close": () => Promise<void>;
/**
* If true will not close on outside click
* If true will not close on outside click
*/
"disableOutsideClickClose": boolean;
/**
* The appearance of footer
*/
"footerApperance": TDialogFooterAppearance;
/**
* If true it hides close button
*/
"hideCloseButton": boolean;
/**
* Shows the dialog
*/
Expand Down Expand Up @@ -910,17 +910,17 @@ declare namespace LocalJSX {
}
interface BqDialog {
/**
* If true renders x icon
*/
"closable"?: boolean;
/**
* If true will not close on outside click
* If true will not close on outside click
*/
"disableOutsideClickClose"?: boolean;
/**
* The appearance of footer
*/
"footerApperance"?: TDialogFooterAppearance;
/**
* If true it hides close button
*/
"hideCloseButton"?: boolean;
/**
* The size of the dialog
*/
Expand Down
70 changes: 14 additions & 56 deletions packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,13 @@ const meta: Meta = {
text: { control: 'text', table: { disable: true } },
size: { control: 'select', options: [...DIALOG_SIZE] },
'footer-apperance': { control: 'select', options: [...DIALOG_FOOTER_APPEARANCE] },
closable: { control: 'boolean' },
'hide-close-button': { control: 'boolean' },
'disable-outside-click-close': { control: 'boolean' },
},
args: {
text: 'text',
size: 'medium',
'footer-apperance': 'standard',
closable: true,
},
};

Expand All @@ -43,10 +42,10 @@ const Template = (args: Args) => {
<bq-dialog
size=${args.size}
footer-apperance=${args['footer-apperance']}
?closable=${args.closable}
?hide-close-button=${args['hide-close-button']}
?disable-outside-click-close=${args['disable-outside-click-close']}
>
<div slot="info">
<div slot="icon">
<bq-icon name="info" color="text--accent" role="img" title="Info" part="icon-on" />
</div>
<h3 slot="title">Title</h3>
Expand All @@ -55,11 +54,11 @@ const Template = (args: Args) => {
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.
</p>
<footer slot="buttons">
<bq-button appearance="primary" size="small" type="button" variant="ghost" class="hydrated">
<footer slot="footer">
<bq-button appearance="primary" size="medium" type="button" variant="ghost" class="hydrated">
Ghost button
</bq-button>
<bq-button appearance="primary" size="small" type="button" variant="standard"> Standard button </bq-button>
<bq-button appearance="primary" size="medium" type="button" variant="standard"> Standard button </bq-button>
</footer>
</bq-dialog>
`;
Expand All @@ -85,15 +84,15 @@ const ConfirmTemplate = (args: Args) => {
<bq-dialog
size=${args.size}
footer-apperance=${args['footer-apperance']}
closable=${args.closable}
?hide-close-button=${args['hide-close-button']}
?disable-outside-click-close=${args['disable-outside-click-close']}
>
<h3 slot="title">Lorem Ipsum ?</h3>
<p slot="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<footer slot="buttons">
<footer slot="footer">
<bq-button
appearance="primary"
size="small"
size="medium"
type="button"
variant="ghost"
class="hydrated"
Expand All @@ -103,7 +102,7 @@ const ConfirmTemplate = (args: Args) => {
</bq-button>
<bq-button
appearance="primary"
size="small"
size="medium"
type="button"
variant="ghost"
class="hydrated"
Expand All @@ -118,49 +117,8 @@ const ConfirmTemplate = (args: Args) => {

export const Confirm: Story = {
render: ConfirmTemplate,
};

const InformTemplate = (args: Args) => {
const handleOpenDialog = async () => {
const dialogElem = document.querySelector('bq-dialog');
await dialogElem.open();
};

const handleCloseDialog = async () => {
const dialogElem = document.querySelector('bq-dialog');
await dialogElem.close();
};

return html`
<bq-button @bqClick=${handleOpenDialog}>Open Inform Dialog</bq-button>
<bq-dialog
size=${args.size}
footer-apperance=${args['footer-apperance']}
closable=${args.closable}
?disable-outside-click-close=${args['disable-outside-click-close']}
>
<h3 slot="title">Something went wrong!</h3>
<p slot="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.
</p>
<footer slot="buttons">
<bq-button
appearance="primary"
size="small"
type="button"
variant="ghost"
class="hydrated"
@bqClick=${handleCloseDialog}
>
Close
</bq-button>
</footer>
</bq-dialog>
`;
};

export const Inform: Story = {
render: InformTemplate,
args: {
'hide-close-button': true,
'disable-outside-click-close': true,
},
};
47 changes: 20 additions & 27 deletions packages/bee-q/src/components/dialog/bq-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { hasSlotContent, validatePropValue } from '../../shared/utils';
/**
* @part base - The component wrapper container inside the shadow DOM
* @part container - The `<div>` container that holds the dialog content
* @part info - The `<div>` that holds the info icon
* @part icon - The `<div>` that holds the info icon
* @part button-close - The button that close the dialog on click
* @part footer - The `<footer>` that holds footer content
*/
Expand All @@ -21,7 +21,7 @@ export class BqDialog {
// ====================

private overlayElem: HTMLDivElement;
private infoElem: HTMLElement;
private iconElem: HTMLElement;

// Reference to host HTML element
// ===================================
Expand All @@ -33,7 +33,7 @@ export class BqDialog {

@State() private isOpen = false;

@State() private hasInfoIcon = false;
@State() private hasIconIcon = false;

// Public Property API
// ========================
Expand All @@ -44,10 +44,10 @@ export class BqDialog {
/** The appearance of footer */
@Prop({ reflect: true }) footerApperance: TDialogFooterAppearance = 'standard';

/** If true renders x icon */
@Prop({ reflect: true }) closable = true;
/** If true it hides close button */
@Prop({ reflect: true }) hideCloseButton = false;

/** If true will not close on outside click */
/** If true will not close on outside click */
@Prop({ reflect: true }) disableOutsideClickClose = false;

// Prop lifecycle events
Expand Down Expand Up @@ -85,7 +85,6 @@ export class BqDialog {
@Method()
async open() {
this.isOpen = true;
this.handleSlotChange();
}

/** Hides the dialog */
Expand All @@ -108,8 +107,8 @@ export class BqDialog {
this.isOpen = false;
};

private handleSlotChange = () => {
this.hasInfoIcon = hasSlotContent(this.infoElem, 'info');
private handleIconSlotChange = () => {
this.hasIconIcon = hasSlotContent(this.iconElem, 'icon');
};

// render() function
Expand All @@ -127,34 +126,28 @@ export class BqDialog {
<div
class={{
'z-10 m-auto flex flex-col rounded-s bg-bg-primary shadow-m': true,
[`size--${this.size}`]: true,
[`bq-dialog__size--${this.size}`]: true,
}}
part="container"
>
<header class="bq-header">
<header class="bq-dialog__header">
<div
class={{ 'bq-placeholder-info': this.hasInfoIcon }}
ref={(divElem) => (this.infoElem = divElem)}
part="info"
class={{ 'bq-dialog__icon': this.hasIconIcon }}
ref={(divElem) => (this.iconElem = divElem)}
part="icon"
>
<slot name="info" onSlotchange={this.handleSlotChange} />
<slot name="icon" onSlotchange={this.handleIconSlotChange} />
</div>
<div class="flex flex-col pl-m">
<slot name="title" />
<div class="bq-description">
<slot name="content" />
</div>
</div>
<div part="button-close">
<div part="button-close" onClick={this.handleCloseClick}>
<slot name="button-close">
{this.closable && (
<bq-button
class="cursor-auto"
appearance="text"
size="small"
onClick={this.handleCloseClick}
slot="button-close"
>
{!this.hideCloseButton && (
<bq-button class="cursor-auto" appearance="text" size="small" slot="button-close">
<bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
</bq-button>
)}
Expand All @@ -163,12 +156,12 @@ export class BqDialog {
</header>
<footer
class={{
'flex h-[72px] w-full items-center justify-end p-l': true,
'rounded-s bg-ui-secondary-light': this.footerApperance === 'highlight',
'flex w-full items-center justify-end px-l py-s': true,
'bg-ui-secondary-light': this.footerApperance === 'highlight',
}}
part="footer"
>
<slot name="buttons" />
<slot name="footer" />
</footer>
</div>
</Host>
Expand Down
14 changes: 7 additions & 7 deletions packages/bee-q/src/components/dialog/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------------- | ----------------------------- | ---------------------------------------- | -------------------------------- | ------------ |
| `closable` | `closable` | If true renders x icon | `boolean` | `true` |
| `disableOutsideClickClose` | `disable-outside-click-close` | If true will not close on outside click | `boolean` | `false` |
| `footerApperance` | `footer-apperance` | The appearance of footer | `"highlight" \| "standard"` | `'standard'` |
| `size` | `size` | The size of the dialog | `"large" \| "medium" \| "small"` | `'medium'` |
| Property | Attribute | Description | Type | Default |
| -------------------------- | ----------------------------- | --------------------------------------- | -------------------------------- | ------------ |
| `disableOutsideClickClose` | `disable-outside-click-close` | If true will not close on outside click | `boolean` | `false` |
| `footerApperance` | `footer-apperance` | The appearance of footer | `"highlight" \| "standard"` | `'standard'` |
| `hideCloseButton` | `hide-close-button` | If true it hides close button | `boolean` | `false` |
| `size` | `size` | The size of the dialog | `"large" \| "medium" \| "small"` | `'medium'` |


## Methods
Expand Down Expand Up @@ -46,7 +46,7 @@ Type: `Promise<void>`
| `"button-close"` | The button that close the dialog on click |
| `"container"` | The `<div>` container that holds the dialog content |
| `"footer"` | The `<footer>` that holds footer content |
| `"info"` | The `<div>` that holds the info icon |
| `"icon"` | The `<div>` that holds the info icon |


## Dependencies
Expand Down
1 change: 1 addition & 0 deletions packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
/* -------------------------------------------------------------------------- */

:host {
--bq-dialog-z-index: 10;
--bq-dialog--small-width: 320px;
--bq-dialog--medium-width: 480px;
--bq-dialog--large-width: 640px;
Expand Down
22 changes: 7 additions & 15 deletions packages/bee-q/src/components/dialog/scss/bq-dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,30 @@
@import './bq-dialog-variables';

:host {
@apply fixed left-0 top-0 -z-10 flex h-full w-full items-center justify-center;
@apply fixed left-0 top-0 -z-[var(--bq-dialog-z-index)] flex h-full w-full items-center justify-center;
@apply invisible #{!important};
}

:host(.is-open) {
@apply z-10;
@apply z-[var(--bq-dialog-z-index)];
@apply visible #{!important};
}

header {
@apply px-l pt-l;
.bq-dialog__header {
@apply flex justify-between px-l pt-l;
}

.open {
@apply flex;
}

.bq-header {
@apply flex justify-between;
}

.bq-placeholder-info {
.bq-dialog__icon {
@apply pl-xs2 pt-xs2;

::slotted(bq-icon) {
--bq-icon--size: var(--bq-dialog--icon-size) !important;
--bq-icon--size: var(--bq-dialog--icon-size) #{!important};
}
}

// Size

.size {
.bq-dialog__size {
&--small {
@apply w-[var(--bq-dialog--small-width)];
}
Expand Down

0 comments on commit 7849293

Please sign in to comment.