Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 03:49:22 -05:00
Code Issues Activity

✨ Check for auto-created set

Browse source
This commit is contained in:
Florian Schroedl 2024-11-25 11:10:17 +01:00
parent 439ca4b52c
commit 85fa635f66
4 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/playwright/ui/pages/WorkspacePage.js
View file

@ -79,6 +79,7 @@ export class WorkspacePage extends BaseWebSocketPage {
this.tokensUpdateCreateModal = page.getByTestId( this.tokensUpdateCreateModal = page.getByTestId(
"token-update-create-modal", "token-update-create-modal",
); );
this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
} }
async goToWorkspace({ async goToWorkspace({

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

@ -27,7 +27,9 @@ test.describe("Tokens: Tab", () => {
await expect(tokensTabPanel).toHaveText(/Themes/); await expect(tokensTabPanel).toHaveText(/Themes/);
}); });
test("Created color token shows up in the sidebar", async ({ page }) => { test("User creates color token and auto created set show up in the sidebar", async ({
page,
}) => {
const workspacePage = new WorkspacePage(page); const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile(); await workspacePage.setupEmptyFile();
await workspacePage.mockRPC( await workspacePage.mockRPC(
@ -83,5 +85,17 @@ test.describe("Tokens: Tab", () => {
// Tokens tab panel should have two tokens with the color red / #ff0000 // Tokens tab panel should have two tokens with the color red / #ff0000
await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2); await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2);
// Global set has been auto created and is active
await expect(
workspacePage.tokenThemesSetsSidebar.getByRole("button", {
name: "Global",
}),
).toHaveCount(1);
await expect(
workspacePage.tokenThemesSetsSidebar.getByRole("button", {
name: "Global",
}),
).toHaveAttribute("aria-checked", "true");
}); });
}); });

5
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -111,7 +111,7 @@
[{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}] [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}]
(let [set-name (.-name set) (let [set-name (.-name set)
editing?' (editing? tree-path) editing?' (editing? tree-path)
active?' (active? set-name) active?' (some? (active? set-name))
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps editing?' tree-path) (mf/deps editing?' tree-path)
@ -138,7 +138,8 @@
:selected-set selected?) :selected-set selected?)
:on-click on-click :on-click on-click
:on-double-click #(on-edit tree-path) :on-double-click #(on-edit tree-path)
:on-context-menu on-context-menu} :on-context-menu on-context-menu
:aria-checked active?'}
[:> icon* [:> icon*
{:id "document" {:id "document"
:class (stl/css-case :icon true :class (stl/css-case :icon true

3
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -239,7 +239,8 @@
on-open (mf/use-fn #(reset! open? true))] on-open (mf/use-fn #(reset! open? true))]
[:& sets-context/provider {} [:& sets-context/provider {}
[:& sets-context-menu] [:& sets-context-menu]
[:article {:class (stl/css :sets-section-wrapper) [:article {:data-testid "token-themes-sets-sidebar"
:class (stl/css :sets-section-wrapper)
:style {"--resize-height" (str resize-height "px")}} :style {"--resize-height" (str resize-height "px")}}
[:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sets-sidebar)}
[:& themes-header] [:& themes-header]