Fix dark menus in canvas, not in top toolbar (#22516)

* Fix matrix popover style. * Fix for replace flow. * Fix alignment toolbars. * Update snapshots.
WordPress · Jun 8, 2020 · 8a6171f · 8a6171f · alita-moore · Jun 13, 2020
1 parent bc51ec1
commit 8a6171f
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js b/packages/block-editor/src/components/block-alignment-matrix-toolbar/index.js
@@ -24,12 +24,13 @@ export function BlockAlignmentMatrixToolbar( props ) {
 	const icon = <AlignmentMatrixControl.Icon value={ value } />;
 	const className = 'block-editor-block-alignment-matrix-toolbar';
 	const popoverClassName = `${ className }__popover`;
+	const isAlternate = true;
 
 	return (
 		<Dropdown
 			position="bottom right"
 			className={ className }
-			popoverProps={ { className: popoverClassName } }
+			popoverProps={ { className: popoverClassName, isAlternate } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -40,6 +40,10 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
 const DEFAULT_CONTROL = 'center';
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
+const POPOVER_PROPS = {
+	isAlternate: true,
+};
+
 export function BlockAlignmentToolbar( {
 	value,
 	onChange,
@@ -63,6 +67,7 @@ export function BlockAlignmentToolbar( {
 
 	return (
 		<ToolbarGroup
+			popoverProps={ POPOVER_PROPS }
 			isCollapsed={ isCollapsed }
 			icon={
 				activeAlignmentControl

diff --git a/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -60,5 +60,10 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
   }
   isCollapsed={true}
   label="Change alignment"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
@@ -33,6 +33,10 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
+const POPOVER_PROPS = {
+	isAlternate: true,
+};
+
 export function BlockVerticalAlignmentToolbar( {
 	value,
 	onChange,
@@ -49,6 +53,7 @@ export function BlockVerticalAlignmentToolbar( {
 
 	return (
 		<ToolbarGroup
+			popoverProps={ POPOVER_PROPS }
 			isCollapsed={ isCollapsed }
 			icon={
 				activeAlignment

diff --git a/...k-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/...k-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -60,5 +60,10 @@ exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = `
   }
   isCollapsed={true}
   label="Change vertical alignment"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+    }
+  }
 />
 `;
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -105,8 +105,13 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
+	const POPOVER_PROPS = {
+		isAlternate: true,
+	};
+
 	return (
 		<Dropdown
+			popoverProps={ POPOVER_PROPS }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarGroup className="media-replace-flow">

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
@@ -103,7 +103,6 @@ class Dropdown extends Component {
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
 						focusOnMount={ focusOnMount }
-						isAlternate
 						{ ...popoverProps }
 						className={ classnames(
 							'components-dropdown__content',