From de40ccc1a785a531f759efe1a4ceed18e82a4d6c Mon Sep 17 00:00:00 2001
From: Anastasiia Stavitskaya <stavitskaya.anastasiia@gmail.com>
Date: Wed, 7 Aug 2024 16:30:12 -0700
Subject: [PATCH 1/3] fix: update icon in button to inherit color

---
 src/components/general/Button/Button.stories.tsx |  4 ++--
 src/components/general/Button/Button.tsx         | 16 +++++++++++++++-
 src/components/general/Icon/Icon.tsx             |  1 +
 src/components/general/Icon/icon.css             |  4 ++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx
index 524d24629..cbf4f53e0 100644
--- a/src/components/general/Button/Button.stories.tsx
+++ b/src/components/general/Button/Button.stories.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 
 const meta: Meta<typeof Button> = {
   title: 'Aquarium/General/Button',
-  component: props => <Button {...props}>{props.children || 'Button Label'}</Button>,
+  component: props => <Button {...props}>{props.children ?? 'Button Label'}</Button>,
 
   args: {
     block: false,
@@ -116,7 +116,7 @@ export const WithIcon: Story = {
 export const WithIconSM: Story = {
   args: {
     type: 'default',
-    icon: <Icon name="mpLogo" size="sm" />,
+    icon: <Icon name="mpLogo" size="sm" color="default" />,
     variant: 'with-new-icon',
   },
 }
diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx
index 38231f7bc..6275e8ce1 100644
--- a/src/components/general/Button/Button.tsx
+++ b/src/components/general/Button/Button.tsx
@@ -1,5 +1,8 @@
+import React from 'react'
 import { Button as AntButton } from 'antd'
 import { type ButtonProps as AntButtonProps } from 'antd'
+import { Icon } from 'src/components'
+import type { IIconProps } from 'src/components'
 import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider'
 
 export interface IButtonProps extends AntButtonProps {
@@ -9,15 +12,26 @@ export interface IButtonProps extends AntButtonProps {
    * This will be removed once all icons are updated.
    */
   variant?: 'with-new-icon'
+  icon?: React.ReactNode
 }
 export const Button = (props: IButtonProps) => {
   const classMap = {
     'with-new-icon': 'u-display-flex u-align-items-center u-justify-center',
   }
 
+  const buttonIcon =
+    React.isValidElement<IIconProps>(props.icon) && props.icon.type === Icon
+      ? React.cloneElement(props.icon, {
+          color: props.icon.props.color ?? 'inherit',
+        })
+      : props.icon
+
   return (
     <ConfigProvider>
-      <AntButton {...props} className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
+      <AntButton
+        {...props}
+        icon={buttonIcon}
+        className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
         {props.children}
       </AntButton>
     </ConfigProvider>
diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx
index d95bdb459..9a34515cb 100644
--- a/src/components/general/Icon/Icon.tsx
+++ b/src/components/general/Icon/Icon.tsx
@@ -16,6 +16,7 @@ export type IconColor =
   | 'text'
   | 'strong'
   | 'brand'
+  | 'inherit'
 
 export interface IIconProps {
   name: IconNames
diff --git a/src/components/general/Icon/icon.css b/src/components/general/Icon/icon.css
index cdd08efd8..7e3d3385d 100644
--- a/src/components/general/Icon/icon.css
+++ b/src/components/general/Icon/icon.css
@@ -89,3 +89,7 @@
 .icon-color-black {
   color: black;
 }
+
+.icon-color-inherit {
+  color: inherit;
+}

From f3dfe1ba2cb6abc8f10f801e8778e57612d8dcc4 Mon Sep 17 00:00:00 2001
From: Anastasiia Stavitskaya <stavitskaya.anastasiia@gmail.com>
Date: Wed, 7 Aug 2024 16:35:08 -0700
Subject: [PATCH 2/3] chore: update button stories

---
 src/components/general/Button/Button.stories.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx
index cbf4f53e0..e5618ec62 100644
--- a/src/components/general/Button/Button.stories.tsx
+++ b/src/components/general/Button/Button.stories.tsx
@@ -114,6 +114,14 @@ export const WithIcon: Story = {
 }
 
 export const WithIconSM: Story = {
+  args: {
+    type: 'default',
+    icon: <Icon name="mpLogo" size="sm" />,
+    variant: 'with-new-icon',
+  },
+}
+
+export const WithIconDefaultColorSM: Story = {
   args: {
     type: 'default',
     icon: <Icon name="mpLogo" size="sm" color="default" />,

From b93219ccba051eb4916cae326f5a75b4aab0079e Mon Sep 17 00:00:00 2001
From: Anastasiia Stavitskaya <stavitskaya.anastasiia@gmail.com>
Date: Thu, 8 Aug 2024 13:02:07 -0700
Subject: [PATCH 3/3] chore: address feedback

---
 src/components/general/Button/Button.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/general/Button/Button.tsx b/src/components/general/Button/Button.tsx
index 6275e8ce1..8b34ded5b 100644
--- a/src/components/general/Button/Button.tsx
+++ b/src/components/general/Button/Button.tsx
@@ -4,6 +4,7 @@ import { type ButtonProps as AntButtonProps } from 'antd'
 import { Icon } from 'src/components'
 import type { IIconProps } from 'src/components'
 import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider'
+import { type ReactNode } from 'react'
 
 export interface IButtonProps extends AntButtonProps {
   /**
@@ -12,7 +13,7 @@ export interface IButtonProps extends AntButtonProps {
    * This will be removed once all icons are updated.
    */
   variant?: 'with-new-icon'
-  icon?: React.ReactNode
+  icon?: ReactNode
 }
 export const Button = (props: IButtonProps) => {
   const classMap = {
@@ -20,11 +21,11 @@ export const Button = (props: IButtonProps) => {
   }
 
   const buttonIcon =
-    React.isValidElement<IIconProps>(props.icon) && props.icon.type === Icon
-      ? React.cloneElement(props.icon, {
-          color: props.icon.props.color ?? 'inherit',
-        })
-      : props.icon
+    React.isValidElement<IIconProps>(props.icon) && props.icon.type === Icon ? (
+      <Icon {...props.icon.props} color={props.icon.props.color ?? 'inherit'} />
+    ) : (
+      props.icon
+    )
 
   return (
     <ConfigProvider>