diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ce120ddf0aad57..d426bc4a2a6012 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -18,12 +18,12 @@ # Editor /packages/annotations @atimmer @ellatrix /packages/autop @aduth -/packages/block-editor @youknowriad @talldan @ellatrix +/packages/block-editor @youknowriad @ellatrix /packages/block-serialization-spec-parser @dmsnell /packages/block-serialization-default-parser @dmsnell /packages/blocks @youknowriad @ellatrix -/packages/edit-post @talldan -/packages/editor @talldan +/packages/edit-post +/packages/editor /packages/list-reusable-blocks @youknowriad @noisysocks /packages/shortcode @aduth @@ -53,12 +53,12 @@ /packages/scripts @youknowriad @gziolo @ntwb @nerrad @ajitbohra # UI Components -/packages/components @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta @talldan @chrisvanpatten -/packages/compose @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta @talldan -/packages/element @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta @talldan -/packages/notices @ajitbohra @jaymanpandya @jorgefilipecosta @talldan -/packages/nux @ajitbohra @jaymanpandya @jorgefilipecosta @talldan @noisysocks -/packages/viewport @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta @talldan +/packages/components @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta @chrisvanpatten +/packages/compose @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta +/packages/element @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta +/packages/notices @ajitbohra @jaymanpandya @jorgefilipecosta +/packages/nux @ajitbohra @jaymanpandya @jorgefilipecosta @noisysocks +/packages/viewport @youknowriad @ajitbohra @jaymanpandya @jorgefilipecosta # Utilities /packages/a11y @youknowriad @aduth diff --git a/.wp-env.json b/.wp-env.json new file mode 100644 index 00000000000000..d67cd9642135da --- /dev/null +++ b/.wp-env.json @@ -0,0 +1,4 @@ +{ + "core": "WordPress/WordPress", + "plugins": [ "." ] +} diff --git a/docs/contributors/coding-guidelines.md b/docs/contributors/coding-guidelines.md index 24256a1914ebf0..a8f0698fa4a5c2 100644 --- a/docs/contributors/coding-guidelines.md +++ b/docs/contributors/coding-guidelines.md @@ -10,8 +10,8 @@ To avoid class name collisions, class names **must** adhere to the following gui All class names assigned to an element must be prefixed with the name of the package, followed by a dash and the name of the directory in which the component resides. Any descendent of the component's root element must append a dash-delimited descriptor, separated from the base by two consecutive underscores `__`. -* Root element: `package-directory` -* Child elements: `package-directory__descriptor-foo-bar` +- Root element: `package-directory` +- Child elements: `package-directory__descriptor-foo-bar` The root element is considered to be the highest ancestor element returned by the default export in the `index.js`. Notably, if your folder contains multiple files, each with their own default exported component, only the element rendered by that of `index.js` can be considered the root. All others should be treated as descendents. @@ -23,12 +23,10 @@ Consider the following component located at `packages/components/src/notice/inde export default function Notice( { children, onRemove } ) { return (
-
- { children } -
+
{ children }
- + { // translators: %s: Humanized date of last update e.g: "2 months ago". sprintf( __( 'Updated %s' ), humanizedUpdated ) }
diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index 8ca05b1361631e..bfccac02fa4864 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -6,7 +6,14 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified Array [ Object { "align": "custom-left", - "icon": "editor-alignleft", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -14,7 +21,14 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified }, Object { "align": "custom-right", - "icon": "editor-aligncenter", + "icon": + + , "isActive": true, "onClick": [Function], "role": "menuitemradio", @@ -22,7 +36,16 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified }, ] } - icon="editor-aligncenter" + icon={ + + + + } isCollapsed={true} label="Change text alignment" /> diff --git a/packages/block-editor/src/components/alignment-toolbar/test/index.js b/packages/block-editor/src/components/alignment-toolbar/test/index.js index 3ad4397b84da0f..05ac7e67dcda7a 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/test/index.js @@ -3,6 +3,11 @@ */ import { shallow } from 'enzyme'; +/** + * WordPress dependencies + */ +import { alignLeft, alignCenter } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -53,12 +58,12 @@ describe( 'AlignmentToolbar', () => { onChange={ onChangeSpy } alignmentControls={ [ { - icon: 'editor-alignleft', + icon: alignLeft, title: 'My custom left', align: 'custom-left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: 'My custom right', align: 'custom-right', }, diff --git a/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap index ff2040497b12a7..af976de16f268a 100644 --- a/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap @@ -20,17 +20,38 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = ` Array [ Object { "align": "left", - "icon": "editor-alignleft", + "icon": + + , "title": "Align left", }, Object { "align": "center", - "icon": "editor-aligncenter", + "icon": + + , "title": "Align center", }, Object { "align": "right", - "icon": "editor-alignright", + "icon": + + , "title": "Align right", }, ] diff --git a/packages/block-editor/src/components/block-controls/test/index.js b/packages/block-editor/src/components/block-controls/test/index.js index f970dc030cadbe..3ab1fec37b3f1e 100644 --- a/packages/block-editor/src/components/block-controls/test/index.js +++ b/packages/block-editor/src/components/block-controls/test/index.js @@ -3,6 +3,11 @@ */ import { shallow } from 'enzyme'; +/** + * WordPress dependencies + */ +import { alignCenter, alignLeft, alignRight } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -12,17 +17,17 @@ import BlockEdit from '../../block-edit'; describe( 'BlockControls', () => { const controls = [ { - icon: 'editor-alignleft', + icon: alignLeft, title: 'Align left', align: 'left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: 'Align center', align: 'center', }, { - icon: 'editor-alignright', + icon: alignRight, title: 'Align right', align: 'right', }, diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js index f7e2317b4e2d4b..83774a63dbc03b 100644 --- a/packages/block-editor/src/components/block-icon/test/index.js +++ b/packages/block-editor/src/components/block-icon/test/index.js @@ -7,6 +7,7 @@ import { shallow } from 'enzyme'; * WordPress dependencies */ import { Icon } from '@wordpress/components'; +import { image } from '@wordpress/icons'; /** * Internal dependencies @@ -15,21 +16,21 @@ import BlockIcon from '../'; describe( 'BlockIcon', () => { it( 'renders a Icon', () => { - const wrapper = shallow( ); + const wrapper = shallow( ); expect( - wrapper.containsMatchingElement( ) + wrapper.containsMatchingElement( ) ).toBe( true ); } ); it( 'renders a span without the has-colors classname', () => { - const wrapper = shallow( ); + const wrapper = shallow( ); expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( false ); } ); it( 'renders a span with the has-colors classname', () => { - const wrapper = shallow( ); + const wrapper = shallow( ); expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( true ); } ); diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js index 27bf29650e9a92..b572e21ee79dd8 100644 --- a/packages/block-editor/src/components/block-mover/index.native.js +++ b/packages/block-editor/src/components/block-mover/index.native.js @@ -10,6 +10,7 @@ import { ToolbarButton } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; +import { arrowUp, arrowDown } from '@wordpress/icons'; const BlockMover = ( { isFirst, @@ -39,7 +40,7 @@ const BlockMover = ( { } isDisabled={ isFirst } onClick={ onMoveUp } - icon="arrow-up-alt" + icon={ arrowUp } extraProps={ { hint: __( 'Double tap to move the block up' ) } } /> @@ -58,7 +59,7 @@ const BlockMover = ( { } isDisabled={ isLast } onClick={ onMoveDown } - icon="arrow-down-alt" + icon={ arrowDown } extraProps={ { hint: __( 'Double tap to move the block down' ), } } diff --git a/packages/block-editor/src/components/block-settings/button.native.js b/packages/block-editor/src/components/block-settings/button.native.js index 5225e8bb988c44..9fa1a037494294 100644 --- a/packages/block-editor/src/components/block-settings/button.native.js +++ b/packages/block-editor/src/components/block-settings/button.native.js @@ -4,13 +4,14 @@ import { createSlotFill, ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withDispatch } from '@wordpress/data'; +import { cog } from '@wordpress/icons'; const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' ); const SettingsButton = ( { openGeneralSidebar } ) => ( ); diff --git a/packages/edit-post/src/components/editor-regions/index.js b/packages/block-editor/src/components/editor-skeleton/index.js similarity index 66% rename from packages/edit-post/src/components/editor-regions/index.js rename to packages/block-editor/src/components/editor-skeleton/index.js index eee9dfcfdae9d6..bf3084436d79d9 100644 --- a/packages/edit-post/src/components/editor-regions/index.js +++ b/packages/block-editor/src/components/editor-skeleton/index.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { navigateRegions } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -function EditorRegions( { +function EditorSkeleton( { footer, header, sidebar, @@ -18,10 +18,16 @@ function EditorRegions( { className, } ) { return ( -
+
{ !! header && (
) } -
+
{ !! sidebar && (
{ !! footer && (
( />
-
@@ -151,11 +161,11 @@ export const buttons = () => { -
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js index beaf19bc2cf7f6..8aa9928a9ef620 100644 --- a/packages/components/src/button/test/index.js +++ b/packages/components/src/button/test/index.js @@ -8,6 +8,7 @@ import TestUtils from 'react-dom/test-utils'; * WordPress dependencies */ import { createRef } from '@wordpress/element'; +import { plusCircle } from '@wordpress/icons'; /** * Internal dependencies @@ -85,36 +86,24 @@ describe( 'Button', () => { } ); it( 'should render an icon button', () => { - const iconButton = shallow( ); @@ -170,7 +159,7 @@ describe( 'Button', () => { it( 'should force showing the tooltip even if icon and children defined', () => { const iconButton = shallow( - ); diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js index 7e8302833aea9e..3f46d0b3e58f8d 100644 --- a/packages/components/src/color-picker/inputs.js +++ b/packages/components/src/color-picker/inputs.js @@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { DOWN, ENTER, UP } from '@wordpress/keycodes'; import { pure } from '@wordpress/compose'; +import { chevronDown } from '@wordpress/icons'; /** * Internal dependencies @@ -289,7 +290,7 @@ export class Inputs extends Component {
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap index 602cb30406427f..3f58e17213bf99 100644 --- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap @@ -156,16 +156,15 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = ` > @@ -331,16 +330,15 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = > @@ -506,16 +504,15 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = > @@ -681,16 +678,15 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` > @@ -856,16 +852,15 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` > @@ -1031,16 +1026,15 @@ exports[`ColorPicker should render color picker 1`] = ` > diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 19d3abbed8b122..94f63d6c8d41f5 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -7,11 +7,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Icon, check } from '@wordpress/icons'; +import { Icon, check, chevronDown } from '@wordpress/icons'; /** * Internal dependencies */ -import { Button, Dashicon } from '../'; +import { Button } from '../'; const itemToString = ( item ) => item && item.name; // This is needed so that in Windows, where @@ -121,8 +121,8 @@ export default function CustomSelectControl( { } ) } > { itemToString( selectedItem ) } - diff --git a/packages/components/src/draggable/README.md b/packages/components/src/draggable/README.md index f76c983a8d999e..28bdee89faf23e 100644 --- a/packages/components/src/draggable/README.md +++ b/packages/components/src/draggable/README.md @@ -12,56 +12,53 @@ The component accepts the following props: The HTML id of the element to clone on drag -- Type: `string` -- Required: Yes +- Type: `string` +- Required: Yes ### transferData Arbitrary data object attached to the drag and drop event. -- Type: `Object` -- Required: Yes +- Type: `Object` +- Required: Yes ### onDragStart A function to be called when dragging starts. -- Type: `Function` -- Required: No -- Default: `noop` +- Type: `Function` +- Required: No +- Default: `noop` ### onDragEnd A function to be called when dragging ends. -- Type: `Function` -- Required: No -- Default: `noop` +- Type: `Function` +- Required: No +- Default: `noop` ## Usage ```jsx -import { Dashicon, Draggable, Panel, PanelBody } from '@wordpress/components'; +import { Draggable, Panel, PanelBody } from '@wordpress/components'; +import { Icon, more } from '@wordpress/icons'; const MyDraggable = () => (
- + - - { - ( { onDraggableStart, onDraggableEnd } ) => ( -
- -
- ) - } + + { ( { onDraggableStart, onDraggableEnd } ) => ( +
+ +
+ ) } @@ -72,29 +69,29 @@ const MyDraggable = () => ( In case you want to call your own `dragstart` / `dragend` event handlers as well, you can pass them to `Draggable` and it'll take care of calling them after their own: ```jsx -import { Dashicon, Draggable, Panel, PanelBody } from '@wordpress/components'; +import { Draggable, Panel, PanelBody } from '@wordpress/components'; +import { Icon, more } from '@wordpress/icons'; const MyDraggable = ( { onDragStart, onDragEnd } ) => (
- + - { - ( { onDraggableStart, onDraggableEnd } ) => ( -
- -
- ) - } + { ( { onDraggableStart, onDraggableEnd } ) => ( +
+ +
+ ) } diff --git a/packages/components/src/draggable/stories/index.js b/packages/components/src/draggable/stories/index.js index 816870dbc63a69..e124529cf62034 100644 --- a/packages/components/src/draggable/stories/index.js +++ b/packages/components/src/draggable/stories/index.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { useState } from '@wordpress/element'; +import { Icon, more } from '@wordpress/icons'; /** * Internal dependencies */ import Draggable from '../'; -import Dashicon from '../../dashicon'; export default { title: 'Components/Draggable', component: Draggable }; @@ -56,7 +56,7 @@ const DraggalbeExample = () => { onDragEnd={ handleOnDragEnd } draggable > - + ); } } diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js index 716b609cdbe63b..de2318d4d7c847 100644 --- a/packages/components/src/drop-zone/index.js +++ b/packages/components/src/drop-zone/index.js @@ -8,11 +8,11 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; import { useContext, useEffect, useState, useRef } from '@wordpress/element'; +import { upload, Icon } from '@wordpress/icons'; /** * Internal dependencies */ -import Dashicon from '../dashicon'; import { DropZoneConsumer, Context } from './provider'; export function useDropZone( { @@ -84,8 +84,8 @@ function DropZoneComponent( { if ( isDraggingOverElement ) { children = (
- diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss index 414918b3a44a54..a4307cbc6e9e0c 100644 --- a/packages/components/src/drop-zone/style.scss +++ b/packages/components/src/drop-zone/style.scss @@ -50,6 +50,7 @@ .components-drop-zone__content-icon { margin: 0 auto; line-height: 0; + fill: currentColor; } diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md index f996795dc7eccc..3790412a69df28 100644 --- a/packages/components/src/dropdown-menu/README.md +++ b/packages/components/src/dropdown-menu/README.md @@ -1,6 +1,6 @@ # DropdownMenu -The DropdownMenu displays a list of actions (each contained in a MenuItem, MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover after the user has interacted with an element (a button or icon) or when they perform a specific action. +The DropdownMenu displays a list of actions (each contained in a MenuItem, MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover after the user has interacted with an element (a button or icon) or when they perform a specific action. ![An expanded DropdownMenu, containing a list of MenuItems.](https://wordpress.org/gutenberg/files/2019/01/DropdownMenuExample.png) @@ -25,8 +25,8 @@ The DropdownMenu displays a list of actions (each contained in a MenuItem, MenuI Use a DropdownMenu when you want users to: -- Choose an action or change a setting from a list, AND -- Only see the available choices contextually. +- Choose an action or change a setting from a list, AND +- Only see the available choices contextually. If you need to display all the available options at all times, consider using a Toolbar instead. @@ -60,31 +60,38 @@ Render a Dropdown Menu with a set of controls: ```jsx import { DropdownMenu } from '@wordpress/components'; +import { + more, + arrowLeft, + arrowRight, + arrowUp, + arrowDown, +} from '@wordpress/icons'; const MyDropdownMenu = () => ( console.log( 'up' ) + icon: arrowUp, + onClick: () => console.log( 'up' ), }, { title: 'Right', - icon: 'arrow-right-alt', - onClick: () => console.log( 'right' ) + icon: arrowRight, + onClick: () => console.log( 'right' ), }, { title: 'Down', - icon: 'arrow-down-alt', - onClick: () => console.log( 'down' ) + icon: arrowDown, + onClick: () => console.log( 'down' ), }, { title: 'Left', - icon: 'arrow-left-alt', - onClick: () => console.log( 'left' ) + icon: arrowLeft, + onClick: () => console.log( 'left' ), }, ] } /> @@ -96,33 +103,22 @@ Alternatively, specify a `children` function which returns elements valid for us ```jsx import { Fragment } from '@wordpress/element'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; +import { more, arrowUp, arrowDown, trash } from '@wordpress/icons'; const MyDropdownMenu = () => ( - + { ( { onClose } ) => ( - + Move Up - + Move Down - + Remove @@ -140,9 +136,9 @@ The component accepts the following props: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug to be shown in the collapsed menu button. -- Type: `String|null` -- Required: No -- Default: `"menu"` +- Type: `String|null` +- Required: No +- Default: `"menu"` See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/) @@ -150,9 +146,9 @@ See also: [https://developer.wordpress.org/resource/dashicons/](https://develope Whether to display an arrow indicator next to the icon. -- Type: `Boolean` -- Required: No -- Default: `false` +- Type: `Boolean` +- Required: No +- Default: `false` For backward compatibility, when `icon` is explicitly set to `null` then the arrow indicator will be displayed even when this flag is set to `false`. @@ -160,8 +156,8 @@ For backward compatibility, when `icon` is explicitly set to `null` then the arr A human-readable label to present as accessibility text on the focused collapsed menu button. -- Type: `String` -- Required: Yes +- Type: `String` +- Required: Yes #### controls @@ -171,8 +167,8 @@ Each object should include an `icon` [Dashicon](https://developer.wordpress.org/ A valid DropdownMenu must specify one or the other of a `controls` or `children` prop. -- Type: `Array` -- Required: No +- Type: `Array` +- Required: No #### children @@ -180,8 +176,8 @@ A [function render prop](https://reactjs.org/docs/render-props.html#using-props- A valid DropdownMenu must specify one or the other of a `controls` or `children` prop. -- Type: `Function` -- Required: No +- Type: `Function` +- Required: No See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/) @@ -189,29 +185,29 @@ See also: [https://developer.wordpress.org/resource/dashicons/](https://develope A class name to apply to the dropdown menu's toggle element wrapper. -- Type: `String` -- Required: No +- Type: `String` +- Required: No #### popoverProps - + Properties of `popoverProps` object will be passed as props to the nested `Popover` component. -Use this object to modify props available for the `Popover` component that are not already exposed in the `DropdownMenu` component, e.g.: the direction in which the popover should open relative to its parent node set with `position` prop. - - - Type: `Object` - - Required: No - +Use this object to modify props available for the `Popover` component that are not already exposed in the `DropdownMenu` component, e.g.: the direction in which the popover should open relative to its parent node set with `position` prop. + +- Type: `Object` +- Required: No + #### toggleProps - + Properties of `toggleProps` object will be passed as props to the nested `Button` component in the `renderToggle` implementation of the `Dropdown` component used internally. -Use this object to modify props available for the `Button` component that are not already exposed in the `DropdownMenu` component, e.g.: the tooltip text displayed on hover set with `tooltip` prop. - - - Type: `Object` - - Required: No - +Use this object to modify props available for the `Button` component that are not already exposed in the `DropdownMenu` component, e.g.: the tooltip text displayed on hover set with `tooltip` prop. + +- Type: `Object` +- Required: No + #### menuProps - + Properties of `menuProps` object will be passed as props to the nested `NavigableMenu` component in the `renderContent` implementation of the `Dropdown` component used internally. -Use this object to modify props available for the `NavigableMenu` component that are not already exposed in the `DropdownMenu` component, e.g.: the orientation of the menu set with `orientation` prop. - - - Type: `Object` - - Required: No +Use this object to modify props available for the `NavigableMenu` component that are not already exposed in the `DropdownMenu` component, e.g.: the orientation of the menu set with `orientation` prop. + +- Type: `Object` +- Required: No diff --git a/packages/components/src/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js index 6486af19dcb1ee..86d6242ad75309 100644 --- a/packages/components/src/dropdown-menu/test/index.js +++ b/packages/components/src/dropdown-menu/test/index.js @@ -7,6 +7,7 @@ import { shallow, mount } from 'enzyme'; * WordPress dependencies */ import { DOWN } from '@wordpress/keycodes'; +import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons'; /** * Internal dependencies @@ -22,22 +23,22 @@ describe( 'DropdownMenu', () => { controls = [ { title: 'Up', - icon: 'arrow-up-alt', + icon: arrowUp, onClick: jest.fn(), }, { title: 'Right', - icon: 'arrow-right-alt', + icon: arrowRight, onClick: jest.fn(), }, { title: 'Down', - icon: 'arrow-down-alt', + icon: arrowDown, onClick: jest.fn(), }, { title: 'Left', - icon: 'arrow-left-alt', + icon: arrowLeft, onClick: jest.fn(), }, ]; diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.js index c6fd55e4e1f438..e95387634d8a63 100644 --- a/packages/components/src/dropdown/stories/index.js +++ b/packages/components/src/dropdown/stories/index.js @@ -1,3 +1,14 @@ +/** + * WordPress dependencies + */ +import { + more, + arrowLeft, + arrowRight, + arrowUp, + arrowDown, +} from '@wordpress/icons'; + /** * Internal dependencies */ @@ -15,24 +26,24 @@ const DropdownAndDropdownMenuExample = () => {

This is a DropdownMenu component:

@@ -45,7 +56,7 @@ const DropdownAndDropdownMenuExample = () => { position="bottom right" renderToggle={ ( { isOpen, onToggle } ) => ( @@ -335,16 +334,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -354,16 +352,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -373,16 +370,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -392,16 +388,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > Icon & Text @@ -443,16 +438,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -462,16 +456,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -481,16 +474,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -500,16 +492,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > @@ -519,16 +510,15 @@ exports[`Storyshots Components/Button Buttons 1`] = ` > Icon & Text @@ -631,12 +621,11 @@ exports[`Storyshots Components/Button Grouped Icons 1`] = ` >
@@ -2764,16 +2748,15 @@ Array [ > @@ -2800,16 +2783,15 @@ Array [ > @@ -3186,16 +3168,16 @@ exports[`Storyshots Components/FontSizePicker Default 1`] = ` Normal @@ -3274,16 +3256,16 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = ` Normal @@ -3406,16 +3388,16 @@ exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = ` Normal @@ -5221,16 +5203,15 @@ exports[`Storyshots Components/Toolbar Default 1`] = ` > @@ -5259,12 +5240,11 @@ exports[`Storyshots Components/Toolbar Default 1`] = ` >