Merge pull request #3193 from Automattic/update/post-selector-consoli…

…date-styles Components: Consolidate PostSelector styles for standalone usage
Automattic · Feb 10, 2016 · cd2364b · cd2364b
2 parents d224e8a + 34e340b
commit cd2364b
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 73 deletions.
diff --git a/client/devdocs/controller.js b/client/devdocs/controller.js
@@ -6,6 +6,7 @@ var ReactDom = require( 'react-dom' ),
 	qs = require( 'qs' ),
 	debounce = require( 'lodash/function/debounce' ),
 	page = require( 'page' ),
+	ReduxProvider = require( 'react-redux' ).Provider,
 	setSection = require( 'state/ui/actions' ).setSection,
 	EmptyContent = require( 'components/empty-content' );
 
@@ -100,9 +101,11 @@ var devdocs = {
 		context.store.dispatch( setSection( 'devdocs' ) );
 
 		ReactDom.render(
-			React.createElement( AppComponents, {
-				component: context.params.component
-			} ),
+			React.createElement( ReduxProvider, { store: context.store },
+				React.createElement( AppComponents, {
+					component: context.params.component
+				} )
+			),
 			document.getElementById( 'primary' )
 		);
 	},

diff --git a/client/devdocs/design/app-components.jsx b/client/devdocs/design/app-components.jsx
@@ -11,6 +11,7 @@ var React = require( 'react' ),
  */
 var SearchCard = require( 'components/search-card' ),
 	CommentButtons = require( 'components/comment-button/docs/example' ),
+	PostSelector = require( 'my-sites/post-selector/docs/example' ),
 	LikeButtons = require( 'components/like-button/docs/example' ),
 	FollowButtons = require( 'components/follow-button/docs/example' ),
 	Sites = require( 'lib/sites-list/docs/example' ),
