fix(pf4): use link variant for cancel button

rvsia · rvsia · commit 70da853a75da · 2020-03-20T14:34:48.000+01:00
diff --git a/packages/pf4-component-mapper/src/files/form-template.js b/packages/pf4-component-mapper/src/files/form-template.js
@@ -8,7 +8,7 @@ import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants
 import './form-template.scss';
 
 export const Button = ({ label, bsStyle, children, disabled, buttonType, ...props }) => (
-  <PF4Button variant={bsStyle || 'secondary'} isDisabled={disabled} {...props}>
+  <PF4Button variant={buttonType === 'cancel' ? 'link' : bsStyle || 'secondary'} isDisabled={disabled} {...props}>
     {label}
     {children}
   </PF4Button>
diff --git a/packages/pf4-component-mapper/src/tests/__snapshots__/form-template-common.test.js.snap b/packages/pf4-component-mapper/src/tests/__snapshots__/form-template-common.test.js.snap
@@ -251,7 +251,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                               <Component
                                 onClick={[MockFunction]}
                                 type="button"
-                                variant="secondary"
+                                variant="link"
                               >
                                 <ComponentWithOuia
                                   component={[Function]}
@@ -264,7 +264,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                                       "isDisabled": undefined,
                                       "onClick": [MockFunction],
                                       "type": "button",
-                                      "variant": "secondary",
+                                      "variant": "link",
                                     }
                                   }
                                   consumerContext={null}
@@ -278,12 +278,12 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
                                       }
                                     }
                                     type="button"
-                                    variant="secondary"
+                                    variant="link"
                                   >
                                     <button
                                       aria-disabled={null}
                                       aria-label={null}
-                                      className="pf-c-button pf-m-secondary"
+                                      className="pf-c-button pf-m-link"
                                       disabled={false}
                                       onClick={[MockFunction]}
                                       tabIndex={null}
@@ -505,7 +505,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
                               <Component
                                 onClick={[MockFunction]}
                                 type="button"
-                                variant="secondary"
+                                variant="link"
                               >
                                 <ComponentWithOuia
                                   component={[Function]}
@@ -518,7 +518,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
                                       "isDisabled": undefined,
                                       "onClick": [MockFunction],
                                       "type": "button",
-                                      "variant": "secondary",
+                                      "variant": "link",
                                     }
                                   }
                                   consumerContext={null}
@@ -532,12 +532,12 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
                                       }
                                     }
                                     type="button"
-                                    variant="secondary"
+                                    variant="link"
                                   >
                                     <button
                                       aria-disabled={null}
                                       aria-label={null}
-                                      className="pf-c-button pf-m-secondary"
+                                      className="pf-c-button pf-m-link"
                                       disabled={false}
                                       onClick={[MockFunction]}
                                       tabIndex={null}
@@ -727,7 +727,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                               <Component
                                 onClick={[MockFunction]}
                                 type="button"
-                                variant="secondary"
+                                variant="link"
                               >
                                 <ComponentWithOuia
                                   component={[Function]}
@@ -740,7 +740,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                                       "isDisabled": undefined,
                                       "onClick": [MockFunction],
                                       "type": "button",
-                                      "variant": "secondary",
+                                      "variant": "link",
                                     }
                                   }
                                   consumerContext={null}
@@ -754,12 +754,12 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
                                       }
                                     }
                                     type="button"
-                                    variant="secondary"
+                                    variant="link"
                                   >
                                     <button
                                       aria-disabled={null}
                                       aria-label={null}
-                                      className="pf-c-button pf-m-secondary"
+                                      className="pf-c-button pf-m-link"
                                       disabled={false}
                                       onClick={[MockFunction]}
                                       tabIndex={null}

Original file line number	Diff line number	Diff line change
@@ -251,7 +251,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
`251`	`251`	`<Component`
`252`	`252`	`onClick={[MockFunction]}`
`253`	`253`	`type="button"`
`254`		`- variant="secondary"`
	`254`	`+ variant="link"`
