Skip to content

Commit

Permalink
fix(notification): notification rendered as visible with `open="false…
Browse files Browse the repository at this point in the history
…"` (#316)
  • Loading branch information
dgonzalezr committed Jul 3, 2023
1 parent 5230977 commit de8b30f
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 27 deletions.
10 changes: 5 additions & 5 deletions packages/bee-q/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export namespace Components {
/**
* If true, the notification will be shown
*/
"isOpen": boolean;
"open": boolean;
/**
* Method to be called to show the notification component
*/
Expand Down Expand Up @@ -1153,10 +1153,6 @@ declare namespace LocalJSX {
* If true, the notification icon won't be shown
*/
"hideIcon"?: boolean;
/**
* If true, the notification will be shown
*/
"isOpen"?: boolean;
/**
* Callback handler to be called when the notification is hidden
*/
Expand All @@ -1165,6 +1161,10 @@ declare namespace LocalJSX {
* Callback handler to be called when the notification is shown
*/
"onBqShow"?: (event: BqNotificationCustomEvent<any>) => void;
/**
* If true, the notification will be shown
*/
"open"?: boolean;
/**
* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"`
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,42 @@ describe('bq-notification', () => {
expect(element.shadowRoot).not.toBeNull();
});

it('should render as hidden', async () => {
const page = await newE2EPage();
await page.setContent('<bq-notification></bq-notification>');

const element = await page.find('bq-notification');
expect(element).toEqualAttribute('aria-hidden', 'true');
expect(element).toHaveClass('is-hidden');
});

it('should render as hidden with `open="false"`', async () => {
const page = await newE2EPage();
await page.setContent('<bq-notification open="false"></bq-notification>');

const element = await page.find('bq-notification');
expect(element).toEqualAttribute('aria-hidden', 'true');
expect(element).toHaveClass('is-hidden');
});

it('should render as open', async () => {
const page = await newE2EPage();
await page.setContent('<bq-notification open></bq-notification>');

const element = await page.find('bq-notification');
expect(element).not.toEqualAttribute('aria-hidden', 'true');
expect(element).not.toHaveClass('is-hidden');
});

it('should render as open with `open="true"`', async () => {
const page = await newE2EPage();
await page.setContent('<bq-notification open="true"></bq-notification>');

const element = await page.find('bq-notification');
expect(element).not.toEqualAttribute('aria-hidden', 'true');
expect(element).not.toHaveClass('is-hidden');
});

it('should render basic notification', async () => {
const page = await newE2EPage();
await page.setContent(`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const meta: Meta = {
'auto-dismiss': { control: 'boolean' },
'disable-close': { control: 'boolean' },
'hide-icon': { control: 'boolean' },
'is-open': { control: 'boolean' },
open: { control: 'boolean' },
time: { control: 'number' },
type: { control: 'select', options: [...NOTIFICATION_TYPE] },
// Not part of the component API, but used for the story
Expand All @@ -28,7 +28,7 @@ const meta: Meta = {
'auto-dismiss': false,
'disable-close': false,
'hide-icon': false,
'is-open': false,
open: false,
time: 3000,
type: 'info',
// Not part of the component API, but used for the story
Expand All @@ -45,7 +45,7 @@ const Template = (args: Args) => html`
?auto-dismiss=${args['auto-dismiss']}
?disable-close=${args['disable-close']}
?hide-icon=${args['hide-icon']}
?is-open=${args['is-open']}
?open=${args.open}
time=${args.time}
type=${args.type}
>
Expand All @@ -56,7 +56,7 @@ const Template = (args: Args) => html`
?auto-dismiss=${args['auto-dismiss']}
?disable-close=${args['disable-close']}
?hide-icon=${args['hide-icon']}
?is-open=${args['is-open']}
?open=${args.open}
time=${args.time}
type=${args.type}
>
Expand All @@ -71,7 +71,7 @@ const Template = (args: Args) => html`
?auto-dismiss=${args['auto-dismiss']}
?disable-close=${args['disable-close']}
?hide-icon=${args['hide-icon']}
?is-open=${args['is-open']}
?open=${args.open}
time=${args.time}
type=${args.type}
>
Expand All @@ -91,7 +91,7 @@ const Template = (args: Args) => html`
export const Default: Story = {
render: Template,
args: {
'is-open': true,
open: true,
},
};

Expand All @@ -100,39 +100,39 @@ export const ErrorType: Story = {
name: 'Error',
render: Template,
args: {
'is-open': true,
open: true,
type: 'error',
},
};

export const Neutral: Story = {
render: Template,
args: {
'is-open': true,
open: true,
type: 'neutral',
},
};

export const Success: Story = {
render: Template,
args: {
'is-open': true,
open: true,
type: 'success',
},
};

export const Warning: Story = {
render: Template,
args: {
'is-open': true,
open: true,
type: 'warning',
},
};

export const CustomIcon: Story = {
render: Template,
args: {
'is-open': true,
open: true,
customIcon: true,
},
};
Expand Down
19 changes: 12 additions & 7 deletions packages/bee-q/src/components/notification/bq-notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class BqNotification {
@Prop({ reflect: true }) hideIcon: boolean;

/** If true, the notification will be shown */
@Prop({ reflect: true, mutable: true }) isOpen: boolean;
@Prop({ reflect: true, mutable: true }) open: boolean;

/** The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"` */
@Prop({ reflect: true }) time: number = 3000;
Expand All @@ -77,14 +77,14 @@ export class BqNotification {
this.hide();
}, this.time);
// Make sure to autodismiss the notification if the `auto-dismiss` value changed while open
if (this.isOpen) this.autoDismissDebounce();
if (this.open) this.autoDismissDebounce();
}

@Watch('isOpen')
@Watch('open')
handleOpenChange() {
this.autoDismissDebounce?.cancel();

if (!(this.autoDismiss && this.isOpen)) return;
if (!(this.autoDismiss && this.open)) return;
this.autoDismissDebounce();
}

Expand Down Expand Up @@ -173,14 +173,14 @@ export class BqNotification {
private handleHide = () => {
const ev = this.bqHide.emit(this.el);
if (!ev.defaultPrevented) {
this.isOpen = false;
this.open = false;
}
};

private handleShow = () => {
const ev = this.bqShow.emit(this.el);
if (!ev.defaultPrevented) {
this.isOpen = true;
this.open = true;
}
};

Expand Down Expand Up @@ -211,7 +211,12 @@ export class BqNotification {

render() {
return (
<Host aria-hidden={!this.isOpen ? 'true' : 'false'} hidden={!this.isOpen ? 'true' : 'false'} role="alert">
<Host
class={{ 'is-hidden': !this.open }}
aria-hidden={!this.open ? 'true' : 'false'}
hidden={!this.open ? 'true' : 'false'}
role="alert"
>
<div class="bq-notification" part="wrapper">
{/* CLOSE BUTTON */}
{!this.disableClose && (
Expand Down
2 changes: 1 addition & 1 deletion packages/bee-q/src/components/notification/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
| `autoDismiss` | `auto-dismiss` | If true, the notification will automatically hide after the specified amount of time | `boolean` | `undefined` |
| `disableClose` | `disable-close` | If true, the close button at the top right of the notification won't be shown | `boolean` | `undefined` |
| `hideIcon` | `hide-icon` | If true, the notification icon won't be shown | `boolean` | `undefined` |
| `isOpen` | `is-open` | If true, the notification will be shown | `boolean` | `undefined` |
| `open` | `open` | If true, the notification will be shown | `boolean` | `undefined` |
| `time` | `time` | The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"` | `number` | `3000` |
| `type` | `type` | Type of Notification | `"error" \| "info" \| "neutral" \| "success" \| "warning"` | `'info'` |

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
@import './bq-notification.variables';

:host {
@apply hidden;
@apply block;
}

:host([is-open]) {
@apply block;
:host(.is-hidden) {
@apply hidden;
}

.bq-notification {
Expand Down

0 comments on commit de8b30f

Please sign in to comment.