mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ab4843f06b
* UX: Multichain: Implement Account Details Popover * Styling account details popover * using ButtonSecondary with variant, removing Text * adding account-details jest test * Close popover when outside area clicked * Move all export functionality into the popover * Improve jest tests * Implement new design for export key screens * Hide warning when popover is closed * Vertically align the copy button * Move AccountDetailsDisplay to its own file * Move authentication to its own file * Move private key to its own component * Fix misalignment of avatar on display screen * Move private key to its own component * Update ui/components/multichain/account-details/account-details-authenticate.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/multichain/account-details/account-details.test.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Prevent account name overflow, update text size * Use FormTextField * Add analytics * Move location of accountDetailsAddress * Ensure passsword input is used --------- Co-authored-by: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> |
||
|---|---|---|
| .. | ||
| avatar-account | ||
| avatar-base | ||
| avatar-favicon | ||
| avatar-icon | ||
| avatar-network | ||
| avatar-token | ||
| badge-wrapper | ||
| banner-alert | ||
| banner-base | ||
| banner-tip | ||
| button | ||
| button-base | ||
| button-icon | ||
| button-link | ||
| button-primary | ||
| button-secondary | ||
| form-text-field | ||
| header-base | ||
| help-text | ||
| icon | ||
| input | ||
| label | ||
| modal-content | ||
| modal-header | ||
| modal-overlay | ||
| picker-network | ||
| popover-header | ||
| tag | ||
| tag-url | ||
| text | ||
| text-field | ||
| text-field-search | ||
| COMPONENT-LIBARY.stories.mdx | ||
| component-library-components.scss | ||
| index.js | ||
| README.md | ||
Component Library
This folder contains design system components that are built 1:1 with the Figma DS Components UI kit and should be used where possible in all UI feature work.
Architecture
All components are built on top of the Box component and accept all Box component 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
Support
If internal folks have any questions please reach out the design system team via the internal slack channel #metamask-design-system 💁
DS components figma file (internal)