Skip to content

Commit

Permalink
fix(toast): toast rendered as visible with open="false" (#315)
Browse files Browse the repository at this point in the history
  • Loading branch information
dgonzalezr authored Jul 3, 2023
1 parent 7d81202 commit 23a698e
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 4 deletions.
36 changes: 36 additions & 0 deletions packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,42 @@ describe('bq-toast', () => {
expect(element.shadowRoot).not.toBeNull();
});

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

const element = await page.find('bq-toast');
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-toast open="false"></bq-toast>');

const element = await page.find('bq-toast');
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-toast open></bq-toast>');

const element = await page.find('bq-toast');
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-toast open="true"></bq-toast>');

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

it('should display text', async () => {
const page = await newE2EPage();
await page.setContent('<bq-toast>Text</bq-toast>');
Expand Down
7 changes: 6 additions & 1 deletion packages/bee-q/src/components/toast/bq-toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,12 @@ export class BqToast {

render() {
return (
<Host aria-hidden={!this.open ? 'true' : 'false'} hidden={!this.open ? 'true' : 'false'} role="status">
<Host
class={{ 'is-hidden': !this.open }}
aria-hidden={!this.open ? 'true' : 'false'}
hidden={!this.open ? 'true' : 'false'}
role="status"
>
<output class="bq-toast" part="wrapper">
<div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part="icon">
<slot name="icon">
Expand Down
6 changes: 3 additions & 3 deletions packages/bee-q/src/components/toast/scss/bq-toast.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
@import './bq-toast.variables';

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

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

.bq-toast {
Expand Down

0 comments on commit 23a698e

Please sign in to comment.