✨ Refactor create token modal

2025-01-20 05:34:23 -05:00 · 2024-10-28 14:54:20 +01:00 · 2024-10-28 14:54:20 +01:00 · 16a90f5e17
commit 16a90f5e17
parent 5e0bb5025b
15 changed files with 243 additions and 70 deletions
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@ -51,7 +51,7 @@
 (mf/defc color-bullet
  {::mf/wrap [mf/memo]
   ::mf/wrap-props false}
-  [{:keys [color on-click mini? area]}]
+  [{:keys [color on-click mini area]}]
  (let [read-only? (nil? on-click)
        on-click
        (mf/use-fn
@ -73,7 +73,7 @@
        [:div
         {:class (stl/css-case
                  :color-bullet true
-                  :mini mini?
+                  :mini mini
                  :is-library-color (some? id)
                  :is-not-library-color (nil? id)
                  :is-gradient (some? gradient)
--- a/frontend/src/app/main/ui/ds/_borders.scss
+++ b/frontend/src/app/main/ui/ds/_borders.scss
@ -8,6 +8,7 @@

 // TODO: create actual tokens once we have them from design
 $br-8: px2rem(8);
+$br-4: px2rem(4);
 $br-circle: 50%;

 $b-1: px2rem(1);
--- a/frontend/src/app/main/ui/ds/controls/input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/input.cljs
@ -23,9 +23,10 @@

 (mf/defc input*
  {::mf/props :obj
+   ::mf/forward-ref true
   ::mf/schema schema:input}
-  [{:keys [icon class type ref] :rest props}]
-  (let [ref (or ref (mf/use-ref))
+  [{:keys [icon class type external-ref] :rest props}]
+  (let [ref (or external-ref (mf/use-ref))
        type (or type "text")
        icon-class (stl/css-case :input true
                                 :input-with-icon (some? icon))
@ -37,4 +38,4 @@
                                         (dom/focus! input-node))))]
    [:> "span" {:class (dm/str class " " (stl/css :container))}
     (when icon [:> icon* {:id icon :class (stl/css :icon) :on-click handle-icon-click}])
-     [:> "input" props]]))
+     [:> "input" props]]))
--- a/frontend/src/app/main/ui/ds/controls/input.scss
+++ b/frontend/src/app/main/ui/ds/controls/input.scss
@ -18,6 +18,7 @@
  column-gap: var(--sp-xs);
  align-items: center;
  position: relative;
+  inline-size: 100%;

  background: var(--input-bg-color);
  border-radius: $br-8;
@ -48,6 +49,7 @@
  height: $sz-32;
  border: none;
  background: none;
+  inline-size: 100%;

  @include use-typography("body-small");
  color: var(--input-fg-color);
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
@ -10,7 +10,7 @@
  background-color: rgba(var(--hue-rgb));
  position: relative;
  height: $s-140;
-  width: $s-256;
+  width: 100%;
  margin-top: $s-12;
  margin-bottom: $s-12;
  cursor: pointer;
--- a/frontend/src/app/main/ui/workspace/tokens/common.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/common.scss
@ -6,22 +6,6 @@

@import "refactor/common-refactor.scss";

-.input {
-  @extend .input-element;
-}
-
-.labeled-input {
-  @extend .input-element;
-  .label {
-    width: auto;
-    text-wrap: nowrap;
-  }
-}
-
-.labeled-input-error {
-  border: 1px solid var(--status-color-error-500) !important;
-}
-
 .button {
  @extend .button-primary;
 }
--- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.cljs
@ -0,0 +1,27 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.tokens.components.controls.input-token-color-bullet
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.components.color-bullet :refer [color-bullet]]
+   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema::input-token-color-bullet
+  [:map
+   [:color [:maybe :string]]
+   [:on-click fn?]])
+
+(mf/defc input-token-color-bullet*
+  {::mf/props :obj
+   ::mf/schema schema::input-token-color-bullet}
+  [{:keys [color on-click]}]
+  [:div {:class (stl/css :input-token-color-bullet)
+         :on-click on-click}
+   (if-let [hex (some-> color tinycolor/valid-color tinycolor/->hex)]
+     [:> color-bullet {:color hex :mini true}]
+     [:div {:class (stl/css :input-token-color-bullet-placeholder)}])])
--- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_token_color_bullet.scss
@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "../../../../ds/_sizes.scss" as *;
+@use "../../../../ds/_borders.scss" as *;
+
+.input-token-color-bullet {
+  --bullet-size: var(--sp-l);
+  --bullet-default-color: var(--color-foreground-secondary);
+  --bullet-radius: var(--br-4);
+
+  margin-inline-end: var(--sp-s);
+  cursor: pointer;
+}
+
+.input-token-color-bullet-placeholder {
+  width: var(--bullet-size, --sp-l);
+  height: var(--bullet-size, --sp-l);
+  min-width: var(--bullet-size, --sp-l);
+  min-height: var(--bullet-size, --sp-l);
+  margin-top: 0;
+  background-color: color-mix(in hsl, var(--bullet-default-color) 30%, transparent);
+  border-radius: $br-4;
+  cursor: pointer;
+}
--- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
@ -0,0 +1,43 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.workspace.tokens.components.controls.input-tokens
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.controls.input :refer [input*]]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema::input-tokens
+  [:map
+   [:id :string]
+   [:label :string]
+   [:placeholder {:optional true} :string]
+   [:default-value {:optional true} [:maybe :string]]
+   [:class {:optional true} :string]
+   [:error {:optional true} :boolean]
+   [:value {:optional true} :string]])
+
+(mf/defc input-tokens*
+  {::mf/props :obj
+   ::mf/forward-ref true
+   ::mf/schema schema::input-tokens}
+  [{:keys [class label external-ref id error value children] :rest props}]
+  (let [ref (or external-ref (mf/use-ref))
+        props (mf/spread-props props {:id id
+                                      :type "text"
+                                      :class (stl/css :input)
+                                      :aria-invalid error
+                                      :value value
+                                      :external-ref ref})]
+    [:div {:class (dm/str class " "
+                          (stl/css-case :wrapper true
+                                        :input-error error))}
+     [:label {:for id :class (stl/css :label)} label]
+     [:div {:class (stl/css :input-wrapper)}
+      (when children
+        [:div {:class (stl/css :input-swatch)} children])
+      [:> input* props]]]))
--- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.scss
@ -0,0 +1,53 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "../../../../ds/typography.scss" as *;
+@use "../../../../ds/_borders.scss" as *;
+@use "../../../../ds/_sizes.scss" as *;
+
+@import "refactor/common-refactor.scss";
+
+.wrapper {
+  --label-color: var(--color-foreground-primary);
+  --input-bg-color: var(--color-background-tertiary);
+  --input-fg-color: var(--color-foreground-primary);
+  --input-icon-color: var(--color-foreground-secondary);
+  --input-outline-color: none;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+
+  &.input-error {
+    --input-outline-color: var(--color-accent-error);
+  }
+}
+
+.label {
+  @include use-typography("body-small");
+  @include textEllipsis;
+  color: var(--label-color);
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+
+  &:has(.input-swatch) {
+    position: relative;
+
+    & .input {
+      padding-inline-start: var(--sp-xxxl);
+    }
+  }
+}
+
+.input-swatch {
+  position: absolute;
+  display: flex;
+  inset-inline-start: var(--sp-s);
+  z-index: 2;
+}
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@ -15,18 +15,19 @@
   [app.main.data.tokens :as dt]
   [app.main.refs :as refs]
   [app.main.store :as st]
