From e96c0b696357af70471a91b6291d630e3bb85207 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Wed, 19 Apr 2023 19:30:29 -0700 Subject: [PATCH] Update to component-library readme (#18501) * 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> --- ui/components/component-library/README.md | 34 +++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/ui/components/component-library/README.md b/ui/components/component-library/README.md index b108e9256..8c3c27f74 100644 --- a/ui/components/component-library/README.md +++ b/ui/components/component-library/README.md @@ -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' + +This text has a margin-bottom of 16px +``` + +#### 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' + + +``` + +## 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) 💁