feat: props: normalize label, classnames, button alignment and iconpr…

…ops (#97) * fix: button: fixes button height and min width in flex layouts * feat: props: normalize label, classnames, button alignment and iconprops BREAKING CHANGE: classnames and icon props must be updated to match latest * fix: match score: updates references and classname prop
EightfoldAI · May 3, 2022 · 5b3456a · 5b3456a
1 parent 12a4cfc
commit 5b3456a
Show file tree

Hide file tree

Showing 60 changed files with 1,281 additions and 755 deletions.
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,21 +1,21 @@
 import React, { FC } from 'react';
 import { BadgeProps } from './Badge.types';
-import { classNames } from '../../shared/utilities';
+import { mergeClasses } from '../../shared/utilities';
 
 import styles from './badge.module.scss';
 
 export const Badge: FC<BadgeProps> = ({
     active,
-    className,
+    classNames,
     style,
     children,
     disruptive,
 }) => {
-    const badgeClasses: string = classNames([
+    const badgeClasses: string = mergeClasses([
         styles.badge,
         'header6',
         { [styles.disruptive]: disruptive },
-        className,
+        classNames,
         { [styles.active]: active },
     ]);
     return (

diff --git a/src/components/Badge/Badge.types.tsx b/src/components/Badge/Badge.types.tsx
@@ -10,9 +10,9 @@ export interface BadgeProps {
      */
     disruptive?: boolean;
     /**
-     * Custom badge className
+     * Custom badge classNames
      */
-    className?: string;
+    classNames?: string;
     /**
      * Custom badge style
      */

diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -1,5 +1,6 @@
 import React, { FC, Ref } from 'react';
 import {
+    ButtonIconAlign,
     ButtonShape,
     ButtonSize,
     ButtonTextAlign,
@@ -8,27 +9,27 @@ import {
     InternalButtonProps,
     SplitButton,
 } from './';
-import { Icon, IconName, IconSize } from '../Icon';
+import { Icon, IconSize } from '../Icon';
 import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
-import { classNames } from '../../shared/utilities';
+import { mergeClasses } from '../../shared/utilities';
 
 import styles from './button.module.scss';
 
 export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
     (
         {
+            alignIcon = ButtonIconAlign.Left,
             alignText = ButtonTextAlign.Center,
             allowDisabledFocus = false,
             ariaLabel,
             buttonWidth = ButtonWidth.fitContent,
             checked = false,
-            className,
+            classNames,
             disabled = false,
             disruptive = false,
             dropShadow = false,
             htmlType,
-            icon,
-            iconColor,
+            iconProps,
             id,
             onClick,
             onContextMenu,
@@ -51,11 +52,11 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
         const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small);
         const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall);
 
-        const iconExists: boolean = !!icon;
+        const iconExists: boolean = !!iconProps;
         const textExists: boolean = !!text;
 
-        const buttonBaseSharedClassNames: string = classNames([
-            className,
+        const buttonBaseSharedClassNames: string = mergeClasses([
+            classNames,
             {
                 [styles.buttonPadding3]:
                     size === ButtonSize.Flex && largeScreenActive,
@@ -80,16 +81,24 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             { [styles.dark]: theme === ButtonTheme.dark },
         ]);
 
-        const buttonBaseClassNames: string = classNames([
+        const buttonBaseClassNames: string = mergeClasses([
             buttonBaseSharedClassNames,
             { [styles.buttonStretch]: buttonWidth === ButtonWidth.fill },
             { [styles.splitLeft]: split },
             { [styles.left]: alignText === ButtonTextAlign.Left },
             { [styles.right]: alignText === ButtonTextAlign.Right },
+            {
+                [styles.iconLeft]:
+                    iconExists && alignIcon === ButtonIconAlign.Left,
+            },
+            {
+                [styles.iconRight]:
+                    iconExists && alignIcon === ButtonIconAlign.Right,
+            },
             { [styles.disabled]: allowDisabledFocus || disabled },
         ]);
 
-        const buttonTextClassNames: string = classNames([
+        const buttonTextClassNames: string = mergeClasses([
             { [styles.button3]: size === ButtonSize.Flex && largeScreenActive },
             {
                 [styles.button2]:
@@ -126,11 +135,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             return iconSize;
         };
 
-        const getButtonIcon = (icon: IconName): JSX.Element => (
+        const getButtonIcon = (): JSX.Element => (
             <Icon
-                className={styles.icon}
-                color={iconColor}
-                path={icon}
+                {...iconProps}
+                classNames={styles.icon}
                 size={getButtonIconSize()}
             />
         );
@@ -161,10 +169,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                     style={style}
                     type={htmlType}
                 >
-                    {iconExists && !textExists && getButtonIcon(icon)}
+                    {iconExists && !textExists && getButtonIcon()}
                     {iconExists && textExists && (
                         <span>
-                            {getButtonIcon(icon)}
+                            {getButtonIcon()}
                             {getButtonText(buttonTextClassNames, text)}
                         </span>
                     )}
@@ -173,10 +181,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                 {split && (
                     <SplitButton
                         {...splitButtonProps}
-                        className={
+                        classNames={
                             buttonBaseSharedClassNames +
                             ' ' +
-                            splitButtonProps?.className
+                            splitButtonProps?.classNames
                         }
                         checked={splitButtonChecked}
                         disruptive={disruptive}

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import {
+    ButtonIconAlign,
     ButtonShape,
     ButtonSize,
     ButtonTextAlign,
@@ -29,7 +30,7 @@ export const Primary = () => (
         <p>Default Flex</p>
         <PrimaryButton
             ariaLabel="Primary Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             text="Primary Button"
         />
@@ -40,7 +41,7 @@ export const Primary = () => (
             <PrimaryButton
                 ariaLabel="Primary Button"
                 buttonWidth={ButtonWidth.fill}
-                icon={IconName.mdiCardsHeart}
+                iconProps={{ path: IconName.mdiCardsHeart }}
                 onClick={_alertClicked}
                 text="Primary Button"
             />
@@ -68,16 +69,27 @@ export const Primary = () => (
         <p>Icon only</p>
         <PrimaryButton
             ariaLabel="Primary Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
         />
         <br />
         <br />
-        <p>Text + Icon</p>
+        <p>Text + Left Icon</p>
+        <PrimaryButton
+            ariaLabel="Primary Button"
+            iconProps={{ path: IconName.mdiCardsHeart }}
+            onClick={_alertClicked}
+            size={ButtonSize.Large}
+            text="Primary Button"
+        />
+        <br />
+        <br />
+        <p>Text + Right Icon</p>
         <PrimaryButton
+            alignIcon={ButtonIconAlign.Right}
             ariaLabel="Primary Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
             text="Primary Button"
@@ -120,7 +132,7 @@ export const Secondary = () => (
         <p>Icon only</p>
         <SecondaryButton
             ariaLabel="Secondary Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
         />
@@ -129,7 +141,7 @@ export const Secondary = () => (
         <p>Text + Icon</p>
         <SecondaryButton
             ariaLabel="Secondary Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
             text="Secondary Button"
@@ -173,7 +185,7 @@ export const Default = () => (
         <p>Icon only</p>
         <DefaultButton
             ariaLabel="Default Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
         />
@@ -182,7 +194,7 @@ export const Default = () => (
         <p>Text + Icon</p>
         <DefaultButton
             ariaLabel="Default Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
             text="Default Button"
@@ -226,7 +238,7 @@ export const Neutral = () => (
         <p>Icon only</p>
         <NeutralButton
             ariaLabel="Neutral Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
         />
@@ -235,7 +247,7 @@ export const Neutral = () => (
         <p>Text + Icon</p>
         <NeutralButton
             ariaLabel="Neutral Button"
-            icon={IconName.mdiCardsHeart}
+            iconProps={{ path: IconName.mdiCardsHeart }}
             onClick={_alertClicked}
             size={ButtonSize.Large}
             text="Neutral Button"
@@ -302,7 +314,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
                 <PrimaryButton
                     ariaLabel="Primary Button"
                     checked={skill1Added || checked}
-                    icon={skill1Added ? IconName.mdiMinus : IconName.mdiPlus}
+                    iconProps={{
+                        path: skill1Added
+                            ? IconName.mdiMinus
+                            : IconName.mdiPlus,
+                    }}
                     onClick={set1Added}
                     size={ButtonSize.Medium}
                     text="Primary Button"
@@ -313,7 +329,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
                 <SecondaryButton
                     ariaLabel="Secondary Button"
                     checked={skill2Added || checked}
-                    icon={skill2Added ? IconName.mdiMinus : IconName.mdiPlus}
+                    iconProps={{
+                        path: skill2Added
+                            ? IconName.mdiMinus
+                            : IconName.mdiPlus,
+                    }}
                     onClick={set2Added}
                     size={ButtonSize.Medium}
                     text="Secondary Button"
@@ -324,7 +344,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
                 <DefaultButton
                     ariaLabel="Default Button"
                     checked={skill3Added || checked}
-                    icon={skill3Added ? IconName.mdiMinus : IconName.mdiPlus}
+                    iconProps={{
+                        path: skill3Added
+                            ? IconName.mdiMinus
+                            : IconName.mdiPlus,
+                    }}
                     onClick={set3Added}
                     size={ButtonSize.Medium}
                     text="Default Button"
@@ -335,7 +359,11 @@ export const Toggle: FC<ExampleProps> = ({ checked }) => {
                 <NeutralButton
                     ariaLabel="Neutral Button"
                     checked={skill4Added || checked}
-                    icon={skill4Added ? IconName.mdiMinus : IconName.mdiPlus}
+                    iconProps={{
+                        path: skill4Added
+                            ? IconName.mdiMinus
+                            : IconName.mdiPlus,
+                    }}
                     onClick={set4Added}
                     size={ButtonSize.Medium}
                     text="Neutral Button"
@@ -361,10 +389,12 @@ export const TwoState: FC<ExampleProps> = ({ checked }) => {
                 ariaLabel="Two State Button"
                 checked={isToggled || checked}
                 counter={8}
-                iconOne={IconName.mdiCardsHeart}
-                iconTwo={
-                    isToggled ? IconName.mdiChevronUp : IconName.mdiChevronDown
-                }
+                iconOneProps={{ path: IconName.mdiCardsHeart }}
+                iconTwoProps={{
+                    path: isToggled
+                        ? IconName.mdiChevronUp
+                        : IconName.mdiChevronDown,
+                }}
                 onClick={setToggled}
                 text="Two State Button"
                 toggle