mirror of
https://github.com/penpot/penpot.git
synced 2025-04-06 03:51:21 -05:00
🐛 Fix user cant submit existing token when editing name only (#5658)
* 🐛 Fix user cant submit existing token when editing it
This commit is contained in:
Florian Schrödl
GitHub
parent
92d14e38b5
commit
ab72794994
7 changed files with 2383 additions and 13 deletions
469
frontend/playwright/data/workspace/get-file-fragment-tokens.json
Normal file
469
frontend/playwright/data/workspace/get-file-fragment-tokens.json
Normal file
|
|
@ -0,0 +1,469 @@
|
|||
{
|
||||
"~:id": "~u51e13852-1a8e-8037-8005-9eabb500f7c7",
|
||||
"~:file-id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f6",
|
||||
"~:created-at": "~m1737542758401",
|
||||
"~:data": {
|
||||
"~:options": {},
|
||||
"~:objects": {
|
||||
"~u00000000-0000-0000-0000-000000000000": {
|
||||
"~#shape": {
|
||||
"~:y": 0,
|
||||
"~:hide-fill-on-export": false,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:name": "Root Frame",
|
||||
"~:width": 0.01,
|
||||
"~:type": "~:frame",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.0,
|
||||
"~:y": 0.0
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.01,
|
||||
"~:y": 0.0
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.01,
|
||||
"~:y": 0.01
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.0,
|
||||
"~:y": 0.01
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:r2": 0,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:r3": 0,
|
||||
"~:r1": 0,
|
||||
"~:id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 0,
|
||||
"~:proportion": 1.0,
|
||||
"~:r4": 0,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 0,
|
||||
"~:y": 0,
|
||||
"~:width": 0.01,
|
||||
"~:height": 0.01,
|
||||
"~:x1": 0,
|
||||
"~:y1": 0,
|
||||
"~:x2": 0.01,
|
||||
"~:y2": 0.01
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#FFFFFF",
|
||||
"~:fill-opacity": 1
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:height": 0.01,
|
||||
"~:flip-y": null,
|
||||
"~:shapes": [
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab7c0c8759",
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab169af180",
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab3a0c8159"
|
||||
]
|
||||
}
|
||||
},
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab169af180": {
|
||||
"~#shape": {
|
||||
"~:y": 605.5,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:fixed",
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Rectangle",
|
||||
"~:width": 278,
|
||||
"~:type": "~:rect",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 388,
|
||||
"~:y": 605.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 666,
|
||||
"~:y": 605.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 666,
|
||||
"~:y": 680.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 388,
|
||||
"~:y": 680.5
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:r2": 8,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:layout-item-v-sizing": "~:fix",
|
||||
"~:r3": 8,
|
||||
"~:r1": 8,
|
||||
"~:id": "~uc5b31054-fb6d-80a9-8005-9eab169af180",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:applied-tokens": {
|
||||
"~:fill": "button.primary.background",
|
||||
"~:r1": "button.borderRadius",
|
||||
"~:r2": "button.borderRadius",
|
||||
"~:r3": "button.borderRadius",
|
||||
"~:r4": "button.borderRadius"
|
||||
},
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 388,
|
||||
"~:proportion": 1,
|
||||
"~:r4": 8,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 388,
|
||||
"~:y": 605.5,
|
||||
"~:width": 278,
|
||||
"~:height": 75,
|
||||
"~:x1": 388,
|
||||
"~:y1": 605.5,
|
||||
"~:x2": 666,
|
||||
"~:y2": 680.5
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#7f9cf5"
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:height": 75,
|
||||
"~:flip-y": null
|
||||
}
|
||||
},
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab3a0c8159": {
|
||||
"~#shape": {
|
||||
"~:y": 625,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:auto-width",
|
||||
"~:content": {
|
||||
"~:type": "root",
|
||||
"~:children": [
|
||||
{
|
||||
"~:type": "paragraph-set",
|
||||
"~:children": [
|
||||
{
|
||||
"~:line-height": "1.2",
|
||||
"~:font-style": "normal",
|
||||
"~:children": [
|
||||
{
|
||||
"~:line-height": "1.2",
|
||||
"~:font-style": "normal",
|
||||
"~:typography-ref-id": null,
|
||||
"~:text-transform": "none",
|
||||
"~:text-align": "left",
|
||||
"~:font-id": "sourcesanspro",
|
||||
"~:font-size": "30",
|
||||
"~:font-weight": "400",
|
||||
"~:typography-ref-file": null,
|
||||
"~:text-direction": "ltr",
|
||||
"~:font-variant-id": "regular",
|
||||
"~:text-decoration": "none",
|
||||
"~:letter-spacing": "0",
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"~:font-family": "sourcesanspro",
|
||||
"~:text": "Button"
|
||||
}
|
||||
],
|
||||
"~:typography-ref-id": null,
|
||||
"~:text-transform": "none",
|
||||
"~:text-align": "left",
|
||||
"~:font-id": "sourcesanspro",
|
||||
"~:key": "2623a",
|
||||
"~:font-size": "30",
|
||||
"~:font-weight": "400",
|
||||
"~:typography-ref-file": null,
|
||||
"~:text-direction": "ltr",
|
||||
"~:type": "paragraph",
|
||||
"~:font-variant-id": "regular",
|
||||
"~:text-decoration": "none",
|
||||
"~:letter-spacing": "0",
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"~:font-family": "sourcesanspro"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Button",
|
||||
"~:width": 87,
|
||||
"~:type": "~:text",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 483.5,
|
||||
"~:y": 625
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 570.5,
|
||||
"~:y": 625
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 570.5,
|
||||
"~:y": 661
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 483.5,
|
||||
"~:y": 661
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:id": "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:applied-tokens": {
|
||||
"~:fill": "button.primary.text"
|
||||
},
|
||||
"~:position-data": [
|
||||
{
|
||||
"~#rect": {
|
||||
"~:y": 662.3333345651627,
|
||||
"~:font-style": "normal",
|
||||
"~:text-transform": "none",
|
||||
"~:font-size": "30px",
|
||||
"~:font-weight": "400",
|
||||
"~:y1": -1.3333333730697632,
|
||||
"~:width": 86.60417175292969,
|
||||
"~:text-decoration": "none solid rgb(0, 0, 0)",
|
||||
"~:letter-spacing": "normal",
|
||||
"~:x": 483.5,
|
||||
"~:x1": 0,
|
||||
"~:y2": 37.33333456516266,
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"~:x2": 86.60417175292969,
|
||||
"~:direction": "ltr",
|
||||
"~:font-family": "sourcesanspro",
|
||||
"~:height": 38.66666793823242,
|
||||
"~:text": "Button"
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:x": 483.5,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 483.5,
|
||||
"~:y": 625,
|
||||
"~:width": 87,
|
||||
"~:height": 36,
|
||||
"~:x1": 483.5,
|
||||
"~:y1": 625,
|
||||
"~:x2": 570.5,
|
||||
"~:y2": 661
|
||||
}
|
||||
},
|
||||
"~:flip-x": null,
|
||||
"~:height": 36,
|
||||
"~:flip-y": null
|
||||
}
|
||||
},
|
||||
"~uc5b31054-fb6d-80a9-8005-9eab7c0c8759": {
|
||||
"~#shape": {
|
||||
"~:y": 396,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:fixed",
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Rectangle",
|
||||
"~:width": 494,
|
||||
"~:type": "~:rect",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 280,
|
||||
"~:y": 396
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 774,
|
||||
"~:y": 396
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 774,
|
||||
"~:y": 890
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 280,
|
||||
"~:y": 890
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:r2": 8,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:r3": 8,
|
||||
"~:r1": 8,
|
||||
"~:id": "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:applied-tokens": {
|
||||
"~:fill": "card.background",
|
||||
"~:r1": "card.borderRadius",
|
||||
"~:r2": "card.borderRadius",
|
||||
"~:r3": "card.borderRadius",
|
||||
"~:r4": "card.borderRadius"
|
||||
},
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 280,
|
||||
"~:proportion": 1,
|
||||
"~:r4": 8,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 280,
|
||||
"~:y": 396,
|
||||
"~:width": 494,
|
||||
"~:height": 494,
|
||||
"~:x1": 280,
|
||||
"~:y1": 396,
|
||||
"~:x2": 774,
|
||||
"~:y2": 890
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:height": 494,
|
||||
"~:flip-y": null
|
||||
}
|
||||
}
|
||||
},
|
||||
"~:id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f7",
|
||||
"~:name": "Page 1",
|
||||
"~:background": "#e8eae9",
|
||||
"~:guides": {
|
||||
"~uc5b31054-fb6d-80a9-8005-9eaaba69431e": {
|
||||
"~:position": 182,
|
||||
"~:frame-id": null,
|
||||
"~:id": "~uc5b31054-fb6d-80a9-8005-9eaaba69431e",
|
||||
"~:axis": "~:x"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1798
frontend/playwright/data/workspace/get-file-tokens.json
Normal file
1798
frontend/playwright/data/workspace/get-file-tokens.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -89,8 +89,12 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||
"token-update-create-modal",
|
||||
);
|
||||
this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
|
||||
this.tokensSidebar = page.getByTestId("tokens-sidebar");
|
||||
this.tokenSetItems = page.getByTestId("tokens-set-item");
|
||||
this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item");
|
||||
this.tokenContextMenuForToken = page.getByTestId(
|
||||
"tokens-context-menu-for-token",
|
||||
);
|
||||
}
|
||||
|
||||
async goToWorkspace({
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
|
|||
await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
|
||||
});
|
||||
|
||||
const setupFileWithTokens = async (page) => {
|
||||
const setupEmptyTokensFile = async (page) => {
|
||||
const workspacePage = new WorkspacePage(page);
|
||||
await workspacePage.setupEmptyFile();
|
||||
await workspacePage.mockRPC(
|
||||
|
|
@ -29,12 +29,44 @@ const setupFileWithTokens = async (page) => {
|
|||
};
|
||||
};
|
||||
|
||||
const setupTokensFile = async (page) => {
|
||||
const workspacePage = new WorkspacePage(page);
|
||||
await workspacePage.setupEmptyFile();
|
||||
await workspacePage.mockRPC(
|
||||
"get-team?id=*",
|
||||
"workspace/get-team-tokens.json",
|
||||
);
|
||||
await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-tokens.json");
|
||||
await workspacePage.mockRPC(
|
||||
/get\-file\-fragment\?/,
|
||||
"workspace/get-file-fragment-tokens.json",
|
||||
);
|
||||
|
||||
await workspacePage.goToWorkspace({
|
||||
fileId: "51e13852-1a8e-8037-8005-9e9413a1f1f6",
|
||||
pageId: "51e13852-1a8e-8037-8005-9e9413a1f1f7",
|
||||
});
|
||||
|
||||
const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
|
||||
await tokensTabButton.click();
|
||||
|
||||
return {
|
||||
workspacePage,
|
||||
tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
|
||||
tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
|
||||
tokenSetItems: workspacePage.tokenSetItems,
|
||||
tokenSetGroupItems: workspacePage.tokenSetGroupItems,
|
||||
tokensSidebar: workspacePage.tokensSidebar,
|
||||
tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
|
||||
};
|
||||
};
|
||||
|
||||
test.describe("Tokens: Tokens Tab", () => {
|
||||
test("Clicking tokens tab button opens tokens sidebar tab", async ({
|
||||
page,
|
||||
}) => {
|
||||
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
|
||||
await setupFileWithTokens(page);
|
||||
await setupEmptyTokensFile(page);
|
||||
|
||||
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
|
||||
|
||||
|
|
@ -46,7 +78,7 @@ test.describe("Tokens: Tokens Tab", () => {
|
|||
page,
|
||||
}) => {
|
||||
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
|
||||
await setupFileWithTokens(page);
|
||||
await setupEmptyTokensFile(page);
|
||||
|
||||
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
|
||||
await tokensTabPanel.getByTitle("Add token: Color").click();
|
||||
|
|
@ -106,9 +138,56 @@ test.describe("Tokens: Tokens Tab", () => {
|
|||
).toHaveAttribute("aria-checked", "true");
|
||||
});
|
||||
|
||||
test("User edits token and auto created set show up in the sidebar", async ({
|
||||
page,
|
||||
}) => {
|
||||
const {
|
||||
workspacePage,
|
||||
tokensUpdateCreateModal,
|
||||
tokenThemesSetsSidebar,
|
||||
tokensSidebar,
|
||||
tokenContextMenuForToken,
|
||||
} = await setupTokensFile(page);
|
||||
|
||||
await expect(tokensSidebar).toBeVisible();
|
||||
|
||||
const tokensColorGroup = tokensSidebar.getByRole("button", {
|
||||
name: "Color 92",
|
||||
});
|
||||
await expect(tokensColorGroup).toBeVisible;
|
||||
await tokensColorGroup.click();
|
||||
|
||||
const colorToken = tokensSidebar.getByRole("button", {
|
||||
name: "colors.blue.100",
|
||||
});
|
||||
await expect(colorToken).toBeVisible;
|
||||
await colorToken.click({ button: "right" });
|
||||
|
||||
await expect(tokenContextMenuForToken).toBeVisible();
|
||||
await tokenContextMenuForToken.getByText("Edit token").click();
|
||||
|
||||
await expect(tokensUpdateCreateModal).toBeVisible();
|
||||
|
||||
const nameField = tokensUpdateCreateModal.getByLabel("Name");
|
||||
await nameField.pressSequentially(".changed");
|
||||
|
||||
const submitButton = tokensUpdateCreateModal.getByRole("button", {
|
||||
name: "Save",
|
||||
});
|
||||
await expect(submitButton).toBeEnabled();
|
||||
await submitButton.click();
|
||||
|
||||
await expect(tokensUpdateCreateModal).not.toBeVisible();
|
||||
|
||||
const colorTokenChanged = tokensSidebar.getByRole("button", {
|
||||
name: "colors.blue.100.changed",
|
||||
});
|
||||
expect(colorTokenChanged).toBeVisible();
|
||||
});
|
||||
|
||||
test("User creates grouped color token", async ({ page }) => {
|
||||
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
|
||||
await setupFileWithTokens(page);
|
||||
await setupEmptyTokensFile(page);
|
||||
|
||||
const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
|
||||
await tokensTabPanel.getByTitle("Add token: Color").click();
|
||||
|
|
@ -156,7 +235,7 @@ test.describe("Tokens: Sets Tab", () => {
|
|||
// tokenThemesSetsSidebar,
|
||||
// tokenSetItems,
|
||||
// tokenSetGroupItems,
|
||||
// } = await setupFileWithTokens(page);
|
||||
// } = await setupEmptyTokensFile(page);
|
||||
//
|
||||
// const tokensTabButton = tokenThemesSetsSidebar
|
||||
// .getByRole("button", { name: "Add set" })
|
||||
|
|
|
|||
|
|
@ -392,6 +392,7 @@
|
|||
[:& dropdown {:show is-open?
|
||||
:on-close #(st/emit! dt/hide-token-context-menu)}
|
||||
[:div {:class (stl/css :token-context-menu)
|
||||
:data-testid "tokens-context-menu-for-token"
|
||||
:ref dropdown-ref
|
||||
:data-direction dropdown-direction
|
||||
:style {:--bottom (if (= dropdown-direction "up")
|
||||
|
|
|
|||
|
|
@ -216,7 +216,8 @@
|
|||
(mf/defc form
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [token token-type action selected-token-set-name]}]
|
||||
(let [token (or token {:type token-type})
|
||||
(let [create? (not (instance? ctob/Token token))
|
||||
token (or token {:type token-type})
|
||||
token-properties (wtty/get-token-properties token)
|
||||
color? (wtt/color-token? token)
|
||||
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
|
||||
|
|
@ -292,7 +293,8 @@
|
|||
color-ramp-open? (mf/use-state false)
|
||||
value-input-ref (mf/use-ref nil)
|
||||
value-ref (mf/use-var (:value token))
|
||||
token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
|
||||
token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
|
||||
token-resolve-result (deref token-resolve-result*)
|
||||
set-resolve-value
|
||||
(mf/use-fn
|
||||
(fn [token-or-err]
|
||||
|
|
@ -301,7 +303,7 @@
|
|||
token-or-err
|
||||
(:resolved-value token-or-err))]
|
||||
(when color? (reset! color (if error? nil v)))
|
||||
(reset! token-resolve-result v))))
|
||||
(reset! token-resolve-result* v))))
|
||||
on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
|
||||
on-update-value (mf/use-fn
|
||||
(mf/deps on-update-value-debounced)
|
||||
|
|
@ -321,10 +323,10 @@
|
|||
(fn []
|
||||
(swap! color-ramp-open? not)))
|
||||
|
||||
value-error? (seq (:errors @token-resolve-result))
|
||||
value-error? (seq (:errors token-resolve-result))
|
||||
valid-value-field? (and
|
||||
(not value-error?)
|
||||
(valid-value? @token-resolve-result))
|
||||
(valid-value? token-resolve-result))
|
||||
|
||||
;; Description
|
||||
description-ref (mf/use-var (:description token))
|
||||
|
|
@ -395,6 +397,22 @@
|
|||
(dom/prevent-default e)
|
||||
(modal/hide!)))]
|
||||
|
||||
;; Clear form token cache on mount
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(reset! form-token-cache-atom nil)))
|
||||
|
||||
;; Update the value when editing an existing token
|
||||
;; so the user doesn't have to interact with the form to validate the token
|
||||
(mf/use-effect
|
||||
(mf/deps create? resolved-tokens token token-resolve-result set-resolve-value)
|
||||
(fn []
|
||||
(when (and (not create?)
|
||||
(not token-resolve-result)
|
||||
resolved-tokens)
|
||||
(-> (get resolved-tokens @name-ref)
|
||||
(set-resolve-value)))))
|
||||
|
||||
[:form {:class (stl/css :form-wrapper)
|
||||
:on-submit on-submit}
|
||||
[:div {:class (stl/css :token-rows)}
|
||||
|
|
@ -443,10 +461,10 @@
|
|||
[:> input-token-color-bullet*
|
||||
{:color @color :on-click on-display-colorpicker}])]
|
||||
(when @color-ramp-open?
|
||||
[:> ramp* {:color (some-> (or @token-resolve-result (:value token))
|
||||
[:> ramp* {:color (some-> (or token-resolve-result (:value token))
|
||||
(tinycolor/valid-color))
|
||||
:on-change on-update-color}])
|
||||
[:& token-value-or-errors {:result-or-errors @token-resolve-result}]]
|
||||
[:& token-value-or-errors {:result-or-errors token-resolve-result}]]
|
||||
|
||||
[:div {:class (stl/css :input-row)}
|
||||
[:> input-tokens*
|
||||
|
|
|
|||
|
|
@ -370,7 +370,8 @@
|
|||
(use-resize-hook :tokens 200 38 400 :y false nil)]
|
||||
[:div {:class (stl/css :sidebar-wrapper)}
|
||||
[:& themes-sets-tab {:resize-height size-pages-opened}]
|
||||
[:article {:class (stl/css :tokens-section-wrapper)}
|
||||
[:article {:class (stl/css :tokens-section-wrapper)
|
||||
:data-testid "tokens-sidebar"}
|
||||
[:div {:class (stl/css :resize-area-horiz)
|
||||
:on-pointer-down on-pointer-down-pages
|
||||
:on-lost-pointer-capture on-lost-pointer-capture-pages
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue