♻️ Review inspect tab UI (#7727)

* ♻️ Review inspect tab UI

* ♻️ Capitalize English strings and remove from styles

* ♻️ Set a minimum size por color space selector and adjust visually the UI

* 🐛 Fix error on hooks order when selecting texts

* 🐛 Set minim size to inspect tab element

* 🐛 Fix broken typography panel

* ♻️ Design review

frontend/src/app/main/ui/ds/utilities/swatch.scss

@@ -26,7 +26,7 @@
   border: $b-1 solid var(--border-color);
   border-radius: var(--border-radius);
   overflow: hidden;
-  &:focus {
+  &:focus-visible {
     --border-color: var(--color-accent-primary);
   }
 }

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

@@ -21,4 +21,5 @@
 
 .workspace-element-options {
   height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  padding-inline: var(--sp-m);
 }

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

@@ -15,6 +15,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  padding-inline: var(--sp-m);
 }
 
 .viewer-code-block {

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

@@ -165,7 +165,8 @@
             [:span {:class (stl/css :inspect-tab-switcher-label)} (tr "inspect.tabs.switcher.label")]
             [:div {:class (stl/css :inspect-tab-switcher-controls)}
              [:div {:class (stl/css :inspect-tab-switcher-controls-color-space)}
-              [:> select* {:options color-spaces
+              [:> select* {:class (stl/css :inspect-tab-switcher-controls-color-space-select)
+                           :options color-spaces
                            :default-selected "hex"
                            :variant "ghost"
                            :on-change handle-change-color-space}]]

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

@@ -7,65 +7,69 @@
 @use "ds/typography.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_utils.scss" as *;
 
 .settings-bar-right {
-  min-width: deprecated.$s-252;
-  width: 100%;
-  height: 100vh;
+  min-inline-size: px2rem(252);
+  inline-size: 100%;
+  block-size: 100vh;
   position: relative;
-  left: unset;
-  right: unset;
+  inset-inline-start: unset;
+  inset-inline-end: unset;
   grid-area: right-sidebar;
   overflow: hidden;
 
   &.viewer-code {
-    height: calc(100vh - deprecated.$s-48);
+    block-size: calc(100vh - $sz-48);
   }
 }
 
 .viewer-code {
-  padding-inline-start: deprecated.$s-8;
+  padding-inline-start: var(--sp-s);
 }
 
 .tool-windows {
-  height: 100%;
+  block-size: 100%;
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-8;
-  padding-left: var(--sp-m);
+  gap: var(--sp-s);
 }
 
 .shape-info {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  gap: deprecated.$s-8;
+  gap: var(--sp-s);
   align-items: center;
-  height: deprecated.$s-32;
+  block-size: $sz-32;
+  padding-inline-start: var(--sp-m);
 }
 
 .shape-info-subtitle {
-  height: fit-content;
+  block-size: fit-content;
   align-items: flex-start;
 }
 
 .layers-icon,
 .shape-icon {
-  @include deprecated.flexCenter;
-  height: deprecated.$s-32;
   --icon-stroke-color: var(--color-foreground-primary);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: $sz-32;
 }
 
 .layer-title {
   @include deprecated.bodySmallTypography;
   @include deprecated.textEllipsis;
-  height: deprecated.$s-32;
-  padding: deprecated.$s-8 0;
+  block-size: $sz-32;
+  padding: var(--sp-s) 0;
   color: var(--color-foreground-primary);
 }
 
 .layer-title-with-subtitle {
-  height: fit-content;
-  padding-bottom: 0;
+  block-size: fit-content;
+  padding-block-end: 0;
 }
 
 .layer-subtitle {
@@ -78,8 +82,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: deprecated.$s-40;
-  padding-top: deprecated.$s-24;
+  gap: $sz-40;
+  padding-top: $sz-24;
 }
 
 .code-info,
@@ -87,8 +91,8 @@
   @include deprecated.flexColumn;
   align-items: center;
   justify-content: flex-start;
-  gap: deprecated.$s-12;
-  margin-right: deprecated.$s-8;
+  gap: var(--sp-m);
+  margin-inline-end: var(--sp-s);
 }
 
 .placeholder-icon {
@@ -98,44 +102,52 @@
 .placeholder-label {
   @include deprecated.bodySmallTypography;
   text-align: center;
-  width: deprecated.$s-200;
+  inline-size: px2rem(200);
   color: var(--empty-message-foreground-color);
 }
 
 .more-info-btn {
   @extend .button-secondary;
   @include deprecated.uppercaseTitleTipography;
-  height: deprecated.$s-32;
-  padding: deprecated.$s-8 deprecated.$s-24;
+  block-size: $sz-32;
+  padding: var(--sp-s) var(--sp-xxl);
 }
 
 .inspect-tab-switcher {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-block: var(--sp-s);
-  padding-inline-end: var(--sp-m);
+  padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-m);
+  gap: var(--sp-m);
 }
 
 .inspect-tab-switcher-label {
   @include use-typography("body-medium");
   color: var(--color-foreground-primary);
-  flex: 1;
+  flex: 0;
+  min-inline-size: fit-content;
 }
 
 .inspect-tab-switcher-controls {
   display: flex;
   align-items: center;
-  flex: 2;
+  flex: 1;
   gap: var(--sp-s);
+  justify-content: flex-end;
 }
 
 .inspect-tab-switcher-controls-color-space {
-  flex: 1 0 $sz-24;
+  // 65px is the minimum size of the switcher to avoid text ellipsis on the options
+  flex: 0 0 65px;
+}
+
+.inspect-tab-switcher-controls-color-space-select {
+  justify-self: end;
 }
 
 .inspect-tab-switcher-controls-tab {
-  flex: 2;
+  // 110px is the minimum size of the switcher to avoid text ellipsis on the options
+  flex: 0 0 110px;
 }
 
 .inspect-content {
@@ -147,14 +159,6 @@
   --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
 
-  /* same height as .element-options in workspace/sidebar/options.scss */
-  /* which is one of the parents of this component */
-  --max-inspect-tab-height: var(--sidebar-element-options-height);
-  max-block-size: var(--max-inspect-tab-height);
-
+  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
   overflow: auto;
 }
-
-.viewer-tab-switcher-layout {
-  display: grid;
-}

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

@@ -41,20 +41,19 @@
 
 (defn- generate-typography-shorthand
   [shapes]
-  (when (= (count shapes) 1)
-    (let [shape (first shapes)
-          style-text-blocks (get-style-text shape)]
-      (reduce
-       (fn [acc [style _]]
-         (let [font-style (:font-style style)
-               font-family (dm/str (:font-family style))
-               font-size (:font-size style)
-               font-weight (:font-weight style)
-               line-height (:line-height style)
-               text-transform (:text-transform style)]
-           (dm/str acc "font:" font-style " " text-transform " " font-weight " " font-size "/" line-height " "  \"  font-family  \" ";")))
-       ""
-       style-text-blocks))))
+  (let [shape (first shapes)
+        style-text-blocks (get-style-text shape)]
+    (reduce
+     (fn [acc [style _]]
+       (let [font-style (:font-style style)
+             font-family (dm/str (:font-family style))
+             font-size (:font-size style)
+             font-weight (:font-weight style)
+             line-height (:line-height style)
+             text-transform (:text-transform style)]
+         (dm/str acc "font:" font-style " " text-transform " " font-weight " " font-size "/" line-height " "  \"  font-family  \" ";")))
+     ""
+     style-text-blocks)))
 
 (mf/defc typography-name-block*
   [{:keys [style]}]
@@ -76,6 +75,123 @@
                                :format color-space
                                :copiable true}]))
 
+(mf/defc style-text-block*
+  [{:keys [shape style text resolved-tokens color-space]}]
+  (let [copied* (mf/use-state false)
+        copied (deref copied*)
+        text (str/trim text)
+        copy-text
+        (mf/use-fn
+         (mf/deps copied)
+         (fn []
+           (let [formatted-text (if (= (:text-transform style) "uppercase")
+                                  (.toUpperCase text)
+                                  text)]
+             (reset! copied* true)
+             (wapi/write-to-clipboard formatted-text)
+             (tm/schedule 1000 #(reset! copied* false)))))
+        composite-typography-token (get-resolved-token :typography shape resolved-tokens)]
+    [:div {:class (stl/css :text-properties)}
+
+     (when (:fills style)
+       (for [[idx fill] (map-indexed vector (:fills style))]
+         [:> typography-color-row* {:key idx
+                                    :fill fill
+                                    :shape shape
+                                    :resolved-tokens resolved-tokens
+                                    :color-space color-space}]))
+
+      ;; Typography style
+     (when (and (not composite-typography-token)
+                (:typography-ref-id style))
+       [:> typography-name-block* {:style style}])
+
+     ;; Composite Typography token
+     (when (and (not (:typography-ref-id style))
+                composite-typography-token)
+       [:> properties-row* {:term "Typography"
+                            :detail (:name composite-typography-token)
+                            :token composite-typography-token
+                            :property (:name composite-typography-token)
+                            :copiable true}])
+
+     (when (:font-id style)
+       (let [name (get (fonts/get-font-data (:font-id style)) :name)
+             resolved-token (get-resolved-token :font-family shape resolved-tokens)]
+         [:> properties-row* {:term "Font Family"
+                              :detail name
+                              :token resolved-token
+                              :property (str "font-family: \"" name "\";")
+                              :copiable true}]))
+
+     (when (:font-style style)
+       [:> properties-row* {:term "Font Style"
+                            :detail (:font-style style)
+                            :property (str "font-style: " (:font-style style) ";")
+                            :copiable true}])
+
+     (when (:font-size style)
+       (let [font-size (fmt/format-pixels (:font-size style))
+             resolved-token (get-resolved-token :font-size shape resolved-tokens)]
+         [:> properties-row* {:term "Font Size"
+                              :detail font-size
+                              :token resolved-token
+                              :property (str "font-size: " font-size ";")
+                              :copiable true}]))
+     (when (:font-weight style)
+       (let [resolved-token (get-resolved-token :font-weight shape resolved-tokens)]
+         [:> properties-row* {:term "Font Weight"
+                              :detail (:font-weight style)
+                              :token resolved-token
+                              :property (str "font-weight: " (:font-weight style) ";")
+                              :copiable true}]))
+
+     (when (:line-height style)
+       (let [line-height (:line-height style)
+             resolved-token (get-resolved-token :line-height shape resolved-tokens)]
+         [:> properties-row* {:term "Line Height"
+                              :detail (str line-height)
+                              :token resolved-token
+                              :property (str "line-height: " line-height ";")
+                              :copiable true}]))
+
+     (when (:letter-spacing style)
+       (let [letter-spacing (fmt/format-pixels (:letter-spacing style))
+             resolved-token (get-resolved-token :letter-spacing shape resolved-tokens)]
+         [:> properties-row* {:term "Letter Spacing"
+                              :detail letter-spacing
+                              :token resolved-token
+                              :property (str "letter-spacing: " letter-spacing ";")
+                              :copiable true}]))
+
+     (when (:text-decoration style)
+       (let [resolved-token (get-resolved-token :text-decoration shape resolved-tokens)]
+         [:> properties-row* {:term "Text Decoration"
+                              :detail (:text-decoration style)
+                              :token resolved-token
+                              :property (str "text-decoration: " (:text-decoration style) ";")
+                              :copiable true}]))
+
+     (when (:text-transform style)
+       (let [resolved-token (get-resolved-token :text-case shape resolved-tokens)]
+         [:> properties-row* {:term "Text Transform"
+                              :detail (:text-transform style)
+                              :token resolved-token
+                              :property (str "text-transform: " (:text-transform style) ";")
+                              :copiable true}]))
+
+     [:pre {:class (stl/css :text-content-wrapper)
+            :role "presentation"}
+      [:> property-detail-copiable* {:copied copied
+                                     :on-click copy-text}
+       [:span {:class (stl/css :text-content)
+               :style {:font-family (:font-family style)
+                       :font-weight (:font-weight style)
+                       :text-transform (:text-transform style)
+                       :letter-spacing (fmt/format-pixels (:letter-spacing style))
+                       :font-style (:font-style style)}}
+        text]]]]))
+
 (mf/defc text-panel*
   [{:keys [shapes resolved-tokens color-space on-font-shorthand]}]
   (let [shorthand* (mf/use-state #(generate-typography-shorthand shapes))
@@ -88,123 +204,13 @@
                            :property shorthand})))
     [:div {:class (stl/css :text-panel)}
      (for [shape shapes]
-       (let [style-text-blocks (get-style-text shape)
-             composite-typography-token (get-resolved-token :typography shape resolved-tokens)]
+       (let [style-text-blocks (get-style-text shape)]
          [:div {:key (:id shape) :class (stl/css :text-shape)}
           (for [[style text] style-text-blocks]
+            [:> style-text-block* {:key (:id shape)
+                                   :shape shape
+                                   :style style
+                                   :text text
+                                   :resolved-tokens resolved-tokens
+                                   :color-space color-space}])]))]))
 
-            [:div {:key (:id shape) :class (stl/css :text-properties)}
-
-             (when (:fills style)
-               (for [[idx fill] (map-indexed vector (:fills style))]
-                 [:> typography-color-row* {:key idx
-                                            :fill fill
-                                            :shape shape
-                                            :resolved-tokens resolved-tokens
-                                            :color-space color-space}]))
-
-           ;; Typography style
-             (when (and (not composite-typography-token)
-                        (:typography-ref-id style))
-               [:> typography-name-block* {:style style}])
-
-           ;; Composite Typography token
-             (when (and (not (:typography-ref-id style))
-                        composite-typography-token)
-               [:> properties-row* {:term "Typography"
-                                    :detail (:name composite-typography-token)
-                                    :token composite-typography-token
-                                    :property (:name composite-typography-token)
-                                    :copiable true}])
-
-             (when (:font-id style)
-               (let [name (get (fonts/get-font-data (:font-id style)) :name)
-                     resolved-token (get-resolved-token :font-family shape resolved-tokens)]
-                 [:> properties-row* {:term "Font Family"
-                                      :detail name
-                                      :token resolved-token
-                                      :property (str "font-family: \"" name "\";")
-                                      :copiable true}]))
-
-             (when (:font-style style)
-               [:> properties-row* {:term "Font Style"
-                                    :detail (:font-style style)
-                                    :property (str "font-style: " (:font-style style) ";")
-                                    :copiable true}])
-
-             (when (:font-size style)
-               (let [font-size (fmt/format-pixels (:font-size style))
-                     resolved-token (get-resolved-token :font-size shape resolved-tokens)]
-                 [:> properties-row* {:term "Font Size"
-                                      :detail font-size
-                                      :token resolved-token
-                                      :property (str "font-size: " font-size ";")
-                                      :copiable true}]))
-             (when (:font-weight style)
-               (let [resolved-token (get-resolved-token :font-weight shape resolved-tokens)]
-                 [:> properties-row* {:term "Font Weight"
-                                      :detail (:font-weight style)
-                                      :token resolved-token
-                                      :property (str "font-weight: " (:font-weight style) ";")
-                                      :copiable true}]))
-
-             (when (:line-height style)
-               (let [line-height (:line-height style)
-                     resolved-token (get-resolved-token :line-height shape resolved-tokens)]
-                 [:> properties-row* {:term "Line Height"
-                                      :detail (str line-height)
-                                      :token resolved-token
-                                      :property (str "line-height: " line-height ";")
-                                      :copiable true}]))
-
-             (when (:letter-spacing style)
-               (let [letter-spacing (fmt/format-pixels (:letter-spacing style))
-                     resolved-token (get-resolved-token :letter-spacing shape resolved-tokens)]
-                 [:> properties-row* {:term "Letter Spacing"
-                                      :detail letter-spacing
-                                      :token resolved-token
-                                      :property (str "letter-spacing: " letter-spacing ";")
-                                      :copiable true}]))
-
-             (when (:text-decoration style)
-               (let [resolved-token (get-resolved-token :text-decoration shape resolved-tokens)]
-                 [:> properties-row* {:term "Text Decoration"
-                                      :detail (:text-decoration style)
-                                      :token resolved-token
-                                      :property (str "text-decoration: " (:text-decoration style) ";")
-                                      :copiable true}]))
-
-             (when (:text-transform style)
-               (let [resolved-token (get-resolved-token :text-case shape resolved-tokens)]
-                 [:> properties-row* {:term "Text Transform"
-                                      :detail (:text-transform style)
-                                      :token resolved-token
-                                      :property (str "text-transform: " (:text-transform style) ";")
-                                      :copiable true}]))
-             (when text
-               (let [copied* (mf/use-state false)
-                     copied (deref copied*)
-
-                     text (str/trim text)
-
-                     copy-text
-                     (mf/use-fn
-                      (mf/deps copied)
-                      (fn []
-                        (let [formatted-text (if (= (:text-transform style) "uppercase")
-                                               (.toUpperCase text)
-                                               text)]
-                          (reset! copied* true)
-                          (wapi/write-to-clipboard formatted-text)
-                          (tm/schedule 1000 #(reset! copied* false)))))]
-                 [:pre {:class (stl/css :text-content-wrapper)
-                        :role "presentation"}
-                  [:> property-detail-copiable* {:copied copied
-                                                 :on-click copy-text}
-                   [:span {:class (stl/css :text-content)
-                           :style {:font-family (:font-family style)
-                                   :font-weight (:font-weight style)
-                                   :text-transform (:text-transform style)
-                                   :letter-spacing (fmt/format-pixels (:letter-spacing style))
-                                   :font-style (:font-style style)}}
-                    text]]]))])]))]))

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

@@ -53,6 +53,12 @@
   display: none;
 }
 
+:where(.property-detail-text, .property-detail-text-token) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .property-detail-text {
   color: var(--detail-color);
 }
@@ -62,7 +68,4 @@
   --detail-color: var(--color-token-foreground);
 
   line-height: 1.4;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 }

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

@@ -26,8 +26,8 @@
     :blur       (tr "labels.blur")
     :shadow     (tr "labels.shadow")
     :layout     (tr "labels.layout")
-    :flex-element "Flex element"
-    :grid-element "Grid element"
+    :flex-element "Flex Element"
+    :grid-element "Grid Element"
     :layout-element "Layout Element"
     :visibility (tr "labels.visibility")
     :svg        (tr "labels.svg")

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

@@ -11,8 +11,16 @@
   --title-padding: var(--sp-s);
   --title-color: var(--color-foreground-primary);
   --arrow-color: var(--color-foreground-secondary);
+  --box-border-color: var(--color-background-primary);
+
+  // TODO: this must be a custom property in the design system
+  --lowEmphasis-background: #121214;
 
   padding-block: var(--sp-s);
+  padding-inline: var(--sp-m);
+  background-color: var(--lowEmphasis-background);
+
+  border-block-end: 2px solid var(--box-border-color);
 }
 
 .disclosure-header {
@@ -36,7 +44,6 @@
 
 .panel-title {
   @include use-typography("headline-small");
-  text-transform: capitalize;
   flex: 1;
   color: var(--title-color);
 }

frontend/translations/en.po

@@ -1989,7 +1989,7 @@ msgstr "Active themes"
 
 #: src/app/main/ui/inspect/styles/style_box.cljs:20
 msgid "inspect.tabs.styles.panel.variant"
-msgstr "Variant properties"
+msgstr "Variant Properties"
 
 #: src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:102, src/app/main/ui/inspect/styles/rows/properties_row.cljs:53
 msgid "inspect.tabs.styles.token.resolved-value"

frontend/translations/es.po

@@ -1992,7 +1992,7 @@ msgstr "Valor resuelto:"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:165
 msgid "inspect.tabs.switcher.label"
-msgstr "Información sobre la capa"
+msgstr "Info. de capa"
 
 #: src/app/main/ui/dashboard/comments.cljs:96
 msgid "label.mark-all-as-read"