First pass at making tips collapsible

Adds isCollapsible to DotTip so as to support collapsible tips. These
are tips that only show the indicator dot. When the indicator dot is
clicked, the tip opens like normal.

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -30,9 +30,9 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
 			aria-label={ toolbarAriaLabel }
 		>
 			<FullscreenModeClose />
-			<div>
+			<div className="edit-post-header-toolbar__inserter-button-wrapper">
 				<Inserter disabled={ mode !== 'visual' } position="bottom right" />
-				<DotTip tipId="core/editor.inserter">
+				<DotTip tipId="core/editor.inserter" isCollapsible>
 					{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more!' ) }
 				</DotTip>
 			</div>

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -22,6 +22,11 @@
 	}
 }
 
+.edit-post-header-toolbar__inserter-button-wrapper {
+	display: flex;
+	align-items: center;
+}
+
 // Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
 	// Stack toolbar below Editor Bar.

packages/edit-post/src/components/header/index.js

@@ -50,7 +50,7 @@ function Header( {
 						forceIsDirty={ hasActiveMetaboxes }
 						forceIsSaving={ isSaving }
 					/>
-					<div>
+					<div className="edit-post-header__settings-button-wrapper">
 						<IconButton
 							icon="admin-generic"
 							label={ __( 'Settings' ) }
@@ -59,7 +59,11 @@ function Header( {
 							aria-expanded={ isEditorSidebarOpened }
 							shortcut={ shortcuts.toggleSidebar }
 						/>
-						<DotTip tipId="core/editor.settings">
+						<DotTip
+							tipId="core/editor.settings"
+							isCollapsible
+							className="edit-post-header__settings-button-tip"
+						>
 							{ __( 'You’ll find more settings for your page and blocks in the sidebar. Click “Settings” to open it.' ) }
 						</DotTip>
 					</div>

packages/edit-post/src/components/header/style.scss

@@ -63,11 +63,21 @@
 
 @include editor-left(".edit-post-header");
 
-.edit-post-header__settings {
+.edit-post-header__settings,
+.edit-post-header__settings-button-wrapper {
 	display: inline-flex;
 	align-items: center;
 }
 
+.edit-post-header__settings-button-wrapper {
+	position: relative;
+}
+
+.edit-post-header__settings-button-tip {
+	left: -17px;
+	position: absolute;
+}
+
 .edit-post-header .components-button {
 	// Header toggle buttons.
 	&.is-toggled {

packages/edit-post/src/index.js

@@ -7,7 +7,6 @@ import '@wordpress/nux';
 import '@wordpress/viewport';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
-import { dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -56,13 +55,6 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 
 	registerCoreBlocks();
 
-	dispatch( 'core/nux' ).triggerGuide( [
-		'core/editor.inserter',
-		'core/editor.settings',
-		'core/editor.preview',
-		'core/editor.publish',
-	] );
-
 	render(
 		<Editor settings={ settings } onError={ reboot } postId={ postId } postType={ postType } overridePost={ overridePost } />,
 		target

packages/editor/src/components/post-preview-button/index.js

@@ -167,7 +167,11 @@ export class PostPreviewButton extends Component {
 				disabled={ ! isSaveable }
 			>
 				{ _x( 'Preview', 'imperative verb' ) }
-				<DotTip tipId="core/editor.preview">
+				<DotTip
+					tipId="core/editor.preview"
+					isCollapsible
+					className="editor-post-preview__tip"
+				>
 					{ __( 'Click “Preview” to load a preview of this page, so you can make sure you’re happy with your blocks.' ) }
 				</DotTip>
 			</Button>

packages/editor/src/components/post-preview-button/style.scss

@@ -0,0 +1,10 @@
+.editor-post-preview {
+	align-items: center;
+	display: flex;
+	position: relative;
+}
+
+.editor-post-preview__tip {
+	left: -17px;
+	position: absolute;
+}

packages/editor/src/components/post-publish-panel/style.scss

@@ -40,6 +40,15 @@
 	padding: 16px;
 }
 
+.editor-post-publish-panel__toggle {
+	position: relative;
+}
+
+.editor-post-publish-panel__toggle-tip {
+	left: -17px;
+	position: absolute;
+}
+
 .components-button.editor-post-publish-panel__toggle.is-primary {
 	display: inline-flex;
 	align-items: center;

packages/editor/src/components/post-publish-panel/toggle.js

@@ -31,7 +31,11 @@ export function PostPublishPanelToggle( {
 			isBusy={ isSaving && isPublished }
 		>
 			{ isBeingScheduled ? __( 'Schedule…' ) : __( 'Publish…' ) }
-			<DotTip tipId="core/editor.publish">
+			<DotTip
+				tipId="core/editor.publish"
+				isCollapsible
+				className="editor-post-publish-panel__toggle-tip"
+			>
 				{ __( 'Finished writing? That’s great, let’s get this published right now. Just click “Publish” and you’re good to go.' ) }
 			</DotTip>
 		</Button>

packages/editor/src/style.scss

@@ -32,6 +32,7 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-permalink/style.scss";
+@import "./components/post-preview-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-taxonomies/style.scss";

packages/nux/CHANGELOG.md

@@ -1,8 +1,18 @@
+## 3.0.0 (Unreleased)
+
+### New Features
+
+- `DotTip`s can now be made collapsible using the `isCollapsible` prop.
+
+### Breaking Changes
+
+- `DotTip` will no longer automatically position its indicator next to the parent component. Instead, users of `DotTip` should manually position the indicator by applying a `className` or styling `.nux-dot-tip`.
+
 ## 2.0.7 (2018-10-29)
 
 ### Deprecations
 
-- The id prop of DotTip has been deprecated. Please use the tipId prop instead.
+- The `id` prop of `DotTip` has been deprecated. Please use the `tipId` prop instead.
 
 ## 2.0.6 (2018-10-22)
 
@@ -12,6 +22,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 - Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).  If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.

packages/nux/src/components/dot-tip/index.js

@@ -1,61 +1,99 @@
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { Popover, Button, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { deprecated } from '@wordpress/deprecated';
 
-function getAnchorRect( anchor ) {
-	// The default getAnchorRect() excludes an element's top and bottom padding
-	// from its calculation. We want tips to point to the outer margin of an
-	// element, so we override getAnchorRect() to include all padding.
-	return anchor.parentNode.getBoundingClientRect();
-}
-
-function onClick( event ) {
+function stopEventPropagation( event ) {
 	// Tips are often nested within buttons. We stop propagation so that clicking
 	// on a tip doesn't result in the button being clicked.
 	event.stopPropagation();
 }
 
-export function DotTip( {
-	children,
-	isVisible,
-	hasNextTip,
-	onDismiss,
-	onDisable,
-} ) {
-	if ( ! isVisible ) {
-		return null;
+class DotTip extends Component {
+	constructor( { isCollapsible } ) {
+		super( ...arguments );
+
+		this.toggleIsOpen = this.toggleIsOpen.bind( this );
+
+		this.state = {
+			isOpen: ! isCollapsible,
+		};
+	}
+
+	toggleIsOpen( event ) {
+		stopEventPropagation( event );
+
+		if ( this.props.isCollapsible ) {
+			this.setState( { isOpen: ! this.state.isOpen } );
+		}
 	}
 
-	return (
-		<Popover
-			className="nux-dot-tip"
-			position="middle right"
-			noArrow
-			focusOnMount="container"
-			getAnchorRect={ getAnchorRect }
-			role="dialog"
-			aria-label={ __( 'Gutenberg tips' ) }
-			onClick={ onClick }
-		>
-			<p>{ children }</p>
-			<p>
-				<Button isLink onClick={ onDismiss }>
-					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
-				</Button>
-			</p>
-			<IconButton
-				className="nux-dot-tip__disable"
-				icon="no-alt"
-				label={ __( 'Disable tips' ) }
-				onClick={ onDisable }
-			/>
-		</Popover>
-	);
+	render() {
+		const {
+			children,
+			className,
+			hasNextTip,
+			isCollapsible,
+			isVisible,
+			onDisable,
+			onDismiss,
+		} = this.props;
+		const { isOpen } = this.state;
+
+		if ( ! isVisible ) {
+			return null;
+		}
+
+		let classes = 'nux-dot-tip';
+		if ( className ) {
+			classes += ` ${ className }`;
+		}
+
+		let popover = null;
+		if ( isOpen ) {
+			popover = (
+				<Popover
+					className="nux-dot-tip__popover"
+					position="middle right"
+					noArrow
+					focusOnMount="container"
+					role="dialog"
+					aria-label={ __( 'Gutenberg tips' ) }
+					onClick={ stopEventPropagation }
+				>
+					<p>{ children }</p>
+					<p>
+						<Button isLink onClick={ onDismiss }>
+							{ hasNextTip ? __( 'See next tip' ) : __( 'Dismiss tip' ) }
+						</Button>
+					</p>
+					<IconButton
+						className="nux-dot-tip__disable"
+						icon="no-alt"
+						label={ __( 'Disable tips' ) }
+						onClick={ onDisable }
+					/>
+				</Popover>
+			);
+		}
+
+		return isCollapsible ? (
+			<button
+				className={ classes }
+				aria-label={ isOpen ? __( 'Close tip' ) : __( 'Open tip' ) }
+				onClick={ this.toggleIsOpen }
+			>
+				{ popover }
+			</button>
+		) : (
+			<div className={ classes }>{ popover }</div>
+		);
+	}
 }
 
 export default compose(
@@ -85,5 +123,5 @@ export default compose(
 				disableTips();
 			},
 		};
-	} ),
+	} )
 )( DotTip );