Skip to content

[React]: Create Icon component in shared UI component library #182

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
Closed
georgewrmarshall opened this issue Nov 27, 2024 · 0 comments · Fixed by #199
Closed

[React]: Create Icon component in shared UI component library #182

georgewrmarshall opened this issue Nov 27, 2024 · 0 comments · Fixed by #199
Assignees
@georgewrmarshall
Labels
team-design-system

Comments

@georgewrmarshall
Copy link
Contributor

Create a reusable Icon component for the shared UI component library. The component should implement the iconography and design standards outlined in the Audit and Insight Report FigJam. This task is part of the migration to the new shared UI component library, ensuring consistency with the conventions set by existing components.

Technical Details

  • Component should be built using React and TypeScript.
  • Props to include:
    • name: IconName
    • size?: IconSize.Xs | IconSize.Sm | IconSize.Md | IconSize.Lg | IconSize.Xl
    • color?: IconColor (all theme colors)
    • className?: string;
  • Integrate unit tests using Jest and React Testing Library.
  • Review component alignment with the global typography standards from the FigJam report.

Acceptance Criteria

  • The Icon component should match the design specs in the FigJam report.
  • The component should match the Figma styles:
  • Unit tests must cover at least 80% of the component’s functionality.
  • Component should be reviewed and approved by both engineering and design teams.
  • Documentation for the component should be added, covering usage, available props, and examples.
  • Ensure all aspects meet the Definition of Done.
  • The story should include a story for each prop, a default story

References
@georgewrmarshall georgewrmarshall self-assigned this Nov 27, 2024
This was referenced Nov 28, 2024
Merged
Merged
Merged
brianacnguyen added a commit that referenced this issue Dec 3, 2024
@georgewrmarshall @brianacnguyen
feat: initial icon component that renders a basic svg (#260)
4cc9f98 
## **Description**

This pull request introduces the initial `Icon` component in the
`design-system-react` package.

This PR includes:
- Creation of the `Icon` component with a focus on defining a robust
component architecture.
- Comprehensive Storybook setup:
  - Controls to dynamically adjust component properties.
  - MDX documentation for usage guidance.
- 100% unit test coverage
- Export of the `Icon` component and its types from the
`design-system-react` package.

This is an **initial implementation**, introducing one SVG asset to
validate the prop architecture and foundational functionality. Future
PRs will automate the inclusion of SVG icons and expand the available
asset library. For more details, see the full draft PR:
#199

## **Related issues**

Part of: #182

## **Manual testing steps**

1. Run storybook `yarn storybook`.
2. Verify the `Icon` component in Storybook:
   - Test various control configurations.
   - Review MDX documentation for accuracy and clarity.
3. Ensure the `Icon` styles match designs in
[Figma](https://www.figma.com/design/HKpPKij9V3TpsyMV1TpV7C/DS-Components?m=auto&node-id=24848-66341&t=x4AwcoRCbTOCwfJz-1).
4. Use the publish preview to validate:
- The `Icon` component can be successfully imported into the Portfolio
and Extension applications.
   - The component functions as expected in those environments.

## **Screenshots/Recordings**

### **Before**

_No existing `Icon` component._

### **After**

Storybook documentation and controls



https://github.com/user-attachments/assets/141f9eaf-d48e-4f2a-a9a7-67986fd9beae


The `Icon` component rendered in both the Portfolio and Extension
applications.

## **Pre-merge author checklist**

- [x] Followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs).
- [x] Completed this PR template.
- [x] Included comprehensive unit tests.
- [x] Documented the code using [JSDoc](https://jsdoc.app/) format.
- [x] Applied appropriate labels as per [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md).

## **Pre-merge reviewer checklist**

- [ ] Manually tested the PR.
- [ ] Confirmed all acceptance criteria are met.
- [ ] Verified testing evidence (screenshots/recordings) is sufficient.

---------

Co-authored-by: Brian August Nguyen <[email protected]>
@georgewrmarshall georgewrmarshall mentioned this issue Dec 9, 2024
Merged
7 tasks
georgewrmarshall added a commit that referenced this issue Dec 11, 2024
@georgewrmarshall
feat: automated generate icons script (#270)
5f8863e 
## **Description**

This PR adds an automated icon generation system that converts SVG
assets into React components using [SVGR](https://react-svgr.com/docs).
Key improvements include:

1. Reason for change: Currently, SVG icons need to be manually converted
into React components, which is time-consuming and error-prone.
2. Solution: Automated pipeline that:
   - Converts SVG files to typed React components using SVGR
   - Generates an index file for easy importing
   - Updates `IconName` enum automatically
   - Maintains consistent component structure and props

## **Related issues**

Part of: #182

## **Manual testing steps**

1. Add a new SVG file to
`packages/design-system-react/src/components/icon/assets/`
2. Run `yarn generate:icons` in the design-system-react package
3. Verify that:
   - A new React component is generated in the icons/ directory
   - The component is exported in the index.ts file
   - The IconName enum is updated with the new icon
   - The icon can be used in the Icon component

## **Screenshots/Recordings**

### **Before**
Manual SVG implementation directly in Icon.tsx:


https://github.com/user-attachments/assets/96e5b382-44a4-43a3-bb82-80e688d9fdbc

### **After**
Automated component generation and usage:


https://github.com/user-attachments/assets/10cefb5d-6a95-4488-a263-ff69de856533


https://github.com/user-attachments/assets/cc185de6-4245-4cc3-85d0-7bfe5a719028

## **Pre-merge author checklist**

- [x] I've followed MetaMask Contributor Docs
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using JSDoc format if applicable
- [x] I've applied the right labels on the PR

## **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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@georgewrmarshall georgewrmarshall

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

Successfully merging a pull request may close this issue.

feat: adding all icon svg assets MetaMask/metamask-design-system
1 participant
@georgewrmarshall