3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-24 00:06:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Ensure tokens feature integrates design system

Browse source
This commit is contained in:
Xavier Julian 2025-05-16 15:44:36 +02:00 • committed by Xaviju
parent 0d60e3d997
commit f7311cbb6b
10 changed files with 24 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/playwright/ui/specs/tokens.spec.js
View file

@ -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);
});

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

@ -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)

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

@ -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);
}

9
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -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

2
frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs
View file

@ -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}

6
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -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]

1
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -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;

1
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
View file

@ -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?

4
frontend/translations/en.po
View file

@ -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)"

4
frontend/translations/es.po
View file

@ -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)"