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

Jump to bottom

feat(alert): make component responsive #7755

Merged
merged 22 commits into from
Sep 29, 2023
Merged

feat(alert): make component responsive #7755

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
e457c12
feat(alert): make component responsive
jcfranco Sep 15, 2023
c41756f
update doc
jcfranco Sep 16, 2023
e7d12d5
add missing spacing util
jcfranco Sep 16, 2023
d88e10d
merge main
jcfranco Sep 18, 2023
6f178ce
Merge branch 'main' into jcfranco/6773-responsivify-alert
jcfranco Sep 18, 2023
1b2be0b
tidy up
jcfranco Sep 18, 2023
d05c794
fix tests
jcfranco Sep 18, 2023
a41107c
merge main
jcfranco Sep 20, 2023
d3ad965
update footer border spacing
jcfranco Sep 21, 2023
10c2a2b
add delay to stories
jcfranco Sep 21, 2023
9e2a062
fix issue caused by reusing the same named slot
jcfranco Sep 22, 2023
4c7fff3
fine-tune screenshot delays
jcfranco Sep 22, 2023
e48ed6a
shorten delay before opening queued alert
jcfranco Sep 22, 2023
873c43a
tweak story dimensions
jcfranco Sep 22, 2023
2a7dbd5
tweak close button across breakpoints
jcfranco Sep 26, 2023
5aa70ca
tidy up
jcfranco Sep 26, 2023
e7d3416
fix incorrect variable used for block spacing
jcfranco Sep 27, 2023
34125fc
tidy up
jcfranco Sep 27, 2023
6518808
tidy up
jcfranco Sep 27, 2023
cb60ed5
tidy up
jcfranco Sep 27, 2023
5cfbed6
prevent focus outline from being clipped
jcfranco Sep 28, 2023
ef7048a
center close button icon from s breakpoint onward
jcfranco Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 16 additions & 16 deletions packages/calcite-components/src/components/alert/alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ describe("calcite-alert", () => {
${alertContent}
</calcite-alert>`);
const element = await page.find("calcite-alert");
const close = await page.find("calcite-alert >>> .alert-close");
const icon = await page.find("calcite-alert >>> .alert-icon");
const close = await page.find(`calcite-alert >>> .${CSS.close}`);
const icon = await page.find(`calcite-alert >>> .${CSS.icon}`);
expect(element).toEqualAttribute("kind", "brand");
expect(close).not.toBeNull();
expect(icon).toBeNull();
Expand All @@ -60,7 +60,7 @@ describe("calcite-alert", () => {
</calcite-alert>`);

const element = await page.find("calcite-alert");
const icon = await page.find("calcite-alert >>> .alert-icon");
const icon = await page.find(`calcite-alert >>> .${CSS.icon}`);

expect(element).toEqualAttribute("kind", "warning");
expect(element).toEqualAttribute("auto-close-duration", "fast");
Expand All @@ -75,8 +75,8 @@ describe("calcite-alert", () => {
</calcite-alert>`);

const element = await page.find("calcite-alert");
const close = await page.find("calcite-alert >>> .alert-close");
const icon = await page.find("calcite-alert >>> .alert-icon");
const close = await page.find(`calcite-alert >>> .${CSS.close}`);
const icon = await page.find(`calcite-alert >>> .${CSS.icon}`);
expect(element).toHaveAttribute(HYDRATED_ATTR);
expect(close).not.toBeNull();
expect(icon).not.toBeNull();
Expand Down Expand Up @@ -124,7 +124,7 @@ describe("calcite-alert", () => {

const alert1 = await page.find("#alert-1");
const button1 = await page.find("#button-1");
const alertClose1 = await page.find("#alert-1 >>> .alert-close");
const alertClose1 = await page.find(`#alert-1 >>> .${CSS.close}`);

expect(await alert1.isVisible()).not.toBe(true);

Expand Down Expand Up @@ -161,8 +161,8 @@ describe("calcite-alert", () => {
const button1 = await page.find("#button-1");
const button2 = await page.find("#button-2");
const button3 = await page.find("#button-3");
const alertClose1 = await page.find("#alert-1 >>> .alert-close");
const alertClose2 = await page.find("#alert-2 >>> .alert-close");
const alertClose1 = await page.find(`#alert-1 >>> .${CSS.close}`);
const alertClose2 = await page.find(`#alert-2 >>> .${CSS.close}`);

await button1.click();
await page.waitForTimeout(animationDurationInMs);
Expand All @@ -187,8 +187,8 @@ describe("calcite-alert", () => {
${alertContent}
</calcite-alert>`);

const container = await page.find("calcite-alert >>> .container");
expect(container).toHaveClass("bottom");
const container = await page.find(`calcite-alert >>> .${CSS.container}`);
expect(container).toHaveClass(CSS.containerBottom);
});

it("correctly assigns a requested placement class", async () => {
Expand All @@ -198,9 +198,9 @@ describe("calcite-alert", () => {
${alertContent}
</calcite-alert>`);

const container = await page.find("calcite-alert >>> .container");
expect(container).not.toHaveClass("bottom");
expect(container).toHaveClass("top-end");
const container = await page.find(`calcite-alert >>> .${CSS.container}`);
expect(container).not.toHaveClass(CSS.containerBottom);
expect(container).toHaveClass(CSS.containerTopEnd);
});

describe("CSS properties for light/dark modes", () => {
Expand Down Expand Up @@ -244,7 +244,7 @@ describe("calcite-alert", () => {
it("should render alert dismiss progress bar with default value tied to light mode", async () => {
page = await newE2EPage({ html: alertSnippet });
await page.waitForTimeout(animationDurationInMs);
alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.8)");
});
Expand All @@ -256,7 +256,7 @@ describe("calcite-alert", () => {
html: `<div class="calcite-mode-dark">${alertSnippet}</div>`,
});
await page.waitForTimeout(animationDurationInMs);
alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(43, 43, 43, 0.8)");
});
Expand All @@ -274,7 +274,7 @@ describe("calcite-alert", () => {
<div>${alertSnippet}</div>`,
});
await page.waitForTimeout(animationDurationInMs);
alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
expect(await progressBarStyles.getPropertyValue("background-color")).toEqual(overrideStyle);
});
Expand Down