From 2f5eab8399fd52201f33385f168221ba06b04f25 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 27 Dec 2019 14:15:44 +0100 Subject: [PATCH] borders for dropdowns --- .../block-convert-button.js | 1 - .../block-settings-menu/block-mode-toggle.js | 1 - .../components/block-settings-menu/index.js | 6 ++--- .../components/block-settings-menu/style.scss | 4 +++ .../components/src/dropdown-menu/index.js | 6 ++++- .../components/src/dropdown-menu/style.scss | 26 +++++++++++++++++++ packages/components/src/menu-group/style.scss | 6 +---- packages/components/src/popover/style.scss | 6 ++--- .../visual-editor/block-inspector-button.js | 1 - .../convert-button.js | 7 ----- .../convert-to-group-buttons/icons.js | 13 ---------- .../reusable-block-convert-button.js | 2 -- 12 files changed, 41 insertions(+), 38 deletions(-) delete mode 100644 packages/editor/src/components/convert-to-group-buttons/icons.js 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 index 0a619c61f2b9d1..2e65c4a8be73ae 100644 --- 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 } ) { { ! small && label } 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 index 39cd5d097c1339..185480585809d6 100644 --- 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, { ! small && label } diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 7a2fd7a8c7e1ba..663c02454d3a9a 100644 --- 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 } ) { { __( 'Duplicate' ) } @@ -94,7 +95,6 @@ export function BlockSettingsMenu( { clientIds } ) { { __( 'Insert Before' ) } @@ -102,7 +102,6 @@ export function BlockSettingsMenu( { clientIds } ) { { __( 'Insert After' ) } @@ -124,7 +123,6 @@ export function BlockSettingsMenu( { clientIds } ) { { _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 index d7b1ae4f5d7db3..044928f81868ea 100644 --- 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 index 27c4767ff08684..c0fba35031e86e 100644 --- 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 index 460db4ca26ff39..59d24aebdfcac3 100644 --- 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 index cfb734bfb12484..55e1aa1496b7cd 100644 --- 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 index a077de513f4a04..35c35a25fb9236 100644 --- 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 index 524aa99c6bc8ff..c987f01e0e23c8 100644 --- 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 index 9932449e30ae98..eb8aafbc53e9cb 100644 --- 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 && ( { _x( 'Group', 'verb' ) } @@ -38,7 +32,6 @@ export function ConvertToGroupButton( { { isUngroupable && ( { _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 deleted file mode 100644 index 990d15dd5ac1cd..00000000000000 --- a/packages/editor/src/components/convert-to-group-buttons/icons.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * WordPress dependencies - */ -import { Icon, SVG, Path } from '@wordpress/components'; - -const GroupSVG = ; - -export const Group = ; - -const UngroupSVG = ; - -export const Ungroup = ; - 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 index 130dd8a5bcb496..72d52fc7cf35d4 100644 --- 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 && ( { __( 'Add to Reusable blocks' ) } @@ -36,7 +35,6 @@ export function ReusableBlockConvertButton( { { isReusable && ( { __( 'Convert to Regular Block' ) }