🐛 Apply design review fixes for variant connection help (#11186) (#7016)

frontend/src/app/main/ui/components/title_bar.cljs

@@ -18,13 +18,13 @@
   {::mf/props :obj}
   [{:keys [class collapsable collapsed title children
            btn-children all-clickable add-icon-gap
-           on-collapsed on-btn-click]}]
+           title-class on-collapsed on-btn-click]}]
   (let [klass     (stl/css-case :title-bar true
                                 :all-clickable all-clickable)
         klass     (dm/str klass " " class)]
     [:div {:class klass}
      (if ^boolean collapsable
-       [:div {:class (stl/css :title-wrapper)}
+       [:div {:class [(stl/css :title-wrapper) title-class]}
         (if ^boolean all-clickable
           [:button {:class (stl/css :toggle-btn)
                     :on-click on-collapsed}
@@ -41,9 +41,9 @@
             chevron-icon]
            [:div {:class (stl/css :title)}
             title]])]
-       [:div {:class (stl/css-case
+       [:div {:class [(stl/css-case
-                      :title-only true
+                       :title-only true
-                      :title-only-icon-gap add-icon-gap)}
+                       :title-only-icon-gap add-icon-gap) title-class]}
         title])
      children
      (when (some? on-btn-click)

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

@@ -812,6 +812,12 @@
         (mf/use-fn
          #(swap! state* assoc :menu-open false))
 
+        on-click-variant-title-help
+        (mf/use-fn
+         (fn []
+           (modal/show! {:type :variants-help-modal})
+           (modal/allow-click-outside!)))
+
         on-component-back
         (mf/use-fn
          #(st/emit! ::dwsp/interrupt))
@@ -852,13 +858,21 @@
                          :collapsed    (not open?)
                          :on-collapsed toggle-content
                          :title        (tr "workspace.options.component")
-                         :class        (stl/css :title-spacing-component)}
+                         :class        (stl/css :title-spacing-component)
+                         :title-class (stl/css-case :title-bar-variant is-variant?)}
            [:span {:class (stl/css :copy-text)}
             (if main-instance?
               (if is-variant?
                 (tr "workspace.options.component.variant")
                 (tr "workspace.options.component.main"))
-              (tr "workspace.options.component.copy"))]])]
+              (tr "workspace.options.component.copy"))]
+
+           (when is-variant?
+             [:div {:class (stl/css :variants-help-modal-button)}
+              [:> icon-button* {:variant "ghost"
+                                :aria-label (tr "workspace.options.component.variants-help-modal.title")
+                                :on-click on-click-variant-title-help
+                                :icon "help"}]])])]
 
        (when open?
          [:div {:class (stl/css :element-content)}

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

@@ -35,6 +35,11 @@
 .title-spacing-component {
   justify-content: flex-start;
   gap: $s-4;
+  margin-bottom: $s-4;
+}
+
+.title-bar-variant {
+  flex-grow: 0;
 }
 
 .variants-help-modal-button {

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

@@ -57,7 +57,7 @@
          [:li {:class (stl/css :rule-item)}
           [:div {:class (stl/css :rule-item-icon)}
            [:> icon* {:icon-id i/text-mixed
-                      :size "s"
+                      :size "m"
                       :aria-hidden true}]]
 
           [:div {:class (stl/css :rule-item-text)}
@@ -68,7 +68,7 @@
          [:li {:class (stl/css :rule-item)}
           [:div {:class (stl/css :rule-item-icon)}
            [:> icon* {:icon-id i/img
-                      :size "s"
+                      :size "m"
                       :aria-hidden true}]]
 
           [:> text* {:typography t/body-large
@@ -79,7 +79,7 @@
          [:li {:class (stl/css :rule-item)}
           [:div {:class (stl/css :rule-item-icon)}
            [:> icon* {:icon-id i/folder
-                      :size "s"
+                      :size "m"
                       :aria-hidden true}]]
 
           [:> text* {:class (stl/css :rule-item-text)

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

@@ -13,7 +13,7 @@
 .modal-dialog {
   @extend .modal-container-base;
 
-  max-width: $s-800;
+  max-width: $s-888;
   width: 100%;
   max-height: unset;
 }
@@ -27,6 +27,7 @@
   display: flex;
   color: var(--color-foreground-secondary);
   padding-block-end: $s-32;
+  gap: $s-32;
 }
 
 .modal-close-btn {
@@ -72,13 +73,20 @@
 .button-row {
   display: flex;
   justify-content: end;
-  padding-block-start: $s-8;
 }
 
 .help-text {
-  inline-size: 100%;
+  flex: 0 1 50%;
+
+  :last-child {
+    margin-block-end: 0;
+  }
 }
 
-.help-image img {
+.help-image {
-  inline-size: 374px;
+  flex: 0 1 50%;
+
+  img {
+    border-radius: $br-8;
+  }
 }

frontend/translations/en.po

@@ -5521,25 +5521,25 @@ msgid "workspace.options.component.variants-help-modal.title"
 msgstr "How variants stay connected"
 
 msgid "workspace.options.component.variants-help-modal.intro"
-msgstr "To keep changes when switching between variants, Penpot connects layers using these rules:"
+msgstr "To keep changes when switching between variants, Penpot connects layers that:"
 
 msgid "workspace.options.component.variants-help-modal.rule1"
-msgstr "Same name"
+msgstr "Share the same name."
 
 msgid "workspace.options.component.variants-help-modal.rule2"
-msgstr "Same type"
+msgstr "Are the same type"
 
 msgid "workspace.options.component.variants-help-modal.rule2.detail"
-msgstr "Rectangle, ellipsis, paths and boolean operations count as same type"
+msgstr "Rectangle, ellipsis, paths and boolean operations count as same type."
 
 msgid "workspace.options.component.variants-help-modal.rule3"
-msgstr "Same hierachy level"
+msgstr "Have the same hierachy level"
 
 msgid "workspace.options.component.variants-help-modal.rule3.detail"
-msgstr "Goups, boards and layouts are considered equivalent"
+msgstr "Goups, boards and layouts are considered equivalent."
 
 msgid "workspace.options.component.variants-help-modal.outro"
-msgstr "Changing any of these (e.g., renaming or moving a layer) breaks the connection, but reverting the change will restore it."
+msgstr "Changing any of these (e.g., renaming or grouping a layer) breaks the connection, but reverting the change will restore it."
 
 #: src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs:163
 msgid "workspace.options.constraints"