♻️ Ensure tokens feature integrates design system

frontend/playwright/ui/specs/tokens.spec.js

@@ -277,11 +277,15 @@ test.describe("Tokens: Tokens Tab", () => {
 
     await tokenThemeUpdateCreateModal.getByLabel("Theme").fill("Changed");
 
-    const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByRole("button", {
-      name: "LightDark",
-      exact: true,
-    });
+    const lightDarkSetGroup = tokenThemeUpdateCreateModal.getByTestId(
+      "tokens-set-group-item",
+      {
+        name: "LightDark",
+        exact: true,
+      },
+    );
     await expect(lightDarkSetGroup).toBeVisible();
+
     const lightSet = tokenThemeUpdateCreateModal.getByRole("button", {
       name: "light",
       exact: true,
@@ -667,7 +671,11 @@ test.describe("Tokens: Sets Tab", () => {
       .filter({ hasText: "LightDark" })
       .first();
 
-    await setGroup.getByRole("button").filter({ title: "Collapse" }).click();
+    const setCollapsable = await setGroup
+      .getByTestId("tokens-set-group-collapse")
+      .first();
+
+    await setCollapsable.click();
 
     await expect(darkSet).toHaveCount(0);
   });

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -21,6 +21,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
    [app.main.ui.ds.controls.input :refer [input*]]
+   [app.main.ui.ds.controls.utilities.label :refer [label*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
@@ -186,9 +187,7 @@
 
     [:div {:class (stl/css :edit-theme-inputs-wrapper)}
      [:div {:class (stl/css :group-input-wrapper)}
-      [:label {:for "groups-dropdown" :class (stl/css :label)}
-       [:span {:class (stl/css :main-label)} (tr "workspace.token.label.group")]
-       [:span {:class (stl/css :label-optional)} (dm/str "(" "" (tr "workspace.token.label.group-optional") "" ")")]]
+      [:> label* {:for "groups-dropdown" :is-optional true} (tr "workspace.token.label.group")]
       [:> combobox* {:id (dm/str "groups-dropdown")
                      :placeholder (tr "workspace.token.label.group-placeholder")
                      :default-selected (:group theme)

frontend/src/app/main/ui/workspace/tokens/modals/themes.scss

@@ -4,7 +4,6 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "../../../ds/typography.scss" as t;
 @use "../../../ds/_sizes.scss" as *;
 
 @import "refactor/common-refactor.scss";
@@ -212,19 +211,3 @@
   grid-template-columns: 0.6fr 1fr;
   gap: $s-12;
 }
-
-.label {
-  @include t.use-typography("body-small");
-  @include textEllipsis;
-}
-
-.main-label {
-  @include t.use-typography("body-small");
-  color: var(--color-foreground-primary);
-}
-
-.label-optional {
-  @include t.use-typography("body-small");
-  margin-inline-start: 1ex;
-  color: var(--color-foreground-secondary);
-}

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -210,8 +210,6 @@
          :draggable? is-draggable)]
 
     [:div {:ref dref
-           :role "button"
-           :aria-labelledby label-id
            :data-testid "tokens-set-group-item"
            :style {"--tree-depth" tree-depth}
            :class (stl/css-case :set-item-container true
@@ -224,6 +222,7 @@
      [:> icon-button*
       {:class (stl/css :set-item-group-collapse-button)
        :on-click on-collapse-click
+       :data-testid "tokens-set-group-collapse"
        :aria-label (tr "labels.collapse")
        :icon (if is-collapsed "arrow-right" "arrow-down")
        :variant "action"}]
@@ -234,7 +233,9 @@
          :on-submit on-edit-submit'}]
        [:*
         [:div {:class (stl/css :set-name)
+               :role "button"
                :title label
+               :tab-index 0
                :on-double-click on-double-click
                :id label-id}
          label]
@@ -328,6 +329,7 @@
                                 :dnd-over-top (= drop-over :top)
                                 :dnd-over-bot (= drop-over :bot))
            :on-click on-click
+           :on-double-click on-double-click
            :on-context-menu on-context-menu
            :aria-checked is-active}
 
@@ -341,8 +343,7 @@
          :on-cancel on-reset-edition
          :on-submit on-edit-submit'}]
        [:*
-        [:div {:class (stl/css :set-name)
-               :on-double-click on-double-click}
+        [:div {:class (stl/css :set-name)}
          label]
         [:> checkbox*
          {:on-click on-checkbox-click

frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs

@@ -30,7 +30,7 @@
   [:li {:class (stl/css :context-menu-item)
         :data-value value
         :on-click on-click}
-   [:span {:class (stl/css :title)} title]])
+   title])
 
 (mf/defc menu*
   {::mf/private true}

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -176,7 +176,7 @@
            (modal/show! :tokens/themes {})))]
 
     [:div {:class (stl/css :themes-wrapper)}
-     [:span {:class (stl/css :themes-header)} (tr "labels.themes")]
+     [:> text* {:as "div" :typography "headline-small" :class (stl/css :themes-header)} (tr "labels.themes")]
      (if (empty? ordered-themes)
        [:div {:class (stl/css :empty-theme-wrapper)}
         [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
@@ -327,7 +327,7 @@
     [:*
      [:& token-context-menu]
      [:div {:class (stl/css :sets-header-container)}
-      [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
+      [:> text* {:as "span" :typography "headline-small" :class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)]
       [:div {:class (stl/css :sets-header-status) :title (tr "workspace.token.inactive-set-description")}
        ;; NOTE: when no set in tokens-lib, the selected-token-set-name
        ;; will be `nil`, so for properly hide the inactive message we
@@ -336,7 +336,7 @@
                   (not (token-set-active? selected-token-set-name)))
          [:*
           [:> i/icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}]
-          [:span {:class (stl/css :sets-header-status-text)}
+          [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)}
            (tr "workspace.token.inactive-set")]])]]
 
      (for [type filled-group]

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -41,7 +41,6 @@
 .themes-header,
 .sets-header-container {
   @include use-typography("headline-small");
-  display: block;
   padding: $s-8;
   color: var(--title-foreground-color);
   word-break: break-word;

frontend/src/app/main/ui/workspace/tokens/theme_select.cljs

@@ -111,7 +111,6 @@
                         :is-open? true
                         :rect rect))))))]
 
-    ;; TODO: This element should be accessible by keyboard
     [:div {:on-click on-open-dropdown
            :disabled (not can-edit?)
            :aria-expanded is-open?

frontend/translations/en.po

@@ -6932,10 +6932,6 @@ msgstr "Stroke width must be greater than or equal to 0."
 msgid "workspace.token.label.group"
 msgstr "Group"
 
-#: src/app/main/ui/workspace/tokens/modals/themes.cljs:197
-msgid "workspace.token.label.group-optional"
-msgstr "Optional"
-
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:199
 msgid "workspace.token.label.group-placeholder"
 msgstr "Add group (i.e. Mode)"

frontend/translations/es.po

@@ -6950,10 +6950,6 @@ msgstr "Stroke width debe ser mayor o igual a 0."
 msgid "workspace.token.label.group"
 msgstr "Grupo"
 
-#: src/app/main/ui/workspace/tokens/modals/themes.cljs:197
-msgid "workspace.token.label.group-optional"
-msgstr "Opcional"
-
 #: src/app/main/ui/workspace/tokens/modals/themes.cljs:199
 msgid "workspace.token.label.group-placeholder"
 msgstr "Añade un grupo (p. ej. Modo)"