From 455735c5ceb43d1655e27358afa71f91fef693d6 Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Thu, 29 Sep 2022 08:33:34 -0700
Subject: [PATCH] add icons auto size (#16027)

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
---
 .../component-library/icon/README.mdx         |  5 ++++
 .../component-library/icon/icon.scss          |  7 +++++
 .../component-library/icon/icon.stories.js    | 28 +++++++++++++------
 .../component-library/icon/icon.test.js       |  6 ++++
 ui/helpers/constants/design-system.js         |  1 +
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index c2e9d4411..950e2d07b 100644
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@@ -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
diff --git a/ui/components/component-library/icon/icon.scss b/ui/components/component-library/icon/icon.scss
index 05a53b772..68e6c464b 100644
--- a/ui/components/component-library/icon/icon.scss
+++ b/ui/components/component-library/icon/icon.scss
@@ -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
+  }
 }
diff --git a/ui/components/component-library/icon/icon.stories.js b/ui/components/component-library/icon/icon.stories.js
index ff2244efa..6ba614ec2 100644
--- a/ui/components/component-library/icon/icon.stories.js
+++ b/ui/components/component-library/icon/icon.stories.js
@@ -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}>
diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/icon.test.js
index bfbfe5b76..45fefa8c1 100644
--- a/ui/components/component-library/icon/icon.test.js
+++ b/ui/components/component-library/icon/icon.test.js
@@ -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(
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 1ea44d678..4749a45af 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -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,
 };