diff --git a/frontend/playwright/ui/specs/multiseleccion.spec.js b/frontend/playwright/ui/specs/multiseleccion.spec.js index 5d7ee1c92c..ddee9d6975 100644 --- a/frontend/playwright/ui/specs/multiseleccion.spec.js +++ b/frontend/playwright/ui/specs/multiseleccion.spec.js @@ -245,14 +245,14 @@ test("Multiselection of text and typographies", async ({ page }) => { await expect(textSection).toBeVisible(); await expect( - textSection.getByText("Multiple typographies"), + textSection.getByText("Mixed assets"), ).not.toBeVisible(); // Select two plain text layer with different font family await plainTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect( - textSection.getByTitle("Font family").getByText("--"), + textSection.getByTitle("Font family").getByText("Mixed Font Families"), ).toBeVisible(); // Select typography text layer @@ -263,7 +263,7 @@ test("Multiselection of text and typographies", async ({ page }) => { // Select two typography text layer with different typography await typographyTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).toBeVisible(); + await expect(textSection.getByText("Mixed assets")).toBeVisible(); // Select token typography text layer // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY @@ -276,32 +276,32 @@ test("Multiselection of text and typographies", async ({ page }) => { await tokenTypographyTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect( - textSection.getByTitle("Font family").getByText("--"), + textSection.getByTitle("Font family").getByText("Mixed Font Families"), ).toBeVisible(); //Select plain text layer and typography text layer together await plainTextLayer.click(); await typographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).toBeVisible(); + await expect(textSection.getByText("Mixed assets")).toBeVisible(); //Select plain text layer and typography text layer together on reverse order await typographyTextLayerOne.click(); await plainTextLayer.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).toBeVisible(); + await expect(textSection.getByText("Mixed assets")).toBeVisible(); //Selen token typography text layer and typography text layer together await tokenTypographyTextLayerOne.click(); await typographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).toBeVisible(); + await expect(textSection.getByText("Mixed assets")).toBeVisible(); //Select token typography text layer and typography text layer together on reverse order await typographyTextLayerOne.click(); await tokenTypographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).toBeVisible(); + await expect(textSection.getByText("Mixed assets")).toBeVisible(); // Select rectangle and elipse together await rectangleLayer.click(); diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index 89cccdd869..2c446d9a85 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -772,6 +772,19 @@ (fn [shape] (update shape :applied-tokens remove-token)))))))) +(defn unapply-multiple-tokens + "Removes `attributes` for `shape-ids` without knowing the token, used when a token is deleted." + [{:keys [attributes shape-ids] :as _props}] + + (ptk/reify ::unapply-multiple-tokens + ptk/WatchEvent + (watch [_ _ _] + (rx/of + (dwsh/update-shapes + shape-ids + (fn [shape] + (update shape :applied-tokens #(when % (apply dissoc % attributes))))))))) + (defn toggle-token [{:keys [token attrs shape-ids expand-with-children]}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 211f75d51e..0b294ff751 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -417,6 +417,24 @@ :attributes #{:typography} :shape-ids ids})))) + handle-detach-all-tokens + (mf/use-fn + (mf/deps ids) + (fn [] + (st/emit! (dwta/unapply-multiple-tokens {:attributes #{:typography} + :shape-ids ids})))) + + handle-detach-all-tokens-and-assets + (mf/use-fn + (mf/deps ids on-change) + (fn [] + (let [undo-id (js/Symbol)] + (st/emit! (dwu/start-undo-transaction undo-id) + (dwta/unapply-multiple-tokens {:attributes #{:typography} + :shape-ids ids})) + (on-change {:typography-ref-file nil :typography-ref-id nil}) + (ts/schedule #(st/emit! (dwu/commit-undo-transaction undo-id)))))) + expand-stream (mf/with-memo [] (->> st/stream (rx/filter (ptk/type? :expand-text-more-options)))) @@ -479,10 +497,24 @@ [:div {:class (stl/css :element-content)} (cond (and token-typography-row-enabled? (= :multiple current-token-name) (= typography-id :multiple)) - [:div "Texts have multiple typography assets and typography tokens applied"] + [:div {:class (stl/css :multiple-typography)} + [:span {:class (stl/css :multiple-text)} + (tr "workspace.libraries.text.mixed-tokens-and-assets")] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.libraries.text.multiple-token-and-asset-tooltip") + :tooltip-placement "top-left" + :on-click handle-detach-all-tokens-and-assets + :icon i/detach}]] (and token-typography-row-enabled? (= :multiple current-token-name)) - [:div "token-multiple"] + [:div {:class (stl/css :multiple-typography)} + [:span {:class (stl/css :multiple-text)} + (tr "workspace.libraries.text.mixed-tokens")] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.libraries.text.multiple-token-tooltip") + :tooltip-placement "top-left" + :on-click handle-detach-all-tokens + :icon i/detach}]] (and token-typography-row-enabled? current-token-name) [:> token-typography-row* {:token-name current-token-name @@ -491,10 +523,12 @@ (= typography-id :multiple) [:div {:class (stl/css :multiple-typography)} - [:span {:class (stl/css :multiple-text)} (tr "workspace.libraries.text.multiple-typography")] + [:span {:class (stl/css :multiple-text)} + (tr "workspace.libraries.text.mixed-typography")] [:> icon-button* {:variant "ghost" - :aria-label (tr "workspace.libraries.text.multiple-typography-tooltip") + :aria-label (tr "workspace.libraries.text.multiple-assets-tooltip") :on-click handle-detach-typography + :tooltip-placement "top-left" :icon i/detach}]] typography diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index e589c4dd79..5650b0c68b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -4,8 +4,13 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as deprecated; @use "../../../sidebar/common/sidebar.scss" as sidebar; +@use "ds/typography.scss" as t; +@use "ds/_utils.scss" as *; +@use "ds/_sizes.scss" as *; +@use "ds/_borders.scss" as *; +@use "ds/spacing.scss" as *; +@use "ds/mixins.scss" as *; .element-set { @include sidebar.option-grid-structure; @@ -18,37 +23,37 @@ } .element-content { - @include deprecated.flex-column; - + display: flex; + flex-direction: column; + gap: var(--sp-xs); grid-column: span 8; - margin-top: deprecated.$s-4; + margin-block-start: var(--sp-xs); } .multiple-typography { - @extend %mixed-bar; + @include t.use-typography("body-small"); + + display: flex; + align-items: center; + flex-grow: 1; + border-radius: $br-8; + block-size: $sz-32; + padding-block: var(--sp-s); + padding-inline: var(--sp-s) 0; + background-color: var(--color-background-tertiary); + color: var(--color-foreground-primary); } .multiple-text { - @include deprecated.body-small-typography; + @include t.use-typography("body-small"); flex-grow: 1; - color: var(--input-foreground-color-active); -} - -.multiple-typography-button { - @extend %button-tertiary; - - height: deprecated.$s-32; - width: deprecated.$s-28; - - svg { - @extend %button-icon; - } + color: var(--color-foreground-secondary); } .text-align-options { display: flex; - gap: deprecated.$s-4; + gap: var(--sp-xs); } .align-options, @@ -56,10 +61,10 @@ .vertical-align-options, .grow-options, .text-decoration-options { - height: deprecated.$s-32; + block-size: $sz-32; } .text-decoration-options { display: flex; - gap: deprecated.$s-4; + gap: var(--sp-xs); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 4266716f7b..6b4ded0961 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -315,7 +315,12 @@ :on-click #(reset! open-selector? true)} (cond (or (= :multiple font-id) (= "mixed" font-id)) - "--" + [:* + [:span {:class (stl/css :font-option-name :font-family-mixed)} + (tr "inspect.attributes.typography.mixed-font-family")] + [:> icon* {:icon-id i/arrow-down + :class (stl/css :dropdown-icon) + :size "s"}]] (some? font) [:* diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index d01a04d186..5e630aea3d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -51,6 +51,10 @@ visibility: var(--actions-visibility); } +.font-family-mixed { + color: var(--color-foreground-secondary); +} + .typography-selection-wrapper { display: grid; grid-template-columns: $sz-24 auto 1fr; diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 278afa1752..0745764abc 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1998,6 +1998,10 @@ msgstr "Typography" msgid "inspect.attributes.typography.font-family" msgstr "Font Family" +#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:308 +msgid "inspect.attributes.typography.mixed-font-family" +msgstr "Mixed Font Families" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:326, src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:332 msgid "inspect.attributes.typography.font-size" msgstr "Font Size" @@ -6284,10 +6288,34 @@ msgstr "Connect library" msgid "workspace.libraries.text.multiple-typography" msgstr "Multiple typographies" +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 +msgid "workspace.libraries.text.mixed-typography" +msgstr "Mixed assets" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 +msgid "workspace.libraries.text.mixed-tokens" +msgstr "Mixed tokens" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 +msgid "workspace.libraries.text.mixed-tokens-and-assets" +msgstr "Mixed assets and tokens" + #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 msgid "workspace.libraries.text.multiple-typography-tooltip" msgstr "Unlink all typographies" +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-assets-tooltip" +msgstr "Unlink all assets" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-token-tooltip" +msgstr "Detach all tokens" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-token-and-asset-tooltip" +msgstr "Detach all tokens & unlink all typographies" + #: src/app/main/ui/workspace/libraries.cljs:103, src/app/main/ui/workspace/libraries.cljs:130 msgid "workspace.libraries.typography" msgid_plural "workspace.libraries.typography" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 866605500b..dab61e83c5 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1951,6 +1951,10 @@ msgstr "Tipografía" msgid "inspect.attributes.typography.font-family" msgstr "Familia tipográfica" +#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:308 +msgid "inspect.attributes.typography.mixed-font-family" +msgstr "Varias Familias tipográficas" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:326, src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:332 msgid "inspect.attributes.typography.font-size" msgstr "Tamaño de fuente" @@ -6167,13 +6171,33 @@ msgid "workspace.libraries.shared-library-btn" msgstr "Conectar biblioteca" #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 -msgid "workspace.libraries.text.multiple-typography" -msgstr "Varias tipografías" +msgid "workspace.libraries.text.mixed-typography" +msgstr "Varios recursos" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 +msgid "workspace.libraries.text.mixed-tokens" +msgstr "Varios tokens" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332 +msgid "workspace.libraries.text.mixed-tokens-and-assets" +msgstr "Varios tokens y recursos" #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 msgid "workspace.libraries.text.multiple-typography-tooltip" msgstr "Desvincular todas las tipografías" +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-assets-tooltip" +msgstr "Desvincular todos los recursos" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-token-tooltip" +msgstr "Desvincular todos los tokens" + +#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335 +msgid "workspace.libraries.text.multiple-token-and-asset-tooltip" +msgstr "Desvincular todos los tokens y recursos" + #: src/app/main/ui/workspace/libraries.cljs:103, src/app/main/ui/workspace/libraries.cljs:130 msgid "workspace.libraries.typography" msgid_plural "workspace.libraries.typography"