`255`	`255`	`>`
`256`	`256`	`<ComponentWithOuia`
`257`	`257`	`component={[Function]}`
@@ -264,7 +264,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
`264`	`264`	`"isDisabled": undefined,`
`265`	`265`	`"onClick": [MockFunction],`
`266`	`266`	`"type": "button",`
`267`		`- "variant": "secondary",`
	`267`	`+ "variant": "link",`
`268`	`268`	`}`
`269`	`269`	`}`
`270`	`270`	`consumerContext={null}`
@@ -278,12 +278,12 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
`278`	`278`	`}`
`279`	`279`	`}`
`280`	`280`	`type="button"`
`281`		`- variant="secondary"`
	`281`	`+ variant="link"`
`282`	`282`	`>`
`283`	`283`	`<button`
`284`	`284`	`aria-disabled={null}`
`285`	`285`	`aria-label={null}`
`286`		`- className="pf-c-button pf-m-secondary"`
	`286`	`+ className="pf-c-button pf-m-link"`
`287`	`287`	`disabled={false}`
`288`	`288`	`onClick={[MockFunction]}`
`289`	`289`	`tabIndex={null}`
@@ -505,7 +505,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
`505`	`505`	`<Component`
`506`	`506`	`onClick={[MockFunction]}`
`507`	`507`	`type="button"`
`508`		`- variant="secondary"`
	`508`	`+ variant="link"`
`509`	`509`	`>`
`510`	`510`	`<ComponentWithOuia`
`511`	`511`	`component={[Function]}`
@@ -518,7 +518,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
`518`	`518`	`"isDisabled": undefined,`
`519`	`519`	`"onClick": [MockFunction],`
`520`	`520`	`"type": "button",`
`521`		`- "variant": "secondary",`
	`521`	`+ "variant": "link",`
`522`	`522`	`}`
`523`	`523`	`}`
`524`	`524`	`consumerContext={null}`
@@ -532,12 +532,12 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
`532`	`532`	`}`
`533`	`533`	`}`
`534`	`534`	`type="button"`
`535`		`- variant="secondary"`
	`535`	`+ variant="link"`
`536`	`536`	`>`
`537`	`537`	`<button`
`538`	`538`	`aria-disabled={null}`
`539`	`539`	`aria-label={null}`
`540`		`- className="pf-c-button pf-m-secondary"`
	`540`	`+ className="pf-c-button pf-m-link"`
`541`	`541`	`disabled={false}`
`542`	`542`	`onClick={[MockFunction]}`
`543`	`543`	`tabIndex={null}`
@@ -727,7 +727,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
`727`	`727`	`<Component`
`728`	`728`	`onClick={[MockFunction]}`
`729`	`729`	`type="button"`
`730`		`- variant="secondary"`
	`730`	`+ variant="link"`
`731`	`731`	`>`
`732`	`732`	`<ComponentWithOuia`
`733`	`733`	`component={[Function]}`
@@ -740,7 +740,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
`740`	`740`	`"isDisabled": undefined,`
`741`	`741`	`"onClick": [MockFunction],`
`742`	`742`	`"type": "button",`
`743`		`- "variant": "secondary",`
	`743`	`+ "variant": "link",`
`744`	`744`	`}`
`745`	`745`	`}`
`746`	`746`	`consumerContext={null}`
@@ -754,12 +754,12 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
`754`	`754`	`}`
`755`	`755`	`}`
`756`	`756`	`type="button"`
`757`		`- variant="secondary"`
	`757`	`+ variant="link"`
`758`	`758`	`>`
`759`	`759`	`<button`
`760`	`760`	`aria-disabled={null}`
`761`	`761`	`aria-label={null}`
`762`		`- className="pf-c-button pf-m-secondary"`
	`762`	`+ className="pf-c-button pf-m-link"`
`763`	`763`	`disabled={false}`
`764`	`764`	`onClick={[MockFunction]}`
`765`	`765`	`tabIndex={null}`