fix(renderer): add buttonType to form controls

- allows to customize each button depending on its type (submit, cancel, reset)

Author: rvsia

packages/common/src/form-template.js

@@ -43,9 +43,18 @@ export const FormControls = ({
   const { submitting, pristine, validating } = formSpyProps;
 
   const buttons = {
-    submit: <Button key="form-submit" type="submit" variant="primary" disabled={submitting || validating || disableSubmit} label={submitLabel} />,
-    reset: canReset ? <Button key="form-reset" type="button" disabled={pristine} onClick={onReset} label={resetLabel} /> : null,
-    cancel: onCancel ? <Button key="form-cancel" type="button" onClick={onCancel} label={cancelLabel} /> : null
+    submit: (
+      <Button
+        key="form-submit"
+        type="submit"
+        variant="primary"
+        buttonType="submit"
+        disabled={submitting || validating || disableSubmit}
+        label={submitLabel}
+      />
+    ),
+    reset: canReset ? <Button key="form-reset" type="button" buttonType="reset" disabled={pristine} onClick={onReset} label={resetLabel} /> : null,
+    cancel: onCancel ? <Button key="form-cancel" type="button" buttonType="cancel" onClick={onCancel} label={cancelLabel} /> : null
   };
 
   return <ButtonGroup className={buttonClassName}>{completeButtons(buttonOrder).map((button) => buttons[button])}</ButtonGroup>;

packages/mui-component-mapper/src/files/form-template.js

@@ -20,7 +20,7 @@ const Title = ({ children }) => (
   </Grid>
 );
 const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
-const Button = ({ label, variant, children, ...props }) => (
+const Button = ({ label, variant, children, buttonType, ...props }) => (
   <MUIButton color={variant} variant="contained" {...props}>
     {label || children}
   </MUIButton>

packages/pf3-component-mapper/src/files/form-template.js

@@ -10,7 +10,7 @@ FormWrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
 };
 
-export const Button = ({ label, variant, children, ...props }) => (
+export const Button = ({ label, variant, children, buttonType, ...props }) => (
   <PF3Button bsStyle={variant} {...props}>
     {label || children}
   </PF3Button>
@@ -19,7 +19,8 @@ export const Button = ({ label, variant, children, ...props }) => (
 Button.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   variant: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  buttonType: PropTypes.string
 };
 
 export const ButtonGroup = ({ children, className, ...props }) => (

packages/pf4-component-mapper/src/files/form-template.js

@@ -7,7 +7,7 @@ import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants
 
 import './form-template.scss';
 
-export const Button = ({ label, bsStyle, children, disabled, ...props }) => (
+export const Button = ({ label, bsStyle, children, disabled, buttonType, ...props }) => (
   <PF4Button variant={bsStyle || 'secondary'} isDisabled={disabled} {...props}>
     {label}
     {children}
@@ -18,7 +18,8 @@ Button.propTypes = {
   label: PropTypes.string.isRequired,
   bsStyle: PropTypes.string,
   disabled: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  buttonType: PropTypes.string
 };
 
 export const ButtonGroup = ({ children, ...props }) => <ActionGroup {...props}>{children}</ActionGroup>;

packages/pf4-component-mapper/src/tests/__snapshots__/form-template-common.test.js.snap

@@ -135,6 +135,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                             className="pf-c-form__actions"
                           >
                             <Button
+                              buttonType="submit"
                               key="form-submit"
                               label="Submit"
                               type="submit"
@@ -184,6 +185,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                               </Component>
                             </Button>
                             <Button
+                              buttonType="reset"
                               disabled={true}
                               key="form-reset"
                               label="Reset"
@@ -240,6 +242,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                               </Component>
                             </Button>
                             <Button
+                              buttonType="cancel"
                               key="form-cancel"
                               label="Cancel"
                               onClick={[MockFunction]}
@@ -443,6 +446,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
                             className="pf-c-form__actions"
                           >
                             <Button
+                              buttonType="submit"
                               key="form-submit"
                               label="Submit"
                               type="submit"
@@ -492,6 +496,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
                               </Component>
                             </Button>
                             <Button
+                              buttonType="cancel"
                               key="form-cancel"
                               label="Cancel"
                               onClick={[MockFunction]}
@@ -713,6 +718,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                             className="pf-c-form__actions"
                           >
                             <Button
+                              buttonType="cancel"
                               key="form-cancel"
                               label="Cancel"
                               onClick={[MockFunction]}
@@ -766,6 +772,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                               </Component>
                             </Button>
                             <Button
+                              buttonType="submit"
                               key="form-submit"
                               label="Submit"
                               type="submit"
@@ -815,6 +822,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                               </Component>
                             </Button>
                             <Button
+                              buttonType="reset"
                               disabled={true}
                               key="form-reset"
                               label="Reset"
@@ -1022,6 +1030,7 @@ exports[`FormTemplate PF4 Common should render only submit button 1`] = `
                             className="pf-c-form__actions"
                           >
                             <Button
+                              buttonType="submit"
                               key="form-submit"
                               label="Submit"
                               type="submit"