✨ Add placeholder to set edition (#5848)

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -127,6 +127,7 @@
   --layer-row-foreground-color-selected: var(--color-accent-primary);
   --layer-row-foreground-color-drag: var(--color-accent-tertiary);
   --layer-row-foreground-color-focus: var(--color-foreground-primary);
+  --layer-row-foreground-color-placeholder: var(--color-foreground-secondary);
   --layer-row-border-color-focus: var(--color-accent-primary);
   --layer-child-row-background-color: var(--color-background-tertiary);
   --layer-child-row-foreground-color: var(--color-foreground-secondary);

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -88,6 +88,7 @@
       :on-blur on-submit-valid
       :on-key-down on-key-down
       :auto-focus true
+      :placeholder (tr "workspace.token.set-edit-placeholder")
       :default-value default-value}]))
 
 (mf/defc checkbox*

frontend/src/app/main/ui/workspace/tokens/sets.scss

@@ -143,20 +143,20 @@
   }
 }
 
-.editing-node {
-  @include textEllipsis;
-  color: var(--layer-row-foreground-color-focus);
-}
-
 .editing-node {
   @include textEllipsis;
   @include bodySmallTypography;
   @include removeInputStyle;
+
+  border: $s-1 solid var(--input-border-color-focus);
+  border-radius: $br-8;
+  color: var(--layer-row-foreground-color-focus);
   flex-grow: 1;
   height: $s-28;
-  padding-left: $s-6;
   margin: 0;
-  border-radius: $br-8;
-  border: $s-1 solid var(--input-border-color-focus);
-  color: var(--layer-row-foreground-color);
+  padding-left: $s-6;
+
+  &::placeholder {
+    color: var(--layer-row-foreground-color-placeholder);
+  }
 }

frontend/translations/en.po

@@ -6547,7 +6547,11 @@ msgstr "New theme"
 msgid "workspace.token.no-active-theme"
 msgstr "No theme active"
 
-#: src/app/main/ui/workspace/tokens/sets.cljs:89
+#: src/app/main/ui/workspace/tokens/sets.cljs:91
+msgid "workspace.token.set-edit-placeholder"
+msgstr "Enter name (use '/' for groups)"
+
+#: src/app/main/ui/workspace/tokens/sets.cljs:103
 msgid "workspace.token.no-permisions-set"
 msgstr "You need to be an editor to activate / deactivate sets"
 

frontend/translations/es.po

@@ -6557,7 +6557,11 @@ msgstr "Nuevo tema"
 msgid "workspace.token.no-active-theme"
 msgstr "No hay temas activos"
 
-#: src/app/main/ui/workspace/tokens/sets.cljs:89
+#: src/app/main/ui/workspace/tokens/sets.cljs:91
+msgid "workspace.token.set-edit-placeholder"
+msgstr "Añade un nombre - usa '/' para grupos"
+
+#: src/app/main/ui/workspace/tokens/sets.cljs:103
 msgid "workspace.token.no-permisions-set"
 msgstr "Debes ser editor para activar / desactivar sets"