icon audit, remove xxs icon size

MetaMask · Jan 5, 2023 · fea715f · fea715f
1 parent c9ddee9
commit fea715f
Show file tree

Hide file tree

Showing 5 changed files with 1 addition and 13 deletions.
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
@@ -42,7 +42,6 @@ Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-s
 
 Possible sizes include:
 
-- `SIZES.XXS` 10px
 - `SIZES.XS` 12px
 - `SIZES.SM` 16px
 - `SIZES.MD` 20px
@@ -58,7 +57,6 @@ Possible sizes include:
 import { SIZES } from '../../../helpers/constants/design-system';
 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} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.SM} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.MD} />

diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js
@@ -15,7 +15,6 @@ import { SIZES } from '../../../helpers/constants/design-system';
 /* 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,

diff --git a/ui/components/component-library/icon/icon.js b/ui/components/component-library/icon/icon.js
@@ -46,7 +46,7 @@ Icon.propTypes = {
   name: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
   /**
    * The size of the Icon.
-   * Possible values could be SIZES.XXS (10px), SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px),
+   * Possible values could be SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px),
    * Default value is SIZES.MD (20px).
    */
   size: PropTypes.oneOf(Object.values(ICON_SIZES)),

diff --git a/ui/components/component-library/icon/icon.scss b/ui/components/component-library/icon/icon.scss
@@ -16,9 +16,6 @@
   -webkit-mask-position: center;
 
   // Size
-  &--size-xxs {
-    --size: 10px;
-  }
 
   &--size-xs {
     --size: 12px;

diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/icon.test.js
@@ -78,11 +78,6 @@ describe('Icon', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <Icon
-          name={ICON_NAMES.ADD_SQUARE_FILLED}
-          size={SIZES.XXS}
-          data-testid="icon-xxs"
-        />
         <Icon
           name={ICON_NAMES.ADD_SQUARE_FILLED}
           size={SIZES.XS}
@@ -115,7 +110,6 @@ describe('Icon', () => {
         />
       </>,
     );
-    expect(getByTestId('icon-xxs')).toHaveClass('mm-icon--size-xxs');
     expect(getByTestId('icon-xs')).toHaveClass('mm-icon--size-xs');
     expect(getByTestId('icon-sm')).toHaveClass('mm-icon--size-sm');
     expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md');