diff --git a/src/ui/buttons/button.jsx b/src/ui/buttons/button.jsx index 8b14382d10..1f0d9089c0 100644 --- a/src/ui/buttons/button.jsx +++ b/src/ui/buttons/button.jsx @@ -107,7 +107,12 @@ export function Button({ const colors = fundingConfig.colors; const secondaryColors = fundingConfig.secondaryColors || {}; - let { color = colors[0], period, label } = style; + let { color, period, label } = style; + + // if no color option is passed in via style props, use the default color value from the funding source config + if (color === "" || typeof color === "undefined") { + color = colors[0]; + } if (multiple && i > 0) { if ( diff --git a/src/ui/buttons/props.js b/src/ui/buttons/props.js index 648e43723a..054660747f 100644 --- a/src/ui/buttons/props.js +++ b/src/ui/buttons/props.js @@ -317,7 +317,7 @@ export type OnClick = (OnClickData, OnClickActions) => void; export type ButtonStyle = {| label: $Values | void, - color: $Values, + color?: $Values, shape: $Values, tagline: boolean, layout: $Values, @@ -644,6 +644,7 @@ export function normalizeButtonStyle( } let { + color, label, layout = fundingSource ? BUTTON_LAYOUT.HORIZONTAL @@ -664,9 +665,6 @@ export function normalizeButtonStyle( tagline = false; } - // if color is a falsy value, set it to the default color from the funding config - const color = style.color ? style.color : fundingConfig.colors[0]; - if (values(BUTTON_LAYOUT).indexOf(layout) === -1) { throw new Error(`Invalid layout: ${layout}`); } diff --git a/test/integration/tests/button/style.js b/test/integration/tests/button/style.js index d78e06438e..479dd1627e 100644 --- a/test/integration/tests/button/style.js +++ b/test/integration/tests/button/style.js @@ -67,7 +67,7 @@ describe("paypal button color", () => { destroyTestContainer(); }); - it("should render a button with gold background when no color is specified", () => { + it("should render a button with gold background when empty string is passed in for color", () => { return window.paypal .Buttons({ style: { @@ -80,6 +80,15 @@ describe("paypal button color", () => { }); }); + it("should render a button with gold background when no color is specified", () => { + return window.paypal + .Buttons() + .render("#testContainer") + .then(() => { + assert.ok(getElementRecursive(".paypal-button-color-gold")); + }); + }); + it('should render a button with black background when passed "black"', () => { return window.paypal .Buttons({ @@ -97,7 +106,7 @@ describe("paypal button color", () => { return window.paypal .Buttons({ style: { - color: "", + color: "gold", }, }) .render("#testContainer")