🎉 Inspect styles tab: variants panel

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -104,7 +104,7 @@
         tabs
         (mf/with-memo []
           (if (contains? cf/flags :inspect-styles)
-            [{:label (tr "inspect.tabs.styles")
+            [{:label (tr "labels.styles")
               :id "styles"}
              {:label (tr "inspect.tabs.computed")
               :id "computed"}
@@ -179,6 +179,7 @@
             (case @section
               :styles
               [:> styles-tab* {:color-space color-space
+                               :objects objects
                                :shapes shapes
                                :libraries libraries
                                :file-id file-id}]

frontend/src/app/main/ui/inspect/styles.cljs

@@ -8,12 +8,13 @@
    [app.common.types.tokens-lib :as ctob]
    [app.main.refs :as refs]
    [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]]
+   [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]]
    [app.main.ui.inspect.styles.style-box :refer [style-box*]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 
-(def type->options
+(def type->panel-group
   {:multiple [:fill :stroke :text :shadow :blur :layout-element]
    :frame    [:visibility :geometry :fill :stroke :shadow :blur :layout :layout-element]
    :group    [:visibility :geometry :svg :layout-element]
@@ -34,27 +35,31 @@
     :multiple))
 
 (mf/defc styles-tab*
-  [{:keys [color-space shapes libraries file-id]}]
+  [{:keys [color-space shapes libraries objects file-id]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
-        first-component    (mf/with-memo (ctkl/get-component data (:component-id first-shape)))
-        type               (mf/with-memo (get-shape-type shapes first-shape first-component))
-
-        ;; Must be reviewed for performance and code clarity
+        first-component    (ctkl/get-component data (:component-id first-shape))
+        type               (get-shape-type shapes first-shape first-component)
         tokens-lib         (mf/deref refs/tokens-lib)
         active-themes      (mf/deref refs/workspace-active-theme-paths-no-hidden)
         active-sets
         (mf/with-memo [tokens-lib]
           (some-> tokens-lib (ctob/get-active-themes-set-names)))
-        options            (type->options type)]
+        panels            (type->panel-group type)]
     [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
      (when (or active-themes active-sets)
        [:li
-        [:> style-box* {:attribute :token}
-         [:> tokens-panel* {:themes active-themes :sets active-sets}]]])
-     (for [option options]
-       [:li {:key (d/name option)}
-        [:> style-box* {:attribute option} color-space]])]))
+        [:> style-box* {:panel :token}
+         [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]])
+     (for [panel panels]
+       [:li {:key (d/name panel)}
+        [:> style-box* {:panel panel}
+         (case panel
+           :variant          [:> variants-panel* {:component first-component
+                                                  :objects objects
+                                                  :shape first-shape
+                                                  :data data}]
+           color-space)]])]))
 
 
 ;; WIP

frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs

@@ -1,39 +1,22 @@
 (ns app.main.ui.inspect.styles.panels.tokens-panel
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.main.ui.inspect.styles.properties-row :refer [properties-row*]]
    [app.util.i18n :refer [tr]]
-   [app.util.webapi :as wapi]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(mf/defc tokens-row*
-  [{:keys [term detail copiable]}]
-  (let [copiable? (or copiable false)
-        detail? (not (or (nil? detail) (str/blank? detail)))
-        detail (if detail? detail "-")
-        copy-attr
-        (mf/use-fn
-         (fn []
-           (wapi/write-to-clipboard (str term ": " detail))))]
-    [:dl {:class (stl/css :attribute-row)}
-     [:dt {:class (stl/css :attribute-term)} term]
-     [:dd {:class (stl/css :attribute-detail)}
-      (if (and copiable? detail?)
-        [:button {:class (stl/css :attribute-detail-copiable)
-                  :on-click copy-attr} detail]
-        detail)]]))
-
 (mf/defc tokens-panel*
   [{:keys [theme-paths set-names]}]
   [:div {:class (stl/css :tokens-panel)}
    (when (seq theme-paths)
      (for [theme theme-paths]
-       [:> tokens-row* {:key theme
-                        :class (stl/css :token-theme)
-                        :term (tr "inspect.tabs.styles.panel.tokens.active-themes")
-                        :detail theme}]))
+       [:> properties-row* {:key theme
+                            :class (stl/css :token-theme)
+                            :term (tr "inspect.tabs.styles.panel.tokens.active-themes")
+                            :detail theme}]))
    (when (seq set-names)
      (let [sets-list (str/join ", " set-names)]
-       [:> tokens-row* {:class (stl/css :token-theme)
-                        :term (tr "inspect.tabs.styles.panel.tokens.active-sets")
-                        :detail sets-list}]))])
+       [:> properties-row* {:class (stl/css :token-theme)
+                            :term (tr "inspect.tabs.styles.panel.tokens.active-sets")
+                            :detail sets-list}]))])

frontend/src/app/main/ui/inspect/styles/panels/variants_panel.cljs

