🎉 Inspect styles tab: layout panel

frontend/src/app/main/ui/inspect/attributes/layout.cljs

@@ -29,7 +29,10 @@
    :row-gap
    :column-gap
    :gap
-   :padding])
+   :padding-inline-start
+   :padding-inline-end
+   :padding-block-start
+   :padding-block-end])
 
 (mf/defc layout-block
   [{:keys [objects shape]}]

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

@@ -145,6 +145,10 @@
 .viewer-tab-switcher {
   --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
+  --max-inspect-tab-height: calc(100vh - 12rem);
+
+  max-block-size: var(--max-inspect-tab-height);
+  overflow: auto;
 }
 
 .viewer-tab-switcher-layout {

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

@@ -5,10 +5,12 @@
    [app.common.data.macros :as dm]
    [app.common.types.component :as ctc]
    [app.common.types.components-list :as ctkl]
+   [app.common.types.shape.layout :as ctl]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.style-dictionary :as sd]
    [app.main.refs :as refs]
    [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]]
+   [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]]
    [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*]]
@@ -41,6 +43,7 @@
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
         first-component    (ctkl/get-component data (:component-id first-shape))
+        layout-shapes      (->> shapes (filter ctl/any-layout?))
         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)
@@ -62,16 +65,22 @@
          [:> 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}]
-           :geometry         [:> geometry-panel* {:shapes shapes
-                                                  :objects objects
-                                                  :resolved-tokens resolved-active-tokens}]
-           color-space)]])]))
+        (if (not (= panel :layout))
+          [:> style-box* {:panel panel}
+           (case panel
+             :variant          [:> variants-panel* {:component first-component
+                                                    :objects objects
+                                                    :shape first-shape
+                                                    :data data}]
+             :geometry         [:> geometry-panel* {:shapes shapes
+                                                    :objects objects
+                                                    :resolved-tokens resolved-active-tokens}]
+             color-space)]
+          (when (seq layout-shapes)
+            [:> style-box* {:panel :layout}
+             [:> layout-panel* {:shapes layout-shapes
+                                :objects objects
+                                :resolved-tokens resolved-active-tokens}]]))])]))
 
 
 ;; WIP

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

@@ -24,7 +24,7 @@
 
 (mf/defc geometry-panel*
   [{:keys [shapes objects resolved-tokens]}]
-  [:div {:class (stl/css :variants-panel)}
+  [:div {:class (stl/css :geometry-panel)}
    (for [shape shapes]
      [:div {:key (:id shape) :class "geometry-shape"}
       (for [property properties]

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

@@ -0,0 +1,63 @@
+(ns app.main.ui.inspect.styles.panels.layout
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.inspect.attributes.common :as cmm]
+   [app.main.ui.inspect.styles.properties-row :refer [properties-row*]]
+   [app.util.code-gen.style-css :as css]
+   [rumext.v2 :as mf]))
+
+(def ^:private properties
+  [:display
+   :flex-direction
+   :flex-wrap
+   :grid-template-rows
+   :grid-template-columns
+   :align-items
+   :align-content
+   :justify-items
+   :justify-content
+   :row-gap
+   :column-gap
+   :gap
+   :padding-inline-start
+   :padding-inline-end
+   :padding-block-start
+   :padding-block-end])
+
+(def ^:private shape-prop->padding-prop
+  {:padding-block-start :p1
+   :padding-inline-end :p2
+   :padding-block-end :p3
+   :padding-inline-start :p4})
+
+(defn- get-applied-tokens-in-shape
+  [shape-tokens property]
+  (let [padding-prop (get shape-prop->padding-prop property)]
+    (if padding-prop
+      (get shape-tokens padding-prop)
+      (get shape-tokens property))))
+
+(defn- get-resolved-token
+  [property shape resolved-tokens]
+  (let [shape-tokens (:applied-tokens shape)
+        applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property)
+        token (get resolved-tokens applied-tokens-in-shape)]
+    token))
+
+(mf/defc layout-panel*
+  [{:keys [shapes objects resolved-tokens]}]
+  [:div {:class (stl/css :variants-panel)}
+   (for [shape shapes]
+     [:div {:key (:id shape) :class "layout-shape"}
+      (for [property properties]
+        (when-let [value (css/get-css-value objects shape property)]
+          (let [property-name (cmm/get-css-rule-humanized property)
+                resolved-token (get-resolved-token property shape resolved-tokens)
+                property-value (if (not resolved-token) (css/get-css-property objects shape property) "")]
+            [:> properties-row* {:key (dm/str "layout-property-" property)
+                                 :term property-name
+                                 :detail value
+                                 :token resolved-token
+                                 :property property-value
+                                 :copiable true}])))])])

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

@@ -1,7 +1,7 @@
 (ns app.main.ui.inspect.styles.property-detail-copiable
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -22,6 +22,8 @@
      [:span {:class (stl/css :property-detail-text :property-detail-text-token)} (:name token)]
      [:span {:class (stl/css :property-detail-text)} detail])
    [:> icon* {:class (stl/css :property-detail-icon)
-              :icon-id (if copied "tick" "clipboard")
+              :icon-id (if copied i/tick i/clipboard)
               :size "s"
               :aria-label (tr "inspect.tabs.styles.panel.copy-to-clipboard")}]])
+
+

frontend/src/app/util/code_gen/style_css.cljs

@@ -89,7 +89,10 @@ body {
    :gap
    :column-gap
    :row-gap
-   :padding
+   :padding-inline-start
+   :padding-inline-end
+   :padding-block-start
+   :padding-block-end
    :z-index
 
    ;; Flex related properties

frontend/src/app/util/code_gen/style_css_formats.cljs

@@ -33,6 +33,10 @@
    :row-gap               :size-array
    :column-gap            :size-array
    :padding               :size-array
+   :padding-inline-start  :size-array
+   :padding-inline-end    :size-array
+   :padding-block-start   :size-array
+   :padding-block-end     :size-array
    :margin                :size-array
    :grid-template-rows    :tracks
    :grid-template-columns :tracks})

frontend/src/app/util/code_gen/style_css_values.cljs

@@ -282,6 +282,26 @@
       (when (or (not= p1 0) (not= p2 0) (not= p3 0) (not= p4 0))
         [p1 p2 p3 p4]))))
 
+(defmethod get-value :padding-block-start
+  [_ {:keys [layout-padding]} _ _]
+  (when (and (:p1 layout-padding) (not= (:p1 layout-padding) 0))
+    [(:p1 layout-padding)]))
+
+(defmethod get-value :padding-inline-end
+  [_ {:keys [layout-padding]} _ _]
+  (when (and (:p2 layout-padding) (not= (:p2 layout-padding) 0))
+    [(:p2 layout-padding)]))
+
+(defmethod get-value :padding-block-end
+  [_ {:keys [layout-padding]} _ _]
+  (when (and (:p3 layout-padding) (not= (:p3 layout-padding) 0))
+    [(:p3 layout-padding)]))
+
+(defmethod get-value :padding-inline-start
+  [_ {:keys [layout-padding]} _ _]
+  (when (and (:p4 layout-padding) (not= (:p4 layout-padding) 0))
+    [(:p4 layout-padding)]))
+
 (defmethod get-value :grid-template-rows
   [_ shape _ _]
   (:layout-grid-rows shape))