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

fix(table): fix style regression #8991

Merged
merged 5 commits into from
Mar 29, 2024
Merged

fix(table): fix style regression #8991

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c538975
test: fix tests
jcfranco Mar 22, 2024
7d1f290
fix table tests
jcfranco Mar 25, 2024
5d7184d
tidy up
jcfranco Mar 25, 2024
05411e6
Clean up Table
macandcheese Mar 25, 2024
6912e18
revert theme-related test updates
jcfranco Mar 26, 2024
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
48 changes: 1 addition & 47 deletions packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
import {
accessible,
Expand Down Expand Up @@ -526,50 +526,4 @@ describe("calcite-action-menu", () => {
expect(clickSpy).toHaveReceivedEventTimes(1);
});
});

describe("Theme-ing", () => {
let page: E2EPage;
const customTheme = {
"--calcite-action-menu-group-separator-border-color": "rgb(192, 255, 238)",
};

beforeEach(async () => {
page = await newE2EPage({
html: `
<calcite-action-menu open>
<calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
<calcite-action-group>
<calcite-action text="Plus" icon="plus" text-enabled></calcite-action
><calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="Table" icon="table" text-enabled></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" text-enabled></calcite-action>
</calcite-action-group>
</calcite-action-menu>
`,
});
await page.waitForChanges();
});

it("should allow theme-ing of the border-color", async () => {
const actionMenu = await page.find("calcite-action-menu");
const slottedActionGroup = await page.find("calcite-action-group");
const defaultStyle = await slottedActionGroup.getComputedStyle();

await actionMenu.setAttribute(
"style",
`--calcite-action-menu-group-separator-border-color: ${customTheme["--calcite-action-menu-group-separator-border-color"]}`,
);
await page.waitForChanges();

const styles = await slottedActionGroup.getComputedStyle();
expect(defaultStyle.borderBlockEndColor).not.toBe(
customTheme["--calcite-action-menu-group-separator-border-color"],
);
expect(styles.borderBlockEndColor).toBe(customTheme["--calcite-action-menu-group-separator-border-color"]);
});
});
});
48 changes: 48 additions & 0 deletions packages/calcite-components/src/components/action-menu/action-menu.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,51 @@ export const openMaxHeight_TestOnly = (): string => html`
`;

keyDownOpen_TestOnly.parameters = { chromatic: { delay: 1000 } };

export const theming_TestOnly = (): string => html`
<calcite-action-menu
open
style="
--calcite-action-menu-close-background-color-active: #9BDAF2;
--calcite-action-menu-close-background-color-hover: #9BDAF2;
--calcite-action-menu-close-background-color: #9BDAF2;
--calcite-action-menu-close-icon-color-active: #D93D4A;
--calcite-action-menu-close-icon-color-hover: #D93D4A;
--calcite-action-menu-close-icon-color: #D93D4A;
--calcite-action-menu-close-text-color-active: #044BD9;
--calcite-action-menu-close-text-color-hover: #044BD9;
--calcite-action-menu-close-text-color: #044BD9;
--calcite-action-menu-popover-background-color: #9BDAF2;
--calcite-action-menu-popover-border-color: #9BDAF2;
--calcite-action-menu-popover-corner-radius: 0;
--calcite-action-menu-popover-shadow: 0 0 0 0.25rem #D93A2B;
--calcite-action-menu-popover-text-color: #044BD9;
--calcite-action-menu-trigger-background-color-active: #9BDAF2;
--calcite-action-menu-trigger-background-color-focus: #9BDAF2;
--calcite-action-menu-trigger-background-color-hover: #9BDAF2;
--calcite-action-menu-trigger-background-color: #9BDAF2;
--calcite-action-menu-trigger-icon-color-active: #D93D4A;
--calcite-action-menu-trigger-icon-color-focus: #D93D4A;
--calcite-action-menu-trigger-icon-color-hover: #D93D4A;
--calcite-action-menu-trigger-icon-color: #D93D4A;
--calcite-action-menu-trigger-indicator-color: #BFA939;
--calcite-action-menu-trigger-loader-color: #BFA939;
--calcite-action-menu-trigger-shadow: 0 0 0 0.25rem #D93A2B;
--calcite-action-menu-trigger-text-color-active: #044BD9;
--calcite-action-menu-trigger-text-color-focus: #044BD9;
--calcite-action-menu-trigger-text-color-hover: #044BD9;
--calcite-action-menu-trigger-text-color: #044BD9;"
>
<calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
<calcite-action-group>
<calcite-action text="Plus" icon="plus" text-enabled></calcite-action
><calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="Table" icon="table" text-enabled></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" text-enabled></calcite-action>
</calcite-action-group>
</calcite-action-menu>
`;
29 changes: 0 additions & 29 deletions packages/calcite-components/src/components/action/action.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,33 +205,4 @@ describe("calcite-action", () => {
expect(liveRegion.getAttribute("role")).toBe("region");
expect(liveRegion.textContent).toBe("Indicator present");
});

