Refactor PostVisibility to use Popover component

WordPress · Jul 27, 2017 · 9c459cc · 9c459cc
1 parent fcc62a3
commit 9c459cc
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 139 deletions.
diff --git a/components/popover/index.js b/components/popover/index.js
@@ -17,7 +17,7 @@ class Popover extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.bindNode = this.bindNode.bind( this );
+		this.bindContent = this.bindContent.bind( this );
 
 		this.state = {
 			forcedYAxis: null,
@@ -45,7 +45,7 @@ class Popover extends Component {
 	}
 
 	setForcedPositions() {
-		const rect = this.node.getBoundingClientRect();
+		const rect = this.content.getBoundingClientRect();
 
 		// Check exceeding top or bottom of viewport
 		if ( rect.top < 0 ) {
@@ -62,8 +62,8 @@ class Popover extends Component {
 		}
 	}
 
-	bindNode( node ) {
-		this.node = node;
+	bindContent( node ) {
+		this.content = node;
 	}
 
 	render() {
@@ -79,11 +79,10 @@ class Popover extends Component {
 		);
 
 		return (
-			<div
-				ref={ this.bindNode }
-				className={ classes }
-				tabIndex="0">
-				{ children }
+			<div className={ classes } tabIndex="0">
+				<div ref={ this.bindContent } className="components-popover__content">
+					{ children }
+				</div>
 			</div>
 		);
 	}

diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -1,26 +1,10 @@
 .components-popover {
-	box-shadow: $shadow-popover;
-	border: 1px solid $light-gray-500;
 	position: absolute;
-	background: $white;
 	z-index: z-index( ".components-popover" );
-	left: 0;
-	right: 0;
-
-	@include break-medium {
-		width: 300px;
-		left: -122px;
-		right: auto;
-		height: auto;
-	}
+	left: 50%;
 
 	&:before {
-		border: 10px dashed $light-gray-500;
-		display: none;
-
-		@include break-medium {
-			display: block;
-		}
+		border: 10px solid $light-gray-500;
 	}
 
 	&:after {
@@ -31,7 +15,6 @@
 	&:after {
 		content: "";
 		position: absolute;
-		left: 50%;
 		margin-left: -10px;
 		height: 0;
 		width: 0;
@@ -41,7 +24,8 @@
 	}
 
 	&.is-top {
-		bottom: 42px;
+		bottom: 100%;
+		margin-bottom: 10px;
 
 		&:before {
 			bottom: -10px;
@@ -59,11 +43,8 @@
 	}
 
 	&.is-bottom {
-		top: $admin-bar-height-big + $item-spacing -1px;
-
-		@include break-medium {
-			top: $admin-bar-height + $item-spacing;
-		}
+		top: 100%;
+		margin-top: 10px;
 
 		&:before {
 			top: -10px;
@@ -79,24 +60,41 @@
 			border-top: none;
 		}
 	}
+}
 
-	&.is-right {
-		left: -32px;
+.components-popover__content {
+	position: absolute;
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
+	width: calc( 100vw - 20px );
 
-		&:before,
-		&:after {
-			left: 49px;
-		}
+	@include break-medium {
+		width: 300px;
 	}
 
-	&.is-left {
-		left: auto;
-		right: -42px;
+	.components-popover.is-top & {
+		bottom: 100%;
+	}
 
-		&:before,
-		&:after {
-			left: auto;
-			right: 49px;
-		}
+	.components-popover.is-bottom & {
+		top: 100%;
+	}
+
+	.components-popover.is-center & {
+		left: 50%;
+		transform: translateX( -50% );
+	}
+
+	.components-popover.is-right & {
+		position: absolute;
+		left: 100%;
+		margin-left: -24px;
+	}
+
+	.components-popover.is-left & {
+		position: absolute;
+		right: 100%;
+		margin-right: -24px;
 	}
 }
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -16,7 +16,6 @@ $z-layers: (
 	'.components-panel__header': 1,
 	'.editor-block-mover': 10,
 	'.editor-header': 20,
-	'.editor-post-visibility__dialog': 30,
 	'.editor-post-schedule__dialog': 30,
 
 	// Show drop zone above most standard content, but below any overlays

diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
@@ -28,6 +28,24 @@
 	}
 }
 
+@media ( max-width: $break-mobile ) {
+	.editor-tools .editor-inserter .components-popover {
+		margin-top: 0;
+
+		&:before,
+		&:after {
+			display: none;
+		}
+	}
+
+	.editor-tools .editor-inserter .components-popover__content {
+		width: 100vw;
+		left: 0;
+		right: 0;
+		margin: 0;
+	}
+}
+
 .editor-tools__tabs {
 	margin: 0 $item-spacing;
 	padding: 0;

diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js
@@ -10,7 +10,7 @@ import { find } from 'lodash';
  */
 import { __ } from 'i18n';
 import { Component } from 'element';
-import { PanelRow, withInstanceId } from 'components';
+import { PanelRow, Popover, withInstanceId } from 'components';
 
 /**
  * Internal Dependencies
@@ -106,64 +106,65 @@ class PostVisibility extends Component {
 		return (
 			<PanelRow className="editor-post-visibility">
 				<span>{ __( 'Visibility' ) }</span>
-				<button
-					type="button"
-					aria-expanded={ this.state.opened }
-					className="editor-post-visibility__toggle button-link"
-					onClick={ this.toggleDialog }
-				>
-					{ getVisibilityLabel( visibility ) }
-				</button>
-
-				{ this.state.opened &&
-					<div className="editor-post-visibility__dialog">
-						<div className="editor-post-visibility__dialog-arrow" />
-						<fieldset>
-							<legend className="editor-post-visibility__dialog-legend">
-								{ __( 'Post Visibility' ) }
-							</legend>
-							{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
-								<div key={ value } className="editor-post-visibility__choice">
-									<input
-										type="radio"
-										name={ `editor-post-visibility__setting-${ instanceId }` }
-										value={ value }
-										onChange={ onSelect }
-										checked={ checked }
-										id={ `editor-post-${ value }-${ instanceId }` }
-										aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-										className="editor-post-visibility__dialog-radio"
-									/>
+				<span className="editor-post-visibility__button-wrapper">
+					<button
+						type="button"
+						aria-expanded={ this.state.opened }
+						className="editor-post-visibility__toggle button-link"
+						onClick={ this.toggleDialog }
+					>
+						{ getVisibilityLabel( visibility ) }
+					</button>
+
+					{ this.state.opened &&
+						<Popover position="bottom left" className="editor-post-visibility__dialog">
+							<fieldset>
+								<legend className="editor-post-visibility__dialog-legend">
+									{ __( 'Post Visibility' ) }
+								</legend>
+								{ visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => (
+									<div key={ value } className="editor-post-visibility__choice">
+										<input
+											type="radio"
+											name={ `editor-post-visibility__setting-${ instanceId }` }
+											value={ value }
+											onChange={ onSelect }
+											checked={ checked }
+											id={ `editor-post-${ value }-${ instanceId }` }
+											aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+											className="editor-post-visibility__dialog-radio"
+										/>
+										<label
+											htmlFor={ `editor-post-${ value }-${ instanceId }` }
+											className="editor-post-visibility__dialog-label"
+										>
+											{ label }
+										</label>
+										{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
+									</div>
+								) ) }
+							</fieldset>
+							{ this.state.hasPassword &&
+								<div className="editor-post-visibility__dialog-password">
 									<label
-										htmlFor={ `editor-post-${ value }-${ instanceId }` }
-										className="editor-post-visibility__dialog-label"
+										htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
+										className="screen-reader-text"
 									>
-										{ label }
+										{ __( 'Create password' ) }
 									</label>
-									{ <p id={ `editor-post-${ value }-${ instanceId }-description` } className="editor-post-visibility__dialog-info">{ info }</p> }
+									<input
+										className="editor-post-visibility__dialog-password-input"
+										id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
+										type="text"
+										onChange={ updatePassword }
+										value={ password }
+										placeholder={ __( 'Use a secure password' ) }
+									/>
 								</div>
-							) ) }
-						</fieldset>
-						{ this.state.hasPassword &&
-							<div className="editor-post-visibility__dialog-password">
-								<label
-									htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-									className="screen-reader-text"
-								>
-									{ __( 'Create password' ) }
-								</label>
-								<input
-									className="editor-post-visibility__dialog-password-input"
-									id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-									type="text"
-									onChange={ updatePassword }
-									value={ password }
-									placeholder={ __( 'Use a secure password' ) }
-								/>
-							</div>
-						}
-					</div>
-				}
+							}
+						</Popover>
+					}
+				</span>
 			</PanelRow>
 		);
 		/* eslint-enable jsx-a11y/label-has-for */

diff --git a/editor/sidebar/post-visibility/style.scss b/editor/sidebar/post-visibility/style.scss
@@ -1,5 +1,8 @@
 .editor-post-visibility {
 	width: 100%;
+}
+
+.editor-post-visibility__button-wrapper {
 	position: relative;
 }
 
@@ -16,43 +19,12 @@
 	}
 }
 
-.editor-post-visibility__dialog {
-	position: absolute;
-	top: 30px;
-	right: 0;
-	box-shadow: $shadow-popover;
-	border: 1px solid $light-gray-500;
-	background: $white;
+.editor-post-visibility__dialog .components-popover__content {
 	padding: 10px;
-	min-width: 240px;
-	z-index: z-index( '.editor-post-visibility__dialog' );
-}
-
-.editor-post-visibility__dialog-arrow {
-	position: absolute;
-	border: 10px dashed $light-gray-500;
-	height: 0;
-	width: 0;
-	line-height: 0;
-	top: -10px;
-	right: 5px;
-	margin-left: -10px;
-	border-bottom-style: solid;
-	border-top: none;
-	border-left-color: transparent;
-	border-right-color: transparent;
 
-	&:before {
-		top: 2px;
-		border: 10px solid $white;
-		content: " ";
-		position: absolute;
-		left: 50%;
-		margin-left: -10px;
-		border-bottom-style: solid;
-		border-top: none;
-		border-left-color: transparent;
-		border-right-color: transparent;
+	@include break-medium {
+		// 279px (sidebar width) - 20px (padding) - 2px (horizontal borders)
+		width: 257px;
 	}
 }