mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-19 14:14:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Toggle token path on token rename

Browse Source
This commit is contained in:
Elena Torró
2026-05-19 11:35:30 +02:00
committed by GitHub
parent ed746bb694
commit d9ee28229c
3 changed files with 80 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/playwright/ui/specs/tokens/tree.spec.js
View File

@@ -141,6 +141,49 @@ test.describe("Tokens - node tree", () => {
await expect(darkerNodeToken).toBeVisible();
});
test("Renaming a token into a collapsed group auto-expands that group", async ({
page,
}) => {
const { tokensSidebar, tokensUpdateCreateModal, tokenContextMenuForToken } =
await setupTokensFileRender(page);
// Create tokens in two separate groups
await createToken(page, "Color", "dark.base", "Value", "#000000");
await createToken(page, "Color", "light.accent", "Value", "#ffffff");
const lightGroup = tokensSidebar.getByRole("button", {
name: "light",
exact: true,
});
// Collapse the light group so its children are hidden
await lightGroup.click();
const lightAccentToken = tokensSidebar.getByRole("button", {
name: "accent",
});
await expect(lightAccentToken).not.toBeVisible();
// Open the edit modal for the dark.base token
const darkBaseToken = tokensSidebar.getByRole("button", { name: "base" });
await darkBaseToken.click({ button: "right" });
await tokenContextMenuForToken.getByText("Edit token").click();
await expect(tokensUpdateCreateModal).toBeVisible();
// Rename to move it into the collapsed light group
const nameField = tokensUpdateCreateModal.getByLabel("Name");
await nameField.fill("light.base");
await tokensUpdateCreateModal
.getByRole("button", { name: "Save" })
.click();
// After rename, light group should be auto-expanded and both tokens visible
await expect(lightGroup).toBeVisible();
await expect(lightAccentToken).toBeVisible();
await expect(tokensSidebar.getByRole("button", { name: "base" })).toBeVisible();
});
test("User removes node and all child tokens", async ({ page }) => {
const { tokensSidebar } = await setupTokensFileRender(page);

18
frontend/src/app/main/data/workspace/tokens/library_edit.cljs
View File

@@ -203,7 +203,22 @@
(remove-path path paths)
(add-path path paths))))))))
(defn toggle-nested-token-path
[token-type new-name]
(ptk/reify ::toggle-nested-token-path
ptk/UpdateEvent
(update [_ state]
(let [type-str (name token-type)
segments (str/split new-name ".")
n-groups (dec (count segments))]
(if (pos? n-groups)
(update-in state [:workspace-tokens :folded-token-paths]
(fn [paths]
(reduce (fn [ps i]
(remove-path (str type-str "." (str/join "." (take i segments))) ps))
(or paths [])
(range 1 (inc n-groups)))))
state)))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; TOKENS Actions
@@ -582,6 +597,7 @@
(pcb/set-token (ctob/get-id token-set)
id
token'))]
(toggle-token-path (str (name token-type) "." (:name token)))
(rx/of (dch/commit-changes changes)
(ev/event (-> {::ev/name "edit-token" :type token-type}
(merge (meta it))))))))))

36
frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
View File

@@ -48,7 +48,6 @@
(if (= active-tab :reference)
(get value :reference)
value)
value))
(mf/defc form*
@@ -158,9 +157,10 @@
on-remap-token
(mf/use-fn
(mf/deps token)
(mf/deps token token-type)
(fn [valid-token new-name old-name description]
(st/emit!
(dwtl/toggle-nested-token-path token-type new-name)
(dwtl/update-token (:id token)
{:name new-name
:value (:value valid-token)
@@ -171,9 +171,10 @@
on-rename-token
(mf/use-fn
(mf/deps token)
(mf/deps token token-type)
(fn [valid-token name description]
(st/emit!
(dwtl/toggle-nested-token-path token-type name)
(dwtl/update-token (:id token)
{:name name
:value (:value valid-token)
@@ -210,19 +211,22 @@
(st/emit! (modal/show :tokens/remapping-confirmation {:remap-data remap-data
:on-remap on-remap
:on-rename on-rename}))
(st/emit!
(if is-create
(dwtl/create-token (ctob/make-token {:name name
:type token-type
:value (:value valid-token)
:description description}))
(dwtl/update-token (:id token)
{:name name
:value (:value valid-token)
:description description}))
(dwtl/open-token-type (:type token))
(dwtp/propagate-workspace-tokens)
(modal/hide!)))))
(do
(when is-rename
(st/emit! (dwtl/toggle-nested-token-path token-type name)))
(st/emit!
(if is-create
(dwtl/create-token (ctob/make-token {:name name
:type token-type
:value (:value valid-token)
:description description}))
(dwtl/update-token (:id token)
{:name name
:value (:value valid-token)
:description description}))
(dwtl/open-token-type (:type token))
(dwtp/propagate-workspace-tokens)
(modal/hide!))))))
;; WORKAROUND: display validation errors in the form instead of crashing
(fn [{:keys [errors]}]
(let [error-messages (wte/humanize-errors errors)