Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs (ClojureScript)

Code before:
        on-select-font
        (mf/use-fn
         (mf/deps on-external-update-value set-font)
         (fn [{:keys [family] :as font}]
           (when font
             (set-font font)
             (on-external-update-value family))))

        on-update-value'
        (mf/use-fn
         (mf/deps on-update-value set-font)
         (fn [value]
           (set-font nil)
           (on-update-value value)))

        font-selector-button
        (mf/html
         [:> icon-button*
          {:on-click on-click-dropdown-button
           :aria-label (tr "workspace.tokens.token-font-family-select")
           :icon i/arrow-down
           :variant "action"
           :type "button"}])]
    [:*
     [:> input-tokens-value*
      {:placeholder (or placeholder (tr "workspace.tokens.token-font-family-value-enter"))
       :label (when-not aria-label (tr "workspace.tokens.token-font-family-value"))
       :aria-label aria-label
       :default-value default-value
       :ref input-ref
       :on-blur on-blur
       :on-change on-update-value'
       :icon i/text-font-family
       :slot-end font-selector-button
       :token-resolve-result token-resolve-result}]
     (when font-selector-open?
       [:> font-selector-wrapper* {:font font
                                   :input-ref input-ref
                                   :on-select-font on-select-font
                                   :on-close-font-selector on-close-font-selector}])]))

(mf/defc font-family-form*
  [{:keys [token] :rest props}]
  (let [on-value-resolve
        (mf/use-fn
         (fn [value]
           (when value
             (ctt/join-font-family value))))]
    [:> form*
     (mf/spread-props props {:token (when token (update token :value ctt/join-font-family))
                             :custom-input-token-value font-picker*

Review comment (suggestion):
I don't understand this behaviour well. Does this input sometimes not have a visible label?

If so, the name of the component is unclear to me because it does not seem to be an input, and I would not expect this component to use aria-label.

I suggest being explicit about the UI component (e.g. `font-picker-select*`).

Code after:
        on-select-font
        (mf/use-fn
         (mf/deps on-external-update-value set-font)
         (fn [{:keys [family] :as font}]
           (when font
             (set-font font)
             (on-external-update-value family))))

        on-update-value'
        (mf/use-fn
         (mf/deps on-update-value set-font)
         (fn [value]
           (set-font nil)
           (on-update-value value)))

        font-selector-button
        (mf/html
         [:> icon-button*
          {:on-click on-click-dropdown-button
           :aria-label (tr "workspace.tokens.token-font-family-select")
           :icon i/arrow-down
           :variant "action"
           :type "button"}])]
    [:*
     [:> input-token*
      {:placeholder (or placeholder (tr "workspace.tokens.token-font-family-value-enter"))
       :label label
       :aria-label aria-label
       :default-value default-value
       :ref input-ref
       :on-blur on-blur
       :on-change on-update-value'
       :icon i/text-font-family
       :slot-end font-selector-button
       :token-resolve-result token-resolve-result}]
     (when font-selector-open?
       [:> font-selector-wrapper* {:font font
                                   :input-ref input-ref
                                   :on-select-font on-select-font
                                   :on-close-font-selector on-close-font-selector}])]))

(mf/defc font-family-form*
  [{:keys [token] :rest props}]
  (let [on-value-resolve
        (mf/use-fn
         (fn [value]
           (when value
             (ctt/join-font-family value))))]
    [:> form*
     (mf/spread-props props {:token (when token (update token :value ctt/join-font-family))
                             :custom-input-token-value font-picker-combobox*