fix: button: refines button prop and adds form type support (#19)

* fix: button: refines button prop and adds form type support Renames private ButtonType prop to ButtonMode to enable type for button * fix: address pr feedback: removes from actions, renames type
EightfoldAI · Mar 30, 2022 · 44636b1 · 44636b1
1 parent 1396bbb
commit 44636b1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -1,6 +1,4 @@
 import React, { FC } from 'react';
-import { classNames, invertForegroundColor } from '../../shared/utilities';
-import { CSSVariables } from '../../shared/variables';
 import {
     ButtonSize,
     ButtonTheme,
@@ -9,6 +7,8 @@ import {
 } from './index';
 import { Icon, IconName, IconSize } from '../Icon/index';
 import { Breakpoints, useMatchMedia } from '../../shared/hooks';
+import { CSSVariables } from '../../shared/variables';
+import { classNames, invertForegroundColor } from '../../shared/utilities';
 
 import styles from './button.module.scss';
 
@@ -19,15 +19,16 @@ export const BaseButton: FC<InternalButtonProps> = ({
     className,
     disabled = false,
     disruptive = false,
+    htmlType,
     icon,
     id,
     onClick,
     primaryColor,
-    text,
-    theme,
-    type,
     size = ButtonSize.Flex,
     style,
+    text,
+    theme,
+    type = ButtonType.Default,
 }) => {
     const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
     const mediumScreenActive: boolean = useMatchMedia(Breakpoints.Medium);
@@ -152,6 +153,7 @@ export const BaseButton: FC<InternalButtonProps> = ({
             id={id}
             onClick={!allowDisabledFocus ? onClick : null}
             style={buttonStyles()}
+            type={htmlType}
         >
             {iconExists && !textExists && getButtonIcon(icon)}
             {iconExists && textExists && (

diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
@@ -57,13 +57,13 @@ export interface ButtonProps {
      * The button icon.
      */
     icon?: IconName;
-    /**
-     * The button onClick event handler.
-     */
     /**
      * The button id.
      */
     id?: string;
+    /**
+     * The button onClick event handler.
+     */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**
      * The button primary color.
@@ -100,4 +100,8 @@ export interface ButtonProps {
      * The buton style.
      */
     style?: React.CSSProperties;
+    /**
+     * The button html type.
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
 }
diff --git a/src/components/Button/DefaultButton/DefaultButton.tsx b/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { classNames } from '../../../shared/utilities';
 import { BaseButton, ButtonProps, ButtonSize, ButtonType } from '../index';
+import { classNames } from '../../../shared/utilities';
 
 import styles from '../button.module.scss';
 
@@ -10,6 +10,7 @@ export const DefaultButton: FC<ButtonProps> = ({
     checked = false,
     className,
     disabled = false,
+    htmlType,
     icon,
     onClick,
     primaryColor,
@@ -31,14 +32,15 @@ export const DefaultButton: FC<ButtonProps> = ({
             checked={checked}
             className={buttonClassNames}
             disabled={disabled}
+            htmlType={htmlType}
             icon={icon}
             onClick={onClick}
             primaryColor={primaryColor}
+            size={size}
+            style={style}
             text={text}
             theme={theme}
             type={ButtonType.Default}
-            size={size}
-            style={style}
         />
     );
 };
diff --git a/src/components/Button/PrimaryButton/PrimaryButton.tsx b/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
-import { classNames } from '../../../shared/utilities';
 import { BaseButton, ButtonProps, ButtonSize, ButtonType } from '../index';
+import { classNames } from '../../../shared/utilities';
 
 import styles from '../button.module.scss';
 
@@ -11,13 +11,14 @@ export const PrimaryButton: FC<ButtonProps> = ({
     className,
     disabled = false,
     disruptive = false,
+    htmlType,
     icon,
     onClick,
     primaryColor,
-    text,
-    theme,
     size = ButtonSize.Flex,
     style,
+    text,
+    theme,
 }) => {
     const buttonClassNames: string = classNames([
         className,
@@ -34,14 +35,15 @@ export const PrimaryButton: FC<ButtonProps> = ({
             className={buttonClassNames}
             disabled={disabled}
             disruptive={disruptive}
+            htmlType={htmlType}
             icon={icon}
             onClick={onClick}
             primaryColor={primaryColor}
-            text={text}
-            type={ButtonType.Primary}
-            theme={theme}
             size={size}
             style={style}
+            text={text}
+            theme={theme}
+            type={ButtonType.Primary}
         />
     );
 };
diff --git a/src/components/Button/SecondaryButton/SecondaryButton.tsx b/src/components/Button/SecondaryButton/SecondaryButton.tsx
@@ -11,6 +11,7 @@ export const SecondaryButton: FC<ButtonProps> = ({
     className,
     disabled = false,
     disruptive = false,
+    htmlType,
     icon,
     onClick,
     primaryColor,
@@ -34,14 +35,15 @@ export const SecondaryButton: FC<ButtonProps> = ({
             className={buttonClassNames}
             disabled={disabled}
             disruptive={disruptive}
+            htmlType={htmlType}
             icon={icon}
             onClick={onClick}
             primaryColor={primaryColor}
+            size={size}
+            style={style}
             text={text}
             theme={theme}
             type={ButtonType.Secondary}
-            size={size}
-            style={style}
         />
     );
 };