From 9052d4c26fff89907d7e7abec745a3d0079dd178 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 3 Jul 2019 13:24:46 -0400
Subject: [PATCH] Editor: Resolve Publish button busy state styling regression
 (#16303)

* Components: Avoid assigning default styling if explicitly primary

* Editor: Remove redundant assignment of publish button as large

* Components: Add CHANGELOG entry for busy styling fix

* Components: Always apply is-default class if isDefault prop passed

* Components: Add test case to protect regression on isPrimary, isLarge/isSmall combination
---
 packages/components/CHANGELOG.md                      |  5 ++++-
 packages/components/src/button/index.js               |  2 +-
 packages/components/src/button/test/index.js          | 11 ++++++++---
 .../src/components/post-publish-button/index.js       |  1 -
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index b54dcec4b412b..a2ce1b818505e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,9 +1,12 @@
-## Next release
+## Master
 
 ### New Features
 
 - Added a new `popoverProps` prop to the `Dropdown` component which allows users of the `Dropdown` component to pass props directly to the `PopOver` component.
 
+### Bug Fixes
+
+- The `Button` component will no longer assign default styling (`is-default` class) when explicitly assigned as primary (the `isPrimary` prop). This should resolve potential conflicts affecting a combination of `isPrimary`, `isDefault`, and `isLarge` / `isSmall`, where the busy animation would appear with incorrect coloring.
 
 ## 8.0.0 (2019-06-12)
 
diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
index 3d6f9a2cb251c..da3441e7f2982 100644
--- a/packages/components/src/button/index.js
+++ b/packages/components/src/button/index.js
@@ -28,7 +28,7 @@ export function Button( props, ref ) {
 
 	const classes = classnames( 'components-button', className, {
 		'is-button': isDefault || isPrimary || isLarge || isSmall,
-		'is-default': isDefault || isLarge || isSmall,
+		'is-default': isDefault || ( ! isPrimary && ( isLarge || isSmall ) ),
 		'is-primary': isPrimary,
 		'is-large': isLarge,
 		'is-small': isSmall,
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index 6140b00b56b7c..05e3580bfacbe 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -27,14 +27,14 @@ describe( 'Button', () => {
 			expect( button.type() ).toBe( 'button' );
 		} );
 
-		it( 'should render a button element with button-primary class', () => {
+		it( 'should render a button element with is-primary class', () => {
 			const button = shallow( <Button isPrimary /> );
 			expect( button.hasClass( 'is-large' ) ).toBe( false );
 			expect( button.hasClass( 'is-primary' ) ).toBe( true );
 			expect( button.hasClass( 'is-button' ) ).toBe( true );
 		} );
 
-		it( 'should render a button element with button-large class', () => {
+		it( 'should render a button element with is-large class', () => {
 			const button = shallow( <Button isLarge /> );
 			expect( button.hasClass( 'is-large' ) ).toBe( true );
 			expect( button.hasClass( 'is-default' ) ).toBe( true );
@@ -42,7 +42,12 @@ describe( 'Button', () => {
 			expect( button.hasClass( 'is-primary' ) ).toBe( false );
 		} );
 
-		it( 'should render a button element with button-small class', () => {
+		it( 'should render a button element without is-default if primary', () => {
+			const button = shallow( <Button isPrimary isLarge /> );
+			expect( button.hasClass( 'is-default' ) ).toBe( false );
+		} );
+
+		it( 'should render a button element with is-small class', () => {
 			const button = shallow( <Button isSmall /> );
 			expect( button.hasClass( 'is-default' ) ).toBe( true );
 			expect( button.hasClass( 'is-button' ) ).toBe( true );
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 0418f9b17c606..ff3bedf5a79fb 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -92,7 +92,6 @@ export class PostPublishButton extends Component {
 			'aria-disabled': isButtonDisabled,
 			className: 'editor-post-publish-button',
 			isBusy: isSaving && isPublished,
-			isLarge: true,
 			isPrimary: true,
 			onClick: onClickButton,
 		};