Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

packages/design-system/lib/components/Input/Input.stories.tsx

@@ -130,6 +130,7 @@ const meta: Meta<typeof Input> = {
         defaultValue: { summary: 'false' },
       },
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 }
 
@@ -147,6 +148,7 @@ export const Default: Story = {
     leftIconName: 'person',
     rightIconName: 'lock',
     showWarning: false,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
   render: (args) => {
     // Extract custom Storybook args

packages/design-system/lib/components/Input/Input.tsx

@@ -13,7 +13,6 @@ import { InputLabel } from '../InputLabel'
 import styles from './input.module.css'
 
 import { IconButton } from '../IconButton'
-import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
 import type { InputProps } from './types'
 import { clearInput, useInputHasValue } from './utils'
@@ -113,9 +112,8 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
                 onPress={onClearContent}
                 // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                 aria-label="Clear content"
-              >
-                <MaterialIcon icon="cancel" />
-              </IconButton>
+                iconName="cancel"
+              />
             </div>
           )}
           {rightIcon && !(showClearContentIcon && hasValue) && (
@@ -162,9 +160,8 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
             onPress={onClearContent}
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             aria-label="Clear content"
-          >
-            <MaterialIcon icon="cancel" />
-          </IconButton>
+            iconName="cancel"
+          />
         </div>
       )}
       {rightIcon && !(showClearContentIcon && hasValue) && (