johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

✨ Implement text case token (#6978)

Browse Source
This commit is contained in:
Florian Schrödl
2025-07-28 17:36:06 +02:00
committed by GitHub
parent 2913899aa5
commit 4c605b8151
13 changed files with 116 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
common/src/app/common/types/token.cljc
View File

@@ -37,6 +37,7 @@
:font-family "fontFamilies"
:font-size "fontSizes"
:letter-spacing "letterSpacing"
:text-case "textCase"
:number "number"
:opacity "opacity"
:other "other"
@@ -154,7 +155,16 @@
(def font-family-keys (schema-keys schema:font-family))
(def typography-keys (set/union font-size-keys letter-spacing-keys font-family-keys))
(def ^:private schema:text-case
[:map
[:text-case {:optional true} token-name-ref]])
(def text-case-keys (schema-keys schema:text-case))
(def typography-keys (set/union font-size-keys
letter-spacing-keys
font-family-keys
text-case-keys))
;; TODO: Created to extract the font-size feature from the typography feature flag.
;; Delete this once the typography feature flag is removed.
@@ -191,6 +201,7 @@
schema:font-size
schema:letter-spacing
schema:font-family
schema:text-case
schema:dimensions])
(defn shape-attr->token-attrs
@@ -221,6 +232,7 @@
(font-size-keys shape-attr) #{shape-attr}
(letter-spacing-keys shape-attr) #{shape-attr}
(font-family-keys shape-attr) #{shape-attr}
(text-case-keys shape-attr) #{shape-attr}
(border-radius-keys shape-attr) #{shape-attr}
(sizing-keys shape-attr) #{shape-attr}
(opacity-keys shape-attr) #{shape-attr}

19
frontend/src/app/main/data/style_dictionary.cljs
View File

@@ -157,6 +157,24 @@
:else {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]})))
(defn- parse-sd-token-text-case-value
"Parses `value` of a text-case `sd-token` into a map like `{:value \"uppercase\"}`.
If the `value` is not parseable and/or has missing references returns a map with `:errors`."
[value]
(let [normalized-value (str/lower (str/trim value))
valid? (contains? #{"none" "uppercase" "lowercase" "capitalize"} normalized-value)
references (seq (ctob/find-token-value-references value))]
(cond
valid?
{:value normalized-value}
references
{:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)]
:references references}
:else
{:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value-text-case value)]})))
(defn process-sd-tokens
"Converts a StyleDictionary dictionary with resolved tokens (aka `sd-tokens`) back to clojure.
The `get-origin-token` argument should be a function that takes an
@@ -199,6 +217,7 @@
:color (parse-sd-token-color-value value)
:opacity (parse-sd-token-opacity-value value has-references?)
:stroke-width (parse-sd-token-stroke-width-value value has-references?)
:text-case (parse-sd-token-text-case-value value)
:number (parse-sd-token-number-value value)
(parse-sd-token-general-value value))
output-token (cond (:errors parsed-token-value)

15
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

@@ -298,6 +298,13 @@
(when (number? value)
(generate-text-shape-update {:font-size (str value)} shape-ids page-id))))
(defn update-text-case
([value shape-ids attributes] (update-text-case value shape-ids attributes nil))
([value shape-ids _attributes page-id]
(when (string? value)
(generate-text-shape-update {:text-transform value} shape-ids page-id))))
;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
(defn apply-token
@@ -464,6 +471,14 @@
:fields [{:label "Font Family"
:key :font-family}]}}
:text-case
{:title "Text Case"
:attributes ctt/text-case-keys
:on-update-shape update-text-case
:modal {:key :tokens/text-case
:fields [{:label "Text Case"
:key :text-case}]}}
:stroke-width
{:title "Stroke Width"
:attributes ctt/stroke-width-keys

4
frontend/src/app/main/data/workspace/tokens/errors.cljs
View File

@@ -72,6 +72,10 @@
{:error/code :error.style-dictionary/invalid-token-value-stroke-width
:error/fn #(str/join "\n" [(str (tr "workspace.tokens.invalid-value" %) ".") (tr "workspace.tokens.stroke-width-range")])}
:error.style-dictionary/invalid-token-value-text-case
{:error/code :error.style-dictionary/invalid-token-value-text-case
:error/fn #(tr "workspace.tokens.invalid-text-case-token-value" %)}
:error/unknown
{:error/code :error/unknown
:error/fn #(tr "labels.unknown-error")}})

1
frontend/src/app/main/data/workspace/tokens/propagation.cljs
View File

@@ -36,6 +36,7 @@
#{:font-size} dwta/update-font-size
#{:letter-spacing} dwta/update-letter-spacing
#{:font-family} dwta/update-font-family
#{:text-case} dwta/update-text-case
#{:x :y} dwta/update-shape-position
#{:p1 :p2 :p3 :p4} dwta/update-layout-padding
#{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin

2
frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs
View File

@@ -268,6 +268,7 @@
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")
font-size (partial generic-attribute-actions #{:font-size} "Font Size")
line-height #(generic-attribute-actions #{:line-height} "Line Height" (assoc % :on-update-shape dwta/update-line-height))
text-case (partial generic-attribute-actions #{:text-case} "Text Case")
border-radius (partial all-or-separate-actions {:attribute-labels {:r1 "Top Left"
:r2 "Top Right"
:r4 "Bottom Left"
@@ -291,6 +292,7 @@
(when (seq line-height) line-height))))
:stroke-width stroke-width
:font-size font-size
:text-case text-case
:dimensions (fn [context-data]
(-> (concat
(when (seq (sizing-attribute-actions context-data)) [{:title "Sizing" :submenu :sizing}])

8
frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs
View File

@@ -787,10 +787,18 @@
:custom-input-token-value font-picker*
:on-value-resolve on-value-resolve})]))
(mf/defc text-case-form*
[{:keys [token] :rest props}]
(let [placeholder (tr "workspace.tokens.text-case-value-enter")]
[:> form*
(mf/spread-props props {:token token
:input-placeholder placeholder})]))
(mf/defc form-wrapper*
[{:keys [token token-type] :as props}]
(let [token-type' (or (:type token) token-type)]
(case token-type'
:color [:> color-form* props]
:font-family [:> font-family-form* props]
:text-case [:> text-case-form* props]
[:> form* props])))

6
frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs
View File

@@ -197,3 +197,9 @@
::mf/register-as :tokens/font-family}
[properties]
[:& token-update-create-modal properties])
(mf/defc text-case-modal
{::mf/register modal/components
::mf/register-as :tokens/text-case}
[properties]
[:& token-update-create-modal properties])

1
frontend/src/app/main/ui/workspace/tokens/management/group.cljs
View File

@@ -30,6 +30,7 @@
:font-family "text-font-family"
:font-size "text-font-size"
:letter-spacing "text-letterspacing"
:text-case "text-mixed"
:opacity "percentage"
:number "number"
:rotation "rotation"

2
frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
View File

@@ -176,7 +176,7 @@
selected-shapes)))
(def token-types-with-status-icon
#{:color :border-radius :rotation :sizing :dimensions :opacity :spacing :stroke-width})
#{:color :border-radius :rotation :sizing :dimensions :opacity :spacing :stroke-width :text-case})
(mf/defc token-pill*
{::mf/wrap [mf/memo]}

34
frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs
View File

@@ -592,6 +592,40 @@
(t/is (= (:font-family (:applied-tokens text-1')) (:name token-target')))
(t/is (= (:font-family style-text-blocks) (:font-id txt/default-text-attrs))))))))))
(t/deftest test-apply-text-case
(t/testing "applies text-case token and updates the text transform"
(t/async
done
(let [text-case-token {:name "uppercase-case"
:value "uppercase"
:type :text-case}
file (-> (setup-file-with-tokens)
(update-in [:data :tokens-lib]
#(ctob/add-token-in-set % "Set A" (ctob/make-token text-case-token))))
store (ths/setup-store file)
text-1 (cths/get-shape file :text-1)
events [(dwta/apply-token {:shape-ids [(:id text-1)]
:attributes #{:text-case}
:token (toht/get-token file "uppercase-case")
:on-update-shape dwta/update-text-case})]]
(tohs/run-store-async
store done events
(fn [new-state]
(let [file' (ths/get-file-from-state new-state)
token-target' (toht/get-token file' "uppercase-case")
text-1' (cths/get-shape file' :text-1)
style-text-blocks (->> (:content text-1')
(txt/content->text+styles)
(remove (fn [[_ text]] (str/empty? (str/trim text))))
(mapv (fn [[style text]]
{:styles (merge txt/default-text-attrs style)
:text-content text}))
(first)
(:styles))]
(t/is (some? (:applied-tokens text-1')))
(t/is (= (:text-case (:applied-tokens text-1')) (:name token-target')))
(t/is (= (:text-transform style-text-blocks) "uppercase")))))))))
(t/deftest test-toggle-token-none
(t/testing "should apply token to all selected items, where no item has the token applied"
(t/async

8
frontend/translations/en.po
View File

@@ -7253,6 +7253,14 @@ msgstr "Multiple files"
msgid "workspace.tokens.export.no-tokens-themes-sets"
msgstr "There are no tokens, themes or sets to export."
#: src/app/main/ui/workspace/tokens/management/create/form.cljs:602
msgid "workspace.tokens.text-case-value-enter"
msgstr "Enter text case: none | Uppercase | Lowercase | Capitalize"
#: src/app/main/ui/workspace/tokens/management/create/form.cljs:109
msgid "workspace.tokens.invalid-text-case-token-value"
msgstr "Invalid token value: only none, Uppercase, Lowercase or Capitalize are accepted"
#: src/app/main/ui/workspace/tokens/modals/export.cljs:33
msgid "workspace.tokens.export.preview"
msgstr "Preview:"

4
frontend/translations/es.po
View File

@@ -7227,6 +7227,10 @@ msgstr "Múltiples ficheros"
msgid "workspace.tokens.export.no-tokens-themes-sets"
msgstr "No existen tokens, temas o sets para exportar."
#: src/app/main/ui/workspace/tokens/management/create/form.cljs:602
msgid "workspace.tokens.text-case-value-enter"
msgstr "Introduce una capitalización: none | Uppercase | Lowercase | Capitalize"
#: src/app/main/ui/workspace/tokens/modals/export.cljs:33
msgid "workspace.tokens.export.preview"
msgstr "Previsualizar:"