Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Icon house keeping updates #16621

Merged
merged 1 commit into from
Nov 23, 2022
Merged

Icon house keeping updates #16621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/components/component-library/avatar-favicon/avatar-favicon.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('AvatarFavicon', () => {
const { container } = render(
<AvatarFavicon data-testid="avatar-favicon" />,
);
expect(container.getElementsByClassName('icon')).toHaveLength(1);
expect(container.getElementsByClassName('mm-icon')).toHaveLength(1);
});

it('should render fallback image with custom fallbackIconProps if no ImageSource is provided', () => {
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ exports[`ButtonIcon should render button element correctly 1`] = `
data-testid="button-icon"
>
<div
class="box icon icon--size-lg box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/icon-add-square-filled.svg;"
class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/icon-add-square-filled.svg');"
/>
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/component-library/button-link/button-link.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ describe('ButtonLink', () => {
<ButtonLink data-testid="icon" icon="add-square-filled" />,
);

const icons = container.getElementsByClassName('icon').length;
const icons = container.getElementsByClassName('mm-icon').length;
expect(icons).toBe(1);
});
});
2 changes: 1 addition & 1 deletion ui/components/component-library/button-primary/button-primary.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ describe('ButtonPrimary', () => {
<ButtonPrimary data-testid="icon" icon="add-square-filled" />,
);

const icons = container.getElementsByClassName('icon').length;
const icons = container.getElementsByClassName('mm-icon').length;
expect(icons).toBe(1);
});
});
2 changes: 1 addition & 1 deletion ui/components/component-library/button-secondary/button-secondary.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ describe('ButtonSecondary', () => {
<ButtonSecondary data-testid="icon" icon="add-square-filled" />,
);

const icons = container.getElementsByClassName('icon').length;
const icons = container.getElementsByClassName('mm-icon').length;
expect(icons).toBe(1);
});
});
17 changes: 9 additions & 8 deletions ui/components/component-library/icon/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,22 @@ The `Icon` accepts all props below as well as all [Box](/docs/ui-components-ui-b

Use the `name` prop and the `ICON_NAMES` object to change the icon.

Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.

<Canvas>
<Story id="ui-components-component-library-icon-icon-stories-js--name" />
</Canvas>

```jsx
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { Icon, ICON_NAMES } from '../../components/component-library';

<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
<Icon name={ICON_NAMES.BANK_FILLED} />
<Icon name={ICON_NAMES.CALCULATOR_FILLED} />
<Icon name={ICON_NAMES.COIN_FILLED} />
// etc...
```

<Canvas>
<Story id="ui-components-component-library-icon-icon-stories-js--name" />
</Canvas>

### Size

Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM`
Expand All @@ -55,7 +56,7 @@ Possible sizes include:

```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { Icon, ICON_NAMES } from '../../components/component-library';

<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
Expand All @@ -79,7 +80,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design

```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { Icon, ICON_NAMES } from '../../components/component-library';

<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
<Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />
Expand Down
11 changes: 11 additions & 0 deletions ui/components/component-library/icon/__snapshots__/icon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Icon should render correctly 1`] = `
<div>
<div
class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
data-testid="icon"
style="mask-image: url('./images/icons/icon-add-square-filled.svg');"
/>
</div>
`;
24 changes: 19 additions & 5 deletions ui/components/component-library/icon/icon.constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
import { SIZES } from '../../../helpers/constants/design-system';

/**
* The ICON_NAMES object contains all the possible icon names.
* It is generated using the generateIconNames script in development/generate-icon-names.js
* and stored in the environment variable ICON_NAMES
* To add a new icon, add the icon svg file to app/images/icons
* Ensure the svg has been optimized, is kebab case and starts with "icon-"
* See "Adding a new icon" in ./README.md for more details
*
* Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/ui-components-component-library-icon-icon-stories-js--default-story
*
* Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/ui-components-component-library-icon-icon-stories-js--default-story#adding-a-new-icon
*
* ICON_NAMES is generated using svgs in app/images/icons and
* the generateIconNames script in development/generate-icon-names.js
* then stored as an environment variable
Comment on lines +6 to +12
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating description here in hopes of directing engineers to the search icon page in storybook

*/

/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring
export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES);
export const ICON_SIZES = {
XXS: SIZES.XXS,
XS: SIZES.XS,
SM: SIZES.SM,
MD: SIZES.MD,
LG: SIZES.LG,
XL: SIZES.XL,
AUTO: SIZES.AUTO,
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding ICON_SIZES to curate sizes passed to storybook controls and propTypes

14 changes: 8 additions & 6 deletions ui/components/component-library/icon/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
ICON_COLORS,
} from '../../../helpers/constants/design-system';

import { ICON_SIZES } from './icon.constants';

export const Icon = ({
name,
size = SIZES.MD,
Expand All @@ -21,15 +23,15 @@ export const Icon = ({
return (
<Box
color={color}
className={classnames(className, 'icon', `icon--size-${size}`)}
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
style={{
/**
* To reduce the possibility of injection attacks
* the icon component uses mask-image instead of rendering
* the svg directly.
*/
maskImage: `url('./images/icons/icon-${name}.svg`,
WebkitMaskImage: `url('./images/icons/icon-${name}.svg`,
maskImage: `url('./images/icons/icon-${name}.svg')`,
WebkitMaskImage: `url('./images/icons/icon-${name}.svg')`,
...style,
}}
{...props}
Expand All @@ -44,10 +46,10 @@ Icon.propTypes = {
name: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
/**
* The size of the Icon.
* Possible values could be 'SIZES.XXS', 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL',
* Default value is 'SIZES.MD'.
* Possible values could be SIZES.XXS (10px), SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px),
* Default value is SIZES.MD (20px).
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding pixel values for sizes in propType comments

*/
size: PropTypes.oneOf(Object.values(SIZES)),
size: PropTypes.oneOf(Object.values(ICON_SIZES)),
/**
* The color of the icon.
* Defaults to COLORS.INHERIT.
Expand Down
2 changes: 1 addition & 1 deletion ui/components/component-library/icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.icon {
.mm-icon {
--icon-size: var(--size, 16px);

font-size: var(--icon-size);
Expand Down
Loading