m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Update to component-library readme (#18501)

Browse Source 
* Update to component-library readme

* Update ui/components/component-library/README.md

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
George Marshall 2023-04-19 19:30:29 -07:00 committed by GitHub
parent 8e52ed3fac
commit e96c0b6963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/components/component-library/README.md
View File

@ -1,8 +1,38 @@
# Component Library
**⚠️ THESE COMPONENTS HAVE BREAKING CHANGES ⚠️**
This folder contains design system components that are built 1:1 with the Figma [DS Components](https://www.figma.com/file/HKpPKij9V3TpsyMV1TpV7C/DS-Components?node-id=16-6) UI kit and should be used where possible in all UI feature work.
This folder contains new design system(`DS 2.0`) components that will be used for the IA/Nav redesign work. They are currently a WIP and should not be used for feature work. That should change in the near future but for the time being please use existing UI components in `ui/components/ui`
## Architecture
All components are built on top of the `Box` component and accept all `Box` [component props](https://metamask.github.io/metamask-storybook/?path=/docs/components-ui-box--default-story#props)
#### Layout
`component-library` components accept all utility props for layout
```
import { Text } from '../../component-library'
<Text marginBottom={4}>This text has a margin-bottom of 16px</Text>
```
#### Polymorphic `as` prop
`component-library` components accept a polymorphic as prop to change the root html element of a component
```
import { Text } from '../../component-library'
<ul>
<Text as="li">This renders as list item html element</Text>
</ul>
```
## TypeScript
We are currently in the process of migrating all component-library components to TypeScript. Feel free to contribute by creating a PR against one of [these issues](https://github.com/MetaMask/metamask-extension/issues?q=is%3Aissue+is%3Aopen+DS%2FExtension%2F2023%2FQ2%2FO1%2FKR3)
## Support
If internal folks have any questions please reach out the design system team via the internal slack channel [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) 💁