Skip to content

Scoped styles #213

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
ealmloff wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Scoped styles #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d553368
better scoped classes
ealmloff Mar 11, 2026
ccbf41f
Merge branch 'main' into scoped-styles
ealmloff Mar 17, 2026
bb5771a
add stylelint rule
ealmloff Apr 21, 2026
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
14 changes: 7 additions & 7 deletions playwright/accordion.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ import { test, expect } from "@playwright/test";

test("test", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=accordion&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
// Get the first .accordion-item
const accordionItem = page.locator(".accordion-item");
// Click on the first .accordion-item
// Get the first .dx-accordion-item
const accordionItem = page.locator(".dx-accordion-item");
// Click on the first .dx-accordion-item
const firstAccordionItem = accordionItem.first();
await firstAccordionItem.locator("button").click();
// Verify that the first .accordion-item is expanded (data-open="true")
// Verify that the first .dx-accordion-item is expanded (data-open="true")
await expect(firstAccordionItem).toHaveAttribute("data-open", "true");

// Click on the second .accordion-item
// Click on the second .dx-accordion-item
const secondAccordionItem = accordionItem.nth(1);
await secondAccordionItem.locator("button").click();
// Verify that the second .accordion-item is expanded (data-open="true")
// Verify that the second .dx-accordion-item is expanded (data-open="true")
await expect(secondAccordionItem).toHaveAttribute("data-open", "true");
// Verify the first .accordion-item is collapsed (data-open="false")
// Verify the first .dx-accordion-item is collapsed (data-open="false")
await expect(firstAccordionItem).toHaveAttribute("data-open", "false");
});
2 changes: 1 addition & 1 deletion playwright/alert-dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ test('test', async ({ page }) => {
await page.goto('http://127.0.0.1:8080/component/?name=alert_dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
await page.getByRole('button', { name: 'Show Alert Dialog' }).click();
// Assert the dialog is open
const dialog = page.locator('.alert-dialog-backdrop');
const dialog = page.locator('.dx-alert-dialog-backdrop');
await expect(dialog).toHaveAttribute('data-state', 'open');
// Assert the cancel button is focused
const cancelButton = page.getByRole('button', { name: 'Cancel' });
Expand Down
4 changes: 2 additions & 2 deletions playwright/avatar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { test, expect } from "@playwright/test";
test("test", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=avatar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
// Get the avatar element
const avatar = page.locator(".avatar-item").nth(0);
const avatar = page.locator(".dx-avatar-item").nth(0);
// Verify the avatar has a loaded image
let image = avatar.locator("img");
await expect(image).toHaveAttribute("src", "https://avatars.githubusercontent.com/u/66571940?s=96&v=4");

// Get the third avatar element (Error State - has invalid image URL, shows fallback)
const errorAvatar = page.locator(".avatar-item").nth(2);
const errorAvatar = page.locator(".dx-avatar-item").nth(2);
// Verify the error state avatar has fallback text
await expect(errorAvatar).toContainText("JK");
});
36 changes: 18 additions & 18 deletions playwright/calendar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ test("test", async ({ page }) => {
timeout: 20 * 60 * 1000,
}); // Increase timeout to 20 minutes
// Find the calendar element
const calendar = page.locator(".calendar").nth(0);
const calendar = page.locator(".dx-calendar").nth(0);
// Find the calendar-nav-prev button
const prevButton = calendar.locator(".calendar-nav-prev");
const prevButton = calendar.locator(".dx-calendar-nav-prev");
// Find the calendar-nav-next button
const nextButton = calendar.locator(".calendar-nav-next");
const nextButton = calendar.locator(".dx-calendar-nav-next");

// Assert the calendar is displayed
await expect(calendar).toBeVisible({ timeout: 30000 });
// Assert the current month is displayed
const currentMonth = calendar.locator(".calendar-month-select");
const currentMonth = calendar.locator(".dx-calendar-month-select");
let currentMonthText = await currentMonth.inputValue();

// Click the previous button to go to the previous month
Expand All @@ -31,7 +31,7 @@ test("test", async ({ page }) => {
// Move focus to the calendar with tab
await page.keyboard.press("Tab");
const focusedDay = calendar.locator(
'.calendar-grid-cell[data-month="current"]:focus'
'.dx-calendar-grid-cell[data-month="current"]:focus'
);
// Assert a day is focused
const firstDay = focusedDay.first();
Expand Down Expand Up @@ -83,9 +83,9 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {
});

// Find the calendar element
const calendar = page.locator(".calendar").nth(0);
const monthSelect = calendar.locator(".calendar-month-select");
const yearSelect = calendar.locator(".calendar-year-select");
const calendar = page.locator(".dx-calendar").nth(0);
const monthSelect = calendar.locator(".dx-calendar-month-select");
const yearSelect = calendar.locator(".dx-calendar-year-select");

// Assert the calendar is displayed
await expect(calendar).toBeVisible({ timeout: 30000 });
Expand All @@ -110,7 +110,7 @@ test("year navigation by moving 52 weeks with arrow keys", async ({ page }) => {

// Move focus to the calendar manually
const firstDay = calendar
.locator('.calendar-grid-cell[data-month="current"]')
.locator('.dx-calendar-grid-cell[data-month="current"]')
.first();
await firstDay.focus();

Expand Down Expand Up @@ -148,9 +148,9 @@ test("shift + arrow keys navigation", async ({ page }) => {
});

// Find the calendar element
const calendar = page.locator(".calendar").nth(0);
const monthSelect = calendar.locator(".calendar-month-select");
const yearSelect = calendar.locator(".calendar-year-select");
const calendar = page.locator(".dx-calendar").nth(0);
const monthSelect = calendar.locator(".dx-calendar-month-select");
const yearSelect = calendar.locator(".dx-calendar-year-select");

// Assert the calendar is displayed
await expect(calendar).toBeVisible({ timeout: 30000 });
Expand All @@ -163,7 +163,7 @@ test("shift + arrow keys navigation", async ({ page }) => {

// Move focus to the calendar
const firstDay = calendar
.locator('.calendar-grid-cell[data-month="current"]')
.locator('.dx-calendar-grid-cell[data-month="current"]')
.first();
await firstDay.focus();

Expand Down Expand Up @@ -199,9 +199,9 @@ async function testArrowKeyNavigation(
});

// Find the calendar element
const calendar = page.locator(".calendar").nth(0);
const monthSelect = calendar.locator(".calendar-month-select");
const yearSelect = calendar.locator(".calendar-year-select");
const calendar = page.locator(".dx-calendar").nth(0);
const monthSelect = calendar.locator(".dx-calendar-month-select");
const yearSelect = calendar.locator(".dx-calendar-year-select");

// Assert the calendar is displayed
await expect(calendar).toBeVisible({ timeout: 30000 });
Expand All @@ -217,13 +217,13 @@ async function testArrowKeyNavigation(

// Move focus to the starting day of the current month
const startDay = calendar
.locator('.calendar-grid-cell[data-month="current"]')
.locator('.dx-calendar-grid-cell[data-month="current"]')
[startPosition]();
await startDay.focus();

// Get the focused day selector
const focusedDay = calendar.locator(
'.calendar-grid-cell[data-month="current"]:focus'
'.dx-calendar-grid-cell[data-month="current"]:focus'
);

// Array to track all days visited
Expand Down
10 changes: 5 additions & 5 deletions playwright/collapsible.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { test, expect } from "@playwright/test";

test("test", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=collapsible&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
// Get the .collapsible-content
const collapsibleContent = page.locator(".collapsible-content");
// Click on the .collapsible-trigger
const firstCollapsibleTrigger = page.locator(".collapsible-trigger");
// Get the .dx-collapsible-content
const collapsibleContent = page.locator(".dx-collapsible-content");
// Click on the .dx-collapsible-trigger
const firstCollapsibleTrigger = page.locator(".dx-collapsible-trigger");
await firstCollapsibleTrigger.click();
// Verify that the first .collapsible-content is expanded (data-open="true")
// Verify that the first .dx-collapsible-content is expanded (data-open="true")
await expect(collapsibleContent.first()).toHaveAttribute("data-open", "true");
});
4 changes: 2 additions & 2 deletions playwright/context-menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ test('pointer navigation', async ({ page }) => {
});

// Assert the context menu is visible
const contextMenu = page.locator('.context-menu-content');
const contextMenu = page.locator('.dx-context-menu-content');
await expect(contextMenu).toHaveAttribute('data-state', 'open');
// Click on the "Edit" menu item
await page.getByRole('menuitem', { name: 'Edit' }).click();
Expand All @@ -22,7 +22,7 @@ test('keyboard navigation', async ({ page }) => {
});

// Assert the context menu is visible
const contextMenu = page.locator('.context-menu-content');
const contextMenu = page.locator('.dx-context-menu-content');
await expect(contextMenu).toHaveAttribute('data-state', 'open');
// Hit escape to close the context menu
await page.keyboard.press('Escape');
Expand Down
2 changes: 1 addition & 1 deletion playwright/dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ test('test', async ({ page }) => {
await page.goto('http://127.0.0.1:8080/component/?name=dialog&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
await page.getByRole('button', { name: 'Show Dialog' }).click();
// Assert the dialog is open
const dialog = page.locator('.dialog-backdrop');
const dialog = page.locator('.dx-dialog-backdrop');
await expect(dialog).toHaveAttribute('data-state', 'open');
// Assert the close button is focused
const closeButton = dialog.getByRole('button');
Expand Down
12 changes: 6 additions & 6 deletions playwright/drag_and_drop_list.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@ const LOAD_TIMEOUT = 20 * 60 * 1000;
/** Navigate to the DnD page and return the first (main) variant list. */
async function loadMainList(page: import("@playwright/test").Page) {
await page.goto(URL, { timeout: LOAD_TIMEOUT });
const list = page.locator(".dnd-list").first();
const list = page.locator(".dx-dnd-list").first();
await expect(list).toBeVisible({ timeout: 30000 });
return list;
}

/** Navigate to the DnD page and return the second (removable) variant list. */
async function loadRemovableList(page: import("@playwright/test").Page) {
await page.goto(URL, { timeout: LOAD_TIMEOUT });
const list = page.locator(".dnd-list").nth(1);
const list = page.locator(".dx-dnd-list").nth(1);
await expect(list).toBeVisible({ timeout: 30000 });
return list;
}

/** Helper to get list items from a dnd-list container. */
function getItems(list: import("@playwright/test").Locator) {
return list.locator(".dnd-list-item");
return list.locator(".dx-dnd-list-item");
}

test.describe("Keyboard focus management", () => {
Expand Down Expand Up @@ -172,7 +172,7 @@ test.describe("Remove behavior", () => {
const list = await loadRemovableList(page);
const items = getItems(list);
const initialCount = await items.count();
const removeButtons = list.locator(".remove-button");
const removeButtons = list.locator(".dx-remove-button");
await removeButtons.nth(2).click();
await expect(items).toHaveCount(initialCount - 1);
await expect(items.nth(2)).toBeFocused();
Expand All @@ -184,7 +184,7 @@ test.describe("Remove behavior", () => {
const list = await loadRemovableList(page);
const items = getItems(list);
const initialCount = await items.count();
const removeButtons = list.locator(".remove-button");
const removeButtons = list.locator(".dx-remove-button");
await removeButtons.nth(initialCount - 1).click();
await expect(items).toHaveCount(initialCount - 1);
await expect(items.nth(initialCount - 2)).toBeFocused();
Expand All @@ -196,7 +196,7 @@ test.describe("Axe automated scan", () => {
await loadMainList(page);

const accessibilityScanResults = await new AxeBuilder({ page })
.include(".dnd-list")
.include(".dx-dnd-list")
.disableRules(["color-contrast"])
.analyze();

Expand Down
10 changes: 5 additions & 5 deletions playwright/menubar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import { test, expect } from "@playwright/test";

test("pointer navigation", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
const fileMenu = page.locator(".menubar-menu").first();
const fileMenu = page.locator(".dx-menubar-menu").first();
const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
await fileMenuButton.click();
// Assert the menu is open
const fileMenuContent = fileMenu.getByRole("menu");
await expect(fileMenuContent).toHaveAttribute("data-state", "open");

// After the menu is open, hover over the Edit menu item
const editMenu = page.locator(".menubar-menu").nth(1);
const editMenu = page.locator(".dx-menubar-menu").nth(1);
const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
await editMenuButton.hover();
// Assert the Edit menu content is open
Expand All @@ -28,13 +28,13 @@ test("pointer navigation", async ({ page }) => {

test("keyboard navigation", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=menubar&", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
await page.locator(".menubar").focus();
const fileMenu = page.locator(".menubar-menu").first();
await page.locator(".dx-menubar").focus();
const fileMenu = page.locator(".dx-menubar-menu").first();
const fileMenuButton = fileMenu.getByRole("menuitem", { name: "File" });
// Go right with the keyboard
await page.keyboard.press("ArrowRight");
// Assert the focus is on the Edit menu item
const editMenu = page.locator(".menubar-menu").nth(1);
const editMenu = page.locator(".dx-menubar-menu").nth(1);
const editMenuButton = editMenu.getByRole("menuitem", { name: "Edit" });
await expect(editMenuButton).toBeFocused();
// Go left with the keyboard
Expand Down
2 changes: 1 addition & 1 deletion playwright/navbar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ test('mobile navigation', async ({ page }) => {

test('keyboard navigation', async ({ page }) => {
await page.goto('http://127.0.0.1:8080/component/?name=navbar&', { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes
await page.locator('.navbar').focus();
await page.locator('.dx-navbar').focus();
// Go right with the keyboard
await page.keyboard.press('ArrowRight');
// Assert the focus is on the information menu item
Expand Down
2 changes: 1 addition & 1 deletion playwright/preview.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ test.describe("details", () => {
await page.goto("http://127.0.0.1:8080/component/?name=calendar", { timeout: 20 * 60 * 1000 }); // Increase timeout to 20 minutes

// Wait for the page to fully load
let componentSection = page.locator(".component-demo");
let componentSection = page.locator(".dx-component-demo");
await componentSection.waitFor({ state: "visible" });

const accessibilityScanResults = await new AxeBuilder({ page })
Expand Down
24 changes: 12 additions & 12 deletions playwright/select.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ test("test", async ({ page }) => {
timeout: 20 * 60 * 1000,
}); // Increase timeout to 20 minutes
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
let selectTrigger = page.locator(".dx-select-trigger");
await selectTrigger.click();
// Assert the select menu is open
const selectMenu = page.locator(".select-list");
const selectMenu = page.locator(".dx-select-list");
await expect(selectMenu).toHaveAttribute("data-state", "open");

// Assert the menu is focused
Expand Down Expand Up @@ -64,10 +64,10 @@ test("test", async ({ page }) => {
test("tabbing out of menu closes the select menu", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=select&");
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
let selectTrigger = page.locator(".dx-select-trigger");
await selectTrigger.click();
// Assert the select menu is open
const selectMenu = page.locator(".select-list");
const selectMenu = page.locator(".dx-select-list");
await expect(selectMenu).toHaveAttribute("data-state", "open");

// Assert the menu is focused
Expand All @@ -80,10 +80,10 @@ test("tabbing out of menu closes the select menu", async ({ page }) => {
test("tabbing out of item closes the select menu", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=select&");
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
let selectTrigger = page.locator(".dx-select-trigger");
await selectTrigger.click();
// Assert the select menu is open
const selectMenu = page.locator(".select-list");
const selectMenu = page.locator(".dx-select-list");
await expect(selectMenu).toHaveAttribute("data-state", "open");

// Assert the menu is focused
Expand All @@ -101,10 +101,10 @@ test("tabbing out of item closes the select menu", async ({ page }) => {
test("options selected", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=select&");
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
let selectTrigger = page.locator(".dx-select-trigger");
await selectTrigger.click();
// Assert the select menu is open
const selectMenu = page.locator(".select-list");
const selectMenu = page.locator(".dx-select-list");
await expect(selectMenu).toHaveAttribute("data-state", "open");

// Assert no items have aria-selected
Expand All @@ -130,8 +130,8 @@ test("options selected", async ({ page }) => {
test("down arrow selects first element", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=select&");
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
const selectMenu = page.locator(".select-list");
let selectTrigger = page.locator(".dx-select-trigger");
const selectMenu = page.locator(".dx-select-list");
await selectTrigger.focus();

// Select the first option
Expand All @@ -143,8 +143,8 @@ test("down arrow selects first element", async ({ page }) => {
test("up arrow selects last element", async ({ page }) => {
await page.goto("http://127.0.0.1:8080/component/?name=select&");
// Find Select a fruit...
let selectTrigger = page.locator(".select-trigger");
const selectMenu = page.locator(".select-list");
let selectTrigger = page.locator(".dx-select-trigger");
const selectMenu = page.locator(".dx-select-list");
await selectTrigger.focus();

// Select the first option
Expand Down
Loading
Loading