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 Headstorm#330
PatrickDeVries · Oct 27, 2021 · 490705a · 490705a
1 parent 30191c5
commit 490705a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
 }