Inserter: Fix Inserter styles broken after rebase

WordPress · Nov 22, 2017 · 6ebaa82 · 6ebaa82
1 parent 151066f
commit 6ebaa82
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/components/tab-panel/index.js b/components/tab-panel/index.js
@@ -64,12 +64,12 @@ class TabPanel extends Component {
 		const selectedId = instanceId + '-' + selectedTab.name;
 
 		return (
-			<div>
+			<div className={ className }>
 				<NavigableMenu
 					role="tablist"
 					orientation={ orientation }
 					onNavigate={ this.onNavigate }
-					className={ className }
+					className="components-tab-panel__tabs"
 				>
 					{ tabs.map( ( tab ) => (
 						<TabButton className={ `${ tab.className } ${ tab.name === selected ? activeClass : '' }` }
@@ -87,6 +87,7 @@ class TabPanel extends Component {
 					<div aria-labelledby={ selectedId }
 						role="tabpanel"
 						id={ selectedId + '-view' }
+						className="components-tab-panel__tab-content"
 					>
 						{ this.props.children( selectedTab.name ) }
 					</div>

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -298,15 +298,14 @@ export class InserterMenu extends Component {
 						] }
 					>
 						{ ( tabKey ) => (
-							<div ref={ ( ref ) => this.tabContainer = ref }
-								className="editor-inserter__content">
+							<div ref={ ( ref ) => this.tabContainer = ref }>
 								{ this.renderTabView( tabKey ) }
 							</div>
 						) }
 					</TabPanel>
 				}
 				{ isSearching &&
-					<div role="menu" className="editor-inserter__content">
+					<div role="menu" className="editor-inserter__search-results">
 						{ this.renderCategories( this.getVisibleBlocksByCategory( getBlockTypes() ) ) }
 					</div>
 				}

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -27,13 +27,6 @@
 	}
 }
 
-.editor-inserter__content {
-	flex-grow: 1;
-
-	overflow: auto;
-	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );
-}
-
 input[type="search"].editor-inserter__search {
 	display: block;
 	width: 100%;
@@ -117,14 +110,32 @@ input[type="search"].editor-inserter__search {
 	margin-top: -1px;	// hide the first top border
 }
 
+.editor-inserter__search-results {
+	flex-grow: 1;
+	overflow: auto;
+}
+
 .editor-inserter__tabs {
-	width: 100%;
 	display: flex;
-	justify-content: space-between;
-	position: relative;
-	background: $light-gray-300;
-	border-bottom: 1px solid $light-gray-500;
-	flex-shrink: 0;
+	flex-direction: column;
+	height: 100%;
+	flex-grow: 1;
+	box-shadow: inset 0 -5px 5px -4px rgba( $dark-gray-900, .1 );
+	overflow: hidden;
+
+	.components-tab-panel__tab-content {
+		overflow: auto;
+	}
+
+	.components-tab-panel__tabs {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+		background: $light-gray-300;
+		border-bottom: 1px solid $light-gray-500;
+		flex-shrink: 0;
+	}
 }
 
 .editor-inserter__tab {