feat: second icon on button (#475)

EightfoldAI · Jan 3, 2023 · d06a7aa · d06a7aa
1 parent fd0e29e
commit d06a7aa
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git 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,14 +246,21 @@ 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>
           )}
           {iconExists && textExists && (
             <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
@@ -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
@@ -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
@@ -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,
+};