describe("theme-ing", () => {
it("should theme the background color", async () => {
const page = await newE2EPage();
const color = ["--calcite-action-background-color", "rgb(186, 218, 85)"];
await page.setContent(`<calcite-action
scale="s"
indicator
active
text="click-me"
label="hello world"
text-enabled
icon="configure-popup"
></calcite-action>`);
await page.waitForChanges();

const action = await page.find("calcite-action");
const defaultStyle = await action.getComputedStyle();

await action.setAttribute("style", `${color[0]}: ${color[1]}`);
await page.waitForChanges();

// action = await page.find(`calcite-action >>> .${CSS.action}`);
const styles = await action.getComputedStyle();

expect(defaultStyle.backgroundColor).not.toBe(color[1]);
expect(styles.backgroundColor).toBe(color[1]);
});
});
});
21 changes: 21 additions & 0 deletions packages/calcite-components/src/components/action/action.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,3 +234,24 @@ export const darkModeRTL_TestOnly = (): string =>
</div>`;

darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

export const theming_TestOnly = (): string => html`
<calcite-action
style="
--calcite-action-background-color: #A7ABCF;
--calcite-action-text-color: #111C54;
--calcite-action-shadow: 0 0 0 0.25rem #111C54;
--calcite-action-icon-color: #70163B;
--calcite-action-indicator-color: #45B385;
--calcite-action-loader-color: #9AE0FF;
"
scale="s"
indicator
active
text="click-me"
label="hello world"
text-enabled
icon="configure-popup"
>
</calcite-action>
`;
8 changes: 0 additions & 8 deletions packages/calcite-components/src/components/list-item/list-item.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,6 @@ describe("calcite-list-item", () => {
disabled(`<calcite-list-item label="test" active></calcite-list-item>`);
});

it("always displays hover class", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-list-item></calcite-list-item>`);
await page.waitForChanges();

expect(await page.find(`calcite-list-item >>> .${CSS.containerHover}`)).not.toBeNull();
});