@@ -0,0 +1,24 @@
+(ns app.main.ui.inspect.styles.panels.variants-panel
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.files.variant :as cfv]
+   [app.common.types.component :as ctc]
+   [app.main.ui.inspect.styles.properties-row :refer [properties-row*]]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(mf/defc variants-panel*
+  [{:keys [component objects shape data]}]
+  (let [is-container?   (ctc/is-variant-container? shape)
+        properties      (mf/with-memo [objects shape]
+                          (if is-container?
+                            (->> (cfv/extract-properties-values data objects (:id shape))
+                                 (map #(update % :value (partial str/join ", "))))
+                            (->> (:variant-properties component)
+                                 (map #(update % :value (fn [v] (if (str/blank? v) "--" v)))))))]
+    [:div {:class (stl/css :variants-panel)}
+     (for [property properties]
+       [:> properties-row* {:key (dm/str "variant-property-" property)
+                            :term (:name property)
+                            :detail (:value property)}])]))

frontend/src/app/main/ui/inspect/styles/properties_row.cljs

@@ -0,0 +1,30 @@
+(ns app.main.ui.inspect.styles.properties-row
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.util.webapi :as wapi]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema:properties-row
+  [:map
+   [:term :string]
+   [:detail :string]
+   [:copiable {:optional true} :boolean]])
+
+(mf/defc properties-row*
+  {::mf/schema schema:properties-row}
+  [{:keys [term detail copiable]}]
+  (let [copiable? (or copiable false)
+        detail? (not (or (nil? detail) (str/blank? detail)))
+        detail (if detail? detail "-")
+        copy-attr
+        (mf/use-fn
+         (fn []
+           (wapi/write-to-clipboard (str term ": " detail))))]
+    [:dl {:class (stl/css :property-row)}
+     [:dt {:class (stl/css :property-term)} term]
+     [:dd {:class (stl/css :property-detail)}
+      (if (and copiable? detail?)
+        [:button {:class (stl/css :property-detail-copiable)
+                  :on-click copy-attr} detail]
+        detail)]]))

frontend/src/app/main/ui/inspect/styles/properties_row.scss

@@ -4,11 +4,11 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "../../../ds/typography.scss" as *;
+@use "../../ds/typography.scss" as *;
 
 // TOKENS ROW
 
-.attribute-row {
+.property-row {
   --term-color: var(--color-foreground-secondary);
   --detail-color: var(--color-foreground-primary);
 
@@ -16,17 +16,17 @@
   padding-block: var(--sp-s);
 }
 
-.attribute-term,
-.attribute-detail {
+.property-term,
+.property-detail {
   @include use-typography("body-small");
 }
 
-.attribute-term {
+.property-term {
   color: var(--term-color);
   flex: 1;
 }
 
-.attribute-detail {
+.property-detail {
   flex: 2;
   color: var(--detail-color);
 }

frontend/src/app/main/ui/inspect/styles/style_box.cljs

@@ -5,9 +5,10 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.util.i18n :refer [tr]]
+   [app.util.webapi :as wapi]
    [rumext.v2 :as mf]))
 
-(defn- attribute->title
+(defn- panel->title
   [type]
   (case type
     :variant    (tr "inspect.tabs.styles.panel.variant")
@@ -25,11 +26,11 @@
     nil))
 
 (mf/defc style-box*
-  [{:keys [attribute shorthand children]}]
+  [{:keys [panel shorthand children]}]
   (let [expanded* (mf/use-state true)
         expanded (deref expanded*)
 
-        title (attribute->title attribute)
+        title (panel->title panel)
 
         toggle-panel
         (mf/use-fn
@@ -40,12 +41,12 @@
         copy-shorthand
         (mf/use-fn
          (fn []
-           (js/navigator.clipboard.writeText (str "Style: " title))))]
+           (wapi/write-to-clipboard (str "Style: " title))))]
     [:article {:class (stl/css :style-box)}
      [:header {:class (stl/css :disclosure-header)}
       [:button {:class (stl/css :disclosure-button)
                 :aria-expanded expanded
-                :aria-controls (str "style-box-" (d/name attribute))
+                :aria-controls (str "style-box-" (d/name panel))
                 :on-click toggle-panel
                 :aria-label (tr "inspect.tabs.styles.panel.toggle-style" title)}
        [:> icon* {:icon-id (if expanded "arrow-down" "arrow")
@@ -58,5 +59,5 @@
                           :on-click copy-shorthand
                           :icon "clipboard"}])]
      (when expanded
-       [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name attribute))}
+       [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name panel))}
         [:div {:class (stl/css :style-box-panel-wrapper)} children]])]))

frontend/translations/en.po

@@ -1853,6 +1853,10 @@ msgstr "Info"
 msgid "labels.styles"
 msgstr "Styles"
 
+#: src/app/main/ui/inspect/right_sidebar.cljs:165
+msgid "inspect.tabs.switcher.label"
+msgstr "Layer info"
+
 #: src/app/main/ui/inspect/styles/style_box.cljs:10
 msgid "inspect.tabs.styles.panel.variant"
 msgstr "Variant properties"