Toolbar: move all subcomponents under the same folder

docs/manifest.json

@@ -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"
 	},
 	{

packages/components/CHANGELOG.md

@@ -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)).

packages/components/src/index.js

@@ -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,

packages/components/src/index.native.js

@@ -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';

packages/components/src/style.scss

@@ -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";

packages/components/src/toolbar/index.js

@@ -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';

packages/components/src/toolbar/stories/index.js

@@ -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 };
 

packages/components/src/toolbar-button/stories/index.js → packages/components/src/toolbar/stories/toolbar-button.js

@@ -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',

packages/components/src/toolbar-group/stories/index.js → packages/components/src/toolbar/stories/toolbar-group.js

@@ -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 };
 

packages/components/src/toolbar/test/index.js

@@ -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', () => {

packages/components/src/toolbar-group/test/index.js → packages/components/src/toolbar/test/toolbar-group.js

@@ -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', () => {

packages/components/src/toolbar-button/index.js → packages/components/src/toolbar/toolbar-button/index.js

@@ -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';

packages/components/src/toolbar-dropdown-menu/index.js → packages/components/src/toolbar/toolbar-dropdown-menu/index.js

@@ -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 );

packages/components/src/toolbar-group/toolbar-group-collapsed.js → packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.js

@@ -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';
 

packages/components/src/toolbar-group/toolbar-group-collapsed.native.js → packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js

@@ -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( {

packages/components/src/toolbar/toolbar/index.js

@@ -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 );

packages/components/tsconfig.json

@@ -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"
 	]
 }