it("renders dragHandle when property is true", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-list-item></calcite-list-item>`);
Expand Down
73 changes: 0 additions & 73 deletions packages/calcite-components/src/components/modal/modal.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,36 +40,6 @@ describe("calcite-modal", () => {
expect(closeButton).toBe(null);
});

it("sets custom width correctly", async () => {
const page = await newE2EPage();
// set large page to ensure test modal isn't becoming fullscreen
await page.setViewport({ width: 1440, height: 1440 });
await page.setContent(`<calcite-modal style="--calcite-modal-width:600px;"></calcite-modal>`);
const modal = await page.find("calcite-modal");
await modal.setProperty("open", true);
await page.waitForChanges();
const style = await page.$eval("calcite-modal", (el) => {
const m = el.shadowRoot.querySelector(".modal");
return window.getComputedStyle(m).getPropertyValue("width");
});
expect(style).toEqual("600px");
});

it("sets custom height correctly", async () => {
const page = await newE2EPage();
// set large page to ensure test modal isn't becoming fullscreen
await page.setViewport({ width: 1440, height: 1440 });
await page.setContent(`<calcite-modal style="--calcite-modal-height:600px;" open></calcite-modal>`);
const modal = await page.find("calcite-modal");
await modal.setProperty("open", true);
await page.waitForChanges();
const style = await page.$eval("calcite-modal", (el) => {
const m = el.shadowRoot.querySelector(".modal");
return window.getComputedStyle(m).getPropertyValue("height");
});
expect(style).toEqual("600px");
});

it("expectedly does not set custom width when `fullscreen` is true", async () => {
const page = await newE2EPage();
// set large page to ensure test modal isn't becoming fullscreen
Expand Down Expand Up @@ -594,49 +564,6 @@ describe("calcite-modal", () => {
expect(footer).toBeFalsy();
});

it("should render calcite-scrim with default background color", async () => {
const page = await newE2EPage({
html: `
<calcite-modal aria-labelledby="modal-title" open>
<h3 slot="header" id="modal-title">Title of the modal</h3>
<div slot="content">The actual content of the modal</div>
<calcite-button slot="back" kind="neutral" appearance="outline" icon="chevron-left" width="full">
Back
</calcite-button>
<calcite-button slot="secondary" width="full" appearance="outline"> Cancel </calcite-button>
<calcite-button slot="primary" width="full"> Save </calcite-button>
</calcite-modal>
`,
});
const scrimStyles = await page.evaluate(() => {
const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
});
expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
});

it("when modal css override set, scrim should adhere to requested color", async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no replacement for these tests ATM

const overrideStyle = "rgba(160, 20, 10, 0.5)";
const page = await newE2EPage({
html: `
<calcite-modal aria-labelledby="modal-title" open style="--calcite-modal-scrim-background:${overrideStyle}">
<h3 slot="header" id="modal-title">Title of the modal</h3>
<div slot="content">The actual content of the modal</div>
<calcite-button slot="back" kind="neutral" appearance="outline" icon="chevron-left" width="full">
Back
</calcite-button>
<calcite-button slot="secondary" width="full" appearance="outline"> Cancel </calcite-button>
<calcite-button slot="primary" width="full"> Save </calcite-button>
</calcite-modal>
`,
});
const scrimStyles = await page.evaluate(() => {
const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
});
expect(scrimStyles).toEqual(overrideStyle);
});

it("correctly reflects the scale of the modal on the close button icon", async () => {
const page = await newE2EPage();
await page.setContent(html` <calcite-modal open></calcite-modal> `);
Expand Down
25 changes: 22 additions & 3 deletions packages/calcite-components/src/components/modal/modal.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,28 @@ withTooltips_TestOnly.parameters = {
chromatic: { delay: 500 },
};

export const withCSSVars_TestOnly = (): string => html`
<button id="button">Open</button>
<calcite-modal open aria-labelledby="modal-title" id="modal" style="--calcite-modal-content-background: #ddd;">
export const theming_TestOnly = (): string => html`
// I want a tropical color scheme for the custom CSS prop overrides
<calcite-modal
open
aria-labelledby="modal-title"
id="modal"
style="
--calcite-modal-accent-color: #10403B;
--calcite-modal-background-color: #8AA6A3;
--calcite-modal-border-color: #127369;
--calcite-modal-close-button-background-color-hover: #8AA6A3;
--calcite-modal-close-button-background-color: #8AA6A3;
--calcite-modal-close-button-icon-color: #10403B;
--calcite-modal-content-background-color: #8AA6A3;
--calcite-modal-content-space: 1rem;
--calcite-modal-corner-radius: 0;
--calcite-modal-height: 500px;
--calcite-modal-scrim-background-color: #4C5958;
--calcite-modal-shadow: 0 0 0 0.25rem #BFBFBF;
--calcite-modal-text-color: #10403B;
--calcite-modal-width: 600px;"
>
<div slot="header" id="modal-title">Modal title</div>
<div slot="content">
Modal content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
Expand Down
20 changes: 10 additions & 10 deletions packages/calcite-components/src/components/table/table.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2034,7 +2034,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("ArrowRight");
await page.waitForChanges();
Expand All @@ -2051,7 +2051,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("PageDown");
await page.waitForChanges();
Expand Down Expand Up @@ -2085,7 +2085,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });
});

it("navigates correctly when number and selection column present numbered", async () => {
Expand Down Expand Up @@ -2127,7 +2127,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("ArrowRight");
await page.waitForChanges();
Expand Down Expand Up @@ -2187,7 +2187,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });
});

it("navigates correctly when pagination present and selection and number and first page displayed", async () => {
Expand Down Expand Up @@ -2233,7 +2233,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("ArrowRight");
await page.waitForChanges();
Expand Down Expand Up @@ -2299,7 +2299,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });
});

it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => {
Expand Down Expand Up @@ -2348,7 +2348,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("ArrowRight");
await page.waitForChanges();
Expand Down Expand Up @@ -2429,7 +2429,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.$eval("calcite-table", () => {
const table = document.querySelector("calcite-table");
Expand All @@ -2454,7 +2454,7 @@ describe("keyboard navigation", () => {
`#${rowHead.id}`,
(el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
),
).toEqual({ "0": CSS.numberCell });
).toEqual({ "0": CSS.numberCell, "1": CSS.selectedCell });

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
Expand Down
Loading