Update design tokens #378

tuentisre · 2024-08-29T07:28:08Z

This PR was automatically created by the import-design-tokens GitHub Action.

🎟️ Jira ticket

ANDROID-15048

🥅 What's the goal?

Update new Mistica tokens and give support for mistica-android.

Design issue: Title2 component (remap titles) mistica-design#1796
Design PR: BREAKING CHANGE: Add title2 mistica-design#1849
Design specs: https://www.figma.com/design/yQRVCOmRQNM98bnXndLPxK/%F0%9F%94%B8-Title-Specs?m=auto&node-id=0-1&t=DUn2teWruTQhJIiJ-1

🚧 How do we do it?

Launch 'Update design tokens' action in 'mistica-android' project.
Replace some renamed tokens: button...Selected to button...Pressed
Add tow new Titles (Title3 and Title4)
- Title1 remains the same as before.
- Title2 is now built with a new preset values.
- Title3 replace the old Title2, so all old references to Title2 should be replaced to Title3.
- Title4 is completely new (like the new Title2), and should be built with preset6 values.

☑️ Checks

I updated the documentation, including readmes and wikis. If this is a breaking change, tag the PR with "Breaking Change" label and remember to include breaking change migration guide in release notes where this version is released.
Tested with dark mode.
Tested with API 24. The two new components work well in 24 but I had to use talkback on a device with api level 28, I couldn't manage to run talkback on 24-27 devices.
Sync done with iOS team for this feature to ensure alignment, if applies.
Reviewed by Mistica design team (PR reviewer from design team)

🧪 How can I test this?

Mistica App download link
🖼️ Screenshots/Videos

Telefonica	Movistar	O2	O2 New

Vivo	Vivo New	Blau	Tu

github-actions · 2024-08-29T11:11:20Z

📱 New catalog for testing generated: Download

github-actions · 2024-08-30T10:33:08Z

📱 New catalog for testing generated: Download

haynlo · 2024-08-30T11:15:29Z

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt

