3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 22:16:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix toggling set groups in theme modal not working (#5733)

Browse source
This commit is contained in:
Florian Schrödl 2025-02-05 12:21:21 +01:00 • committed by GitHub
parent 48acc8715b
commit 86e0f8ad34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 441 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/playwright/data/workspace/get-file-tokens.json
View file

@ -1370,11 +1370,15 @@
}
}
],
[
"G-LightDark",
{
"~#ordered-map": [
[
"S-light",
{
"~#penpot/token-set": {
"~:name": "light",
"~:name": "LightDark/light",
"~:description": null,
"~:modified-at": "~m1737542498290",
"~:tokens": {
@ -1504,11 +1508,12 @@
}
}
],
[
"S-dark",
{
"~#penpot/token-set": {
"~:name": "dark",
"~:name": "LightDark/dark",
"~:description": null,
"~:modified-at": "~m1737542498291",
"~:tokens": {
@ -1637,6 +1642,9 @@
}
}
}
]
]
}
],
[
"S-theme",
@ -1742,7 +1750,7 @@
"~:is-source": false,
"~:modified-at": "~m1737542746842",
"~:sets": {
"~#set": ["light", "theme", "core"]
"~#set": ["LightDark/light", "theme", "core"]
}
}
}
@ -1757,7 +1765,7 @@
"~:is-source": false,
"~:modified-at": "~m1737542746842",
"~:sets": {
"~#set": ["dark", "theme", "core"]
"~#set": ["LightDark/dark", "theme", "core"]
}
}
}
@ -1779,7 +1787,7 @@
"~:is-source": false,
"~:modified-at": "~m1737542683555",
"~:sets": {
"~#set": ["light", "theme", "core"]
"~#set": ["LightDark/light", "theme", "core"]
}
}
}

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

