Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace deprecated Text component with Text from the component-library #6887

Open
georgewrmarshall opened this issue Jul 25, 2023 · 0 comments
Open

Replace deprecated Text component with Text from the component-library #6887

georgewrmarshall opened this issue Jul 25, 2023 · 0 comments
Assignees
@Jonathansoufer
Labels
good first issue Good for newcomers team-design-system All issues relating to design system in Mobile

Comments

@georgewrmarshall
Copy link
Contributor

Description

Currently, mobile is using an outdated Text component, which needs to be replaced with the new Text component.

This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements.

Technical Details

  • Replace instances of Text component (app/components/Base/Text/Text.tsx) with Text component (app/component-library/components/Texts/Text/Text.tsx)
  • Component APIs are slightly different so ensure all props have been migrated appropriately

Acceptance Criteria

  • Instances of Text component are completely replaced with the new Text component
  • The component APIs are updated to reflect the changes in the new Text component and there is no functional changes or visual regression
  • Each Pull Request (PR) should include no more than 3 files
  • The code changes should pass Jest tests, e2e tests, linting, and Storybook without any errors.
  • The PR must include before and after screenshots of the UI to ensure there are no visual regressions.

If the acceptance criteria is not met, PRs may be closed.

Difficulty: Intermediate

Good first issue for: External contributors who are familiar with running mobile locally, have knowledge of React Native, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in mobile
@georgewrmarshall georgewrmarshall added team-design-system All issues relating to design system in Mobile good first issue Good for newcomers labels Jul 25, 2023
@Jonathansoufer Jonathansoufer self-assigned this Oct 18, 2023
This was referenced Oct 23, 2023
Closed
Merged
Merged
Merged
Jonathansoufer added a commit that referenced this issue Oct 27, 2023
@Jonathansoufer
refactor: [Part 2] - Ongoing Work for legacy <Text> comp replacement. (…
d894f7e 
…#7571)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- From the main screen, click on any asset available to go to Asset
Detail.
- Chose different timeframes on the Chart.
- Review Texts from Price & Charts.

## **Screenshots/Recordings**

### **Before**

![Screenshot 2023-10-23 at 14 20
23](https://github.com/MetaMask/metamask-mobile/assets/44679989/50e307f9-22bb-4a71-ad74-21af2d53ab08)

### **After**
![Screenshot 2023-10-25 at 09 33
09](https://github.com/MetaMask/metamask-mobile/assets/44679989/da0ea796-9b8f-4ecb-bfda-e809662135c2)


## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Jonathansoufer added a commit that referenced this issue Oct 27, 2023
@Jonathansoufer
refactor: [Part 3] - Ongoing Work for legacy <Text> comp replacement. (…
aca2d87 
…#7573)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- From the Login screen, enter a wrong password to see the error
message.
- Chose Reset Wallet to see the Warning Modal

## **Screenshots/Recordings**

### **Before**
<img width="564" alt="Screenshot 2023-10-23 at 16 33 49"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/65ac96cc-3be4-493d-b726-90de176ed5e5">
<img width="564" alt="Screenshot 2023-10-23 at 16 35 04"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/fba46e4c-8a16-41ed-90fa-153ff0cd2f1b">
<img width="564" alt="Screenshot 2023-10-25 at 10 29 47"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/6da1db3e-cd5b-467b-a02b-54ebe1c3e2ed">



### **After**
<img width="564" alt="Screenshot 2023-10-23 at 16 34 01"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/c3495b78-deb9-404a-a69c-30d7c5a41fb3">
<img width="564" alt="Screenshot 2023-10-23 at 16 49 07"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/3323da11-dcfb-4b1d-ba9c-b408f79fe39e">
<img width="564" alt="Screenshot 2023-10-25 at 10 40 03"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/fc3a4f4c-755b-479a-bf37-43906b97a9df">


## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Jonathansoufer added a commit that referenced this issue Oct 27, 2023
@Jonathansoufer
refactor: [Part 4] - Ongoing Work for legacy <Text> comp replacement. (…
2792959 
…#7604)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- Fresh Install MM app and Go Through Create a New Wallet up to Create
Password screen.

## **Screenshots/Recordings**

### **Before**
![Screenshot 2023-10-25 at 12 46
35](https://github.com/MetaMask/metamask-mobile/assets/44679989/d5a15182-248f-4e75-9f13-035efb0db467)
![Screenshot 2023-10-25 at 12 39
00](https://github.com/MetaMask/metamask-mobile/assets/44679989/7211ccda-b9db-4cc9-8358-251f3f1567d9)

### **After**
![Screenshot 2023-10-25 at 13 52
33](https://github.com/MetaMask/metamask-mobile/assets/44679989/61b3eaaa-08d3-44c5-936c-9d0173a62eca)
![Screenshot 2023-10-25 at 12 51
15](https://github.com/MetaMask/metamask-mobile/assets/44679989/bb9cf1e0-21ec-4a50-9835-94860f1e23a8)

## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
SamuelSalas pushed a commit that referenced this issue Oct 27, 2023
@Jonathansoufer @SamuelSalas
refactor: [Part 2] - Ongoing Work for legacy <Text> comp replacement. (…
131a937 
…#7571)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- From the main screen, click on any asset available to go to Asset
Detail.
- Chose different timeframes on the Chart.
- Review Texts from Price & Charts.

## **Screenshots/Recordings**

### **Before**

![Screenshot 2023-10-23 at 14 20
23](https://github.com/MetaMask/metamask-mobile/assets/44679989/50e307f9-22bb-4a71-ad74-21af2d53ab08)

### **After**
![Screenshot 2023-10-25 at 09 33
09](https://github.com/MetaMask/metamask-mobile/assets/44679989/da0ea796-9b8f-4ecb-bfda-e809662135c2)


## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
SamuelSalas pushed a commit that referenced this issue Oct 27, 2023
@Jonathansoufer @SamuelSalas
refactor: [Part 3] - Ongoing Work for legacy <Text> comp replacement. (…
0c20785 
…#7573)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- From the Login screen, enter a wrong password to see the error
message.
- Chose Reset Wallet to see the Warning Modal

## **Screenshots/Recordings**

### **Before**
<img width="564" alt="Screenshot 2023-10-23 at 16 33 49"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/65ac96cc-3be4-493d-b726-90de176ed5e5">
<img width="564" alt="Screenshot 2023-10-23 at 16 35 04"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/fba46e4c-8a16-41ed-90fa-153ff0cd2f1b">
<img width="564" alt="Screenshot 2023-10-25 at 10 29 47"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/6da1db3e-cd5b-467b-a02b-54ebe1c3e2ed">



### **After**
<img width="564" alt="Screenshot 2023-10-23 at 16 34 01"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/c3495b78-deb9-404a-a69c-30d7c5a41fb3">
<img width="564" alt="Screenshot 2023-10-23 at 16 49 07"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/3323da11-dcfb-4b1d-ba9c-b408f79fe39e">
<img width="564" alt="Screenshot 2023-10-25 at 10 40 03"
src="https://github.com/MetaMask/metamask-mobile/assets/44679989/fc3a4f4c-755b-479a-bf37-43906b97a9df">


## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
SamuelSalas pushed a commit that referenced this issue Oct 27, 2023
@Jonathansoufer @SamuelSalas
refactor: [Part 4] - Ongoing Work for legacy <Text> comp replacement. (…
bc7c677 
…#7604)

## **Description**
This PR replaces old usage of legacy <Text> component with the text
component that standardizes on typography provided through theme via
[@metamask/design-tokens](https://www.npmjs.com/package/@metamask/design-tokens)
library. This will bring uniformity to all text elements on our app.

## **Manual testing steps**
- Fresh Install MM app and Go Through Create a New Wallet up to Create
Password screen.

## **Screenshots/Recordings**

### **Before**
![Screenshot 2023-10-25 at 12 46
35](https://github.com/MetaMask/metamask-mobile/assets/44679989/d5a15182-248f-4e75-9f13-035efb0db467)
![Screenshot 2023-10-25 at 12 39
00](https://github.com/MetaMask/metamask-mobile/assets/44679989/7211ccda-b9db-4cc9-8358-251f3f1567d9)

### **After**
![Screenshot 2023-10-25 at 13 52
33](https://github.com/MetaMask/metamask-mobile/assets/44679989/61b3eaaa-08d3-44c5-936c-9d0173a62eca)
![Screenshot 2023-10-25 at 12 51
15](https://github.com/MetaMask/metamask-mobile/assets/44679989/bb9cf1e0-21ec-4a50-9835-94860f1e23a8)

## **Related issues**

This is **part** of ongoing tasks related to issue #6887

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jonathansoufer Jonathansoufer

Labels
good first issue Good for newcomers team-design-system All issues relating to design system in Mobile
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@georgewrmarshall @Jonathansoufer