diff --git a/common/src/app/common/types/tokens_lib.cljc b/common/src/app/common/types/tokens_lib.cljc index 1df9c698ce..484d9c81df 100644 --- a/common/src/app/common/types/tokens_lib.cljc +++ b/common/src/app/common/types/tokens_lib.cljc @@ -625,6 +625,11 @@ When `before-set-name` is nil, move set to bottom") (delete-token-from-set [_ set-name token-name] "delete a token from a set") (toggle-set-in-theme [_ group-name theme-name set-name] "toggle a set used / not used in a theme") (get-active-themes-set-names [_] "set of set names that are active in the the active themes") + (sets-at-path-all-active? [_ prefixed-path] "compute active state for child sets at `prefixed-path`. +Will return a value that matches this schema: +`:none` None of the nested sets are active +`:all` All of the nested sets are active +`:partial` Mixed active state of nested sets") (get-active-themes-set-tokens [_] "set of set names that are active in the the active themes") (encode-dtcg [_] "Encodes library to a dtcg compatible json string") (decode-dtcg-json [_ parsed-json] "Decodes parsed json containing tokens and converts to library") @@ -870,6 +875,19 @@ When `before-set-name` is nil, move set to bottom") (mapcat :sets) (get-active-themes this))) + (sets-at-path-all-active? [this prefixed-path] + (let [active-set-names (get-active-themes-set-names this)] + (if (seq active-set-names) + (let [path-active-set-names (->> (get-sets-at-prefix-path this prefixed-path) + (map :name) + (into #{})) + difference (set/difference path-active-set-names active-set-names)] + (cond + (empty? difference) :all + (seq (set/intersection path-active-set-names active-set-names)) :partial + :else :none)) + :none))) + (get-active-themes-set-tokens [this] (let [sets-order (get-ordered-set-names this) active-themes (get-active-themes this) diff --git a/common/test/common_tests/types/tokens_lib_test.cljc b/common/test/common_tests/types/tokens_lib_test.cljc index 89148a4e53..f11829d98e 100644 --- a/common/test/common_tests/types/tokens_lib_test.cljc +++ b/common/test/common_tests/types/tokens_lib_test.cljc @@ -399,8 +399,39 @@ expected-tokens (ctob/get-active-themes-set-tokens tokens-lib) expected-token-names (mapv key expected-tokens)] (t/is (= '("set-a" "set-b" "inactive-set") expected-order)) - (t/is (= ["set-a-token" "set-b-token"] expected-token-names))))) + (t/is (= ["set-a-token" "set-b-token"] expected-token-names)))) + (t/testing "sets-at-path-active-state" + (let [tokens-lib (-> (ctob/make-tokens-lib) + + (ctob/add-set (ctob/make-token-set :name "foo/bar/baz")) + (ctob/add-set (ctob/make-token-set :name "foo/bar/bam")) + + (ctob/add-theme (ctob/make-token-theme :name "none")) + (ctob/add-theme (ctob/make-token-theme :name "partial" + :sets #{"foo/bar/baz"})) + (ctob/add-theme (ctob/make-token-theme :name "all" + :sets #{"foo/bar/baz" + "foo/bar/bam"})) + (ctob/add-theme (ctob/make-token-theme :name "invalid" + :sets #{"foo/missing"}))) + + expected-none (-> tokens-lib + (ctob/set-active-themes #{"/none"}) + (ctob/sets-at-path-all-active? "G-foo")) + expected-all (-> tokens-lib + (ctob/set-active-themes #{"/all"}) + (ctob/sets-at-path-all-active? "G-foo")) + expected-partial (-> tokens-lib + (ctob/set-active-themes #{"/partial"}) + (ctob/sets-at-path-all-active? "G-foo")) + expected-invalid-none (-> tokens-lib + (ctob/set-active-themes #{"/invalid"}) + (ctob/sets-at-path-all-active? "G-foo"))] + (t/is (= :none expected-none)) + (t/is (= :all expected-all)) + (t/is (= :partial expected-partial)) + (t/is (= :none expected-invalid-none))))) (t/deftest token-theme-in-a-lib (t/testing "add-token-theme" diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 16ebf7a767..dce5e74632 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -502,6 +502,14 @@ (def workspace-active-theme-paths (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib)) +(defn token-sets-at-path-all-active? + [prefixed-path] + (l/derived + (fn [lib] + (when lib + (ctob/sets-at-path-all-active? lib prefixed-path))) + tokens-lib)) + (def workspace-active-theme-paths-no-hidden (l/derived #(disj % ctob/hidden-token-theme-path) workspace-active-theme-paths)) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 476156b618..a3ff1a8b15 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -254,41 +254,41 @@ [{:keys [state set-state]}] (let [{:keys [theme-path]} @state [_ theme-group theme-name] theme-path + ordered-token-sets (mf/deref refs/workspace-ordered-token-sets) token-sets (mf/deref refs/workspace-token-sets-tree) theme (mf/deref (refs/workspace-token-theme theme-group theme-name)) + theme-state (mf/use-state theme) + lib (-> (ctob/make-tokens-lib) + (ctob/add-theme @theme-state) + (ctob/add-sets ordered-token-sets) + (ctob/activate-theme (:group @theme-state) (:name @theme-state))) + + ;; Form / Modal handlers on-back #(set-state (constantly {:type :themes-overview})) on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %)) {:keys [dropdown-open? _on-open-dropdown on-close-dropdown on-toggle-dropdown]} (wtco/use-dropdown-open-state) - theme-state (mf/use-state theme) disabled? (-> (:name @theme-state) (str/trim) (str/empty?)) - token-set-active? (mf/use-callback - (mf/deps theme-state) - (fn [set-name] - (get-in @theme-state [:sets set-name]))) - on-toggle-token-set (mf/use-callback - (mf/deps theme-state) - (fn [set-name] - (swap! theme-state #(ctob/toggle-set % set-name)))) - on-click-token-set (mf/use-callback - (mf/deps on-toggle-token-set) - (fn [prefixed-set-path-str] - (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)] - (on-toggle-token-set set-name)))) - on-change-field (fn [field value] - (swap! theme-state #(assoc % field value))) - on-save-form (mf/use-callback - (mf/deps theme-state on-submit) - (fn [e] - (dom/prevent-default e) - (let [theme (-> @theme-state - (update :name str/trim) - (update :group str/trim) - (update :description str/trim))] - (when-not (str/empty? (:name theme)) - (on-submit theme))) - (on-back))) + + on-change-field + (mf/use-fn + (fn [field value] + (swap! theme-state #(assoc % field value)))) + + on-save-form + (mf/use-callback + (mf/deps theme-state on-submit) + (fn [e] + (dom/prevent-default e) + (let [theme (-> @theme-state + (update :name str/trim) + (update :group str/trim) + (update :description str/trim))] + (when-not (str/empty? (:name theme)) + (on-submit theme))) + (on-back))) + close-modal (mf/use-fn (fn [e] @@ -300,7 +300,33 @@ (mf/deps theme on-back) (fn [] (st/emit! (wdt/delete-token-theme (:group theme) (:name theme))) - (on-back)))] + (on-back))) + + ;; Sets tree handlers + token-set-group-active? + (mf/use-callback + (mf/deps theme-state) + (fn [prefixed-path] + (ctob/sets-at-path-all-active? lib prefixed-path))) + + token-set-active? + (mf/use-callback + (mf/deps theme-state) + (fn [set-name] + (get-in @theme-state [:sets set-name]))) + + on-toggle-token-set + (mf/use-callback + (mf/deps theme-state) + (fn [set-name] + (swap! theme-state #(ctob/toggle-set % set-name)))) + + on-click-token-set + (mf/use-callback + (mf/deps on-toggle-token-set) + (fn [prefixed-set-path-str] + (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)] + (on-toggle-token-set set-name))))] [:div {:class (stl/css :themes-modal-wrapper)} [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)} @@ -327,6 +353,7 @@ {:token-sets token-sets :token-set-selected? (constantly false) :token-set-active? token-set-active? + :token-set-group-active? token-set-group-active? :on-select on-click-token-set :on-toggle-token-set on-toggle-token-set :origin "theme-modal" diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 55750c463f..1f75103a36 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.tokens.sets (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dm] [app.common.types.tokens-lib :as ctob] [app.main.data.tokens :as wdt] [app.main.refs :as refs] @@ -59,9 +60,28 @@ :auto-focus true :default-value default-value}])) +(mf/defc checkbox + [{:keys [checked aria-label on-click]}] + (let [all? (true? checked) + mixed? (= checked "mixed") + checked? (or all? mixed?)] + [:div {:role "checkbox" + :aria-checked (dm/str checked) + :tabindex 0 + :class (stl/css-case :checkbox-style true + :checkbox-checked-style checked?) + :on-click on-click} + (when checked? + [:> icon* + {:aria-label aria-label + :class (stl/css :check-icon) + :size "s" + :id (if mixed? ic/remove ic/tick)}])])) + (mf/defc sets-tree-set-group - [{:keys [label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}] + [{:keys [label tree-depth tree-path active? selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}] (let [editing?' (editing? tree-path) + active?' (active? tree-path) on-context-menu (mf/use-fn (mf/deps editing? tree-path) @@ -97,9 +117,16 @@ :on-create on-edit-reset ;; TODO Implement set group renaming :on-submit (constantly nil)}] - [:div {:class (stl/css :set-name) - :on-double-click #(on-edit tree-path)} - label])])) + [:* + [:div {:class (stl/css :set-name) + :on-double-click #(on-edit tree-path)} + label] + [:& checkbox + {:checked (case active?' + :all true + :partial "mixed" + :none false) + :arial-label (tr "workspace.token.select-set")}]])])) (mf/defc sets-tree-set [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}] @@ -150,18 +177,25 @@ [:div {:class (stl/css :set-name) :on-double-click #(on-edit tree-path)} label] - [:button {:type "button" - :on-click on-checkbox-click - :class (stl/css-case :checkbox-style true - :checkbox-checked-style active?')} - (when active?' - [:> icon* {:aria-label (tr "workspace.token.select-set") - :class (stl/css :check-icon) - :size "s" - :id ic/tick}])]])])) + [:& checkbox + {:on-click on-checkbox-click + :arial-label (tr "workspace.token.select-set") + :checked active?'}]])])) (mf/defc sets-tree - [{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit] + [{:keys [active? + group-active? + editing? + on-edit + on-edit-reset + on-edit-submit + on-select + on-toggle + selected? + set-node + set-path + tree-depth + tree-path] :or {tree-depth 0} :as props}] (let [[set-path-prefix set-fname] (some-> set-path (ctob/split-set-str-path-prefix)) @@ -192,6 +226,7 @@ set-group? [:& sets-tree-set-group {:selected? (selected? tree-path) + :active? group-active? :on-select on-select :label set-fname :collapsed? collapsed? @@ -214,6 +249,7 @@ :selected? selected? :on-toggle on-toggle :active? active? + :group-active? group-active? :editing? editing? :on-edit on-edit :on-edit-reset on-edit-reset @@ -224,6 +260,7 @@ on-update-token-set token-set-selected? token-set-active? + token-set-group-active? on-create-token-set on-toggle-token-set origin @@ -231,10 +268,9 @@ context] :as _props}] (let [{:keys [editing? new? on-edit on-reset] :as ctx} (or context (sets-context/use-context))] - [:ul {:class (stl/css :sets-list)} - (if (and - (= origin "theme-modal") - (empty? token-sets)) + [:fieldset {:class (stl/css :sets-list)} + (if (and (= origin "theme-modal") + (empty? token-sets)) [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)} (tr "workspace.token.no-sets-create")] (if (and (= origin "theme-modal") @@ -247,6 +283,7 @@ :selected? token-set-selected? :on-select on-select :active? token-set-active? + :group-active? token-set-group-active? :on-toggle on-toggle-token-set :editing? editing? :on-edit on-edit @@ -276,11 +313,15 @@ token-set-active? (mf/use-fn (mf/deps active-token-set-names) (fn [set-name] - (get active-token-set-names set-name)))] + (get active-token-set-names set-name))) + token-set-group-active? (mf/use-fn + (fn [prefixed-path] + @(refs/token-sets-at-path-all-active? prefixed-path)))] [:& controlled-sets-list {:token-sets token-sets :token-set-selected? token-set-selected? :token-set-active? token-set-active? + :token-set-group-active? token-set-group-active? :on-select on-select-token-set-click :origin "set-panel" :on-toggle-token-set on-toggle-token-set-click