-   [app.main.ui.components.color-bullet :refer [color-bullet]]
   [app.main.ui.ds.buttons.button :refer [button*]]
   [app.main.ui.ds.foundations.assets.icon :as i]
   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
   [app.main.ui.ds.foundations.typography.text :refer [text*]]
   [app.main.ui.workspace.colorpicker :as colorpicker]
   [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
-   [app.main.ui.workspace.tokens.common :as tokens.common]
+   [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
+   [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]]
   [app.main.ui.workspace.tokens.errors :as wte]
   [app.main.ui.workspace.tokens.style-dictionary :as sd]
   [app.main.ui.workspace.tokens.tinycolor :as tinycolor]
   [app.main.ui.workspace.tokens.token :as wtt]
+   [app.main.ui.workspace.tokens.token-types :as wtty]
   [app.main.ui.workspace.tokens.update :as wtu]
   [app.util.dom :as dom]
   [app.util.functions :as uf]
@ -205,6 +206,7 @@ Token names should only contain letters and digits separated by . characters.")}
  {::mf/wrap-props false}
  [{:keys [token token-type action selected-token-set-id]}]
  (let [token (or token {:type token-type})
+        token-properties (wtty/get-token-properties token)
        color? (wtt/color-token? token)
        selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
        active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
@ -362,14 +364,17 @@ Token names should only contain letters and digits separated by . characters.")}
         (tr "workspace.token.create-token" token-type))]

      [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
-       [:span {:class (stl/css :labeled-input-label)} "Name"]
-       [:& tokens.common/labeled-input {:label "Name"
-                                        :error? @name-errors
-                                        :input-props {:default-value @name-ref
-                                                      :auto-focus true
-                                                      :on-blur on-update-name
-                                                      :on-change on-update-name}}]
+       (let [token-title (str/lower (:title token-properties))]
+         [:> input-tokens*
+          {:id "token-name"
+           :placeholder (tr "workspace.token.enter-token-name", token-title)
+           :error (boolean @name-errors)
+           :auto-focus true
+           :label (tr "workspace.token.token-name")
+           :default-value @name-ref
+           :on-blur on-update-name
+           :on-change on-update-name}])
+
       (for [error (->> (:errors @name-errors)
                        (map #(-> (assoc @name-errors :errors [%])
                                  (me/humanize))))]
@ -380,34 +385,31 @@ Token names should only contain letters and digits separated by . characters.")}
          error])]

      [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
-       [:span {:class (stl/css :labeled-input-label)}  "Value"]
-       [:& tokens.common/labeled-input {:label "Value"
-                                        :input-props {:default-value @value-ref
-                                                      :on-blur on-update-value
-                                                      :on-change on-update-value
-                                                      :ref value-input-ref}
-                                        :render-right (when color?
-                                                        (mf/fnc drop-down-button []
-                                                          [:div {:class (stl/css :color-bullet)
-                                                                 :on-click #(swap! color-ramp-open? not)}
-                                                           (if-let [hex (some-> @color tinycolor/valid-color tinycolor/->hex)]
-                                                             [:& color-bullet {:color hex
-                                                                               :mini? true}]
-                                                             [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
+       [:> input-tokens*
+        {:id "token-value"
+         :placeholder (tr "workspace.token.enter-token-value")
+         :label (tr "workspace.token.token-value")
+         :default-value @value-ref
+         :external-ref value-input-ref
+         :on-change on-update-value
+         :on-blur on-update-value}
+        (when color?
+          [:> input-token-color-bullet*
+           {:color @color :on-click #(swap! color-ramp-open? not)}])]
       (when @color-ramp-open?
         [:& ramp {:color (some-> (or @token-resolve-result (:value token))
                                  (tinycolor/valid-color))
                   :on-change on-update-color}])
       [:& token-value-or-errors {:result-or-errors @token-resolve-result}]]

-
      [:div {:class (stl/css :input-row)}
-       ;; This should be remove when labeled-imput is modified
-       [:span {:class (stl/css :labeled-input-label)}  "Description"]
-       [:& tokens.common/labeled-input {:label "Description"
-                                        :input-props {:default-value @description-ref
-                                                      :on-change on-update-description}}]
+       [:> input-tokens*
+        {:id "token-description"
+         :placeholder (tr "workspace.token.enter-token-description")
+         :label (tr "workspace.token.token-description")
+         :default-value @description-ref
+         :on-blur on-update-description
+         :on-change on-update-description}]
       (when @description-errors
         [:> text* {:as "p"
                    :typography "body-small"
--- a/frontend/src/app/main/ui/workspace/tokens/form.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/form.scss
@ -65,22 +65,6 @@
  --input-hint-color: var(--status-color-error-500);
 }

-.color-bullet {
-  margin-right: $s-8;
-  cursor: pointer;
-}
-
-.color-bullet-placeholder {
-  width: var(--bullet-size, $s-16);
-  height: var(--bullet-size, $s-16);
-  min-width: var(--bullet-size, $s-16);
-  min-height: var(--bullet-size, $s-16);
-  margin-top: 0;
-  background-color: color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
-  border-radius: $br-4;
-  cursor: pointer;
-}
-
 .form-modal-title {
  color: var(--color-foreground-primary);
 }
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@ -358,4 +358,4 @@
             :on-lost-pointer-capture on-lost-pointer-capture-pages
             :on-pointer-move on-pointer-move-pages}]
      [:& tokens-tab]]
-      [:& import-export-button]]))
+     [:& import-export-button]]))
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@ -6387,6 +6387,30 @@ msgstr "Edit token"
 msgid "workspace.token.resolved-value"
 msgstr "Resolved value: "

+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-name"
+msgstr "Name"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-name"
+msgstr "Enter %s token name" 
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-value"
+msgstr "Value"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-value"
+msgstr "Enter token value or alias"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-description"
+msgstr "Description"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-description"
+msgstr "Add a description (optional)"
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs
 msgid "workspace.token.original-value"
 msgstr "Original value: "
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@ -6369,6 +6369,30 @@ msgstr "Editar token"
 msgid "workspace.token.resolved-value"
 msgstr "Valor resuelto: "

+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-name"
+msgstr "Nombre"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-name"
+msgstr "Introduce un nombre para el token %s" 
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-value"
+msgstr "Valor"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-value"
+msgstr "Introduce un valor o alias"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.token-description"
+msgstr "Descripción"
+
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.enter-token-description"
+msgstr "Añade una Descripción (opcional)"
+
 #: src/app/main/ui/workspace/tokens/sidebar.cljs
 msgid "workspace.token.original-value"
 msgstr "Valor original: "