@ -88,6 +88,9 @@ export class WorkspacePage extends BaseWebSocketPage {
this.tokensUpdateCreateModal = page.getByTestId(
"token-update-create-modal",
);
this.tokenThemeUpdateCreateModal = page.getByTestId(
"token-theme-update-create-modal",
);
this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
this.tokensSidebar = page.getByTestId("tokens-sidebar");
this.tokenSetItems = page.getByTestId("tokens-set-item");

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

@ -54,6 +54,7 @@ const setupTokensFile = async (page) => {
return {
workspacePage,
tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
tokenThemeUpdateCreateModal: workspacePage.tokenThemeUpdateCreateModal,
tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
tokenSetItems: workspacePage.tokenSetItems,
tokenSetGroupItems: workspacePage.tokenSetGroupItems,
@ -183,6 +184,89 @@ test.describe("Tokens: Tokens Tab", () => {
expect(colorTokenChanged).toBeVisible();
});
test("User edits theme and activates it in the sidebar", async ({ page }) => {
const {
workspacePage,
tokensUpdateCreateModal,
tokenThemesSetsSidebar,
tokensSidebar,
tokenContextMenuForToken,
tokenThemeUpdateCreateModal,
} = await setupTokensFile(page);
await expect(tokenThemesSetsSidebar).toBeVisible();
await tokenThemesSetsSidebar.getByRole("button", { name: "Edit" }).click();
await expect(tokenThemeUpdateCreateModal).toBeVisible();
await tokenThemeUpdateCreateModal
.getByRole("button", { name: "sets" })
.first()
.click();
await tokenThemeUpdateCreateModal.getByLabel("Theme").fill("Changed");
const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByRole("button", {
name: "LightDark",
exact: true,
});
await expect(lightDarkSetGroup).toBeVisible();
const lightSet = tokenThemeUpdateCreateModal.getByRole("button", {
name: "light",
exact: true,
});
const darkSet = tokenThemeUpdateCreateModal.getByRole("button", {
name: "dark",
exact: true,
});
// Mixed set group
await expect(lightSet.getByRole("checkbox")).toBeChecked();
await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
// Disable all
await lightDarkSetGroup.getByRole("checkbox").click();
await expect(lightSet.getByRole("checkbox")).not.toBeChecked();
await expect(darkSet.getByRole("checkbox")).not.toBeChecked();
// Enable all
await lightDarkSetGroup.getByRole("checkbox").click();
await expect(lightSet.getByRole("checkbox")).toBeChecked();
await expect(darkSet.getByRole("checkbox")).toBeChecked();
await tokenThemeUpdateCreateModal
.getByRole("button", {
name: "save theme",
})
.click();
await expect(
tokenThemeUpdateCreateModal.getByText("Changed" + "4 sets"),
).toBeVisible();
await tokenThemeUpdateCreateModal
.getByRole("button", { name: "Close" })
.click();
await expect(tokenThemeUpdateCreateModal).not.toBeVisible();
const themeSelect = tokenThemesSetsSidebar.getByRole("combobox");
await themeSelect.click();
await themeSelect.getByRole("option", { name: "Changed" }).click();
const sidebarLightSet = tokenThemesSetsSidebar.getByRole("button", {
name: "light",
exact: true,
});
const sidebarDarkSet = tokenThemesSetsSidebar.getByRole("button", {
name: "dark",
exact: true,
});
await expect(sidebarLightSet.getByRole("checkbox")).toBeChecked();
await expect(sidebarDarkSet.getByRole("checkbox")).toBeChecked();
});
test("User creates grouped color token", async ({ page }) => {
const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
await setupEmptyTokensFile(page);
@ -251,7 +335,7 @@ test.describe("Tokens: Sets Tab", () => {
// Create set in group
await tokenThemesSetsSidebar
.getByRole("button", { name: "Collapse core" })
.getByRole("button", { name: "core" })
.click({ button: "right" });
await expect(tokenContextMenuForSet).toBeVisible();
await tokenContextMenuForSet.getByText("Add set to this group").click();

99
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -158,7 +158,7 @@
:on-click create-theme}
(tr "workspace.token.create-theme-title")]]]))
(mf/defc theme-inputs
(mf/defc theme-inputs*
[{:keys [theme on-change-field]}]
(let [theme-groups (mf/deref refs/workspace-token-theme-groups)
theme-name-ref (mf/use-ref (:name theme))
@ -166,9 +166,14 @@
{:label group
:id group})
theme-groups)
on-update-group (partial on-change-field :group)
on-update-group
(mf/use-fn
(mf/deps on-change-field)
#(on-change-field :group %))
on-update-name
(mf/use-fn
(mf/deps on-change-field)
(fn [event]
(let [value (-> event dom/get-target dom/get-value)]
(on-change-field :name value)
@ -187,9 +192,10 @@
:label (tr "workspace.token.label.theme")
:type "text"
:on-change on-update-name
:value (mf/ref-val theme-name-ref)}]]]))
:value (mf/ref-val theme-name-ref)
:auto-focus true}]]]))
(mf/defc theme-modal-buttons
(mf/defc theme-modal-buttons*
[{:keys [close-modal on-save-form disabled?] :as props}]
[:*
[:> button* {:variant "secondary"
@ -206,45 +212,56 @@
[{:keys [set-state]}]
(let [theme (ctob/make-token-theme :name "")
on-back #(set-state (constantly {:type :themes-overview}))
on-submit (mf/use-fn
(fn [theme]
(st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"}))
(st/emit! (wdt/create-token-theme theme))))
theme-state (mf/use-state theme)
disabled? (-> (:name @theme-state)
theme-state* (mf/use-state theme)
theme-state (deref theme-state*)
disabled? (-> (:name theme-state)
(str/trim)
(str/empty?))
on-change-field (fn [field value]
(swap! theme-state #(assoc % field value)))
on-save-form (mf/use-callback
(mf/deps theme-state on-submit)
on-change-field
(mf/use-fn
(fn [field value]
(swap! theme-state* #(assoc % field value))))
on-save-form
(mf/use-callback
(mf/deps theme-state)
(fn [e]
(dom/prevent-default e)
(let [theme (-> @theme-state
(let [theme (-> theme-state
(update :name str/trim)
(update :group str/trim)
(update :description str/trim))]
(when-not (str/empty? (:name theme))
(on-submit theme)))
(st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-theme"}))
(st/emit! (wdt/create-token-theme theme))))
(on-back)))
close-modal (mf/use-fn
close-modal
(mf/use-fn
(fn [e]
(dom/prevent-default e)
(st/emit! (modal/hide))))]
[:div {:class (stl/css :themes-modal-wrapper)}
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
(tr "workspace.token.create-theme-title")]
[:form {:on-submit on-save-form}
[:div {:class (stl/css :create-theme-wrapper)}
[:& theme-inputs {:theme theme
[:> theme-inputs* {:theme theme
:on-change-field on-change-field}]
[:div {:class (stl/css :button-footer)}
[:& theme-modal-buttons {:close-modal close-modal
[:> theme-modal-buttons* {:close-modal close-modal
:on-save-form on-save-form
:disabled? disabled?}]]]]]))
(defn- make-lib-with-theme [theme sets]
(-> (ctob/make-tokens-lib)
(ctob/add-theme theme)
(ctob/add-sets sets)
(ctob/activate-theme (:group theme) (:name theme))))
(mf/defc controlled-edit-theme
[{:keys [state set-state]}]
(let [{:keys [theme-path]} @state
@ -252,30 +269,29 @@
ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
token-sets (mf/deref refs/workspace-token-sets-tree)
theme (mf/deref (refs/workspace-token-theme theme-group theme-name))
theme-state (mf/use-state theme)
lib (-> (ctob/make-tokens-lib)
(ctob/add-theme @theme-state)
(ctob/add-sets ordered-token-sets)
(ctob/activate-theme (:group @theme-state) (:name @theme-state)))
theme-state* (mf/use-state theme)
theme-state (deref theme-state*)
lib (make-lib-with-theme theme-state ordered-token-sets)
;; Form / Modal handlers
on-back #(set-state (constantly {:type :themes-overview}))
on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %))
disabled? (-> (:name @theme-state)
disabled? (-> (:name theme-state)
(str/trim)
(str/empty?))
on-change-field
(mf/use-fn
(fn [field value]
(swap! theme-state #(assoc % field value))))
(swap! theme-state* #(assoc % field value))))
on-save-form
(mf/use-callback
(mf/use-fn
(mf/deps theme-state on-submit)
(fn [e]
(dom/prevent-default e)
(let [theme (-> @theme-state
(let [theme (-> theme-state
(update :name str/trim)
(update :group str/trim)
(update :description str/trim))]
@ -298,28 +314,30 @@
;; Sets tree handlers
token-set-group-active?
(mf/use-callback
(mf/use-fn
(mf/deps theme-state)
(fn [group-path]
(ctob/sets-at-path-all-active? lib group-path)))
token-set-active?
(mf/use-callback
(mf/use-fn
(mf/deps theme-state)
(fn [set-name]
(get-in @theme-state [:sets set-name])))
(get-in theme-state [:sets set-name])))
on-toggle-token-set
(mf/use-callback
(mf/use-fn
(mf/deps theme-state)
(fn [set-name]
(swap! theme-state #(ctob/toggle-set % set-name))))
(swap! theme-state* #(ctob/toggle-set % set-name))))
on-toggle-token-set-group
(mf/use-callback
(mf/deps theme-state)
(mf/use-fn
(mf/deps theme-state ordered-token-sets)
(fn [group-path]
(swap! theme-state #(clt/toggle-token-set-group group-path lib %))))
(swap! theme-state* (fn [theme']
(let [lib' (make-lib-with-theme theme' ordered-token-sets)]
(clt/toggle-token-set-group group-path lib' theme'))))))
on-click-token-set
(mf/use-callback
@ -340,7 +358,7 @@
[:> icon* {:icon-id ic/arrow-left :aria-hidden true}]
(tr "workspace.token.back-to-themes")]
[:& theme-inputs {:theme theme
[:> theme-inputs* {:theme theme
:on-change-field on-change-field}]
[:> text* {:as "span" :typography "body-small" :class (stl/css :select-sets-message)}
(tr "workspace.token.set-selection-theme")]
@ -364,7 +382,7 @@
:on-click on-delete-token}
(tr "labels.delete")]
[:div {:class (stl/css :button-footer)}
[:& theme-modal-buttons {:close-modal close-modal
[:> theme-modal-buttons* {:close-modal close-modal
:on-save-form on-save-form
:disabled? disabled?}]]]]]]))
@ -390,7 +408,8 @@
[_args]
(let [handle-close-dialog (mf/use-callback #(st/emit! (modal/hide)))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog)}
[:div {:class (stl/css :modal-dialog)
:data-testid "token-theme-update-create-modal"}
[:> icon-button* {:class (stl/css :close-btn)
:on-click handle-close-dialog
:aria-label (tr "labels.close")

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

@ -107,6 +107,8 @@
editing?' (editing? editing-id)
collapsed? (some? (get @collapsed-paths tree-path))
can-edit? (:can-edit (deref refs/permissions))
;; Used by playwright to get the correct item by label
label-id (str editing-id "-label")
on-context-menu
(mf/use-fn
@ -165,6 +167,7 @@
[:div {:ref dref
:role "button"
:aria-labelledby label-id
:data-testid "tokens-set-group-item"
:style {"--tree-depth" tree-depth}
:class (stl/css-case :set-item-container true
@ -188,7 +191,8 @@
:on-submit on-edit-submit'}]
[:*
[:div {:class (stl/css :set-name)
:on-double-click on-double-click}
:on-double-click on-double-click
:id label-id}
label]
[:& checkbox
{:on-click on-checkbox-click