URL Input: Use Popover instead of custom positionning and custom moda…

…ls (#6911) * URL Input: Use Popover instead of custom positionning and custom modals * Remove the link offset * Force popover rerender when we click on another link * URL Input: Inheritwq focus style * Use the selectedNodeId instead of another popoverId
WordPress · May 24, 2018 · 5ebefc3 · 5ebefc3
1 parent 9a7bbe6
commit 5ebefc3
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 147 deletions.
diff --git a/components/popover/index.js b/components/popover/index.js
@@ -190,6 +190,7 @@ class Popover extends Component {
 			children,
 			className,
 			onClickOutside = onClose,
+			noArrow = false,
 			// Disable reason: We generate the `...contentProps` rest as remainder
 			// of props which aren't explicitly handled by this component.
 			/* eslint-disable no-unused-vars */
@@ -219,6 +220,7 @@ class Popover extends Component {
 			'is-' + xAxis,
 			{
 				'is-mobile': isMobile,
+				'no-arrow': noArrow,
 			}
 		);
 

diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -1,3 +1,5 @@
+$arrow-size: 8px;
+
 .components-popover {
 	position: fixed;
 	z-index: z-index( ".components-popover" );
@@ -10,15 +12,15 @@
 		bottom: 0;
 	}
 
-	&:not(.is-mobile) {
+	&:not(.no-arrow):not(.is-mobile) {
 		margin-left: 2px;
 
 		&:before {
-			border: 8px solid $light-gray-500;
+			border: $arrow-size solid $light-gray-500;
 		}
 
 		&:after {
-			border: 8px solid $white;
+			border: $arrow-size solid $white;
 		}
 
 		&:before,
@@ -34,11 +36,10 @@
 		}
 
 		&.is-top {
-			bottom: 100%;
-			margin-top: -8px;
+			margin-top: - $arrow-size;
 
 			&:before {
-				bottom: -8px;
+				bottom: - $arrow-size;
 			}
 
 			&:after {
@@ -53,12 +54,10 @@
 		}
 
 		&.is-bottom {
-			top: 100%;
 			margin-top: 8px;
-			z-index: z-index( ".components-popover.is-bottom" );
 
 			&:before {
-				top: -8px;
+				top: -$arrow-size;
 			}
 
 			&:after {
@@ -72,6 +71,17 @@
 			}
 		}
 	}
+
+	&:not(.is-mobile) {
+		&.is-top {
+			bottom: 100%;
+		}
+
+		&.is-bottom {
+			top: 100%;
+			z-index: z-index( ".components-popover.is-bottom" );
+		}
+	}
 }
 
 .components-popover__content {

diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
@@ -98,7 +98,7 @@
 	}
 }
 
-.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-format-toolbar__link-modal {
+.editor-block-list__block[data-type="core/image"] .editor-block-toolbar .editor-url-input__button-modal {
 	position: absolute;
 	left: 0;
 	right: 0;

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -20,8 +20,6 @@ $z-layers: (
 	'.editor-block-switcher__menu': 5,
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
-	'.editor-format-toolbar__link-modal': 81, // should appear above block controls
-	'.editor-format-toolbar__link-container': 81, // link suggestions should also
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,

diff --git a/edit-post/assets/stylesheets/main.scss b/edit-post/assets/stylesheets/main.scss
@@ -121,7 +121,8 @@ body.gutenberg-editor-page {
 // @todo submit as upstream patch as well
 .edit-post-sidebar,
 .editor-post-publish-panel,
-.editor-block-list__block {
+.editor-block-list__block,
+.components-popover {
 	.input-control, // upstream name is .regular-text
 	input[type=text],
 	input[type=search],

diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js
@@ -9,6 +9,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	withSpokenMessages,
+	Popover,
 } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
 import { prependHTTP } from '@wordpress/url';
@@ -166,7 +167,7 @@ class FormatToolbar extends Component {
 	}
 
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
+		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
 		const { linkValue, settingsVisible, opensInNewWindow } = this.state;
 		const isAddingLink = formats.link && formats.link.isAdding;
 
@@ -208,58 +209,64 @@ class FormatToolbar extends Component {
 				{ ( isAddingLink || formats.link ) && (
 					<Fill name="RichText.Siblings">
 						<div className="editor-format-toolbar__link-container" style={ { ...focusPosition } }>
-							{ isAddingLink && (
+							<Popover
+								position="bottom center"
+								focusOnMount={ !! isAddingLink }
+								key={ selectedNodeId /* Used to force rerender on change */ }
+							>
+								{ isAddingLink && (
 								// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-								<form
-									className="editor-format-toolbar__link-modal"
-									onKeyPress={ stopKeyPropagation }
-									onKeyDown={ this.onKeyDown }
-									onSubmit={ this.submitLink }>
-									<div className="editor-format-toolbar__link-modal-line">
-										<UrlInput value={ linkValue } onChange={ this.onChangeLinkValue } />
-										<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
-										<IconButton
-											className="editor-format-toolbar__link-settings-toggle"
-											icon="ellipsis"
-											label={ __( 'Link Settings' ) }
-											onClick={ this.toggleLinkSettingsVisibility }
-											aria-expanded={ settingsVisible }
-										/>
-									</div>
-									{ linkSettings }
-								</form>
+									<form
+										className="editor-format-toolbar__link-modal"
+										onKeyPress={ stopKeyPropagation }
+										onKeyDown={ this.onKeyDown }
+										onSubmit={ this.submitLink }>
+										<div className="editor-format-toolbar__link-modal-line">
+											<UrlInput value={ linkValue } onChange={ this.onChangeLinkValue } />
+											<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+											<IconButton
+												className="editor-format-toolbar__link-settings-toggle"
+												icon="ellipsis"
+												label={ __( 'Link Settings' ) }
+												onClick={ this.toggleLinkSettingsVisibility }
+												aria-expanded={ settingsVisible }
+											/>
+										</div>
+										{ linkSettings }
+									</form>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-							) }
+								) }
 
-							{ formats.link && ! isAddingLink && (
+								{ formats.link && ! isAddingLink && (
 								// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
 								/* eslint-disable jsx-a11y/no-static-element-interactions */
-								<div
-									className="editor-format-toolbar__link-modal"
-									onKeyPress={ stopKeyPropagation }
-								>
-									<div className="editor-format-toolbar__link-modal-line">
-										<a
-											className="editor-format-toolbar__link-value"
-											href={ formats.link.value }
-											target="_blank"
-										>
-											{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
-										</a>
-										<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
-										<IconButton
-											className="editor-format-toolbar__link-settings-toggle"
-											icon="ellipsis"
-											label={ __( 'Link Settings' ) }
-											onClick={ this.toggleLinkSettingsVisibility }
-											aria-expanded={ settingsVisible }
-										/>
+									<div
+										className="editor-format-toolbar__link-modal"
+										onKeyPress={ stopKeyPropagation }
+									>
+										<div className="editor-format-toolbar__link-modal-line">
+											<a
+												className="editor-format-toolbar__link-value"
+												href={ formats.link.value }
+												target="_blank"
+											>
+												{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
+											</a>
+											<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
+											<IconButton
+												className="editor-format-toolbar__link-settings-toggle"
+												icon="ellipsis"
+												label={ __( 'Link Settings' ) }
+												onClick={ this.toggleLinkSettingsVisibility }
+												aria-expanded={ settingsVisible }
+											/>
+										</div>
+										{ linkSettings }
 									</div>
-									{ linkSettings }
-								</div>
 								/* eslint-enable jsx-a11y/no-static-element-interactions */
-							) }
+								) }
+							</Popover>
 						</div>
 					</Fill>
 				) }

diff --git a/editor/components/rich-text/format-toolbar/style.scss b/editor/components/rich-text/format-toolbar/style.scss
@@ -2,36 +2,14 @@
 	display: inline-flex;
 }
 
-.editor-format-toolbar__link-modal {
-	position: relative;
-	box-shadow: $shadow-popover;
-	border: 1px solid $light-gray-500;
-	background: $white;
-	display: flex;
-	flex-direction: column;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
-	z-index: z-index( '.editor-format-toolbar__link-modal' );
-
-	.edit-post-header-toolbar__block-toolbar & {
-		position: absolute;
-		left: 0;
-		right: 0;
-	}
-}
-
 .editor-format-toolbar__link-container {
 	position: absolute;
 	transform: translateX( -50% );
-	z-index: z-index( '.editor-format-toolbar__link-container' );
 }
 
 .editor-format-toolbar__link-modal-line {
 	display: flex;
 	flex-direction: row;
-	flex-grow: 1;
-	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
 
@@ -40,6 +18,10 @@
 		width: $icon-button-size;
 		height: $icon-button-size;
 	}
+
+	.editor-url-input {
+		flex-grow: 1;
+	}
 }
 
 .editor-format-toolbar__link-settings-toggle .dashicon {

diff --git a/editor/components/rich-text/index.js b/editor/components/rich-text/index.js
@@ -446,11 +446,10 @@ export class RichText extends Component {
 	getFocusPosition( position ) {
 		// The container is relatively positioned.
 		const containerPosition = this.containerRef.current.getBoundingClientRect();
-		const toolbarOffset = { top: 10, left: 0 };
 
 		return {
-			top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top,
-			left: position.left - containerPosition.left + ( position.width / 2 ) + toolbarOffset.left,
+			top: position.top - containerPosition.top + position.height,
+			left: position.left - containerPosition.left + ( position.width / 2 ),
 		};
 	}
 

diff --git a/editor/components/url-input/button.js b/editor/components/url-input/button.js
@@ -52,9 +52,10 @@ class UrlInputButton extends Component {
 				/>
 				{ expanded &&
 					<form
-						className="editor-format-toolbar__link-modal"
-						onSubmit={ this.submitLink }>
-						<div className="editor-format-toolbar__link-modal-line">
+						className="editor-url-input__button-modal"
+						onSubmit={ this.submitLink }
+					>
+						<div className="editor-url-input__button-modal-line">
 							<IconButton
 								className="editor-url-input__back"
 								icon="arrow-left-alt"