♻️ Improve import/export warning semantics (#8991)

frontend/src/app/main/data/workspace/tokens/import_export.cljs

@@ -16,7 +16,7 @@
    [app.main.data.tokenscript :as ts]
    [app.main.data.workspace.tokens.errors :as wte]
    [app.main.store :as st]
-   [app.util.i18n :refer [tr]]
+   [app.util.i18n :as i18n]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
 
@@ -47,15 +47,18 @@
   (let [type->tokens (group-by-value unknown-tokens)]
     (l/wrn :hint "unsupported token types found during import"
            :tokens (str/join ", " (map (fn [[path type]] (str path " (" type ")")) unknown-tokens)))
-    (ntf/show {:content (tr "workspace.tokens.unknown-token-type-message")
+    (ntf/show {:content (i18n/tr "workspace.tokens.unknown-token-type-message")
                :detail (->> (for [[token-type token-paths] type->tokens]
-                              (str (tr "workspace.tokens.unknown-token-type-section" token-type (count token-paths))
+                              (str (i18n/tr "workspace.tokens.unknown-token-type-section"
-                                   "<br>"
+                                            token-type
+                                            (i18n/tr "labels.warning-count" (i18n/c (count token-paths))))
+                                   "<ul>"
                                    (->> token-paths
                                         (sort)
-                                        (map #(str "&nbsp;&nbsp;• " %))
+                                        (map #(str "<li>" % "</li>"))
-                                        (str/join "<br>"))))
+                                        (str/join ""))
-                            (str/join "<br><br>"))
+                                   "</ul>"))
+                            (str/join ""))
                :type :toast
                :level :info})))
 

frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs

@@ -9,7 +9,6 @@
    [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
-   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -29,13 +28,11 @@
    [:level [:enum :default :info :warning :error :success]]
    [:type  [:enum :toast :context]]
    [:appearance {:optional true} [:enum :neutral :ghost]]
-   [:is-html {:optional true} :boolean]
+   [:is-html {:optional true} :boolean]])
-   [:show-detail {:optional true} [:maybe :boolean]]
-   [:on-toggle-detail {:optional true} [:maybe fn?]]])
 
 (mf/defc notification-pill*
   {::mf/schema schema:notification-pill}
-  [{:keys [level type is-html appearance detail children show-detail on-toggle-detail]}]
+  [{:keys [level type is-html appearance detail children]}]
   (let [class (stl/css-case :appearance-neutral (= appearance :neutral)
                             :appearance-ghost (= appearance :ghost)
                             :with-detail detail
@@ -60,16 +57,7 @@
         children)]
 
      (when detail
-       [:div {:class (stl/css :error-detail)}
+       [:details {:class (stl/css :error-detail)}
-        [:div {:class (stl/css :error-detail-title)}
+        [:summary {:class (stl/css :error-detail-summary)} (tr "workspace.notification-pill.detail")]
-         [:> icon-button*
+        [:div {:class (stl/css :error-detail-content)
-          {:icon (if show-detail "arrow-down" "arrow")
+               :dangerouslySetInnerHTML #js {:__html detail}}]])]))
-           :aria-label (tr "workspace.notification-pill.detail")
-           :icon-class (stl/css :expand-icon)
-           :variant "action"
-           :on-click on-toggle-detail}]
-         [:div {:on-click on-toggle-detail}
-          (tr "workspace.notification-pill.detail")]]
-        (when show-detail
-          [:div {:class (stl/css :error-detail-content)
-                 :dangerouslySetInnerHTML #js {:__html detail}}])])]))

frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss

@@ -98,20 +98,38 @@
 }
 
 .error-detail {
-  overflow: auto;
+  list-style: none;
+  padding-inline-start: var(--sp-xxl);
 }
 
-.error-detail-title {
+.error-detail-summary {
-  display: flex;
+  list-style: none;
-  align-items: center;
   cursor: pointer;
-}
+  position: relative;
 
-.expand-icon {
+  &::marker {
-  --icon-fill-color: var(--color-foreground-primary);
+    display: none;
-  --icon-stroke-color: var(--color-foreground-primary);
+  }
+
+  &::before {
+    content: "‣";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: -1.5rem;
+    inline-size: $sz-16;
+    text-box: trim-start cap alphabetic;
+    text-align: end;
+    font-size: 1lh;
+    line-height: 1;
+    font-weight: 700;
+    color: currentcolor;
+  }
 }
 
 .error-detail-content {
-  padding-left: var(--sp-xxxl);
+  padding-block-start: var(--sp-s);
+
+  & ul {
+    list-style: disc inside;
+  }
 }

frontend/src/app/main/ui/ds/notifications/toast.cljs

@@ -21,13 +21,11 @@
    [:level {:optional true} [:maybe [:enum :default :info :warning :error :success]]]
    [:appearance {:optional true} [:enum :neutral :ghost]]
    [:is-html {:optional true} :boolean]
-   [:show-detail {:optional true} [:maybe :boolean]]
+   [:on-close {:optional true} fn?]])
-   [:on-close {:optional true} fn?]
-   [:on-toggle-detail {:optional true} [:maybe fn?]]])
 
 (mf/defc toast*
   {::mf/schema schema:toast}
-  [{:keys [class level appearance type is-html children detail show-detail on-close on-toggle-detail] :rest props}]
+  [{:keys [class level appearance type is-html children detail on-close] :rest props}]
   (let [class (dm/str class " " (stl/css :toast))
         level (if (string? level)
                 (keyword level)
@@ -47,9 +45,7 @@
                              :type type
                              :is-html is-html
                              :appearance appearance
-                             :detail detail
+                             :detail detail} children]
-                             :show-detail show-detail
-                             :on-toggle-detail on-toggle-detail} children]
 
 
      ;; TODO: this should be a buttom from the DS, but this variant is not designed yet.

frontend/src/app/main/ui/notifications.cljs

@@ -27,14 +27,7 @@
                          (= :floating (:position notification)))
         toast?       (or (= :toast (:type notification))
                          (some? (:timeout notification)))
-        content     (or (:content notification) "")
+        content     (or (:content notification) "")]
-
-        show-detail* (mf/use-state false)
-
-        handle-toggle-detail
-        (mf/use-fn
-         (fn []
-           (swap! show-detail* not)))]
 
     (when notification
       (cond
@@ -43,9 +36,8 @@
          {:level (or (:level notification) :info)
           :type (:type notification)
           :detail (:detail notification)
-          :on-close on-close
+          :on-close on-close}
-          :show-detail @show-detail*
+         content]
-          :on-toggle-detail handle-toggle-detail} content]
 
         inline?
         [:& inline-notification

frontend/stylelint.config.mjs

@@ -48,7 +48,7 @@ export default {
     "color-named": "never",
     // "declaration-no-important": true,
     "declaration-property-unit-allowed-list": {
-      "font-size": ["rem"],
+      "font-size": ["rem", "lh"],
       "/^animation/": ["s"],
     },
     // // 'order/properties-alphabetical-order': true,

frontend/translations/en.po

@@ -2594,6 +2594,12 @@ msgstr "Empty"
 msgid "labels.error"
 msgstr "Error"
 
+#: src/app/main/ui/dashboard/import.cljs:297
+msgid "labels.warning-count"
+msgid_plural "labels.warning-count"
+msgstr[0] "%s warning"
+msgstr[1] "%s warnings"
+
 #: src/app/main/ui/onboarding/questions.cljs:404
 #, unused
 msgid "labels.event"