From 490705a0775023b1fbea8c645cbe876440fa485e Mon Sep 17 00:00:00 2001
From: Patrick DeVries <pcdevri@gmail.com>
Date: Wed, 27 Oct 2021 17:14:55 -0500
Subject: [PATCH] feat(button): add prop support for Button icons

Add left icon props and right icon props props to allow easy override of their values

ref #330
---
 src/components/Button/Button.stories.tsx                 | 2 ++
 src/components/Button/Button.tsx                         | 9 ++++++---
 .../Button/__tests__/__snapshots__/Button.test.tsx.snap  | 3 ---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 659aec681..b8305c4ac 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -32,6 +32,8 @@ BasicButton.args = {
   iconSuffix: 'none',
   children: 'Default text',
   StyledRightIconContainer: StyledIconContainer,
+  leftIconProps: { size: '1rem' },
+  rightIconProps: { size: '1rem' },
 };
 
 const iconOptions = {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index cc01f0995..772a7527e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -53,6 +53,8 @@ export type ButtonProps = {
 
   containerProps?: SubcomponentPropsType;
   interactionFeedbackProps?: Omit<InteractionFeedbackProps, 'children'>;
+  leftIconProps?: SubcomponentPropsType;
+  rightIconProps?: SubcomponentPropsType;
 
   children?: ReactNode;
 
@@ -135,7 +137,6 @@ export const ButtonContainer: string & StyledComponentBase<any, {}, ButtonContai
 `;
 
 const IconContainer = styled(Div)`
-  height: 1rem;
   vertical-align: middle;
 `;
 
@@ -176,6 +177,8 @@ const Button = ({
 
   containerProps = {},
   interactionFeedbackProps,
+  leftIconProps = {},
+  rightIconProps = {},
 
   containerRef,
   leftIconContainerRef,
@@ -230,7 +233,7 @@ const Button = ({
         iconPrefix &&
         (typeof iconPrefix === 'string' && iconPrefix !== '' ? (
           <StyledLeftIconContainer hasContent={hasContent} ref={leftIconContainerRef}>
-            <UnstyledIcon path={iconPrefix} size="1rem" />
+            <UnstyledIcon path={iconPrefix} size="1rem" {...leftIconProps} />
           </StyledLeftIconContainer>
         ) : (
           <StyledLeftIconContainer ref={leftIconContainerRef}>{iconPrefix}</StyledLeftIconContainer>
@@ -244,7 +247,7 @@ const Button = ({
       {iconSuffix &&
         (typeof iconSuffix === 'string' ? (
           <StyledRightIconContainer hasContent={hasContent} ref={rightIconContainerRef}>
-            <UnstyledIcon path={iconSuffix} size="1rem" />
+            <UnstyledIcon path={iconSuffix} size="1rem" {...rightIconProps} />
           </StyledRightIconContainer>
         ) : (
           <StyledRightIconContainer hasContent={hasContent} ref={rightIconContainerRef}>
diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
index b9d652dab..726cd168c 100644
--- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -767,7 +767,6 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
 }
 
 .c2 {
-  height: 1rem;
   vertical-align: middle;
 }
 
@@ -915,7 +914,6 @@ exports[`Button shows icons 1`] = `
 }
 
 .c2 {
-  height: 1rem;
   vertical-align: middle;
 }
 
@@ -1063,7 +1061,6 @@ exports[`Button shows icons with type string 1`] = `
 }
 
 .c2 {
-  height: 1rem;
   vertical-align: middle;
 }