3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 23:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix text ellipsis on long token names and grouped tokens

Browse source
This commit is contained in:
Eva Marco 2025-01-14 10:24:41 +01:00
parent 6eea633ca9
commit 68a0d74f0e
4 changed files with 61 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

33
frontend/playwright/ui/specs/tokens.spec.js
View file

@ -70,7 +70,7 @@ test.describe("Tokens: Tokens Tab", () => {
await expect(submitButton).toBeEnabled();
await submitButton.click();
await expect(tokensTabPanel.getByText("color.primary")).toBeEnabled();
await expect(tokensTabPanel.getByLabel("primary")).toBeEnabled();
// Create token referencing the previous one with keyboard
@ -87,7 +87,7 @@ test.describe("Tokens: Tokens Tab", () => {
await expect(submitButton).toBeEnabled();
await nameField.press("Enter");
const referenceToken = tokensTabPanel.getByText("color.secondary");
const referenceToken = tokensTabPanel.getByLabel("color.secondary");
await expect(referenceToken).toBeEnabled();
// Tokens tab panel should have two tokens with the color red / #ff0000
@ -105,6 +105,35 @@ test.describe("Tokens: Tokens Tab", () => {
}),
).toHaveAttribute("aria-checked", "true");
});
test("User creates grouped color token", async ({ page }) => {
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupFileWithTokens(page);
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
await tokensTabPanel.getByTitle("Add token: Color").click();
// Create grouped color token with mouse
await expect(tokensUpdateCreateModal).toBeVisible();
const nameField = tokensUpdateCreateModal.getByLabel("Name");
const valueField = tokensUpdateCreateModal.getByLabel("Value");
await nameField.click();
await nameField.fill("color.dark.primary");
await valueField.click();
await valueField.fill("red");
const submitButton = tokensUpdateCreateModal.getByRole("button", {
name: "Save",
});
await expect(submitButton).toBeEnabled();
await submitButton.click();
await expect(tokensTabPanel.getByLabel("color.dark.primary")).toBeEnabled();
});
});
test.describe("Tokens: Sets Tab", () => {