m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

add icons auto size (#16027)

Browse Source 
Update ui/components/component-library/icon/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

Update ui/components/component-library/icon/icon.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

Update ui/helpers/constants/design-system.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

story fix

font size comment

update auto demo and fix inline style
This commit is contained in:
Garrett Bear 2022-09-29 08:33:34 -07:00 committed by GitHub
parent 47f136380f
commit 455735c5ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,7 @@ Possible sizes include:
- `SIZES.MD` 20px
- `SIZES.LG` 24px
- `SIZES.XL` 32px
- `SIZES.AUTO` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas>
<Story id="ui-components-component-library-icon-icon-stories-js--size" />
@ -62,6 +63,10 @@ import { Icon, ICON_NAMES } from '../ui/component-library';
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.MD} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.LG} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XL} />
<Text as="p" variant={TEXT.BODY_SM}>
<Icon size={SIZES.AUTO} /> Auto also exists and inherits the
font-size of the parent element.
</Text>
```
### Color

7
ui/components/component-library/icon/icon.scss
View File

@ -39,4 +39,11 @@
&--size-xl {
--size: 32px;
}
&--size-auto {
--size: 1em; // Inherits parent font-size
position: relative; // Fixes vertical alignment
top: 0.125em; // Fixes vertical alignment
}
}

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

@ -200,16 +200,26 @@ export const Name = (args) => {
};
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<Icon {...args} size={SIZES.XXS} />
<Icon {...args} size={SIZES.XS} />
<Icon {...args} size={SIZES.SM} />
<Icon {...args} size={SIZES.MD} />
<Icon {...args} size={SIZES.LG} />
<Icon {...args} size={SIZES.XL} />
</Box>
<>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.BASELINE}
gap={1}
marginBottom={4}
>
<Icon {...args} size={SIZES.XXS} />
<Icon {...args} size={SIZES.XS} />
<Icon {...args} size={SIZES.SM} />
<Icon {...args} size={SIZES.MD} />
<Icon {...args} size={SIZES.LG} />
<Icon {...args} size={SIZES.XL} />
</Box>
<Text as="p" variant={TEXT.BODY_SM}>
<Icon {...args} size={SIZES.AUTO} /> Auto also exists and inherits the
font-size of the parent element.
</Text>
</>
);
export const Color = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE}>
<Box padding={1} display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>

6
ui/components/component-library/icon/icon.test.js
View File

@ -88,6 +88,11 @@ describe('Icon', () => {
size={SIZES.XL}
data-testid="icon-xl"
/>
<Icon
name={MOCK_ICON_NAMES.ADD_SQUARE_FILLED}
size={SIZES.AUTO}
data-testid="icon-auto"
/>
</>,
);
expect(getByTestId('icon-xxs')).toHaveClass('icon--size-xxs');
@ -96,6 +101,7 @@ describe('Icon', () => {
expect(getByTestId('icon-md')).toHaveClass('icon--size-md');
expect(getByTestId('icon-lg')).toHaveClass('icon--size-lg');
expect(getByTestId('icon-xl')).toHaveClass('icon--size-xl');
expect(getByTestId('icon-auto')).toHaveClass('icon--size-auto');
});
it('should render with icon colors', () => {
const { getByTestId } = render(

1
ui/helpers/constants/design-system.js
View File

@ -172,6 +172,7 @@ export const SIZES = {
MD: 'md',
LG: 'lg',
XL: 'xl',
AUTO: 'auto', // Used for Text and Icon components to inherit the parent elements font-size
NONE,
};