diff --git a/frontend/src/app/main/data/workspace/tokens/import_export.cljs b/frontend/src/app/main/data/workspace/tokens/import_export.cljs index 545d893d27..f9793d38c8 100644 --- a/frontend/src/app/main/data/workspace/tokens/import_export.cljs +++ b/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" + token-type + (i18n/tr "labels.warning-count" (i18n/c (count token-paths)))) + "")) + (str/join "")) :type :toast :level :info}))) diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs index efa97a9247..a8fbe76c0e 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs +++ b/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] - [:show-detail {:optional true} [:maybe :boolean]] - [:on-toggle-detail {:optional true} [:maybe fn?]]]) + [:is-html {:optional true} :boolean]]) (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)} - [:div {:class (stl/css :error-detail-title)} - [:> icon-button* - {:icon (if show-detail "arrow-down" "arrow") - :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}}])])])) + [:details {:class (stl/css :error-detail)} + [:summary {:class (stl/css :error-detail-summary)} (tr "workspace.notification-pill.detail")] + [:div {:class (stl/css :error-detail-content) + :dangerouslySetInnerHTML #js {:__html detail}}]])])) diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss index 3974567f7c..0124798e98 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss +++ b/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 { - display: flex; - align-items: center; +.error-detail-summary { + list-style: none; cursor: pointer; -} + position: relative; -.expand-icon { - --icon-fill-color: var(--color-foreground-primary); - --icon-stroke-color: var(--color-foreground-primary); + &::marker { + display: none; + } + + &::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; + } } diff --git a/frontend/src/app/main/ui/ds/notifications/toast.cljs b/frontend/src/app/main/ui/ds/notifications/toast.cljs index f83dbd5fd6..c00827eb89 100644 --- a/frontend/src/app/main/ui/ds/notifications/toast.cljs +++ b/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-toggle-detail {:optional true} [:maybe fn?]]]) + [:on-close {:optional true} 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 - :show-detail show-detail - :on-toggle-detail on-toggle-detail} children] + :detail detail} children] ;; TODO: this should be a buttom from the DS, but this variant is not designed yet. diff --git a/frontend/src/app/main/ui/notifications.cljs b/frontend/src/app/main/ui/notifications.cljs index de7161db99..e318946b6a 100644 --- a/frontend/src/app/main/ui/notifications.cljs +++ b/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) "") - - show-detail* (mf/use-state false) - - handle-toggle-detail - (mf/use-fn - (fn [] - (swap! show-detail* not)))] + content (or (:content notification) "")] (when notification (cond @@ -43,9 +36,8 @@ {:level (or (:level notification) :info) :type (:type notification) :detail (:detail notification) - :on-close on-close - :show-detail @show-detail* - :on-toggle-detail handle-toggle-detail} content] + :on-close on-close} + content] inline? [:& inline-notification diff --git a/frontend/stylelint.config.mjs b/frontend/stylelint.config.mjs index d0b144242f..99a9474a2b 100644 --- a/frontend/stylelint.config.mjs +++ b/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, diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 5f19fc3290..65c38e5ccd 100644 --- a/frontend/translations/en.po +++ b/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"