chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` #6422

dmnplb · 2024-11-19T14:50:16Z

Short description

This PR improves overall UI typography.

List of changes proposed in this pull request

Update io-app-design-system to the new major 4.0.1 version
Update font weight in the HeaderFirstLevel to make the title bolder
Improve Strong markdown style by replacing Bold with the Semibold style
Decrease font weight of the subtitle in the ServicesHeader component
Improve formatting of the MessageListItem
Replace removed Chip typographic style with LabelMini
Replace removed Label typographic style with Body
Replace removed LabelSmall typographic style with the new BodySmall
[extra] Fix typo in the English locale (CIEIdWizard)

Note

For the reviewers: the default weight of LabelSmall was Semibold, while the default weight for BodySmall is Regular. That's why LabelSmall set without the weight prop was replaced by BodySmall with the weight prop set to Semibold. The same should happen to the Label typographic style

Preview

Actual UI	New UI

Old vs New

Messages Home

Before	After

Payments Home

Before	After

Related PRs

How to test

Check each DS component and navigate through the app to check if everything is OK

pagopa-github-bot · 2024-11-19T14:51:50Z

Affected stories

⚙️ IOAPPX-435: Miglioramento generale della tipografia
subtask of
- ⚡ IOAPPX-32: Design System

Generated by 🚫 dangerJS against 9375023

codecov · 2024-11-19T16:52:54Z

Codecov Report

Attention: Patch coverage is 44.82759% with 16 lines in your changes missing coverage. Please review.

Project coverage is 48.41%. Comparing base (4f204b4) to head (9375023).
Report is 841 commits behind head on master.

Files with missing lines	Patch %	Lines
...s/fims/singleSignOn/components/FimsPrivacyInfo.tsx	0.00%	2 Missing ⚠️
ts/features/design-system/DesignSystem.tsx	0.00%	1 Missing ⚠️
ts/features/design-system/core/DSNumberPad.tsx	0.00%	1 Missing ⚠️
ts/features/fci/components/InfoScreenComponent.tsx	50.00%	1 Missing ⚠️
...s/fims/singleSignOn/components/FimsSuccessBody.tsx	0.00%	1 Missing ⚠️
...dpay/details/components/InitiativeRulesInfoBox.tsx	0.00%	1 Missing ⚠️
...nboarding/screens/BoolValuePrerequisitesScreen.tsx	0.00%	1 Missing ⚠️
...boarding/screens/MultiValuePrerequisitesScreen.tsx	0.00%	1 Missing ⚠️
...trustmark/screens/ItwCredentialTrustmarkScreen.tsx	0.00%	1 Missing ⚠️
...eatures/payments/common/components/PaymentCard.tsx	75.00%	1 Missing ⚠️
... and 5 more

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6422      +/-   ##
==========================================
- Coverage   48.42%   48.41%   -0.02%     
==========================================
  Files        1488     1576      +88     
  Lines       31617    32167     +550     
  Branches     7669     7329     -340     
==========================================
+ Hits        15311    15573     +262     
- Misses      16238    16554     +316     
+ Partials       68       40      -28

Files with missing lines	Coverage Δ
ts/components/AppVersion.tsx	`100.00% <ø> (+50.00%)`	⬆️
ts/components/BonusCard/BonusCard.tsx	`93.93% <ø> (-2.36%)`	⬇️
ts/components/IOMarkdown/renderRules.tsx	`67.44% <ø> (ø)`
ts/components/debug/DebugPrettyPrint.tsx	`59.09% <ø> (ø)`
ts/components/ui/BannerErrorState.tsx	`9.67% <ø> (ø)`
ts/components/ui/IOScrollViewWithLargeHeader.tsx	`81.25% <100.00%> (ø)`
...atures/barcode/components/CameraPermissionView.tsx	`100.00% <ø> (ø)`
ts/features/bonus/cgn/components/CgnCard.tsx	`91.66% <ø> (-8.34%)`	⬇️
ts/features/bonus/cgn/components/CgnCardStatus.tsx	`100.00% <100.00%> (ø)`
...nus/cgn/components/merchants/CgnModuleDiscount.tsx	`88.88% <ø> (ø)`
... and 68 more

... and 1652 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4e19eaa...9375023. Read the comment docs.

shadowsheep1 · 2024-12-05T12:53:32Z

@dmnplb Can we add in this PR description some Android screenshots too? And what about a11y? Do you think that this typographic changes could impact a11y too or they won't impact it?

ts/components/IOMarkdown/renderRules.tsx

ts/features/bonus/cgn/components/CgnCard.tsx

ts/features/idpay/code/screens/IdPayCodeDisplayScreen.tsx

ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx

dmnplb · 2024-12-05T13:35:20Z

@dmnplb Can we add in this PR description some Android screenshots too? And what about a11y? Do you think that this typographic changes could impact a11y too or they won't impact it?

@shadowsheep1 As you can see from the difference between the actual and proposed DS release, there's no specific change to the layout logic that would justify an in-depth accessibility analysis. So I'm not against a test on a11y, but I think it's a waste of time.

Ladirico

LGTM!

shadowsheep1

For A&I Tested both onboarding and first onboarding and all the settings pages on both Android and iOS physical devices. Identification Modal an Block Modal too. All looks good!

shadowsheep1 · 2024-12-05T14:15:44Z

@dmnplb Can we add in this PR description some Android screenshots too? And what about a11y? Do you think that this typographic changes could impact a11y too or they won't impact it?

@shadowsheep1 As you can see from the difference between the actual and proposed DS release, there's no specific change to the layout logic that would justify an in-depth accessibility analysis. So I'm not against a test on a11y, but I think it's a waste of time.

@dmnplb Okay for the a11y. For the Android part instead, I always suggest to add examples of "old" and "new" of the two platforms (Android and iOS).

dmnplb · 2024-12-05T14:28:18Z

I always suggest to add examples of "old" and "new" of the two platforms (Android and iOS)

@shadowsheep1 Just added a bunch of before/after screenshots for documentation purposes (iOS only for this time)

@mastro993

…Fix overflow text on cards + Extend dark mode support (#6473) > [!caution] > This PR depends on: > * #6422 > * pagopa/io-app-design-system#364 ## Short description This PR disables the dark mode appearance of text placed on light backgrounds, such as wallet cards. It also extends dark mode support to other DS components. ## List of changes proposed in this pull request - Update `io-app-design-system` to `4.2.0` - Extend dark mode support to `Alert`, `Banner` and `FeatureInfo` - Fix `CgnCard` and `PaymentCard` dark mode appearance - Force light mode on `Tag` in the `ItwCredentialCard` component - Enable larger and bolder text on the `ItwCredentialCard` component by replacing the native `Text` with properly configured `IOText` (cc @mastro993) - Remove preview version of `ItwCredentialCard` - Fix `CgnCard` and `PaymentCard` expired tag overflow when larger text is set - Remove unused `PaymentCardBig` component to reduce the likelihood of misunderstandings ### Preview A look at an _unlikely_ edge case <img width="300" src="https://github.com/user-attachments/assets/a3a8d013-5fe6-4fde-ad10-886a7b419ee8" /> Dark mode support extended to the `Banner` component <img width="300" src="https://github.com/user-attachments/assets/5f528249-9045-4d2f-8183-aa0b4a4deab5" /> ## How to test Increase the text size to extreme levels and check all the cards in the DS section --------- Co-authored-by: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Co-authored-by: Federico Mastrini <federicomastrini93@gmail.com>

dmnplb added 3 commits November 19, 2024 15:35

Remove Chip typographic style, replace it with LabelMini

7bb1ba1

Replace Label with Body (with appropriate weight value)

f78464f

Update jest snapshots

06516fd

dmnplb added the Design System New visual language and reduction of previous UI clutter label Nov 19, 2024

dmnplb temporarily deployed to dev November 19, 2024 14:50 — with GitHub Actions Inactive

dmnplb had a problem deploying to dev November 19, 2024 14:50 — with GitHub Actions Failure

pagopa-github-bot added the Cross label Nov 19, 2024

pagopa-github-bot changed the title ~~[IOAPPX-435] Improve overall UI typography~~ chore(Cross): [IOAPPX-435] Improve overall UI typography Nov 19, 2024

dmnplb added 2 commits November 19, 2024 15:58

Update the subtitle weight in the ServicesHeader component

5d80f72

Fix tsc errors

036548f

dmnplb temporarily deployed to dev November 19, 2024 15:03 — with GitHub Actions Inactive

dmnplb had a problem deploying to dev November 19, 2024 15:03 — with GitHub Actions Failure

Decrease size of content in the MessageListItem

16fd16f

dmnplb temporarily deployed to dev November 19, 2024 15:42 — with GitHub Actions Inactive

dmnplb had a problem deploying to dev November 19, 2024 15:42 — with GitHub Actions Error

Update jest snapshot

1de6fb0

dmnplb temporarily deployed to dev November 19, 2024 15:45 — with GitHub Actions Inactive

dmnplb had a problem deploying to dev November 19, 2024 15:45 — with GitHub Actions Failure

dmnplb added 2 commits November 19, 2024 16:49

Replace Bold with Semibold in the IOMarkdown

3b9669e

Update jest snapshot

605083b

dmnplb had a problem deploying to dev November 19, 2024 16:02 — with GitHub Actions Failure

dmnplb temporarily deployed to dev November 19, 2024 16:02 — with GitHub Actions Inactive

Update jest snapshots

24cab21

dmnplb temporarily deployed to dev November 19, 2024 16:38 — with GitHub Actions Inactive

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

7dd3ef4

dmnplb temporarily deployed to dev November 20, 2024 10:40 — with GitHub Actions Inactive

dmnplb had a problem deploying to dev November 20, 2024 10:40 — with GitHub Actions Failure

dmnplb temporarily deployed to dev December 4, 2024 16:24 — with GitHub Actions Inactive

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

131adde

LeleDallas temporarily deployed to dev December 4, 2024 21:25 — with GitHub Actions Inactive

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

55d399a

dmnplb temporarily deployed to dev December 5, 2024 08:35 — with GitHub Actions Inactive

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

11fa7f3

LeleDallas temporarily deployed to dev December 5, 2024 09:44 — with GitHub Actions Inactive

Ladirico requested changes Dec 5, 2024

View reviewed changes

Ladirico mentioned this pull request Dec 5, 2024

[IOAPPX-415] Remove the legacy UI + Add the new useIONewTypeface hook to manage new and legacy typography pagopa/io-app-design-system#345

Open

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

7c0df64

dmnplb had a problem deploying to dev December 5, 2024 13:59 — with GitHub Actions Error

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

30b06cd

Ladirico temporarily deployed to dev December 5, 2024 14:00 — with GitHub Actions Inactive

Ladirico approved these changes Dec 5, 2024

View reviewed changes

shadowsheep1 approved these changes Dec 5, 2024

View reviewed changes

Merge branch 'master' into IOAPPX-435-improve-typography-new-UI

9375023

dmnplb temporarily deployed to dev December 5, 2024 14:27 — with GitHub Actions Inactive

dmnplb merged commit b9d3233 into master Dec 5, 2024
12 checks passed

dmnplb deleted the IOAPPX-435-improve-typography-new-UI branch December 5, 2024 14:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` #6422

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` #6422

dmnplb commented Nov 19, 2024 •

edited

Loading

pagopa-github-bot commented Nov 19, 2024 •

edited by jira bot

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

shadowsheep1 commented Dec 5, 2024

dmnplb commented Dec 5, 2024

Ladirico left a comment

shadowsheep1 left a comment •

edited

Loading

shadowsheep1 commented Dec 5, 2024

dmnplb commented Dec 5, 2024

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update io-app-design-system to 4.0.1 #6422

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update io-app-design-system to 4.0.1 #6422

Conversation

dmnplb commented Nov 19, 2024 • edited Loading

Short description

List of changes proposed in this pull request

Preview

Old vs New

Related PRs

How to test

pagopa-github-bot commented Nov 19, 2024 • edited by jira bot Loading

Affected stories

codecov bot commented Nov 19, 2024 • edited Loading

Codecov Report

shadowsheep1 commented Dec 5, 2024

dmnplb commented Dec 5, 2024

Ladirico left a comment

Choose a reason for hiding this comment

shadowsheep1 left a comment • edited Loading

Choose a reason for hiding this comment

shadowsheep1 commented Dec 5, 2024

dmnplb commented Dec 5, 2024

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` #6422

chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io-app-design-system` to `4.0.1` #6422

dmnplb commented Nov 19, 2024 •

edited

Loading

pagopa-github-bot commented Nov 19, 2024 •

edited by jira bot

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

shadowsheep1 left a comment •

edited

Loading