@@ -21,7 +23,8 @@ fun Titles() {
            .padding(16.dp)
    ) {
        DefaultTitles()
-        TitleStyle.values().forEach {
+        TitleStyle.entries.forEach {
+            Spacer(modifier = Modifier.height(24.dp))


Just to make Title catalog easier to check for each Title type.

We could also make TitlesWithStyleOverriden accept a modifier by parameter and set padding there.

Yes, but the Composable TitlesWithStyleOverridden does not have a root composable component like Row, Column or Box, so I could not apply this parameterized modifier. I added a Spacer instead to make it as simple as possible with minimal code.

haynlo · 2024-08-30T11:15:58Z

catalog/src/main/res/layout/title_catalog.xml

Improve id's naming and add new Titles

haynlo · 2024-08-30T11:17:36Z

library/src/main/java/com/telefonica/mistica/compose/button/ButtonStyles.kt

Apart from the change in titles, the names of the buttons that ended in "Selected" have also been changed to "Pressed"

haynlo · 2024-08-30T11:21:53Z

library/src/main/java/com/telefonica/mistica/compose/theme/MisticaTheme.kt

            presetTitle1FontWeight = brand.title1FontWeight,
+            presetTitle2FontWeight = brand.title2FontWeight,
+            presetTitle3FontWeight = brand.title3FontWeight,
+            presetTitle3FontSize = brand.title3FontSize,


Title1 -> Remains the same as before

Title2 -> based on Preset3 with custom font-weightfor each brand

Title3 -> based on Preset5 (as it was configured in the old Title2) with custom font-weight and text-size for each brand

Title4 -> based on Preset6 without any customization, so that's why I didn't add a specific preset for Title4.

ℹ️ You will see the same configuration in the XML-side.
More info here: https://www.figma.com/design/yQRVCOmRQNM98bnXndLPxK/%F0%9F%94%B8-Title-Specs?node-id=504-624&t=wuNyXP4uuHApFHcf-4

haynlo · 2024-08-30T11:26:09Z

library/src/main/java/com/telefonica/mistica/compose/theme/brand/MovistarBrand.kt

-        get() = super.values.copy(titleStyle = TitleStyle.TITLE_2)
+        get() = super.values.copy(titleStyle = TitleStyle.TITLE_3)


Before all these changes, Movistar was the only Brand with Title2 style by default (the other brands had and will continue to have the Title1 style by default).

With the new Title changes, all the Title2 references should be replaced by the new Title3 style, so that's why I've changed this value here.

ℹ️ You will see the same configuration in the XML-side.
More info here: Telefonica/mistica-design#1796 (comment)

🍏 iOS alignment: Telefonica/mistica-ios#397 (comment)

haynlo · 2024-08-30T11:29:05Z

library/src/main/java/com/telefonica/mistica/compose/theme/text/MisticaTypography.kt

+        textSize: TextUnit = 20.sp,
+    ) = buildPreset5().copy(
+        fontWeight = fontWeight,
+        fontSize = textSize,
    )


Remember: I am not building a PresetTitle4 since this title is using Preset6 without any customization.
Usage: https://github.com/Telefonica/mistica-android/pull/378/files#diff-92dbc5d50904a858fa74ff3a03ba997ab7a1c8ac4a8ebc43927c64b633b46810R99

haynlo · 2024-08-30T11:31:31Z

library/src/main/java/com/telefonica/mistica/list/README.md

Ignore these changes, they will be omitted from here when this PR is merged: https://github.com/Telefonica/mistica-android/pull/377/files#diff-9c529f263e896a6b37a86737ff58630be9011d084698c66a706a66cffdbda783R76-R85

jeprubio

LGTM

jeprubio · 2024-08-30T11:41:12Z

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt

@@ -21,7 +23,8 @@ fun Titles() {
            .padding(16.dp)
    ) {
        DefaultTitles()
-        TitleStyle.values().forEach {
+        TitleStyle.entries.forEach {
+            Spacer(modifier = Modifier.height(24.dp))


We could also make TitlesWithStyleOverriden accept a modifier by parameter and set padding there.

catalog/src/main/res/layout/title_catalog.xml

pmartinbTEF

Good job!

dpastor

Please, tag it with "Breaking change" and remember to write breaking changes on release notes when published.
Check also we are pointing to same mistica design tag than iOS.
I would also add a ticket to the task, so we have it tracked changes in jira.

yceballost

🤩

haynlo

✏️

Update design tokens

f505bff

tuentisre assigned haynlo Aug 29, 2024

tuentisre requested review from a team, aweell, DevPabloGarcia and juangardi21 and removed request for a team August 29, 2024 07:28

haynlo removed request for aweell, DevPabloGarcia and juangardi21 August 29, 2024 07:30

ANDROID-15048 Update. Replace old tokens with the new ones.

b34175f

haynlo added 2 commits August 30, 2024 12:26

ANDROID-15048 Update. Compose migration with new titles

f8880d0

ANDROID-15048 Fix. Reame wrong url

fe882a2

haynlo reviewed Aug 30, 2024

View reviewed changes

catalog/src/main/res/layout/title_catalog.xml

Copy link

Contributor

haynlo Aug 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve id's naming and add new Titles

haynlo reviewed Aug 30, 2024

View reviewed changes

haynlo requested review from a team, jeprubio and haynlo and removed request for a team and haynlo August 30, 2024 11:33

haynlo requested review from pmartinbTEF, a team and andredelramo-hm and removed request for a team August 30, 2024 11:33

nimeacuerdo requested a review from dpastor August 30, 2024 12:16

jeprubio approved these changes Aug 30, 2024

View reviewed changes

pmartinbTEF reviewed Sep 2, 2024

View reviewed changes

catalog/src/main/res/layout/title_catalog.xml Show resolved Hide resolved

pmartinbTEF approved these changes Sep 2, 2024

View reviewed changes

dpastor approved these changes Sep 2, 2024

View reviewed changes

haynlo added the Breaking Change A change that is not retrocompatible label Sep 2, 2024

yceballost requested review from aweell and removed request for andredelramo-hm September 2, 2024 10:02

yceballost approved these changes Sep 2, 2024

View reviewed changes

haynlo approved these changes Sep 3, 2024

View reviewed changes

aweell approved these changes Sep 3, 2024

View reviewed changes

haynlo merged commit 4650877 into main Sep 4, 2024
6 checks passed

haynlo deleted the import-design-tokens branch September 4, 2024 09:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update design tokens #378

Update design tokens #378

tuentisre commented Aug 29, 2024 •

edited by aweell

Loading

github-actions bot commented Aug 29, 2024

github-actions bot commented Aug 30, 2024

haynlo Aug 30, 2024 •

edited

Loading

jeprubio Aug 30, 2024 •

edited

Loading

haynlo Sep 2, 2024

haynlo Aug 30, 2024

haynlo Aug 30, 2024

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

jeprubio left a comment

jeprubio Aug 30, 2024 •

edited

Loading

pmartinbTEF left a comment

dpastor left a comment

yceballost left a comment

haynlo left a comment

		get() = super.values.copy(titleStyle = TitleStyle.TITLE_2)
		get() = super.values.copy(titleStyle = TitleStyle.TITLE_3)

Update design tokens #378

Update design tokens #378

Conversation

tuentisre commented Aug 29, 2024 • edited by aweell Loading

🎟️ Jira ticket

🥅 What's the goal?

🚧 How do we do it?

☑️ Checks

🧪 How can I test this?

github-actions bot commented Aug 29, 2024

github-actions bot commented Aug 30, 2024

haynlo Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

jeprubio Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

haynlo Sep 2, 2024

Choose a reason for hiding this comment

haynlo Aug 30, 2024

Choose a reason for hiding this comment

haynlo Aug 30, 2024

Choose a reason for hiding this comment

haynlo Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

haynlo Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

haynlo Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

haynlo Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

jeprubio left a comment

Choose a reason for hiding this comment

jeprubio Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

pmartinbTEF left a comment

Choose a reason for hiding this comment

dpastor left a comment

Choose a reason for hiding this comment

yceballost left a comment

Choose a reason for hiding this comment

haynlo left a comment

Choose a reason for hiding this comment

tuentisre commented Aug 29, 2024 •

edited by aweell

Loading

haynlo Aug 30, 2024 •

edited

Loading

jeprubio Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

haynlo Aug 30, 2024 •

edited

Loading

jeprubio Aug 30, 2024 •

edited

Loading