m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +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.MD` 20px
- `SIZES.LG` 24px - `SIZES.LG` 24px
- `SIZES.XL` 32px - `SIZES.XL` 32px
- `SIZES.AUTO` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas> <Canvas>
<Story id="ui-components-component-library-icon-icon-stories-js--size" /> <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.MD} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.LG} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.LG} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XL} /> <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 ### Color

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

@ -39,4 +39,11 @@
&--size-xl { &--size-xl {
--size: 32px; --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) => ( export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}> <>
<Icon {...args} size={SIZES.XXS} /> <Box
<Icon {...args} size={SIZES.XS} /> display={DISPLAY.FLEX}
<Icon {...args} size={SIZES.SM} /> alignItems={ALIGN_ITEMS.BASELINE}
<Icon {...args} size={SIZES.MD} /> gap={1}
<Icon {...args} size={SIZES.LG} /> marginBottom={4}
<Icon {...args} size={SIZES.XL} /> >
</Box> <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) => ( export const Color = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE}> <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE}>
<Box padding={1} display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}> <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} size={SIZES.XL}
data-testid="icon-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'); 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-md')).toHaveClass('icon--size-md');
expect(getByTestId('icon-lg')).toHaveClass('icon--size-lg'); expect(getByTestId('icon-lg')).toHaveClass('icon--size-lg');
expect(getByTestId('icon-xl')).toHaveClass('icon--size-xl'); expect(getByTestId('icon-xl')).toHaveClass('icon--size-xl');
expect(getByTestId('icon-auto')).toHaveClass('icon--size-auto');
}); });
it('should render with icon colors', () => { it('should render with icon colors', () => {
const { getByTestId } = render( const { getByTestId } = render(

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

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