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

feat: Adding react Text component to design-system-react #110

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat: Adding react Text component to design-system-react #110

wants to merge 11 commits into from

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Nov 13, 2024 •
edited
Loading

Description

This PR adds a Text component to the design-system-react library, introducing a reusable typography component for MetaMask’s design system.

Related issues

Fixes: https://github.com/metamask/metamask-design-system/issues#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/762

Manual testing steps

  1. Run storybook yarn storybook
  2. Navigate to a Text component
  3. Verify the text styling, ensuring consistency with design specifications.
  4. Confirm that accessibility standards are met, including font size, color contrast, and screen reader support.

Screenshots/Recordings

After

after720.mov

100% test coverage

Screenshot 2024-11-15 at 12 42 30 PM

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g., pull and build branch, run the app, test code being changed).
  • 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.

@georgewrmarshall georgewrmarshall self-assigned this Nov 13, 2024
@georgewrmarshall georgewrmarshall changed the title Fix/react text feat: Adding react Text component to design-system-react Nov 13, 2024
@georgewrmarshall georgewrmarshall force-pushed the fix/react-text branch 6 times, most recently from a95b14f to 583f5de Compare November 15, 2024 20:39
@socket-security Socket Security
Copy link

socket-security bot commented Nov 15, 2024 •
edited
Loading

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/[email protected] None 0 712 kB dcas

View full report↗︎

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/jest.config.js
@@ -15,7 +15,7 @@ module.exports = merge(baseConfig, {
displayName,

// Add coverage ignore patterns
coveragePathIgnorePatterns: ['index.ts'],
coveragePathIgnorePatterns: ['index.ts', '.d.ts'],
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Ignores the types for the mdx file. Not that this effects tests but will make it cleaner

Screenshot 2024-11-15 at 12 33 04 PM

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/package.json
Comment on lines +49 to +51
"dependencies": {
"tailwind-merge": "^2.0.0"
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tailwind merge is what portfolio uses to resolve tailwind classname conflicts and duplicates
https://github.com/dcastil/tailwind-merge

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/src/components/text/Text.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think I can improve the tests here so they can be more comphrehensive I've created a subsequent ticket which will thoroghly test all prop #119

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Improved test PR here #122

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/src/utils/tw-merge.ts

import { extendTailwindMerge } from 'tailwind-merge';

// TODO create a test that checks against typographyMap in Text.tsx
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will do this in #119

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Tests for twmerge util here #122

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/src/utils/tw-merge.ts
'font-weight': ['font-weight'],
},
},
});
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

We may want to export this as a utility so it can be used with our components, allowing us to avoid conflicts with our typography classnames, even though they are unlikely to be used. We can address this in a future PR if it becomes necessary.

georgewrmarshall
georgewrmarshall commented Nov 15, 2024
View reviewed changes
packages/design-system-react/src/components/index.ts
@@ -1,4 +1,13 @@
export { Text, TextVariant } from './text';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Exporting Text component and all types from component index

@georgewrmarshall georgewrmarshall marked this pull request as ready for review November 15, 2024 23:06
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner November 15, 2024 23:06
@georgewrmarshall georgewrmarshall mentioned this pull request Nov 15, 2024
Draft
7 tasks
@brianacnguyen
Copy link
Contributor

@metamaskbot publish-preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@georgewrmarshall georgewrmarshall

Labels
team-design-system
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@georgewrmarshall @brianacnguyen