Skip to content

feat(backdrop): refactor backdrop to use lit #1037

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

Open
jasonsubers-tyler wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(backdrop): refactor backdrop to use lit #1037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions src/lib/backdrop/backdrop-constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const selectors = {
ROOT: '.forge-backdrop'
};

/** @deprecated - These are internal constants that will be removed/moved in the future. Please avoid using them. */
export const BACKDROP_CONSTANTS = {
elementName,
observedAttributes,
Expand Down
3 changes: 0 additions & 3 deletions src/lib/backdrop/backdrop.html
View file
Open in desktop

This file was deleted.

16 changes: 10 additions & 6 deletions src/lib/backdrop/backdrop.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,17 @@
:host([visible]) {
.forge-backdrop {
@include visible;
}
}

&.entering {
@include entering;
}
:host(:state(entering)) {
.forge-backdrop {
@include entering;
}
}

&.exiting {
@include exiting;
}
:host(:state(exiting)) {
.forge-backdrop {
@include exiting;
}
}
43 changes: 22 additions & 21 deletions src/lib/backdrop/backdrop.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { expect } from '@esm-bundle/chai';
import { fixture, html } from '@open-wc/testing';
import { elementUpdated, fixture, html } from '@open-wc/testing';
import { getShadowElement } from '@tylertech/forge-core';
import { sendMouse } from '@web/test-runner-commands';
import { BACKDROP_CONSTANTS, IBackdropComponent } from '../backdrop';
import { IBackdropComponent } from '../backdrop';
import { task } from '../core/utils/utils';

import './backdrop';
Expand Down Expand Up @@ -30,6 +30,7 @@ describe('Backdrop', () => {
const harness = await createFixture();

harness.backdropElement.visible = true;
await elementUpdated(harness.backdropElement);
await harness.enterAnimation();

expect(harness.isVisible).to.be.true;
Expand All @@ -38,7 +39,8 @@ describe('Backdrop', () => {
it('should show when visible attribute is set', async () => {
const harness = await createFixture();

harness.backdropElement.setAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE, '');
harness.backdropElement.setAttribute('visible', '');
await elementUpdated(harness.backdropElement);
await harness.enterAnimation();

expect(harness.isVisible).to.be.true;
Expand All @@ -47,7 +49,8 @@ describe('Backdrop', () => {
it('should hide when visible attribute is removed', async () => {
const harness = await createFixture({ visible: true });

harness.backdropElement.removeAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE);
harness.backdropElement.removeAttribute('visible');
await elementUpdated(harness.backdropElement);
await harness.exitAnimation();

expect(harness.isVisible).to.be.false;
Expand All @@ -61,7 +64,7 @@ describe('Backdrop', () => {
await harness.fadeIn();

expect(harness.isVisible).to.be.true;
expect(harness.rootElement.classList.contains(BACKDROP_CONSTANTS.classes.EXITING)).to.be.false;
expect(harness.backdropElement.matches(':state(exiting)')).to.be.false;
});

it('should fade out', async () => {
Expand All @@ -73,13 +76,14 @@ describe('Backdrop', () => {
await harness.exitAnimation();

expect(harness.isVisible).to.be.false;
expect(harness.rootElement.classList.contains(BACKDROP_CONSTANTS.classes.EXITING)).to.be.false;
expect(harness.backdropElement.matches(':state(exiting)')).to.be.false;
});

it('should show immediately when calling show() method', async () => {
const harness = await createFixture();

harness.backdropElement.show();
await elementUpdated(harness.backdropElement);
await harness.enterAnimation();

expect(harness.isVisible).to.be.true;
Expand All @@ -89,6 +93,7 @@ describe('Backdrop', () => {
const harness = await createFixture({ visible: true });

harness.backdropElement.hide();
await elementUpdated(harness.backdropElement);
await harness.exitAnimation();

expect(harness.isVisible).to.be.false;
Expand All @@ -98,47 +103,43 @@ describe('Backdrop', () => {
const harness = await createFixture({ fixed: true });

expect(harness.backdropElement.fixed).to.be.true;
expect(harness.backdropElement.hasAttribute(BACKDROP_CONSTANTS.attributes.FIXED)).to.be.true;
expect(harness.backdropElement.hasAttribute('fixed')).to.be.true;
});

it('should toggle fixed attribute', async () => {
const harness = await createFixture();

harness.backdropElement.fixed = true;
await elementUpdated(harness.backdropElement);

expect(harness.backdropElement.fixed).to.be.true;
expect(harness.backdropElement.hasAttribute(BACKDROP_CONSTANTS.attributes.FIXED)).to.be.true;
expect(harness.backdropElement.hasAttribute('fixed')).to.be.true;

harness.backdropElement.fixed = false;
await elementUpdated(harness.backdropElement);

expect(harness.backdropElement.fixed).to.be.false;
expect(harness.backdropElement.hasAttribute(BACKDROP_CONSTANTS.attributes.FIXED)).to.be.false;
expect(harness.backdropElement.hasAttribute('fixed')).to.be.false;
});
});

class BackdropHarness {
constructor(public backdropElement: IBackdropComponent) {}

public get rootElement(): HTMLElement {
return getShadowElement(this.backdropElement, BACKDROP_CONSTANTS.selectors.ROOT);
return getShadowElement(this.backdropElement, '.forge-backdrop');
}

public get isVisible(): boolean {
return (
this.backdropElement.visible &&
this.backdropElement.hasAttribute(BACKDROP_CONSTANTS.attributes.VISIBLE) &&
getComputedStyle(this.rootElement).opacity === '0.54'
);
return this.backdropElement.visible && this.backdropElement.hasAttribute('visible') && getComputedStyle(this.rootElement).opacity === '0.54';
}

public fadeIn(): Promise<void> {
this.backdropElement.fadeIn();
return this.enterAnimation();
public async fadeIn(): Promise<void> {
await this.backdropElement.fadeIn();
}

public fadeOut(): Promise<void> {
this.backdropElement.fadeOut();
return this.exitAnimation();
public async fadeOut(): Promise<void> {
await this.backdropElement.fadeOut();
}

public async click(): Promise<void> {
Expand Down
Loading
Loading