🐛 Fix modal title on edit token (#7453)

* 🐛 Fix modal title on edit token

* 🐛 Fix font size on numeric input

* ♻️ Update color token border on hover

* ♻️ Use swatch component on token pill
This commit is contained in:
Eva Marco
2025-10-07 12:11:40 +02:00
committed by GitHub
parent 31af6aebbd
commit ea1ab7c23b
6 changed files with 8 additions and 6 deletions

View File

@@ -174,7 +174,7 @@ test.describe("Tokens: Tokens Tab", () => {
).toBeEnabled(); ).toBeEnabled();
// 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.getByRole("button", {name: "#ff0000"})).toHaveCount(2);
// Global set has been auto created and is active // Global set has been auto created and is active
await expect( await expect(

View File

@@ -623,6 +623,7 @@
:on-key-down on-key-down :on-key-down on-key-down
:on-focus on-focus :on-focus on-focus
:on-change store-raw-value :on-change store-raw-value
:variant "comfortable"
:disabled disabled :disabled disabled
:slot-start (when icon :slot-start (when icon
(mf/html [:> tooltip* (mf/html [:> tooltip*

View File

@@ -276,7 +276,7 @@
&:hover { &:hover {
--token-color-wrapper-background-color: var(--color-token-background); --token-color-wrapper-background-color: var(--color-token-background);
--token-color-wrapper-foreground-color: var(--color-foreground-primary); --token-color-wrapper-foreground-color: var(--color-foreground-primary);
--token-color-wrapper-border-color: var(--color-token-background); --token-color-wrapper-border-color: var(--color-token-accent);
--token-actions-display: flex; --token-actions-display: flex;
} }
} }

View File

@@ -548,7 +548,7 @@
[:div {:class (stl/css :token-rows)} [:div {:class (stl/css :token-rows)}
[:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)} [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :form-modal-title)}
(if (= action "edit") (if (= action "edit")
(tr "workspace.tokens.edit-token") (tr "workspace.tokens.edit-token" token-type)
(tr "workspace.tokens.create-token" token-type))] (tr "workspace.tokens.create-token" token-type))]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}

View File

@@ -17,9 +17,9 @@
[app.main.data.workspace.tokens.color :as dwtc] [app.main.data.workspace.tokens.color :as dwtc]
[app.main.data.workspace.tokens.format :as dwtf] [app.main.data.workspace.tokens.format :as dwtf]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
[app.main.ui.ds.utilities.swatch :refer [swatch*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[clojure.set :as set] [clojure.set :as set]
@@ -298,7 +298,8 @@
:class (stl/css :token-pill-icon)}] :class (stl/css :token-pill-icon)}]
color color
[:& color-bullet {:color color :mini true}] [:> swatch* {:background color
:size "small"}]
status-icon? status-icon?
[:> token-status-icon* [:> token-status-icon*

View File

@@ -7428,7 +7428,7 @@ msgstr "Edit themes"
#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 #: src/app/main/ui/workspace/tokens/management/create/form.cljs:533
msgid "workspace.tokens.edit-token" msgid "workspace.tokens.edit-token"
msgstr "Edit token %s" msgstr "Edit %s token"
#: src/app/main/data/workspace/tokens/errors.cljs:41 #: src/app/main/data/workspace/tokens/errors.cljs:41
msgid "workspace.tokens.empty-input" msgid "workspace.tokens.empty-input"