✨ Allow modifying property name when a variation is selected (#6174)

* ✨ Change property name when a variation is selected

* 📎 PR changes

frontend/src/app/main/ui/ds/controls/input_with_values.cljs

@@ -16,25 +16,28 @@
 (def ^:private schema:input-with-values
   [:map
    [:name :string]
-   [:values :string]
+   [:values {:optional true} :string]
    [:on-blur {:optional true} fn?]])
 
-
 (mf/defc input-with-values*
   {::mf/props :obj
    ::mf/schema schema:input-with-values}
   [{:keys [name values on-blur] :rest props}]
   (let [editing*  (mf/use-state false)
         editing?  (deref editing*)
+
         input-ref (mf/use-ref)
         input     (mf/ref-val input-ref)
-        title     (str name ": " values)
+
+        title     (if values (str name ": " values) name)
+
         on-edit
         (mf/use-fn
          (fn [event]
            (dom/stop-propagation event)
            (reset! editing* true)
            (dom/focus! input)))
+
         on-stop-edit
         (mf/use-fn
          (mf/deps on-blur)
@@ -43,6 +46,7 @@
            (reset! editing* false)
            (when on-blur
              (on-blur event))))
+
         on-focus
         (mf/use-fn
          (fn [event]
@@ -70,6 +74,8 @@
       [:div {:class (stl/css :input-with-values-edit-container)}
        [:> input* props]]
       [:div {:class (stl/css :input-with-values-container :input-with-values-grid)
-             :title title :on-click on-edit}
-       [:span {:class (stl/css :input-with-values-name)}  name]
-       [:span {:class (stl/css :input-with-values-values)} values]])))
+             :title title
+             :on-click on-edit}
+       [:span {:class (stl/css :input-with-values-name)} name]
+       (when values
+         [:span {:class (stl/css :input-with-values-values)} values])])))

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -281,25 +281,40 @@
          (fn [pos value]
            (st/emit! (dwv/update-property-value id-component pos value))))
 
+        update-property-name
+        (mf/use-fn
+         (mf/deps variant-id)
+         (fn [event]
+           (let [value (dom/get-target-val event)
+                 pos   (-> (dom/get-current-target event)
+                           (dom/get-data "position")
+                           int)]
+             (st/emit! (dwv/update-property-name variant-id pos value)))))
+
         switch-component
         (mf/use-fn
          (mf/deps shape)
          (fn [id]
            (st/emit! (dwl/component-swap shape (:component-file shape) id))))]
+
     [:*
      (for [[pos prop] (map vector (range) properties)]
 
        [:div {:key (str (:id shape) pos) :class (stl/css :variant-property-container)}
         (if (ctk/main-instance? shape)
           [:*
-           [:span {:class (stl/css :variant-property-name :variant-property-name-bg)} (:name prop)]
+           [:div {:class (stl/css :variant-property-name-wrapper)}
+            [:> input-with-values* {:name (:name prop)
+                                    :data-position pos
+                                    :on-blur update-property-name}]]
            [:> combobox* {:id (str "variant-prop-" (:id shape) pos)
                           :default-selected (if (str/empty? (:value prop)) "--" (:value prop))
                           :options (clj->js (get-options (:name prop)))
                           :on-change (partial change-property-value pos)}]]
 
           [:*
-           [:span {:class (stl/css :variant-property-name)} (:name prop)]
+           [:span {:class (stl/css :variant-property-name)}
+            (:name prop)]
            [:& select {:default-value id-component
                        :options (filter-matching id-component (keyword (:name prop)))
                        :on-change switch-component}]])])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss

@@ -717,22 +717,22 @@
   padding-right: var(--sp-xxs);
 }
 
-.variant-property-name-bg {
-  border-radius: $br-8;
-  background-color: var(--assets-item-background-color);
-}
-
 .variant-property-name {
   color: var(--color-foreground-primary);
-
+  height: var(--sp-xxxl);
   width: $s-104;
 
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--sp-xxxl);
 
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.variant-property-name-wrapper {
+  display: flex;
+  flex: 0 0 auto;
+  width: $s-104;
+}