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

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

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
+  }
 }

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}>

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(

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,
 };