From 6227e69e6ec00cc75b53902ee28e4f76fa8a565f Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 15 Feb 2018 12:55:40 -0500
Subject: [PATCH 01/16] Remove SidebarNavigation from screens with
 ActionHeader, causes duplicate component

---
 client/extensions/woocommerce/app/products/index.js          | 2 --
 client/extensions/woocommerce/app/products/product-update.js | 2 --
 client/extensions/woocommerce/app/promotions/index.js        | 2 --
 client/extensions/woocommerce/app/reviews/index.js           | 2 --
 4 files changed, 8 deletions(-)

diff --git a/client/extensions/woocommerce/app/products/index.js b/client/extensions/woocommerce/app/products/index.js
index beb50dd1ca5b8..27b9d2ec21dff 100644
--- a/client/extensions/woocommerce/app/products/index.js
+++ b/client/extensions/woocommerce/app/products/index.js
@@ -30,7 +30,6 @@ import NavTabs from 'components/section-nav/tabs';
 import NavItem from 'components/section-nav/item';
 import ProductsList from './products-list';
 import ProductsListSearchResults from './products-list-search-results';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import SectionNav from 'components/section-nav';
 import Search from 'components/search';
 
@@ -124,7 +123,6 @@ class Products extends Component {
 
 		return (
 			<Main className={ classes } wideLayout>
-				<SidebarNavigation />
 				<ActionHeader breadcrumbs={ <span>{ translate( 'Products' ) }</span> }>
 					<Button primary href={ getLink( '/store/product/:site/', site ) }>
 						{ translate( 'Add a product' ) }
diff --git a/client/extensions/woocommerce/app/products/product-update.js b/client/extensions/woocommerce/app/products/product-update.js
index 18cfadd28c09c..ac2392b2fbd5d 100644
--- a/client/extensions/woocommerce/app/products/product-update.js
+++ b/client/extensions/woocommerce/app/products/product-update.js
@@ -17,7 +17,6 @@ import { localize } from 'i18n-calypso';
 import Main from 'components/main';
 import accept from 'lib/accept';
 import { ProtectFormGuard } from 'lib/protect-form';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import { getLink } from 'woocommerce/lib/nav-utils';
 import { successNotice, errorNotice } from 'state/notices/actions';
 import { getActionList } from 'woocommerce/state/action-list/selectors';
@@ -207,7 +206,6 @@ class ProductUpdate extends React.Component {
 
 		return (
 			<Main className={ className } wideLayout>
-				<SidebarNavigation />
 				<ProductHeader
 					site={ site }
 					product={ product }
diff --git a/client/extensions/woocommerce/app/promotions/index.js b/client/extensions/woocommerce/app/promotions/index.js
index 55728c7d24ca9..ffebf2ed745f6 100644
--- a/client/extensions/woocommerce/app/promotions/index.js
+++ b/client/extensions/woocommerce/app/promotions/index.js
@@ -23,7 +23,6 @@ import { getLink } from 'woocommerce/lib/nav-utils';
 import { setPromotionSearch } from 'woocommerce/state/ui/promotions/actions';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import Main from 'components/main';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import PromotionsList from './promotions-list';
 import SearchCard from 'components/search-card';
 
@@ -106,7 +105,6 @@ class Promotions extends Component {
 
 		return (
 			<Main className={ classes } wideLayout>
-				<SidebarNavigation />
 				<ActionHeader breadcrumbs={ <span>{ translate( 'Promotions' ) }</span> }>
 					<Button primary href={ getLink( '/store/promotion/:site/', site ) }>
 						{ translate( 'Add promotion' ) }
diff --git a/client/extensions/woocommerce/app/reviews/index.js b/client/extensions/woocommerce/app/reviews/index.js
index ad59bd3206de5..9ad0c70501d7d 100644
--- a/client/extensions/woocommerce/app/reviews/index.js
+++ b/client/extensions/woocommerce/app/reviews/index.js
@@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
  */
 import ActionHeader from 'woocommerce/components/action-header';
 import Main from 'components/main';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import ReviewsList from './reviews-list';
 
 class Reviews extends Component {
@@ -32,7 +31,6 @@ class Reviews extends Component {
 
 		return (
 			<Main className={ classes } wideLayout>
-				<SidebarNavigation />
 				<ActionHeader breadcrumbs={ <span>{ translate( 'Reviews' ) }</span> } />
 				<ReviewsList
 					productId={ params && params.productId && Number( params.productId ) }

From 9f2802b16cb951aebfe12b2033de01329276996f Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 15 Feb 2018 12:55:59 -0500
Subject: [PATCH 02/16] Fix top margin on smaller screens

---
 client/extensions/woocommerce/app/reviews/style.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/extensions/woocommerce/app/reviews/style.scss b/client/extensions/woocommerce/app/reviews/style.scss
index 3efa516b68bb4..9697ad494df58 100644
--- a/client/extensions/woocommerce/app/reviews/style.scss
+++ b/client/extensions/woocommerce/app/reviews/style.scss
@@ -6,7 +6,10 @@
 }
 
 .reviews__filter-nav {
-	margin-top: 58px;
+	@include breakpoint( ">660px" ) {
+		margin-top: 58px;
+	}
+
 	.section-nav {
 		margin-top: 8px;
 	}

From 056144cc985e790619f81503cfd8d3556435c514 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 15 Feb 2018 12:56:42 -0500
Subject: [PATCH 03/16] Show the SidebarNavigation on store pages

---
 client/extensions/woocommerce/style.scss | 33 ------------------------
 1 file changed, 33 deletions(-)

diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss
index 7c3760983f768..021babeb3dac9 100644
--- a/client/extensions/woocommerce/style.scss
+++ b/client/extensions/woocommerce/style.scss
@@ -88,10 +88,6 @@
 			margin: 0px;
 		}
 	}
-
-	.layout__content {
-		padding-top: 67px;
-	}
 }
 
 .store-sidebar__sidebar {
@@ -162,32 +158,3 @@
 		}
 	}
 }
-
-.is-section-woocommerce.focus-content {
-	@include breakpoint( "<660px" ) {
-		.site-icon,
-		.current-section__site-title,
-		.current-section__section-title {
-			display: none;
-		}
-
-		.current-section {
-			margin: 0;
-
-			a {
-				position: fixed;
-				z-index: 1;
-				margin-top: 0;
-				background: transparent;
-				border: none;
-				padding-top: 11px;
-				padding-bottom: 11px;
-			}
-
-			.gridicons-chevron-left {
-				margin-left: 11px;
-				margin-right: 11px;
-			}
-		}
-	}
-}

From 5105d7e6aaf81da4023858275c752ab317a43f7b Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 15 Feb 2018 12:59:28 -0500
Subject: [PATCH 04/16] Add logic to hide breadcrumbs when there are multiple
 actions, and also to hide when there are no actions (when this is the case,
 the header is redundant to the site nav header)

---
 .../components/action-header/index.js         |  9 +++--
 .../components/action-header/style.scss       | 34 +++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index 1c5c848a014b3..87bec86036aa2 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { isArray } from 'lodash';
+import { filter, isArray } from 'lodash';
 
 /**
  * Internal dependencies
@@ -36,11 +36,16 @@ const ActionHeader = ( { children, breadcrumbs, isLoading } ) => {
 	}
 
 	const breadcrumbClasses = classNames( 'action-header__breadcrumbs', { 'is-loading': isLoading } );
+	const actions = isArray( children ) ? filter( children, Boolean ) : children;
+	const containerClasses = classNames( 'action-header__header', {
+		'has-no-action': ! actions,
+		'has-multiple-actions': actions && actions.length > 1,
+	} );
 
 	return (
 		<StickyPanel>
 			<SidebarNavigation />
-			<Card className="action-header__header">
+			<Card className={ containerClasses }>
 				<span className={ breadcrumbClasses }>{ breadcrumbsOutput }</span>
 				<div className="action-header__actions">{ children }</div>
 			</Card>
diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 11bbf73fc4880..9bc2b129003c3 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -10,14 +10,27 @@
 		padding-left: 24px;
 		padding-right: 24px;
 	}
+
+	@include breakpoint( "<480px" ) {
+		&.has-multiple-actions {
+			.action-header__breadcrumbs {
+				display: none;
+			}
+
+			.action-header__actions {
+				width: 100%;
+			}
+		}
+
+		&.has-no-action {
+			display: none;
+		}
+	}
 }
 
 .action-header__breadcrumbs {
-	width: 60%;
+	flex: 1 0 60%;
 	font-size: 13px;
-	@include breakpoint( "<660px" ) {
-		padding-left: 24px;
-	}
 
 	&.is-loading {
 		@include placeholder();
@@ -30,21 +43,14 @@
 }
 
 .action-header__actions {
-	width: 52%;
 	display: flex;
+	flex: 1 0 40%;
 	justify-content: flex-end;
 	align-items: center;
 
-	.button.is-borderless span {
-		@include breakpoint( "<660px" ) {
-			display: none;
-		}
-	}
-
 	.button {
 		white-space: nowrap;
 		padding: 5px 14px 7px;
-		margin-left: 12px;
 
 		&.is-borderless {
 			padding: 0;
@@ -61,8 +67,8 @@
 	}
 }
 .action-header__notice {
-		margin: 0;
-		width: 100%;
+	margin: 0;
+	width: 100%;
 }
 
 .sticky-panel {

From d6072bb5d3727159cbda4a97cc934ac60d116a14 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Fri, 16 Feb 2018 10:53:30 -0500
Subject: [PATCH 05/16] Add space between buttons

---
 .../woocommerce/components/action-header/style.scss           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 9bc2b129003c3..7404632b621dc 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -52,6 +52,10 @@
 		white-space: nowrap;
 		padding: 5px 14px 7px;
 
+		& + .button {
+			margin-left: 12px;
+		}
+
 		&.is-borderless {
 			padding: 0;
 			margin-top: -6px;

From 4ef8a9508497587eb94ceb7ddc30ee594766fa03 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Fri, 16 Feb 2018 10:54:44 -0500
Subject: [PATCH 06/16] Pass Buttons in as an array, to accurately trigger the
 `has-multiple-actions` class

---
 .../woocommerce/app/order/header.js           | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/client/extensions/woocommerce/app/order/header.js b/client/extensions/woocommerce/app/order/header.js
index 0932af947e3a2..841cf8298df62 100644
--- a/client/extensions/woocommerce/app/order/header.js
+++ b/client/extensions/woocommerce/app/order/header.js
@@ -8,7 +8,7 @@ import Gridicon from 'gridicons';
 import { isEmpty } from 'lodash';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 /**
  * Internal dependencies
@@ -153,22 +153,20 @@ class OrderActionHeader extends Component {
 
 	renderEditingButtons = () => {
 		const { hasOrderEdits, isSaving, translate } = this.props;
-		return (
-			<Fragment>
-				<Button key="cancel" onClick={ this.cancelEditing }>
-					{ translate( 'Cancel' ) }
-				</Button>
-				<Button
-					key="save"
-					primary
-					onClick={ this.saveOrder }
-					busy={ isSaving }
-					disabled={ ! hasOrderEdits || isSaving }
-				>
-					{ translate( 'Update' ) }
-				</Button>
-			</Fragment>
-		);
+		return [
+			<Button key="cancel" onClick={ this.cancelEditing }>
+				{ translate( 'Cancel' ) }
+			</Button>,
+			<Button
+				key="save"
+				primary
+				onClick={ this.saveOrder }
+				busy={ isSaving }
+				disabled={ ! hasOrderEdits || isSaving }
+			>
+				{ translate( 'Update' ) }
+			</Button>,
+		];
 	};
 
 	render() {

From 2b60cf8f411b8f8ffad902dfb758de42ce2c16a0 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 19 Feb 2018 16:18:07 -0500
Subject: [PATCH 07/16] =?UTF-8?q?Merge=20our=20ActionHeader=20&=20calypso?=
 =?UTF-8?q?=20core=E2=80=99s=20SidebarNavigation=20to=20create=20a=20singl?=
 =?UTF-8?q?e=20nav=20header=20for=20large=20and=20small=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/action-header/index.js         | 111 +++++++++++-------
 .../components/action-header/style.scss       | 108 ++++++++---------
 client/extensions/woocommerce/style.scss      |   2 +-
 3 files changed, 123 insertions(+), 98 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index 87bec86036aa2..426546ce2bc82 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -1,60 +1,85 @@
 /** @format */
-
 /**
  * External dependencies
  */
-
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
-import { filter, isArray } from 'lodash';
+import { connect } from 'react-redux';
+import Gridicon from 'gridicons';
+import { isArray } from 'lodash';
 
 /**
- * Internal dependencies
+ * Internal Dependencies
  */
-import Card from 'components/card';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
-import StickyPanel from 'components/sticky-panel';
-
-const ActionHeader = ( { children, breadcrumbs, isLoading } ) => {
-	// TODO: Implement proper breadcrumbs component.
-	// For v1, we will just pass in a prop from each page.
-	let breadcrumbsOutput = breadcrumbs;
-	if ( isArray( breadcrumbs ) ) {
-		breadcrumbsOutput = breadcrumbs.map( function( crumb, i ) {
-			return (
-				<span key={ i }>
-					{ crumb }
-					{ breadcrumbs.length - 1 === i ? (
-						''
-					) : (
-						<span className="action-header__breadcrumbs-separator"> / </span>
-					) }
-				</span>
-			);
+import Button from 'components/button';
+import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
+import { setLayoutFocus } from 'state/ui/layout-focus/actions';
+import SiteIcon from 'blocks/site-icon';
+
+class ActionHeader extends React.Component {
+	toggleSidebar = event => {
+		event.preventDefault();
+		this.props.setLayoutFocus( 'sidebar' );
+	};
+
+	renderBreadcrumbs = () => {
+		const { breadcrumbs, isLoading = false } = this.props;
+		let breadcrumbsOutput = breadcrumbs;
+		if ( isArray( breadcrumbs ) ) {
+			breadcrumbsOutput = breadcrumbs.map( function( crumb, i ) {
+				return (
+					<span key={ i }>
+						{ crumb }
+						{ breadcrumbs.length - 1 === i ? (
+							''
+						) : (
+							<span className="action-header__breadcrumbs-separator"> / </span>
+						) }
+					</span>
+				);
+			} );
+		}
+		const breadcrumbClasses = classNames( 'action-header__breadcrumbs', {
+			'is-loading': isLoading,
 		} );
-	}
 
-	const breadcrumbClasses = classNames( 'action-header__breadcrumbs', { 'is-loading': isLoading } );
-	const actions = isArray( children ) ? filter( children, Boolean ) : children;
-	const containerClasses = classNames( 'action-header__header', {
-		'has-no-action': ! actions,
-		'has-multiple-actions': actions && actions.length > 1,
-	} );
-
-	return (
-		<StickyPanel>
-			<SidebarNavigation />
-			<Card className={ containerClasses }>
-				<span className={ breadcrumbClasses }>{ breadcrumbsOutput }</span>
+		return <div className={ breadcrumbClasses }>{ breadcrumbsOutput }</div>;
+	};
+
+	render() {
+		const { children, site } = this.props;
+
+		return (
+			<header className="action-header">
+				<Button
+					borderless
+					onClick={ this.toggleSidebar }
+					className="action-header__back-to-sidebar"
+				>
+					<Gridicon icon="chevron-left" />
+				</Button>
+				<div className="action-header__content">
+					<SiteIcon site={ site } />
+					<div className="action-header__details">
+						{ site && <p className="action-header__site-title">{ site.title }</p> }
+						{ this.renderBreadcrumbs() }
+					</div>
+				</div>
 				<div className="action-header__actions">{ children }</div>
-			</Card>
-		</StickyPanel>
-	);
-};
+			</header>
+		);
+	}
+}
 
 ActionHeader.propTypes = {
 	breadcrumbs: PropTypes.node,
+	setLayoutFocus: PropTypes.func.isRequired,
 };
 
-export default ActionHeader;
+export default connect(
+	state => ( {
+		site: getSelectedSiteWithFallback( state ),
+	} ),
+	{ setLayoutFocus }
+)( ActionHeader );
diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 7404632b621dc..ffccae05e5895 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -1,45 +1,73 @@
-.action-header__header {
+.action-header {
 	width: 100%;
 	min-height: 46px;
-	padding: 2px 16px 2px;
+	margin: 0 0 8px;
+	padding: 8px 16px 8px 0;
 	display: flex;
+	justify-content: flex-start;
 	flex-direction: row;
 	align-items: center;
+	box-sizing: border-box;
+	color: $gray-dark;
+	background: $white;
+	border-bottom: 1px solid $gray-lighten-20;
 
 	@include breakpoint( ">480px" ) {
-		padding-left: 24px;
-		padding-right: 24px;
+		padding: 8px 24px 8px 0;
 	}
 
-	@include breakpoint( "<480px" ) {
-		&.has-multiple-actions {
-			.action-header__breadcrumbs {
-				display: none;
-			}
-
-			.action-header__actions {
-				width: 100%;
-			}
-		}
+	@include breakpoint( ">660px" ) {
+		padding: 1px 16px 2px 0;
+		margin: 0;
+	}
 
-		&.has-no-action {
-			display: none;
-		}
+	@include breakpoint( ">960px" ) {
+		position: fixed;
+		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
+		width: calc(100% - 273px);
+		top: 47px;
+		left: 273px;
+	}
+	@include breakpoint( "660px-960px" ) {
+		position: fixed;
+		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
+		width: calc(100% - 229px);
+		top: 47px;
+		left: 229px;
 	}
 }
 
-.action-header__breadcrumbs {
-	flex: 1 0 60%;
-	font-size: 13px;
+.action-header__back-to-sidebar {
+	flex: 1 0 10%;
+}
 
-	&.is-loading {
-		@include placeholder();
+.action-header__content {
+	flex: 1 0 50%;
+	display: flex;
+	justify-content: flex-start;
+
+	.site-icon {
+		margin-right: 8px;
 	}
-}
 
-.action-header__breadcrumbs-separator {
-	color: $gray;
-	margin: 0 2px;
+	.action-header__site-title {
+		font-size: 10px;
+		color: $gray-darken-10;
+		margin: 2px 0 -3px;
+	}
+
+	.action-header__breadcrumbs {
+		font-size: 13px;
+
+		&.is-loading {
+			@include placeholder();
+		}
+	}
+
+	.action-header__breadcrumbs-separator {
+		color: $gray;
+		margin: 0 2px;
+	}
 }
 
 .action-header__actions {
@@ -70,31 +98,3 @@
 		}
 	}
 }
-.action-header__notice {
-	margin: 0;
-	width: 100%;
-}
-
-.sticky-panel {
-	@include breakpoint( ">960px" ) {
-		position: fixed;
-		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
-		width: calc(100% - 273px);
-		top: 47px;
-		left: 273px;
-	}
-	@include breakpoint( "660px-960px" ) {
-		position: fixed;
-		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
-		width: calc(100% - 229px);
-		top: 47px;
-		left: 229px;
-	}
-	@include breakpoint( ">660px" ) {
-		margin-bottom: 58px;
-	}
-}
-
-& .sticky-panel.is-sticky .sticky-panel__content {
-	margin-top: 0;
-}
diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss
index 021babeb3dac9..2c59a51f4332b 100644
--- a/client/extensions/woocommerce/style.scss
+++ b/client/extensions/woocommerce/style.scss
@@ -57,7 +57,7 @@
 
 	.section-nav {
 		@include breakpoint( ">660px" ) {
-			margin-top: 58px;
+			margin-top: 35px;
 		}
 	}
 

From c26994efeeb48b5d942bf79cec05f567b0c620c9 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 19 Feb 2018 16:31:23 -0500
Subject: [PATCH 08/16] =?UTF-8?q?Set=20the=20header=E2=80=99s=20offset=20o?=
 =?UTF-8?q?n=20the=20parent=20component,=20to=20avoid=20needing=20to=20red?=
 =?UTF-8?q?o=20it=20in=20each=20screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/extensions/woocommerce/app/dashboard/style.scss   | 9 ---------
 client/extensions/woocommerce/app/order/style.scss       | 4 ----
 client/extensions/woocommerce/app/orders/style.scss      | 4 ----
 .../woocommerce/app/product-categories/style.scss        | 5 -----
 .../woocommerce/app/products/product-form.scss           | 4 ----
 .../woocommerce/app/products/products-list.scss          | 8 +-------
 .../woocommerce/app/promotions/promotion-form.scss       | 4 ----
 .../woocommerce/app/promotions/promotions-list.scss      | 7 -------
 client/extensions/woocommerce/app/reviews/style.scss     | 4 ----
 .../app/settings/shipping/shipping-zone/style.scss       | 7 -------
 client/extensions/woocommerce/style.scss                 | 8 +++-----
 11 files changed, 4 insertions(+), 60 deletions(-)

diff --git a/client/extensions/woocommerce/app/dashboard/style.scss b/client/extensions/woocommerce/app/dashboard/style.scss
index b8ec8d0cbb9ae..e80efc07732f2 100644
--- a/client/extensions/woocommerce/app/dashboard/style.scss
+++ b/client/extensions/woocommerce/app/dashboard/style.scss
@@ -1,12 +1,3 @@
-.dashboard__manage-has-orders,
-.dashboard__manage-no-orders,
-.dashboard__placeholder,
-.setup__wrapper {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-}
-
 .dashboard__placeholder .card {
 	@include placeholder();
 }
diff --git a/client/extensions/woocommerce/app/order/style.scss b/client/extensions/woocommerce/app/order/style.scss
index 152a227033550..2cb5b1a3676e2 100644
--- a/client/extensions/woocommerce/app/order/style.scss
+++ b/client/extensions/woocommerce/app/order/style.scss
@@ -7,10 +7,6 @@
 		box-sizing: border-box;
 	}
 
-	@include breakpoint( '>660px' ) {
-		margin-top: 58px;
-	}
-
 	@include breakpoint( '>960px' ) {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/client/extensions/woocommerce/app/orders/style.scss b/client/extensions/woocommerce/app/orders/style.scss
index 357b2b0d94638..926cf939f119f 100644
--- a/client/extensions/woocommerce/app/orders/style.scss
+++ b/client/extensions/woocommerce/app/orders/style.scss
@@ -1,8 +1,4 @@
 .orders__container {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	thead {
 		.table-row {
 			&:hover {
diff --git a/client/extensions/woocommerce/app/product-categories/style.scss b/client/extensions/woocommerce/app/product-categories/style.scss
index 676542961deb3..0d6ded95a9b62 100644
--- a/client/extensions/woocommerce/app/product-categories/style.scss
+++ b/client/extensions/woocommerce/app/product-categories/style.scss
@@ -59,10 +59,6 @@
 }
 
 .product-categories__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;
@@ -198,4 +194,3 @@
 		}
 	}
 }
-
diff --git a/client/extensions/woocommerce/app/products/product-form.scss b/client/extensions/woocommerce/app/products/product-form.scss
index 5abd63063baeb..6e33d6f49dab4 100644
--- a/client/extensions/woocommerce/app/products/product-form.scss
+++ b/client/extensions/woocommerce/app/products/product-form.scss
@@ -3,10 +3,6 @@
  */
 
 .products__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;
diff --git a/client/extensions/woocommerce/app/products/products-list.scss b/client/extensions/woocommerce/app/products/products-list.scss
index 69faa8ca4b0c9..430d0cf730d7b 100644
--- a/client/extensions/woocommerce/app/products/products-list.scss
+++ b/client/extensions/woocommerce/app/products/products-list.scss
@@ -13,12 +13,6 @@
 		margin-top: 16px;
 	}
 
-	.search-card {
-		@include breakpoint( ">660px" ) {
-			margin-top: 58px;
-		}
-	}
-
 	.products__list-placeholder {
 		@include placeholder();
 		background: $white;
@@ -45,7 +39,7 @@
 	.is-requesting td div {
 		@include placeholder();
 		background: transparent;
-		
+
 		.image-thumb::after {
 			display: none;
 		}
diff --git a/client/extensions/woocommerce/app/promotions/promotion-form.scss b/client/extensions/woocommerce/app/promotions/promotion-form.scss
index b7ade9872d7cd..55b37285513c0 100644
--- a/client/extensions/woocommerce/app/promotions/promotion-form.scss
+++ b/client/extensions/woocommerce/app/promotions/promotion-form.scss
@@ -1,9 +1,5 @@
 
 .promotions__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;
diff --git a/client/extensions/woocommerce/app/promotions/promotions-list.scss b/client/extensions/woocommerce/app/promotions/promotions-list.scss
index c27d0f935634d..033fa4d1e1fcb 100644
--- a/client/extensions/woocommerce/app/promotions/promotions-list.scss
+++ b/client/extensions/woocommerce/app/promotions/promotions-list.scss
@@ -13,12 +13,6 @@
 		margin-top: 16px;
 	}
 
-	.search {
-		@include breakpoint( ">660px" ) {
-			margin-top: 58px;
-		}
-	}
-
 	.promotions__list-placeholder {
 		@include placeholder();
 		background: $white;
@@ -105,4 +99,3 @@
 	}
 
 }
-
diff --git a/client/extensions/woocommerce/app/reviews/style.scss b/client/extensions/woocommerce/app/reviews/style.scss
index 9697ad494df58..fa9cbbd2f659b 100644
--- a/client/extensions/woocommerce/app/reviews/style.scss
+++ b/client/extensions/woocommerce/app/reviews/style.scss
@@ -6,10 +6,6 @@
 }
 
 .reviews__filter-nav {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	.section-nav {
 		margin-top: 8px;
 	}
diff --git a/client/extensions/woocommerce/app/settings/shipping/shipping-zone/style.scss b/client/extensions/woocommerce/app/settings/shipping/shipping-zone/style.scss
index 5cdd796d8003a..f3b91bdeb2b94 100644
--- a/client/extensions/woocommerce/app/settings/shipping/shipping-zone/style.scss
+++ b/client/extensions/woocommerce/app/settings/shipping/shipping-zone/style.scss
@@ -1,10 +1,3 @@
-.sticky-panel + .shipping-zone__locations-container,
-.sticky-panel + .shipping-zone__methods-container {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-}
-
 .shipping-zone__name {
 	display: flex;
 	flex-direction: row;
diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss
index 2c59a51f4332b..564b02e16f750 100644
--- a/client/extensions/woocommerce/style.scss
+++ b/client/extensions/woocommerce/style.scss
@@ -55,9 +55,9 @@
 
 	@import 'woocommerce-services/style';
 
-	.section-nav {
+	.main {
 		@include breakpoint( ">660px" ) {
-			margin-top: 35px;
+			padding-top: 35px;
 		}
 	}
 
@@ -151,9 +151,7 @@
 
 .is-section-woocommerce.focus-sidebar {
 	@include breakpoint( "<660px" ) {
-		.sticky-panel,
-		.products__form,
-		.current-section {
+		.products__form {
 			display: none;
 		}
 	}

From 2d8cce4ed94abb062e5e8c943b68d7755851e0b9 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 19 Feb 2018 16:36:22 -0500
Subject: [PATCH 09/16] Hide the sidebar toggle when the sidebar is visible (on
 larger screens)

---
 .../woocommerce/components/action-header/style.scss       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index ffccae05e5895..7ddccae940b29 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -1,6 +1,6 @@
 .action-header {
 	width: 100%;
-	min-height: 46px;
+	min-height: 47px;
 	margin: 0 0 8px;
 	padding: 8px 16px 8px 0;
 	display: flex;
@@ -17,7 +17,7 @@
 	}
 
 	@include breakpoint( ">660px" ) {
-		padding: 1px 16px 2px 0;
+		padding: 5px 16px;
 		margin: 0;
 	}
 
@@ -39,6 +39,10 @@
 
 .action-header__back-to-sidebar {
 	flex: 1 0 10%;
+
+	@include breakpoint( ">660px" ) {
+		display: none;
+	}
 }
 
 .action-header__content {

From eeb44de56d03daad6e0aba5dee0e02cc6d84ea5a Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 19 Feb 2018 20:08:38 -0500
Subject: [PATCH 10/16] Clean up breadcrumb code

---
 .../woocommerce/components/action-header/index.js   | 13 +------------
 .../woocommerce/components/action-header/style.scss |  9 +++++----
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index 426546ce2bc82..134bcfc231e15 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -27,18 +27,7 @@ class ActionHeader extends React.Component {
 		const { breadcrumbs, isLoading = false } = this.props;
 		let breadcrumbsOutput = breadcrumbs;
 		if ( isArray( breadcrumbs ) ) {
-			breadcrumbsOutput = breadcrumbs.map( function( crumb, i ) {
-				return (
-					<span key={ i }>
-						{ crumb }
-						{ breadcrumbs.length - 1 === i ? (
-							''
-						) : (
-							<span className="action-header__breadcrumbs-separator"> / </span>
-						) }
-					</span>
-				);
-			} );
+			breadcrumbsOutput = breadcrumbs.map( ( crumb, i ) => <span key={ i }>{ crumb }</span> );
 		}
 		const breadcrumbClasses = classNames( 'action-header__breadcrumbs', {
 			'is-loading': isLoading,
diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 7ddccae940b29..66307049bb682 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -66,11 +66,12 @@
 		&.is-loading {
 			@include placeholder();
 		}
-	}
 
-	.action-header__breadcrumbs-separator {
-		color: $gray;
-		margin: 0 2px;
+		span + span::before {
+			content: ' / ';
+			color: $gray;
+			margin: 0 2px;
+		}
 	}
 }
 

From dce78ffcafb8e01c793c6a01de16114af4e53d41 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Tue, 20 Feb 2018 15:58:44 -0500
Subject: [PATCH 11/16] Switch to a split button when the action-buttons run
 out of room

---
 .../components/action-header/actions.js       | 145 ++++++++++++++++++
 .../components/action-header/index.js         |   4 +-
 .../components/action-header/style.scss       |  42 ++++-
 3 files changed, 184 insertions(+), 7 deletions(-)
 create mode 100644 client/extensions/woocommerce/components/action-header/actions.js

diff --git a/client/extensions/woocommerce/components/action-header/actions.js b/client/extensions/woocommerce/components/action-header/actions.js
new file mode 100644
index 0000000000000..9ca5dee921e60
--- /dev/null
+++ b/client/extensions/woocommerce/components/action-header/actions.js
@@ -0,0 +1,145 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import React, { Component } from 'react';
+import ReactDom from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+
+/**
+ * Internal Dependencies
+ */
+import afterLayoutFlush from 'lib/after-layout-flush';
+import PopoverMenuItem from 'components/popover/menu-item';
+import SplitButton from 'components/split-button';
+
+class ActionButtons extends Component {
+	static propTypes = {
+		selectedText: PropTypes.string,
+		selectedCount: PropTypes.number,
+		label: PropTypes.string,
+		hasSiblingControls: PropTypes.bool,
+	};
+
+	static defaultProps = {
+		hasSiblingControls: false,
+	};
+
+	state = {
+		isDropdown: false,
+	};
+
+	componentDidMount() {
+		this.setDropdownAfterLayoutFlush();
+		window.addEventListener( 'resize', this.setDropdownDebounced );
+	}
+
+	componentDidUpdate() {
+		this.setDropdownAfterLayoutFlush();
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener( 'resize', this.setDropdownDebounced );
+		// cancel the debounced `setDropdown` calls that might be already scheduled.
+		// see https://lodash.com/docs/4.17.4#debounce to learn about the `cancel` method.
+		this.setDropdownDebounced.cancel();
+		this.setDropdownAfterLayoutFlush.cancel();
+	}
+
+	setGroupRef = group => {
+		this.navGroup = group;
+	};
+
+	render() {
+		const buttons = React.Children.map( this.props.children, function( child, index ) {
+			return child && React.cloneElement( child, { ref: 'button-' + index } );
+		} );
+
+		const buttonsClassName = classNames( {
+			'action-header__actions': true,
+			'is-dropdown': this.state.isDropdown,
+			'is-open': this.state.isDropdownOpen,
+		} );
+
+		return (
+			<div className={ buttonsClassName } ref={ this.setGroupRef }>
+				<div className="action-header__actions-list">{ buttons }</div>
+
+				{ this.state.isDropdown && this.getDropdown() }
+			</div>
+		);
+	}
+
+	getButtonWidths = () => {
+		let totalWidth = 0;
+
+		React.Children.forEach(
+			this.props.children,
+			function( child, index ) {
+				if ( ! child ) {
+					return;
+				}
+				/* eslint-disable react/no-string-refs */
+				const buttonWidth = ReactDom.findDOMNode( this.refs[ 'button-' + index ] ).offsetWidth;
+				/* eslint-enable react/no-string-refs */
+				totalWidth += buttonWidth;
+			}.bind( this )
+		);
+
+		this.buttonsWidth = Math.max( totalWidth, this.buttonsWidth || 0 );
+	};
+
+	getDropdown = () => {
+		const buttons = React.Children.toArray( this.props.children );
+		const first = buttons.shift();
+		const dropdownOptions = buttons.map( function( child, index ) {
+			if ( ! child ) {
+				return null;
+			}
+			return <PopoverMenuItem key={ index }>{ child.props.children }</PopoverMenuItem>;
+		} );
+
+		return (
+			<SplitButton { ...first.props } label={ 'Actions!' } className="action-header__split-button">
+				{ dropdownOptions }
+			</SplitButton>
+		);
+	};
+
+	setDropdown = () => {
+		if ( ! this.navGroup ) {
+			return;
+		}
+
+		const navGroupWidth = this.navGroup.offsetWidth;
+
+		this.getButtonWidths();
+		this.setState( {
+			isDropdown: navGroupWidth <= this.buttonsWidth,
+		} );
+	};
+
+	setDropdownDebounced = debounce( this.setDropdown, 300 );
+
+	// setDropdown reads element sizes from DOM. If called synchronously in the middle of a React
+	// update, it causes a synchronous layout reflow, doing the layout two or more times instead
+	// of just once after all the DOM writes are finished. Prevent that by scheduling the call
+	// just *after* the next layout flush.
+	setDropdownAfterLayoutFlush = afterLayoutFlush( this.setDropdown );
+
+	keyHandler = event => {
+		switch ( event.keyCode ) {
+			case 32: // space
+			case 13: // enter
+				event.preventDefault();
+				document.activeElement.click();
+				break;
+		}
+	};
+}
+
+export default ActionButtons;
diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index 134bcfc231e15..db38cfc487281 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -12,6 +12,7 @@ import { isArray } from 'lodash';
 /**
  * Internal Dependencies
  */
+import ActionButtons from './actions';
 import Button from 'components/button';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import { setLayoutFocus } from 'state/ui/layout-focus/actions';
@@ -55,7 +56,7 @@ class ActionHeader extends React.Component {
 						{ this.renderBreadcrumbs() }
 					</div>
 				</div>
-				<div className="action-header__actions">{ children }</div>
+				<ActionButtons>{ children }</ActionButtons>
 			</header>
 		);
 	}
@@ -63,6 +64,7 @@ class ActionHeader extends React.Component {
 
 ActionHeader.propTypes = {
 	breadcrumbs: PropTypes.node,
+	actions: PropTypes.node,
 	setLayoutFocus: PropTypes.func.isRequired,
 };
 
diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 66307049bb682..3421024b125ed 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -38,7 +38,9 @@
 }
 
 .action-header__back-to-sidebar {
-	flex: 1 0 10%;
+	flex-grow: 0;
+	flex-shrink: 0;
+	min-width: 40px;
 
 	@include breakpoint( ">660px" ) {
 		display: none;
@@ -46,7 +48,8 @@
 }
 
 .action-header__content {
-	flex: 1 0 50%;
+	flex-grow: 2;
+	flex-shrink: 0;
 	display: flex;
 	justify-content: flex-start;
 
@@ -67,6 +70,10 @@
 			@include placeholder();
 		}
 
+		span {
+			display: inline-block;
+		}
+
 		span + span::before {
 			content: ' / ';
 			color: $gray;
@@ -76,13 +83,36 @@
 }
 
 .action-header__actions {
-	display: flex;
-	flex: 1 0 40%;
-	justify-content: flex-end;
-	align-items: center;
+	flex-grow: 1;
+	flex-shrink: 2;
+	// Triggers the width of the list, so ActionButtons correctly measures the space.
+	overflow: hidden;
+	text-align: right;
+
+	.action-header__actions-list {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		flex-wrap: nowrap;
+
+		.button {
+			flex-basis: auto;
+		}
+	}
+
+	&.is-dropdown .action-header__actions-list {
+		display: none;
+	}
+
+	.action-header__split-button {
+		.button + .button {
+			margin-left: 0;
+		}
+	}
 
 	.button {
 		white-space: nowrap;
+		overflow: visible;
 		padding: 5px 14px 7px;
 
 		& + .button {

From 514c684c8144c19b9efe29ea38859fbe83cd6357 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 21 Feb 2018 11:55:34 -0700
Subject: [PATCH 12/16] Remove unused code

---
 .../components/action-header/actions.js           | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/actions.js b/client/extensions/woocommerce/components/action-header/actions.js
index 9ca5dee921e60..af3c48215112b 100644
--- a/client/extensions/woocommerce/components/action-header/actions.js
+++ b/client/extensions/woocommerce/components/action-header/actions.js
@@ -22,11 +22,6 @@ class ActionButtons extends Component {
 		selectedText: PropTypes.string,
 		selectedCount: PropTypes.number,
 		label: PropTypes.string,
-		hasSiblingControls: PropTypes.bool,
-	};
-
-	static defaultProps = {
-		hasSiblingControls: false,
 	};
 
 	state = {
@@ -130,16 +125,6 @@ class ActionButtons extends Component {
 	// of just once after all the DOM writes are finished. Prevent that by scheduling the call
 	// just *after* the next layout flush.
 	setDropdownAfterLayoutFlush = afterLayoutFlush( this.setDropdown );
-
-	keyHandler = event => {
-		switch ( event.keyCode ) {
-			case 32: // space
-			case 13: // enter
-				event.preventDefault();
-				document.activeElement.click();
-				break;
-		}
-	};
 }
 
 export default ActionButtons;

From 6bef598a04e0da4ea911bf6ef67397e263e81adf Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 21 Feb 2018 11:55:59 -0700
Subject: [PATCH 13/16] Style the dropdown, use a real Button

---
 .../components/action-header/actions.js       | 16 +++++++++---
 .../components/action-header/style.scss       | 26 +++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/client/extensions/woocommerce/components/action-header/actions.js b/client/extensions/woocommerce/components/action-header/actions.js
index af3c48215112b..5bf4ba83d7eaa 100644
--- a/client/extensions/woocommerce/components/action-header/actions.js
+++ b/client/extensions/woocommerce/components/action-header/actions.js
@@ -14,6 +14,7 @@ import { debounce } from 'lodash';
  * Internal Dependencies
  */
 import afterLayoutFlush from 'lib/after-layout-flush';
+import Button from 'components/button';
 import PopoverMenuItem from 'components/popover/menu-item';
 import SplitButton from 'components/split-button';
 
@@ -90,16 +91,25 @@ class ActionButtons extends Component {
 
 	getDropdown = () => {
 		const buttons = React.Children.toArray( this.props.children );
-		const first = buttons.shift();
+		const first = buttons.pop();
 		const dropdownOptions = buttons.map( function( child, index ) {
 			if ( ! child ) {
 				return null;
 			}
-			return <PopoverMenuItem key={ index }>{ child.props.children }</PopoverMenuItem>;
+			return (
+				<PopoverMenuItem itemComponent={ Button } { ...child.props } key={ index }>
+					{ child.props.children }
+				</PopoverMenuItem>
+			);
 		} );
 
 		return (
-			<SplitButton { ...first.props } label={ 'Actions!' } className="action-header__split-button">
+			<SplitButton
+				{ ...first.props }
+				label={ 'test' }
+				className="action-header__split-button"
+				popoverClassName="woocommerce"
+			>
 				{ dropdownOptions }
 			</SplitButton>
 		);
diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
index 3421024b125ed..f947971702b0f 100644
--- a/client/extensions/woocommerce/components/action-header/style.scss
+++ b/client/extensions/woocommerce/components/action-header/style.scss
@@ -133,3 +133,29 @@
 		}
 	}
 }
+
+// & refers to .woocommerce base class
+&.popover .popover__menu-item {
+	padding: 8px 16px;
+
+	.gridicon {
+		top: 4px;
+	}
+
+	&.is-scary {
+		.gridicon {
+			color: $alert-red;
+		}
+
+		&.is-selected,
+		&:hover,
+		&:focus {
+			background: $alert-red;
+			color: $white;
+
+			.gridicon {
+				color: $white;
+			}
+		}
+	}
+}

From ad54360761057a50cf88beee4028590f3c10ba13 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 21 Feb 2018 12:28:16 -0700
Subject: [PATCH 14/16] Add `primaryLabel` when ActionHeader has multiple
 buttons

---
 .../woocommerce/app/order/header.js           |  4 ++-
 .../app/product-categories/header.js          | 19 ++++++--------
 .../app/products/product-header.js            | 25 ++++++++----------
 .../app/promotions/promotion-header.js        | 26 +++++++------------
 .../shipping-zone/shipping-zone-header.js     |  2 +-
 .../components/action-header/actions.js       | 13 +++++-----
 .../components/action-header/index.js         | 18 +++++++------
 7 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/client/extensions/woocommerce/app/order/header.js b/client/extensions/woocommerce/app/order/header.js
index 841cf8298df62..76c1026733396 100644
--- a/client/extensions/woocommerce/app/order/header.js
+++ b/client/extensions/woocommerce/app/order/header.js
@@ -179,8 +179,10 @@ class OrderActionHeader extends Component {
 			</span>,
 		];
 
+		const primaryLabel = isEditing ? translate( 'Update' ) : translate( 'Edit Order' );
+
 		return (
-			<ActionHeader breadcrumbs={ breadcrumbs }>
+			<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ primaryLabel }>
 				{ isEditing ? this.renderEditingButtons() : this.renderViewButtons() }
 			</ActionHeader>
 		);
diff --git a/client/extensions/woocommerce/app/product-categories/header.js b/client/extensions/woocommerce/app/product-categories/header.js
index f87d12b6f1ca4..1685038a49490 100644
--- a/client/extensions/woocommerce/app/product-categories/header.js
+++ b/client/extensions/woocommerce/app/product-categories/header.js
@@ -17,24 +17,21 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderDeleteButton( onDelete, category, translate ) {
+function renderDeleteButton( onDelete, label ) {
 	return (
 		onDelete && (
 			<Button borderless scary onClick={ onDelete ? onDelete : undefined }>
 				<Gridicon icon="trash" />
-				<span>{ translate( 'Delete' ) } </span>
+				<span>{ label } </span>
 			</Button>
 		)
 	);
 }
 
-function renderSaveButton( onSave, isBusy, category, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	const saveExists = 'undefined' !== typeof onSave;
 	const saveDisabled = false === onSave;
 
-	const saveLabel =
-		category && ! isObject( category.id ) ? translate( 'Update' ) : translate( 'Save' );
-
 	return (
 		saveExists && (
 			<Button
@@ -43,7 +40,7 @@ function renderSaveButton( onSave, isBusy, category, translate ) {
 				disabled={ saveDisabled }
 				busy={ isBusy }
 			>
-				{ saveLabel }
+				{ label }
 			</Button>
 		)
 	);
@@ -51,9 +48,9 @@ function renderSaveButton( onSave, isBusy, category, translate ) {
 
 const ProductCategoryHeader = ( { onDelete, onSave, translate, site, category, isBusy } ) => {
 	const existing = category && ! isObject( category.id );
-
-	const deleteButton = renderDeleteButton( onDelete, category, translate );
-	const saveButton = renderSaveButton( onSave, isBusy, category, translate );
+	const deleteButton = renderDeleteButton( onDelete, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
 	const currentCrumb =
 		category && existing ? (
@@ -72,7 +69,7 @@ const ProductCategoryHeader = ( { onDelete, onSave, translate, site, category, i
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ deleteButton }
 			{ saveButton }
 		</ActionHeader>
diff --git a/client/extensions/woocommerce/app/products/product-header.js b/client/extensions/woocommerce/app/products/product-header.js
index e22d99c4e5645..75742c8ee8e6e 100644
--- a/client/extensions/woocommerce/app/products/product-header.js
+++ b/client/extensions/woocommerce/app/products/product-header.js
@@ -17,7 +17,7 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderViewButton( product, translate ) {
+function renderViewButton( product, label ) {
 	const url = product && product.permalink;
 	return (
 		// TODO: Do more to validate this URL?
@@ -29,29 +29,26 @@ function renderViewButton( product, translate ) {
 			rel="noopener noreferrer"
 		>
 			<Gridicon icon="visible" />
-			<span>{ translate( 'View' ) }</span>
+			<span>{ label }</span>
 		</Button>
 	);
 }
 
-function renderTrashButton( onTrash, product, isBusy, translate ) {
+function renderTrashButton( onTrash, isBusy, label ) {
 	return (
 		onTrash && (
 			<Button borderless scary onClick={ onTrash ? onTrash : undefined }>
 				<Gridicon icon="trash" />
-				<span>{ translate( 'Delete' ) } </span>
+				<span>{ label } </span>
 			</Button>
 		)
 	);
 }
 
-function renderSaveButton( onSave, product, isBusy, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	const saveExists = 'undefined' !== typeof onSave;
 	const saveDisabled = false === onSave;
 
-	const saveLabel =
-		product && ! isObject( product.id ) ? translate( 'Update' ) : translate( 'Save & Publish' );
-
 	return (
 		saveExists && (
 			<Button
@@ -60,7 +57,7 @@ function renderSaveButton( onSave, product, isBusy, translate ) {
 				disabled={ saveDisabled }
 				busy={ isBusy }
 			>
-				{ saveLabel }
+				{ label }
 			</Button>
 		)
 	);
@@ -68,10 +65,10 @@ function renderSaveButton( onSave, product, isBusy, translate ) {
 
 const ProductHeader = ( { viewEnabled, onTrash, onSave, isBusy, translate, site, product } ) => {
 	const existing = product && ! isObject( product.id );
-
-	const viewButton = viewEnabled && renderViewButton( product, translate );
-	const trashButton = renderTrashButton( onTrash, product, isBusy, translate );
-	const saveButton = renderSaveButton( onSave, product, isBusy, translate );
+	const viewButton = viewEnabled && renderViewButton( product, translate( 'View' ) );
+	const trashButton = renderTrashButton( onTrash, isBusy, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save & Publish' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
 	const currentCrumb =
 		product && existing ? (
@@ -86,7 +83,7 @@ const ProductHeader = ( { viewEnabled, onTrash, onSave, isBusy, translate, site,
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ trashButton }
 			{ viewButton }
 			{ saveButton }
diff --git a/client/extensions/woocommerce/app/promotions/promotion-header.js b/client/extensions/woocommerce/app/promotions/promotion-header.js
index 4510e097bb75e..307d45bbdb4b1 100644
--- a/client/extensions/woocommerce/app/promotions/promotion-header.js
+++ b/client/extensions/woocommerce/app/promotions/promotion-header.js
@@ -14,16 +14,16 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderTrashButton( onTrash, promotion, isBusy, translate ) {
+function renderTrashButton( onTrash, isBusy, label ) {
 	return onTrash && (
 		<Button borderless scary onClick={ onTrash }>
 			<Gridicon icon="trash" />
-			<span>{ translate( 'Delete' ) }</span>
+			<span>{ label }</span>
 		</Button>
 	);
 }
 
-function renderSaveButton( onSave, promotion, isBusy, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	if ( 'undefined' === typeof onSave ) {
 		// 'Save' not allowed here.
 		return null;
@@ -31,25 +31,20 @@ function renderSaveButton( onSave, promotion, isBusy, translate ) {
 
 	const saveDisabled = false === onSave;
 
-	const saveLabel = ( promotion && ! isObject( promotion.id )
-		? translate( 'Update' )
-		: translate( 'Save & Publish' )
-	);
-
 	return (
 		<Button primary onClick={ onSave || noop } disabled={ saveDisabled } busy={ isBusy }>
-			{ saveLabel }
+			{ label }
 		</Button>
 	);
 }
 
 const PromotionHeader = ( { promotion, onSave, onTrash, isBusy, translate, site } ) => {
-	const trashButton = renderTrashButton( onTrash, promotion, isBusy, translate );
-	const saveButton = renderSaveButton( onSave, promotion, isBusy, translate );
+	const existing = ( promotion && ! isObject( promotion.id ) );
+	const trashButton = renderTrashButton( onTrash, isBusy, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save & Publish' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
-	const currentCrumb = promotion && ! isObject( promotion.id )
-		? ( <span>{ translate( 'Edit Promotion' ) }</span> )
-		: ( <span>{ translate( 'Add Promotion' ) }</span> );
+	const currentCrumb = existing ? ( <span>{ translate( 'Edit Promotion' ) }</span> ) : ( <span>{ translate( 'Add Promotion' ) }</span> );
 
 	const breadcrumbs = [
 		( <a href={ getLink( '/store/promotions/:site/', site ) }>{ translate( 'Promotions' ) }</a> ),
@@ -57,7 +52,7 @@ const PromotionHeader = ( { promotion, onSave, onTrash, isBusy, translate, site
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ trashButton }
 			{ saveButton }
 		</ActionHeader>
@@ -82,4 +77,3 @@ PromotionHeader.propTypes = {
 };
 
 export default localize( PromotionHeader );
-
diff --git a/client/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-header.js b/client/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-header.js
index c6082fd57d7dd..892fd8fe0a629 100644
--- a/client/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-header.js
+++ b/client/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-header.js
@@ -47,7 +47,7 @@ const ShippingZoneHeader = ( {
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ translate( 'Save' ) }>
 			{ showDelete && (
 				<Button borderless scary onClick={ onDelete } disabled={ isSaving }>
 					<Gridicon icon="trash" />
diff --git a/client/extensions/woocommerce/components/action-header/actions.js b/client/extensions/woocommerce/components/action-header/actions.js
index 5bf4ba83d7eaa..fad5d3724fd1d 100644
--- a/client/extensions/woocommerce/components/action-header/actions.js
+++ b/client/extensions/woocommerce/components/action-header/actions.js
@@ -20,9 +20,7 @@ import SplitButton from 'components/split-button';
 
 class ActionButtons extends Component {
 	static propTypes = {
-		selectedText: PropTypes.string,
-		selectedCount: PropTypes.number,
-		label: PropTypes.string,
+		primaryLabel: PropTypes.string,
 	};
 
 	state = {
@@ -90,8 +88,9 @@ class ActionButtons extends Component {
 	};
 
 	getDropdown = () => {
+		const primaryLabel = this.props.primaryLabel;
 		const buttons = React.Children.toArray( this.props.children );
-		const first = buttons.pop();
+		const primary = buttons.pop();
 		const dropdownOptions = buttons.map( function( child, index ) {
 			if ( ! child ) {
 				return null;
@@ -105,10 +104,12 @@ class ActionButtons extends Component {
 
 		return (
 			<SplitButton
-				{ ...first.props }
-				label={ 'test' }
+				{ ...primary.props }
+				label={ primaryLabel }
 				className="action-header__split-button"
 				popoverClassName="woocommerce"
+				disabled={ false }
+				disableMain={ primary.props.disabled }
 			>
 				{ dropdownOptions }
 			</SplitButton>
diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
index db38cfc487281..5eeaf001d8df9 100644
--- a/client/extensions/woocommerce/components/action-header/index.js
+++ b/client/extensions/woocommerce/components/action-header/index.js
@@ -19,6 +19,14 @@ import { setLayoutFocus } from 'state/ui/layout-focus/actions';
 import SiteIcon from 'blocks/site-icon';
 
 class ActionHeader extends React.Component {
+	static propTypes = {
+		breadcrumbs: PropTypes.node,
+		isLoading: PropTypes.bool,
+		primaryLabel: PropTypes.string,
+		setLayoutFocus: PropTypes.func.isRequired,
+		site: PropTypes.object.isRequired,
+	};
+
 	toggleSidebar = event => {
 		event.preventDefault();
 		this.props.setLayoutFocus( 'sidebar' );
@@ -38,7 +46,7 @@ class ActionHeader extends React.Component {
 	};
 
 	render() {
-		const { children, site } = this.props;
+		const { children, primaryLabel, site } = this.props;
 
 		return (
 			<header className="action-header">
@@ -56,18 +64,12 @@ class ActionHeader extends React.Component {
 						{ this.renderBreadcrumbs() }
 					</div>
 				</div>
-				<ActionButtons>{ children }</ActionButtons>
+				<ActionButtons primaryLabel={ primaryLabel }>{ children }</ActionButtons>
 			</header>
 		);
 	}
 }
 
-ActionHeader.propTypes = {
-	breadcrumbs: PropTypes.node,
-	actions: PropTypes.node,
-	setLayoutFocus: PropTypes.func.isRequired,
-};
-
 export default connect(
 	state => ( {
 		site: getSelectedSiteWithFallback( state ),

From b8d26d88a2a33c5bef8fabb2dc8afe05660eb19b Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 21 Feb 2018 12:28:39 -0700
Subject: [PATCH 15/16] Remove duplicate Main component from tax section

---
 .../woocommerce/app/settings/taxes/taxes-taxjar.js        | 8 +++-----
 .../woocommerce/app/settings/taxes/taxes-wcs.js           | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/client/extensions/woocommerce/app/settings/taxes/taxes-taxjar.js b/client/extensions/woocommerce/app/settings/taxes/taxes-taxjar.js
index 541d62ad08298..69f452ff577f1 100644
--- a/client/extensions/woocommerce/app/settings/taxes/taxes-taxjar.js
+++ b/client/extensions/woocommerce/app/settings/taxes/taxes-taxjar.js
@@ -6,7 +6,6 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -16,7 +15,6 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Card from 'components/card';
 import ExternalLink from 'components/external-link';
 import { getLink } from 'woocommerce/lib/nav-utils';
-import Main from 'components/main';
 import SettingsNavigation from '../navigation';
 
 class SettingsTaxesTaxJar extends Component {
@@ -30,7 +28,7 @@ class SettingsTaxesTaxJar extends Component {
 	};
 
 	render = () => {
-		const { className, site, translate } = this.props;
+		const { site, translate } = this.props;
 
 		const breadcrumbs = [
 			<a href={ getLink( '/store/settings/:site/', site ) }>{ translate( 'Settings' ) }</a>,
@@ -43,7 +41,7 @@ class SettingsTaxesTaxJar extends Component {
 		const pluginUrl = getLink( '/plugins/taxjar-simplified-taxes-for-woocommerce/:site', site );
 
 		return (
-			<Main className={ classNames( 'settings-taxes', className ) } wideLayout>
+			<div>
 				<ActionHeader breadcrumbs={ breadcrumbs } />
 				<SettingsNavigation activeSection="taxes" />
 				<div>
@@ -83,7 +81,7 @@ class SettingsTaxesTaxJar extends Component {
 						</p>
 					</Card>
 				</div>
-			</Main>
+			</div>
 		);
 	};
 }
diff --git a/client/extensions/woocommerce/app/settings/taxes/taxes-wcs.js b/client/extensions/woocommerce/app/settings/taxes/taxes-wcs.js
index 25147affa497e..f59699cbcc1e4 100644
--- a/client/extensions/woocommerce/app/settings/taxes/taxes-wcs.js
+++ b/client/extensions/woocommerce/app/settings/taxes/taxes-wcs.js
@@ -7,7 +7,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
-import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 
@@ -29,7 +28,6 @@ import ExtendedHeader from 'woocommerce/components/extended-header';
 import { fetchTaxRates } from 'woocommerce/state/sites/meta/taxrates/actions';
 import { fetchTaxSettings, updateTaxSettings } from 'woocommerce/state/sites/settings/tax/actions';
 import { getLink } from 'woocommerce/lib/nav-utils';
-import Main from 'components/main';
 import { ProtectFormGuard } from 'lib/protect-form';
 import QuerySettingsGeneral from 'woocommerce/components/query-settings-general';
 import SettingsNavigation from '../navigation';
@@ -184,7 +182,7 @@ class SettingsTaxesWooCommerceServices extends Component {
 	};
 
 	render = () => {
-		const { className, loaded, siteId, siteSlug, translate } = this.props;
+		const { loaded, siteId, siteSlug, translate } = this.props;
 
 		const breadcrumbs = [
 			<a href={ getLink( '/store/settings/:site/', { slug: siteSlug } ) }>
@@ -194,7 +192,7 @@ class SettingsTaxesWooCommerceServices extends Component {
 		];
 
 		return (
-			<Main className={ classNames( 'settings-taxes', className ) } wideLayout>
+			<div>
 				<ActionHeader breadcrumbs={ breadcrumbs }>
 					<TaxSettingsSaveButton onSave={ this.onSave } />
 				</ActionHeader>
@@ -204,7 +202,7 @@ class SettingsTaxesWooCommerceServices extends Component {
 				{ loaded && this.renderRates() }
 				{ loaded && this.renderOptions() }
 				<ProtectFormGuard isChanged={ ! this.state.pristine } />
-			</Main>
+			</div>
 		);
 	};
 }

From fbb79fd76c2f3588b2558fa086a00c77206e7944 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 22 Feb 2018 10:08:02 -0700
Subject: [PATCH 16/16] =?UTF-8?q?Show=20just=20the=20button=20if=20this=20?=
 =?UTF-8?q?is=20a=20single=20button,=20or=20we=20don=E2=80=99t=20have=20a?=
 =?UTF-8?q?=20primaryLabel=20set?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../woocommerce/components/action-header/actions.js         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/extensions/woocommerce/components/action-header/actions.js b/client/extensions/woocommerce/components/action-header/actions.js
index fad5d3724fd1d..18cccb7e048e9 100644
--- a/client/extensions/woocommerce/components/action-header/actions.js
+++ b/client/extensions/woocommerce/components/action-header/actions.js
@@ -88,7 +88,13 @@ class ActionButtons extends Component {
 	};
 
 	getDropdown = () => {
+		const isSingleButton = React.Children.count( this.props.children ) === 1;
 		const primaryLabel = this.props.primaryLabel;
+
+		if ( ! primaryLabel || isSingleButton ) {
+			return this.props.children;
+		}
+
 		const buttons = React.Children.toArray( this.props.children );
 		const primary = buttons.pop();
 		const dropdownOptions = buttons.map( function( child, index ) {