From d06a7aa9e6a35a0b93ab6f1c0afe605fde1606ca Mon Sep 17 00:00:00 2001
From: Mohammed Fazil <109717425+mfazil-eightfold@users.noreply.github.com>
Date: Tue, 3 Jan 2023 22:53:52 +0530
Subject: [PATCH] feat: second icon on button (#475)

---
 src/components/Button/BaseButton.tsx         | 25 +++++++++++++++++--
 src/components/Button/Button.types.ts        |  4 +++
 src/components/Button/button.module.scss     | 12 +++++++++
 src/components/Dropdown/Dropdown.stories.tsx | 26 ++++++++++++++++++++
 4 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
index 7049ee06c..1ba588fc7 100644
--- a/src/components/Button/BaseButton.tsx
+++ b/src/components/Button/BaseButton.tsx
@@ -10,7 +10,7 @@ import {
   InternalButtonProps,
   SplitButton,
 } from './';
-import { Icon, IconSize } from '../Icon';
+import { Icon, IconProps, IconSize } from '../Icon';
 import { Badge } from '../Badge';
 import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
 import { mergeClasses } from '../../shared/utilities';
@@ -40,6 +40,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       floatingButtonProps,
       htmlType,
       iconProps,
+      prefixIconProps,
       id,
       onClick,
       onContextMenu,
@@ -76,6 +77,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
 
     const counterExists: boolean = !!counter;
     const iconExists: boolean = !!iconProps;
+    const prefixIconExists: boolean = !!prefixIconProps;
     const textExists: boolean = !!text;
 
     const buttonBaseSharedClassNames: string = mergeClasses([
@@ -205,6 +207,18 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       />
     );
 
+    const getPrefixIcon = (): JSX.Element => (
+      <Icon
+        {...prefixIconProps}
+        classNames={mergeClasses([
+          styles.icon,
+          styles.prefixIcon,
+          prefixIconProps.classNames,
+        ])}
+        size={getButtonIconSize()}
+      />
+    );
+
     const getButtonContent = (
       buttonTextClassNames: string,
       text: string
@@ -232,7 +246,13 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
           style={style}
           type={htmlType}
         >
-          {iconExists && !textExists && getButtonIcon()}
+          {iconExists && prefixIconExists && !textExists && (
+            <span>
+              {getButtonIcon()}
+              {getPrefixIcon()}
+            </span>
+          )}
+          {iconExists && !textExists && !prefixIconExists && getButtonIcon()}
           {counterExists && !textExists && !loading && (
             <Badge classNames={badgeClassNames}>{counter}</Badge>
           )}
@@ -240,6 +260,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             <span>
               {getButtonIcon()}
               {getButtonContent(buttonTextClassNames, text)}
+              {prefixIconExists && getPrefixIcon()}
             </span>
           )}
           {!iconExists && getButtonContent(buttonTextClassNames, text)}
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
index 863d0f8eb..dd54e6735 100644
--- a/src/components/Button/Button.types.ts
+++ b/src/components/Button/Button.types.ts
@@ -155,6 +155,10 @@ export interface ButtonProps extends NativeButtonProps {
    * The button icon props.
    */
   iconProps?: IconProps;
+  /**
+   * The button icon props.
+   */
+  prefixIconProps?: IconProps;
   /**
    * The button id.
    */
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index d2c1c0369..84213d003 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -18,14 +18,26 @@
 
   .icon + .button-text-large:not(:empty) {
     margin-left: $button-spacer-large;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-large;
+    }
   }
 
   .icon + .button-text-medium:not(:empty) {
     margin-left: $button-spacer-medium;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-medium;
+    }
   }
 
   .icon + .button-text-small:not(:empty) {
     margin-left: $button-spacer-small;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-small;
+    }
   }
 
   &.pill-shape {
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 3962a1a39..b70cb3f42 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -150,6 +150,28 @@ const Dropdown_Button_Story: ComponentStory<typeof Dropdown> = (args) => {
 
 export const Dropdown_Button = Dropdown_Button_Story.bind({});
 
+const Dropdown_IconButton_Story: ComponentStory<typeof Dropdown> = (args) => {
+  const [visible, setVisibility] = useState(false);
+  return (
+    <Dropdown
+      {...args}
+      onVisibleChange={(isVisible) => setVisibility(isVisible)}
+    >
+      <DefaultButton
+        iconProps={{
+          path: IconName.mdiAccount,
+        }}
+        prefixIconProps={{
+          path: IconName.mdiChevronDown,
+          rotate: visible ? 180 : 0,
+        }}
+      />
+    </Dropdown>
+  );
+};
+
+export const Dropdown_IconButton = Dropdown_IconButton_Story.bind({});
+
 const Dropdown_Div_Story: ComponentStory<typeof Dropdown> = (args) => {
   const [visible, setVisibility] = useState(false);
   return (
@@ -189,3 +211,7 @@ Dropdown_Button.args = {
 Dropdown_Div.args = {
   ...dropdownArgs,
 };
+
+Dropdown_IconButton.args = {
+  ...dropdownArgs,
+};