Merge pull request #1468 from Automattic/fix/no-more-sectionheaderbutton

Framework: removed last remaining instance of SectionHeaderButton

client/components/section-header/README.md

@@ -8,31 +8,29 @@ and optional actions buttons.
 
 ```js
 var SectionHeader = require( 'components/section-header' ),
-	SectionHeaderButton = require( 'components/section-header/button' );
+	Button = require( 'components/button' );
 
 render: function() {
 	return (
 		<SectionHeader label={ this.translate( 'Team' ) }>
-			<SectionHeaderButton>Manage</SectionHeaderButton>
-			<SectionHeaderButton onClick={ function() {
-				console.log( 'Clicked Add button' );
-			} }>
-				{ this.translate( 'Add' ) }
-			</SectionHeaderButton>
+			<Button compact>
+				Manage
+			</Button>
+			<Button
+				compact
+				onClick={ function() {
+					console.log( 'Clicked Add button' );
+				} }
+			>
+				Add
+			</Button>
 		</SectionHeader>
 	);
 }
 ```
 ## Section Header
-This is the base component and acts as a wrapper for
-the People Section Header Buttons.
+This is the base component and acts as a wrapper for a section's (a list of cards) title and any action buttons that act upon that list (like Bulk Edit or Add New Item).
 
 #### Props
 - `className` - *optional* (string|object) Classes to be added to the rendered component.
 - `label` - *optional* (string) The text to be displayed in the header.
-
-## People Section Header Button
-This component acts as a wrapper around the `button` component and 
-forces the `section-header__button` class be rendered. This component, 
-when passed as a child to `SectionHeader`, is rendered as 
-an action button on the right hand side of the header.

client/components/section-header/docs/example.jsx

@@ -7,7 +7,7 @@ var React = require( 'react' );
  * Internal dependencies
  */
 var SectionHeader = require( 'components/section-header' ),
-	SectionHeaderButton = require( 'components/section-header/button' ),
+	Button = require( 'components/button' ),
 	Card = require( 'components/card' );
 
 var Cards = React.createClass( {
@@ -23,16 +23,24 @@ var Cards = React.createClass( {
 				</h2>
 
 				<SectionHeader label="Team" count={ 10 }>
-					<SectionHeaderButton>Manage</SectionHeaderButton>
-					<SectionHeaderButton onClick={ function() {
-						alert( 'Clicked add button' );
-					} }>
+					<Button compact primary>
+						Primary Action
+					</Button>
+					<Button compact>
+						Manage
+					</Button>
+					<Button
+						compact
+						onClick={ function() {
+							alert( 'Clicked add button' );
+						} }
+					>
 						Add
-					</SectionHeaderButton>
+					</Button>
 				</SectionHeader>
 
 				<Card>
-					Content here
+					Content Here
 				</Card>
 			</div>
 		);

client/components/section-header/style.scss

@@ -33,17 +33,15 @@
 	@include clear-fix;
 }
 
-.section-header__label,
-.section-header__button {
+.section-header__label {
 	color: $gray;
 	font-size: 11px;
 	text-transform: uppercase;
 }
 
-.section-header__button {
-	background: none;
+.section-header .button {
+	float: left;
 	margin-right: 8px;
-	padding: 2px 8px;
 
 	&:last-child {
 		margin-right: 0;

client/my-sites/upgrades/domain-management/edit/card/header/primary-domain-button.jsx

@@ -9,7 +9,7 @@ const React = require( 'react' ),
  */
 const analyticsMixin = require( 'lib/mixins/analytics' ),
 	paths = require( 'my-sites/upgrades/paths' ),
-	SectionHeaderButton = require( 'components/section-header/button' );
+	Button = require( 'components/button' );
 
 const PrimaryDomainButton = React.createClass( {
 	mixins: [ analyticsMixin( 'domainManagement', 'edit' ) ],
@@ -41,11 +41,12 @@ const PrimaryDomainButton = React.createClass( {
 			}
 
 			return (
-				<SectionHeaderButton
+				<Button
+					compact
 					className="domain-details-card__make-primary-button"
 					onClick={ this.handleClick }>
 					{ label }
-				</SectionHeaderButton>
+				</Button>
 			);
 		}