From fea715f61091fff39589761b482247b4e560eb1e Mon Sep 17 00:00:00 2001
From: garrettbear <gwhisten@gmail.com>
Date: Thu, 5 Jan 2023 14:17:57 -0800
Subject: [PATCH] icon audit, remove xxs icon size

---
 ui/components/component-library/icon/README.mdx        | 2 --
 ui/components/component-library/icon/icon.constants.js | 1 -
 ui/components/component-library/icon/icon.js           | 2 +-
 ui/components/component-library/icon/icon.scss         | 3 ---
 ui/components/component-library/icon/icon.test.js      | 6 ------
 5 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index 55a7e3f93ebb..c47914fa83dc 100644
--- 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
index 7cd4da2c1cda..f2beab695d09 100644
--- 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
index 531f4d10cb4d..c1dfc10618ba 100644
--- 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
index d07795176c0b..3c2c86b8ed6c 100644
--- 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
index d7922b89a1f2..562a9733c093 100644
--- 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');