@@ -143,6 +144,7 @@ module.exports = React.createClass( {
 				}
 				<Collection component={ this.props.component } filter={ this.state.filter }>
 					<CommentButtons />
+					<PostSelector />
 					<LikeButtons />
 					<FollowButtons />
 					<Sites />

diff --git a/client/my-sites/post-selector/docs/example.jsx b/client/my-sites/post-selector/docs/example.jsx
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PureRenderMixin from 'react-pure-render/mixin';
+
+/**
+ * Internal dependencies
+ */
+import PostSelector from '../';
+import observe from 'lib/mixins/data-observe';
+import sites from 'lib/sites-list';
+
+const PostSelectorExample = React.createClass( {
+	mixins: [ observe( 'sites' ), PureRenderMixin ],
+
+	render() {
+		const primary = this.props.sites.getPrimary();
+
+		return (
+			<div className="design-assets__group">
+				<h2>
+					<a href="/devdocs/app-components/post-selector">Post Selector</a>
+				</h2>
+				<div style={ { width: 300 } }>
+					{ this.props.sites.initialized && (
+						<PostSelector
+							siteId={ primary ? primary.ID : 3584907 }
+							type="any"
+							orderBy="date"
+							order="DESC" />
+					) }
+				</div>
+			</div>
+		);
+	}
+} );
+
+export default React.createClass( {
+	displayName: 'PostSelector',
+
+	mixins: [ PureRenderMixin ],
+
+	render() {
+		return <PostSelectorExample sites={ sites() } />;
+	}
+} );
diff --git a/client/my-sites/post-selector/search.scss b/client/my-sites/post-selector/search.scss
diff --git a/client/my-sites/post-selector/selector.jsx b/client/my-sites/post-selector/selector.jsx
@@ -18,6 +18,7 @@ import NoResults from './no-results';
 import analytics from 'analytics';
 import Search from './search';
 import TreeConvert from 'lib/tree-convert';
+import { decodeEntities } from 'lib/formatting';
 
 /**
 * Constants
@@ -117,16 +118,20 @@ export default React.createClass( {
 
 	renderItem( item ) {
 		const itemId = item.ID;
-		const name = item.title || this.translate( 'Untitled' );
+		const name = item.title ? decodeEntities( item.title ) : this.translate( 'Untitled' );
 		const checked = this.props.selected === item.ID;
 		const inputType = this.props.multiple ? 'checkbox' : 'radio';
 		const domId = camelCase( this.props.analyticsPrefix ) + '-option-' + itemId;
 
 		const input = (
-			<input id={ domId } type={ inputType } name='posts'
+			<input
+				id={ domId }
+				type={ inputType }
+				name="posts"
 				value={ itemId }
 				onChange={ this.props.onChange.bind( null, item ) }
-				checked={ checked } />
+				checked={ checked }
+				className="post-selector__input" />
 		);
 
 		return (
@@ -175,8 +180,8 @@ export default React.createClass( {
 
 		return (
 			<li>
-				<input className='placeholder-text' type={ inputType } name='posts' disabled={ true } />
-				<label><span className='placeholder-text'>Loading list of options...</span></label>
+				<input className="post-selector__input" type={ inputType } name="posts" disabled={ true } />
+				<label><span className="placeholder-text">Loading list of options...</span></label>
 			</li>
 		);
 	},
@@ -227,7 +232,7 @@ export default React.createClass( {
 					<span className='is-empty-content'>{ this.props.emptyMessage }</span> :
 					null
 				}
-				<form>
+				<form className="post-selector__results">
 					{ posts ? this.renderHierarchy( posts ) : this.renderPlaceholder() }
 				</form>
 			</div>

diff --git a/client/my-sites/post-selector/style.scss b/client/my-sites/post-selector/style.scss
@@ -1,4 +1,47 @@
-@import 'search';
+.post-selector {
+	position: relative;
+	background-color: $white;
+	border: 1px solid lighten( $gray, 20% );
+
+	&.is-compact {
+		background-color: transparent;
+		border: none;
+	}
+}
+
+.post-selector__search {
+	position: relative;
+}
+
+.post-selector__search .gridicon {
+	position: absolute;
+	left: 0;
+	padding: 8px;
+}
+
+.post-selector__search input {
+	right: 0;
+	width: 100%;
+	height: 35px;
+	padding: 4px 8px 4px 30px;
+	border-width: 0;
+	border-bottom-width: 1px;
+	background: $white;
+	font-size: 14px;
+	-webkit-appearance: none;
+}
+
+.post-selector__results {
+	max-height: 300px;
+	overflow: hidden;
+	overflow-y: auto;
+	padding: 8px;
+
+	.post-selector.is-compact & {
+		padding: 0;
+		overflow: visible;
+	}
+}
 
 .post-selector .placeholder-text {
 	color: transparent;
@@ -16,15 +59,11 @@
 	font-size: 14px;
 }
 
-.post-selector__nested-list {
-	margin-left: 1em;
-}
-
-.post-selector__list-item {
-	padding: 2px 0;
+input[type=radio].post-selector__input,
+input[type=checkbox].post-selector__input {
+	margin-top: 4px;
 
-	input[type=radio] + label,
-	input[type=checkbox] + label {
+	& + label {
 		display: block;
 		margin-left: 24px;
 		transition: all 200ms ease-out;
@@ -34,8 +73,28 @@
 			color: $blue-medium;
 		}
 	}
+}
+
+input[type=checkbox].post-selector__input {
+	margin-right: 8px;
+}
+
+.post-selector__nested-list {
+	margin-left: 1em;
+}
+
+.post-selector__list-item {
+	padding: 2px 0;
+	font-size: 13px;
+}
+
+.post-selector__label {
+	display: block;
+	margin-left: 24px;
+	margin-top: 2px;
 
-	input[type=checkbox] {
-		margin-right: 8px;
+	.post-selector.is-compact & {
+		font-size: 14px;
+		margin-top: 0;
 	}
 }
diff --git a/client/post-editor/editor-page-parent/style.scss b/client/post-editor/editor-page-parent/style.scss
@@ -1,42 +1,13 @@
 .editor-page-parent .post-selector {
-	border: 1px solid lighten( $gray, 20% );
-	height: 186px;
-	padding: 8px;
-	overflow: hidden;
-	overflow-y: auto;
 	margin: 8px 0 0 0;
-
-	&.is-compact {
-		border: none;
-		height: auto;
-		padding: 0;
-		overflow: visible;
-
-		.post-selector__label {
-			font-size: 14px;
-			margin-top: 0;
-		}
-	}
-}
-
-.editor-page-parent .post-selector__search {
-	position: relative;
-	margin: -9px -9px 4px;
 }
 
-.editor-page-parent .post-selector__list-item {
-	padding: 2px 0;
-	font-size: 13px;
-}
-
-.editor-page-parent input[type=radio] {
-	margin-right: 8px
+.editor-page-parent .post-selector__results {
+	height: 186px;
 }
 
-.editor-page-parent .post-selector__label {
-	display: block;
-	margin-left: 24px;
-	margin-top: 2px;
+.editor-page-parent .post-selector.is-compact .post-selector__results {
+	height: auto;
 }
 
 .editor-page-parent__label-text {