Inserter: Move "Saved" blocks to the bottom and show icon (#7021)

* Add support for rendering an icon in component-panel title. * Inserter: move "saved" blocks to the bottom and display icon. * Update snapshots.
WordPress · May 31, 2018 · 02c9edb · 02c9edb
1 parent c591184
commit 02c9edb
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 18 deletions.
diff --git a/components/panel/body.js b/components/panel/body.js
@@ -37,9 +37,9 @@ class PanelBody extends Component {
 	}
 
 	render() {
-		const { title, children, opened, className } = this.props;
+		const { title, children, opened, className, icon } = this.props;
 		const isOpened = opened === undefined ? this.state.opened : opened;
-		const icon = `arrow-${ isOpened ? 'up' : 'down' }`;
+		const arrow = `arrow-${ isOpened ? 'up' : 'down' }`;
 		const classes = classnames( 'components-panel__body', className, { 'is-opened': isOpened } );
 
 		return (
@@ -51,7 +51,8 @@ class PanelBody extends Component {
 							onClick={ this.toggle }
 							aria-expanded={ isOpened }
 						>
-							<Dashicon icon={ icon } />
+							<Dashicon icon={ arrow } className="components-panel__arrow" />
+							{ icon && <Dashicon icon={ icon } className="components-panel__icon" /> }
 							{ title }
 						</Button>
 					</h2>

diff --git a/components/panel/style.scss b/components/panel/style.scss
@@ -80,7 +80,7 @@
 		@include menu-style__focus;
 	}
 
-	.dashicon {
+	.components-panel__arrow {
 		position: absolute;
 		right: $item-spacing;
 		top: 50%;
@@ -98,6 +98,13 @@
 	/* rtl:end:ignore */
 }
 
+.components-panel__icon {
+	color: $dark-gray-400;
+	margin-right: 5px;
+	position: relative;
+	top: -2px;
+}
+
 .components-panel__body-toggle-icon {
 	margin-right: -5px;
 }

diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -26,11 +26,12 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
             type="button"
           >
             <Dashicon
+              className="components-panel__arrow"
               icon="arrow-up"
             >
               <svg
                 aria-hidden={true}
-                className="dashicon dashicons-arrow-up"
+                className="dashicon dashicons-arrow-up components-panel__arrow"
                 focusable="false"
                 height={20}
                 role="img"

diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -26,11 +26,12 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
             type="button"
           >
             <Dashicon
+              className="components-panel__arrow"
               icon="arrow-up"
             >
               <svg
                 aria-hidden={true}
-                className="dashicon dashicons-arrow-up"
+                className="dashicon dashicons-arrow-up components-panel__arrow"
                 focusable="false"
                 height={20}
                 role="img"

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -185,17 +185,6 @@ export class InserterMenu extends Component {
 							<ItemList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
 						</PanelBody>
 					}
-
-					{ !! sharedItems.length && (
-						<PanelBody
-							title={ __( 'Shared' ) }
-							opened={ isPanelOpen( 'shared' ) }
-							onToggle={ this.onTogglePanel( 'shared' ) }
-						>
-							<ItemList items={ sharedItems } onSelect={ onSelect } onHover={ this.onHover } />
-						</PanelBody>
-					) }
-
 					{ map( getCategories(), ( category ) => {
 						const categoryItems = itemsPerCategory[ category.slug ];
 						if ( ! categoryItems || ! categoryItems.length ) {
@@ -212,7 +201,16 @@ export class InserterMenu extends Component {
 							</PanelBody>
 						);
 					} ) }
-
+					{ !! sharedItems.length && (
+						<PanelBody
+							title={ __( 'Shared' ) }
+							opened={ isPanelOpen( 'shared' ) }
+							onToggle={ this.onTogglePanel( 'shared' ) }
+							icon="controls-repeat"
+						>
+							<ItemList items={ sharedItems } onSelect={ onSelect } onHover={ this.onHover } />
+						</PanelBody>
+					) }
 					{ isEmpty( suggestedItems ) && isEmpty( sharedItems ) && isEmpty( itemsPerCategory ) && (
 						<p className="editor-inserter__no-results">{ __( 'No blocks found.' ) }</p>
 					) }