1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Suryansh Anand c92d7380df
Migrates avatar base to TypeScript (#18494)
* Converted file extension from .js to .tsx

* Updated README docs to match the enums. Resolved type errors

* Updated AvatarBaseSizes enum values to string literals

* Added TEXT_TRANSFORM.UPPERCASE as default value of textTransform in base file

* lint fix

* Solved liniting errors in avatar-base

* Made enum more consistent, added desc for AvatarBaseProps

* Updated snapshots of AvatarBase and exported AvatarBaseProps in index.ts

* Made textTransform property accept right values in avatar-base.tsx

* Adding temporary changed extensions

* Reverted files back to tsx and resolved conflicts

* Solved linting errors

* AvatarBaseProps now extends TextProps

* Changing extension to resolve conflict

* Reverted extensions back to tsx after resolving conflicts

* Added forwardRef in AvatarBase

* Updated import name of AvatarBaseSize in README.mdx. Removed empty children attribute from AvatarBase storybook file

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
2023-05-03 17:30:07 -07:00
..
2023-04-28 12:29:58 -07:00
2023-04-27 16:28:39 -07:00

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)