From 669917562fbea669d8329b7d95349fb2b79b7aad Mon Sep 17 00:00:00 2001 From: Rick Banister Date: Thu, 10 Dec 2015 10:46:56 -0500 Subject: [PATCH 1/4] Framework: removed last remaining instance of SectionHeaderButton and forever banished that component to hell --- client/components/section-header/README.md | 26 +++++++------- client/components/section-header/button.jsx | 34 ------------------- .../section-header/docs/example.jsx | 21 +++++++----- .../card/header/primary-domain-button.jsx | 7 ++-- 4 files changed, 29 insertions(+), 59 deletions(-) delete mode 100644 client/components/section-header/button.jsx diff --git a/client/components/section-header/README.md b/client/components/section-header/README.md index 4f4075fb4af2e..ba0d2bc875651 100644 --- a/client/components/section-header/README.md +++ b/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 ( - Manage - + + ); } ``` ## 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. diff --git a/client/components/section-header/button.jsx b/client/components/section-header/button.jsx deleted file mode 100644 index 53c4d1aae3fc5..0000000000000 --- a/client/components/section-header/button.jsx +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -var React = require( 'react' ), - classNames = require( 'classnames' ), - omit = require( 'lodash/object/omit' ); - -var peopleSectionHeaderButton = React.createClass( { - - getDefaultProps: function() { - return { - className: '' - }; - }, - - render: function() { - var buttonClasses = classNames( - 'button', - 'section-header__button', - this.props.className - ); - - return ( - - ); - } -} ); - -module.exports = peopleSectionHeaderButton; diff --git a/client/components/section-header/docs/example.jsx b/client/components/section-header/docs/example.jsx index 6860b5ab93f08..16af10e0cded9 100644 --- a/client/components/section-header/docs/example.jsx +++ b/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,21 @@ var Cards = React.createClass( { - Manage - - Add - + + - Content here + { this.translate( 'Content Here' ) } ); diff --git a/client/my-sites/upgrades/domain-management/edit/card/header/primary-domain-button.jsx b/client/my-sites/upgrades/domain-management/edit/card/header/primary-domain-button.jsx index 07ddcdd343af4..0074c842d05a5 100644 --- a/client/my-sites/upgrades/domain-management/edit/card/header/primary-domain-button.jsx +++ b/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 ( - { label } - + ); } From e0247749dd22b90b478167262a3f9b0342376b33 Mon Sep 17 00:00:00 2001 From: Rick Banister Date: Thu, 10 Dec 2015 11:16:40 -0500 Subject: [PATCH 2/4] SectionHeader: removed reference to SectionHeaderButton in the css, fixed the css to properly target Button --- client/components/section-header/style.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/components/section-header/style.scss b/client/components/section-header/style.scss index d149a5b5c3edf..dda41b25d4699 100644 --- a/client/components/section-header/style.scss +++ b/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; From 6d62f40bb47dc4d58bd40b7737066d191c12d307 Mon Sep 17 00:00:00 2001 From: Rick Banister Date: Thu, 10 Dec 2015 11:18:18 -0500 Subject: [PATCH 3/4] SectionHeader: added a Primary Button to the devdoc example --- client/components/section-header/docs/example.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/components/section-header/docs/example.jsx b/client/components/section-header/docs/example.jsx index 16af10e0cded9..e09660c4df893 100644 --- a/client/components/section-header/docs/example.jsx +++ b/client/components/section-header/docs/example.jsx @@ -23,6 +23,11 @@ var Cards = React.createClass( { + ); diff --git a/client/components/section-header/docs/example.jsx b/client/components/section-header/docs/example.jsx index e09660c4df893..f2b8ffc81c1bb 100644 --- a/client/components/section-header/docs/example.jsx +++ b/client/components/section-header/docs/example.jsx @@ -23,26 +23,24 @@ var Cards = React.createClass( { - - - { this.translate( 'Content Here' ) } + Content Here );