From 6f2a562682f6d80f820329b57f388e3ff5e10318 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2019 13:58:10 +0100 Subject: [PATCH 1/5] Add a story to compare both menus --- .../components/src/dropdown/stories/index.js | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 packages/components/src/dropdown/stories/index.js diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.js new file mode 100644 index 00000000000000..efa4e29dd88ccf --- /dev/null +++ b/packages/components/src/dropdown/stories/index.js @@ -0,0 +1,89 @@ +/** + * Internal dependencies + */ +import Dropdown from '../'; +import IconButton from '../../icon-button'; +import MenuGroup from '../../menu-group'; +import MenuItem from '../../menu-item'; +import DropdownMenu from '../../dropdown-menu'; + +export default { title: 'Components|Dropdown', component: Dropdown }; + +const DropdownAndDropdownMenuExample = () => { + return ( +
+ console.log( 'up' ), + }, + { + title: 'Right', + icon: 'arrow-right-alt', + onClick: () => console.log( 'right' ), + }, + { + title: 'Down', + icon: 'arrow-down-alt', + onClick: () => console.log( 'down' ), + }, + { + title: 'Left', + icon: 'arrow-left-alt', + onClick: () => console.log( 'left' ), + }, + ] } + /> + + ( + + ) } + renderContent={ () => ( + + console.log( 'up' ) } + > + Up + + console.log( 'up' ) } + > + Down + + console.log( 'up' ) } + > + Left + + console.log( 'up' ) } + > + Right + + + ) } + /> +
+ ); +}; + +export const _default = () => { + return ; +}; From 5806cf9836991d8e2c55adf17aabaa9e1cc23ab1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2019 13:58:26 +0100 Subject: [PATCH 2/5] Align the toggle styles --- .../components/src/dropdown-menu/style.scss | 39 ------------------- 1 file changed, 39 deletions(-) diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 9efe547e19d807..e899ac0eaf87d1 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -1,42 +1,3 @@ -.components-dropdown-menu { - padding: 3px; - display: flex; - - .components-dropdown-menu__toggle { - width: auto; - margin: 0; - padding: 4px; - border: $border-width solid transparent; - display: flex; - flex-direction: row; - - &.is-active, - &.is-active:hover { - box-shadow: none; - background-color: $dark-gray-500; - color: $white; - } - - &:focus::before { - top: -3px; - right: -3px; - bottom: -3px; - left: -3px; - } - - &:hover, - &:focus, - &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { - @include formatting-button-style__hover(); - } - - // Add a dropdown arrow indicator. - .components-dropdown-menu__indicator::after { - @include dropdown-arrow(); - } - } -} - .components-dropdown-menu__popover .components-popover__content { width: 200px; } From b2dbb88f9ad3e3460f734912cf55d1614e079583 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2019 14:12:36 +0100 Subject: [PATCH 3/5] Restore the DropdownMenu indicator --- .../components/src/dropdown-menu/style.scss | 4 + packages/components/src/dropdown/index.js | 7 +- .../components/src/dropdown/stories/index.js | 129 +++++++++--------- packages/components/src/dropdown/style.scss | 3 + packages/components/src/style.scss | 1 + 5 files changed, 77 insertions(+), 67 deletions(-) create mode 100644 packages/components/src/dropdown/style.scss diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index e899ac0eaf87d1..dbd307873dfcf9 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -1,3 +1,7 @@ +.components-dropdown-menu__indicator::after { + @include dropdown-arrow(); +} + .components-dropdown-menu__popover .components-popover__content { width: 200px; } diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js index 6c5cffa6e5e4b7..f809c7826121b9 100644 --- a/packages/components/src/dropdown/index.js +++ b/packages/components/src/dropdown/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -82,7 +87,7 @@ class Dropdown extends Component { const args = { isOpen, onToggle: this.toggle, onClose: this.close }; return ( -
+
{ renderToggle( args ) } { isOpen && ( { return ( -
- console.log( 'up' ), - }, - { - title: 'Right', - icon: 'arrow-right-alt', - onClick: () => console.log( 'right' ), - }, - { - title: 'Down', - icon: 'arrow-down-alt', - onClick: () => console.log( 'down' ), - }, - { - title: 'Left', - icon: 'arrow-left-alt', - onClick: () => console.log( 'left' ), - }, - ] } - /> - - ( - - ) } - renderContent={ () => ( - - console.log( 'up' ) } - > + <> +
+

This is a DropdownMenu component:

+ +
+
+

This is an assembled Dropdown component:

+ ( + + ) } + renderContent={ () => ( + + Up - - console.log( 'up' ) } - > + + Down - - console.log( 'up' ) } - > + + Left - - console.log( 'up' ) } - > + + Right - - - ) } - /> -
+ + + ) } + /> +
+ ); }; diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss new file mode 100644 index 00000000000000..8aeea6338019a3 --- /dev/null +++ b/packages/components/src/dropdown/style.scss @@ -0,0 +1,3 @@ +.components-dropdown { + display: inline-block; +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index bba2e5e0c5fc2f..ec1b58335fedb2 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -13,6 +13,7 @@ @import "./disabled/style.scss"; @import "./draggable/style.scss"; @import "./drop-zone/style.scss"; +@import "./dropdown/style.scss"; @import "./dropdown-menu/style.scss"; @import "./external-link/style.scss"; @import "./focal-point-picker/style.scss"; From 210dd5c06c971da6c6dc396e23de54a46e184281 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 21 Nov 2019 09:37:50 +0100 Subject: [PATCH 4/5] Fix unit tests --- .../src/color-palette/test/__snapshots__/index.js.snap | 4 ++-- .../header/more-menu/test/__snapshots__/index.js.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap index ea834490fd18cf..e7187ef05fcbc2 100644 --- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap @@ -106,7 +106,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = ` renderToggle={[Function]} >
Date: Thu, 21 Nov 2019 09:47:23 +0100 Subject: [PATCH 5/5] Remove specific toolbar button styles --- .../components/src/toolbar-button/style.scss | 69 ------------------- 1 file changed, 69 deletions(-) diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss index c7e64b5a04bf10..c9ad3ffd51a365 100644 --- a/packages/components/src/toolbar-button/style.scss +++ b/packages/components/src/toolbar-button/style.scss @@ -1,37 +1,4 @@ .components-toolbar__control.components-button { - display: inline-flex; - align-items: flex-end; - margin: 0; - padding: 3px; - outline: none; - cursor: pointer; - position: relative; - width: $icon-button-size; - height: $icon-button-size; - - // Unset icon button styles - &:not([aria-disabled="true"]):not(.is-default):active, - &:not([aria-disabled="true"]):hover, - &:not([aria-disabled="true"]):focus { - outline: none; - box-shadow: none; - background: none; - border: none; - } - - // Disabled - &:disabled { - cursor: default; - } - - & > svg { - padding: 5px; - border-radius: $radius-round-rectangle; - height: 30px; - width: 30px; - box-sizing: border-box; - } - // Subscript for numbered icon buttons, like headings &[data-subscript] svg { padding: 5px 10px 5px 0; @@ -48,43 +15,7 @@ bottom: 10px; } - // Assign hover style to child element, not the button itself - &:not(:disabled):not([aria-disabled="true"]):hover { - box-shadow: none; - } - - &:not(:disabled).is-active > svg, - &:not(:disabled):hover > svg { - @include formatting-button-style__hover; - } - - // Active & toggled style - &:not(:disabled).is-active > svg { - @include formatting-button-style__active; - } - &:not(:disabled).is-active[data-subscript]::after { color: $white; } - - // Focus style - &:not(:disabled):focus > svg { - @include formatting-button-style__focus; - // Remove outline from SVG to apply on focused element - see below. - outline: 0; - } - - // Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children. - &:not(:disabled).is-active { - outline: 1px dotted transparent; - outline-offset: -2px; - } - // Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children. - &:not(:disabled):focus { - outline: 2px solid transparent; - } -} - -.components-toolbar__control .dashicon { - display: block; }