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

Adding docs for layout and spacing for Icon component (#17612)

Browse Source 
* Adding docs for layout and spacing for Icon component

* Adding close bracket
This commit is contained in:
George Marshall 2023-02-07 10:07:50 -08:00 committed by GitHub
parent 14efbf1eea
commit b55f955243
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
ui/components/component-library/icon/README.mdx
View File

@ -27,7 +27,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
</Canvas>
```jsx
import { Icon, ICON_NAMES } from '../../components/component-library';
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} />
<Icon name={ICON_NAMES.BANK} />
@ -55,7 +55,7 @@ Possible sizes include:
```jsx
import { Size，TextVariant } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../components/component-library';
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.XS} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.SM} />
@ -78,7 +78,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
```jsx
import { IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../components/component-library';
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.inherit} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconDefault} />
@ -87,14 +87,78 @@ import { Icon, ICON_NAMES } from '../../components/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.overlayInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorDefault />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoInvers} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoInverse} />
```
### Layout & Spacing
The `Icon` component accepts all [Box](/docs/components-ui-box--default-story#props) component props including `marginTop`, `marginRight`, ` marginBottom`, `marginLeft` which you can use directly to adjust the space between icons and other components like `Text`
Some examples of `Icon` with `Text` using [Box](/docs/components-ui-box--default-story#props) component props
<Canvas>
<Story id="components-componentlibrary-icon--layout-and-spacing" />
</Canvas>
```jsx
import {
AlignItems,
DISPLAY,
IconColor,
FLEX_DIRECTION,
BorderColor,
BorderRadius,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { ICON_NAMES, Icon, Text } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Icon
name={ICON_NAMES.CHECK}
color={IconColor.successDefault}
marginRight={1}
/>
<Text>Always allow you to opt-out via Settings</Text>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted}
marginRight="auto"
>
<Text color={Color.primaryDefault}>
0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db
</Text>
<Icon
name={ICON_NAMES.COPY}
color={IconColor.primaryDefault}
marginLeft={1}
/>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
padding={4}
borderColor={BorderColor.borderMuted}
backgroundColor={BackgroundColor.backgroundDefault}
>
<Icon name={ICON_NAMES.ADD} color={IconColor.iconDefault} marginRight={2} />
<Text>Create account</Text>
</Box>
</Box>;
```
### Adding a new icon

46
ui/components/component-library/icon/icon.stories.js
View File

@ -12,6 +12,7 @@ import {
BackgroundColor,
BorderColor,
Color,
BorderRadius,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
@ -347,3 +348,48 @@ export const ColorStory = (args) => (
</Box>
);
ColorStory.storyName = 'Color';
export const LayoutAndSpacing = () => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Icon
name={ICON_NAMES.CHECK}
color={IconColor.successDefault}
marginRight={1}
/>
<Text>Always allow you to opt-out via Settings</Text>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted}
marginRight="auto"
>
<Text color={Color.primaryDefault}>
0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db
</Text>
<Icon
name={ICON_NAMES.COPY}
color={IconColor.primaryDefault}
marginLeft={1}
/>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
padding={4}
borderColor={BorderColor.borderMuted}
backgroundColor={BackgroundColor.backgroundDefault}
>
<Icon
name={ICON_NAMES.ADD}
color={IconColor.iconDefault}
marginRight={2}
/>
<Text>Create account</Text>
</Box>
</Box>
);