Skip to content

Commit

Permalink
Toolbar: move all subcomponents under the same folder (#46951)
Browse files Browse the repository at this point in the history
* Move `Toolbar` files inside `toolbar` subfolder

* Move `ToolbarButton` inside `toolbar-button` subfolder

* Move `ToolbarContext` inside `toolbar-context` subfolder

* Move `ToolbarDropdownMenu` inside `toolbar-dropdown-menu` subfolder

* Move `ToolbarGroup` inside `toolbar-group` subfolder

* Move `ToolbarItem` inside `toolbar-item` subfolder

* Fix `Button` import path

* Fix styles import path

* Rewrite package exports

* Remove unnecessary `tsconfig.json` exclude lines

* Fix imports in stories and tests

* CHANGELOG

* Fix native import

* Update Docs Manifest
  • Loading branch information
ciampo committed Jan 9, 2023
1 parent f752350 commit 39dbf19
Show file tree
Hide file tree
Showing 37 changed files with 93 additions and 96 deletions.
10 changes: 5 additions & 5 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -1268,31 +1268,31 @@
{
"title": "ToolbarButton",
"slug": "toolbar-button",
"markdown_source": "../packages/components/src/toolbar-button/README.md",
"markdown_source": "../packages/components/src/toolbar/toolbar-button/README.md",
"parent": "components"
},
{
"title": "ToolbarDropdownMenu",
"slug": "toolbar-dropdown-menu",
"markdown_source": "../packages/components/src/toolbar-dropdown-menu/README.md",
"markdown_source": "../packages/components/src/toolbar/toolbar-dropdown-menu/README.md",
"parent": "components"
},
{
"title": "ToolbarGroup",
"slug": "toolbar-group",
"markdown_source": "../packages/components/src/toolbar-group/README.md",
"markdown_source": "../packages/components/src/toolbar/toolbar-group/README.md",
"parent": "components"
},
{
"title": "ToolbarItem",
"slug": "toolbar-item",
"markdown_source": "../packages/components/src/toolbar-item/README.md",
"markdown_source": "../packages/components/src/toolbar/toolbar-item/README.md",
"parent": "components"
},
{
"title": "Toolbar",
"slug": "toolbar",
"markdown_source": "../packages/components/src/toolbar/README.md",
"markdown_source": "../packages/components/src/toolbar/toolbar/README.md",
"parent": "components"
},
{
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Internal

- `Toolbar`: move all subcomponents under the same folder ([46951](https://github.com/WordPress/gutenberg/pull/46951)).
- `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
- `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
- `SandBox`: Convert to TypeScript ([#46478](https://github.com/WordPress/gutenberg/pull/46478)).
Expand Down
14 changes: 8 additions & 6 deletions packages/components/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,12 +155,14 @@ export {
ToggleGroupControlOption as __experimentalToggleGroupControlOption,
ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
} from './toggle-group-control';
export { default as Toolbar } from './toolbar';
export { default as ToolbarButton } from './toolbar-button';
export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
export { default as __experimentalToolbarContext } from './toolbar-context';
export { default as ToolbarGroup } from './toolbar-group';
export { default as ToolbarItem } from './toolbar-item';
export {
Toolbar,
ToolbarButton,
ToolbarContext as __experimentalToolbarContext,
ToolbarDropdownMenu,
ToolbarGroup,
ToolbarItem,
} from './toolbar';
export {
ToolsPanel as __experimentalToolsPanel,
ToolsPanelItem as __experimentalToolsPanelItem,
Expand Down
14 changes: 8 additions & 6 deletions packages/components/src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ export { default as Dashicon } from './dashicon';
export { default as Dropdown } from './dropdown';
export { default as DropdownMenu } from './dropdown-menu';
export { default as FocalPointPicker } from './focal-point-picker';
export { default as Toolbar } from './toolbar';
export { default as ToolbarButton } from './toolbar-button';
export { default as __experimentalToolbarContext } from './toolbar-context';
export { default as ToolbarGroup } from './toolbar-group';
export { default as ToolbarItem } from './toolbar-item';
export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
export {
Toolbar,
ToolbarButton,
ToolbarContext as __experimentalToolbarContext,
ToolbarDropdownMenu,
ToolbarGroup,
ToolbarItem,
} from './toolbar';
export { default as Tooltip } from './tooltip';
export { default as Icon } from './icon';
export { default as Spinner } from './spinner';
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
@import "./tab-panel/style.scss";
@import "./text-control/style.scss";
@import "./tip/style.scss";
@import "./toolbar/style.scss";
@import "./toolbar-button/style.scss";
@import "./toolbar-group/style.scss";
@import "./toolbar/toolbar/style.scss";
@import "./toolbar/toolbar-button/style.scss";
@import "./toolbar/toolbar-group/style.scss";
@import "./tooltip/style.scss";
58 changes: 6 additions & 52 deletions packages/components/src/toolbar/index.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,6 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import ToolbarGroup from '../toolbar-group';
import ToolbarContainer from './toolbar-container';

/**
* Renders a toolbar.
*
* To add controls, simply pass `ToolbarButton` components as children.
*
* @param {Object} props Component props.
* @param {string} [props.className] Class to set on the container div.
* @param {string} [props.label] ARIA label for toolbar container.
* @param {Object} ref React Element ref.
*/
function Toolbar( { className, label, ...props }, ref ) {
if ( ! label ) {
deprecated( 'Using Toolbar without label prop', {
since: '5.6',
alternative: 'ToolbarGroup component',
link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
} );
return <ToolbarGroup { ...props } className={ className } />;
}
// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
const finalClassName = classnames(
'components-accessible-toolbar',
className
);
return (
<ToolbarContainer
className={ finalClassName }
label={ label }
ref={ ref }
{ ...props }
/>
);
}

export default forwardRef( Toolbar );
export { default as Toolbar } from './toolbar';
export { default as ToolbarButton } from './toolbar-button';
export { default as ToolbarContext } from './toolbar-context';
export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
export { default as ToolbarGroup } from './toolbar-group';
export { default as ToolbarItem } from './toolbar-item';
11 changes: 2 additions & 9 deletions packages/components/src/toolbar/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,8 @@ import {
/**
* Internal dependencies
*/
import Toolbar from '../';
import {
SVG,
Path,
ToolbarButton,
ToolbarGroup,
ToolbarItem,
DropdownMenu,
} from '../../';
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarItem } from '..';
import { SVG, Path, DropdownMenu } from '../../..';

export default { title: 'Components/Toolbar', component: Toolbar };

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import { wordpress } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { Toolbar } from '../../';
import ToolbarButton from '../';
import { Toolbar, ToolbarButton } from '..';

export default {
title: 'Components/ToolbarButton',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { formatBold, formatItalic, link } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { ToolbarButton, ToolbarGroup } from '../../';
import { ToolbarButton, ToolbarGroup } from '..';

export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };

Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/toolbar/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { render, screen } from '@testing-library/react';
/**
* Internal dependencies
*/
import Toolbar from '../';
import ToolbarButton from '../../toolbar-button';
import { Toolbar, ToolbarButton } from '..';

describe( 'Toolbar', () => {
describe( 'basic rendering', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
/**
* Internal dependencies
*/
import ToolbarGroup from '../';
import { ToolbarGroup } from '..';

describe( 'ToolbarGroup', () => {
describe( 'basic rendering', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useContext, forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import Button from '../button';
import Button from '../../button';
import ToolbarItem from '../toolbar-item';
import ToolbarContext from '../toolbar-context';
import ToolbarButtonContainer from './toolbar-button-container';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { forwardRef, useContext } from '@wordpress/element';
*/
import ToolbarItem from '../toolbar-item';
import ToolbarContext from '../toolbar-context';
import DropdownMenu from '../dropdown-menu';
import DropdownMenu from '../../dropdown-menu';

function ToolbarDropdownMenu( props, ref ) {
const accessibleToolbarState = useContext( ToolbarContext );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import DropdownMenu from '../dropdown-menu';
import DropdownMenu from '../../dropdown-menu';
import ToolbarContext from '../toolbar-context';
import ToolbarItem from '../toolbar-item';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import DropdownMenu from '../dropdown-menu';
import DropdownMenu from '../../dropdown-menu';
import styles from './style.scss';

function ToolbarGroupCollapsed( {
Expand Down
File renamed without changes.
52 changes: 52 additions & 0 deletions packages/components/src/toolbar/toolbar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import ToolbarGroup from '../toolbar-group';
import ToolbarContainer from './toolbar-container';

/**
* Renders a toolbar.
*
* To add controls, simply pass `ToolbarButton` components as children.
*
* @param {Object} props Component props.
* @param {string} [props.className] Class to set on the container div.
* @param {string} [props.label] ARIA label for toolbar container.
* @param {Object} ref React Element ref.
*/
function Toolbar( { className, label, ...props }, ref ) {
if ( ! label ) {
deprecated( 'Using Toolbar without label prop', {
since: '5.6',
alternative: 'ToolbarGroup component',
link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
} );
return <ToolbarGroup { ...props } className={ className } />;
}
// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
const finalClassName = classnames(
'components-accessible-toolbar',
className
);
return (
<ToolbarContainer
className={ finalClassName }
label={ label }
ref={ ref }
{ ...props }
/>
);
}

export default forwardRef( Toolbar );
File renamed without changes.
5 changes: 0 additions & 5 deletions packages/components/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,6 @@
"src/panel",
"src/query-controls",
"src/toolbar",
"src/toolbar-button",
"src/toolbar-context",
"src/toolbar-dropdown-menu",
"src/toolbar-group",
"src/toolbar-item",
"src/tree-grid"
]
}

1 comment on commit 39dbf19

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 39dbf19.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3875038862
📝 Reported issues:

Please sign in to comment.