borders for dropdowns

WordPress · Jan 2, 2020 · 2f5eab8 · 2f5eab8
1 parent ec2a66f
commit 2f5eab8
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 38 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
@@ -14,7 +14,6 @@ export default function BlockConvertButton( { shouldRender, onClick, small } ) {
 		<MenuItem
 			className="block-editor-block-settings-menu__control"
 			onClick={ onClick }
-			icon="screenoptions"
 		>
 			{ ! small && label }
 		</MenuItem>

diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -25,7 +25,6 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false,
 		<MenuItem
 			className="block-editor-block-settings-menu__control"
 			onClick={ onToggleMode }
-			icon="html"
 		>
 			{ ! small && label }
 		</MenuItem>

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -28,6 +28,7 @@ import __experimentalBlockSettingsMenuPluginsExtension from './block-settings-me
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
+	noArrow: true,
 };
 
 export function BlockSettingsMenu( { clientIds } ) {
@@ -62,6 +63,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 						label={ __( 'More options' ) }
 						className="block-editor-block-settings-menu"
 						popoverProps={ POPOVER_PROPS }
+						noIcons
 					>
 						{ ( { onClose } ) => (
 							<>
@@ -83,7 +85,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 										<MenuItem
 											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onDuplicate ) }
-											icon="admin-page"
 											shortcut={ shortcuts.duplicate }
 										>
 											{ __( 'Duplicate' ) }
@@ -94,15 +95,13 @@ export function BlockSettingsMenu( { clientIds } ) {
 											<MenuItem
 												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertBefore ) }
-												icon="insert-before"
 												shortcut={ shortcuts.insertBefore }
 											>
 												{ __( 'Insert Before' ) }
 											</MenuItem>
 											<MenuItem
 												className="block-editor-block-settings-menu__control"
 												onClick={ flow( onClose, onInsertAfter ) }
-												icon="insert-after"
 												shortcut={ shortcuts.insertAfter }
 											>
 												{ __( 'Insert After' ) }
@@ -124,7 +123,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 										<MenuItem
 											className="block-editor-block-settings-menu__control"
 											onClick={ flow( onClose, onRemove ) }
-											icon="trash"
 											shortcut={ shortcuts.remove }
 										>
 											{ _n( 'Remove Block', 'Remove Blocks', count ) }

diff --git a/packages/block-editor/src/components/block-settings-menu/style.scss b/packages/block-editor/src/components/block-settings-menu/style.scss
@@ -2,6 +2,10 @@
 	transform: rotate(90deg);
 }
 
+.block-editor-block-settings-menu__popover .components-popover__content {
+	margin-top: $grid-size;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
 	padding: 0;
 }
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -42,6 +42,7 @@ function DropdownMenu( {
 	// The following props exist for backward compatibility.
 	menuLabel,
 	position,
+	noIcons,
 } ) {
 	if ( menuLabel ) {
 		deprecated( '`menuLabel` prop in `DropdownComponent`', {
@@ -118,7 +119,10 @@ function DropdownMenu( {
 			renderContent={ ( props ) => {
 				const mergedMenuProps = mergeProps( {
 					'aria-label': menuLabel || label,
-					className: 'components-dropdown-menu__menu',
+					className: classnames(
+						'components-dropdown-menu__menu',
+						{ 'no-icons': noIcons }
+					),
 				}, menuProps );
 
 				return (

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -62,4 +62,30 @@
 			margin-right: 4px;
 		}
 	}
+
+	.components-menu-group {
+		padding: $grid-size-large;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: -$grid-size-large;
+		margin-right: -$grid-size-large;
+
+		&:first-child {
+			margin-top: -$grid-size-large;
+		}
+
+		&:last-child {
+			margin-bottom: -$grid-size-large;
+		}
+	}
+
+	.components-menu-group + .components-menu-group {
+		margin-top: 0;
+		border-top: $border-width solid $border-color;
+		padding: $grid-size-large;
+	}
+}
+
+.components-dropdown-menu__menu.no-icons  .components-menu-item__button.components-button {
+	padding: 0 $grid-size;
 }
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
@@ -1,11 +1,7 @@
-.components-menu-group {
-	width: 100%;
-}
-
 .components-menu-group + .components-menu-group {
 	margin-top: $grid-size;
 	padding-top: $grid-size;
-	border-top: $border-width solid $light-gray-500;
+	border-top: $border-width solid $border-color;
 }
 
 .components-menu-group__label {

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -29,7 +29,7 @@ $arrow-size: 8px;
 		margin-left: 2px;
 
 		&::before {
-			border: $arrow-size solid $light-gray-500;
+			border: $arrow-size solid $border-color;
 		}
 
 		&::after {
@@ -144,7 +144,7 @@ $arrow-size: 8px;
 
 .components-popover__content {
 	box-shadow: $shadow-popover;
-	border: $border-width solid $light-gray-500;
+	border: $border-width solid $border-color;
 	background: $white;
 	height: 100%;
 
@@ -161,7 +161,7 @@ $arrow-size: 8px;
 		overflow-y: visible;
 		min-width: auto;
 		border: none;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $border-color;
 	}
 
 	.components-popover[data-y-axis="top"] & {

diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
@@ -43,7 +43,6 @@ export function BlockInspectorButton( {
 					onClick();
 				}
 			} }
-			icon="admin-generic"
 			shortcut={ shortcut }
 		>
 			{ ! small && label }

diff --git a/packages/editor/src/components/convert-to-group-buttons/convert-button.js b/packages/editor/src/components/convert-to-group-buttons/convert-button.js
@@ -13,11 +13,6 @@ import { switchToBlockType } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { Group, Ungroup } from './icons';
-
 export function ConvertToGroupButton( {
 	onConvertToGroup,
 	onConvertFromGroup,
@@ -29,7 +24,6 @@ export function ConvertToGroupButton( {
 			{ isGroupable && (
 				<MenuItem
 					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
-					icon={ Group }
 					onClick={ onConvertToGroup }
 				>
 					{ _x( 'Group', 'verb' ) }
@@ -38,7 +32,6 @@ export function ConvertToGroupButton( {
 			{ isUngroupable && (
 				<MenuItem
 					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
-					icon={ Ungroup }
 					onClick={ onConvertFromGroup }
 				>
 					{ _x( 'Ungroup', 'Ungrouping blocks from within a Group block back into individual blocks within the Editor ' ) }

diff --git a/packages/editor/src/components/convert-to-group-buttons/icons.js b/packages/editor/src/components/convert-to-group-buttons/icons.js
diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
@@ -27,7 +27,6 @@ export function ReusableBlockConvertButton( {
 			{ ! isReusable && (
 				<MenuItem
 					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
-					icon="controls-repeat"
 					onClick={ onConvertToReusable }
 				>
 					{ __( 'Add to Reusable blocks' ) }
@@ -36,7 +35,6 @@ export function ReusableBlockConvertButton( {
 			{ isReusable && (
 				<MenuItem
 					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
-					icon="controls-repeat"
 					onClick={ onConvertToStatic }
 				>
 					{ __( 'Convert to Regular Block' ) }