@wordpress/components 19.0.0 → 19.0.1

package/src/tools-panel/styles.ts

@@ -14,24 +14,19 @@ import { COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
-	container: css`
+	spacing: css`
 		column-gap: ${ space( 4 ) };
-		display: grid;
-		grid-template-columns: 1fr 1fr;
 		row-gap: ${ space( 6 ) };
 	`,
 	item: {
-		halfWidth: css`
-			grid-column: span 1;
-		`,
 		fullWidth: css`
-			grid-column: span 2;
+			grid-column: 1 / -1;
 		`,
 	},
 };
 
 export const ToolsPanel = css`
-	${ toolsPanelGrid.container };
+	${ toolsPanelGrid.spacing };
 
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
 	margin-top: -1px;
@@ -43,12 +38,17 @@ export const ToolsPanel = css`
  * an inner dom element to be injected. The following rule allows for the
  * CSS grid display to be re-established.
  */
-export const ToolsPanelWithInnerWrapper = css`
-	> div:not( :first-of-type ) {
-		${ toolsPanelGrid.container }
-		${ toolsPanelGrid.item.fullWidth }
-	}
-`;
+
+export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
+	return css`
+		> div:not( :first-of-type ) {
+			display: grid;
+			grid-template-columns: ${ `repeat( ${ columns }, 1fr )` };
+			${ toolsPanelGrid.spacing }
+			${ toolsPanelGrid.item.fullWidth }
+		}
+	`;
+};
 
 export const ToolsPanelHiddenInnerWrapper = css`
 	> div:not( :first-of-type ) {
@@ -69,14 +69,10 @@ export const ToolsPanelHeader = css`
 	 */
 	.components-dropdown-menu {
 		margin: ${ space( -1 ) } 0;
-		height: ${ space( 6 ) };
-
-		.components-dropdown-menu__toggle {
-			padding: 0;
-			height: ${ space( 6 ) };
-			min-width: ${ space( 6 ) };
-			width: ${ space( 6 ) };
-		}
+	}
+	&&&& .components-dropdown-menu__toggle {
+		padding: 0;
+		min-width: ${ space( 6 ) };
 	}
 `;
 
@@ -94,10 +90,6 @@ export const ToolsPanelHeading = css`
 export const ToolsPanelItem = css`
 	${ toolsPanelGrid.item.fullWidth }
 
-	&.single-column {
-		${ toolsPanelGrid.item.halfWidth }
-	}
-
 	/* Clear spacing in and around controls added as panel items. */
 	/* Remove when they can be addressed via context system. */
 	& > div,

package/src/tools-panel/tools-panel/component.tsx

@@ -10,7 +10,7 @@ import type { Ref } from 'react';
 import ToolsPanelHeader from '../tools-panel-header';
 import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
-import { View } from '../../view';
+import { Grid } from '../../grid';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import type { ToolsPanelProps } from '../types';
 
@@ -24,11 +24,14 @@ const ToolsPanel = (
 		panelContext,
 		resetAllItems,
 		toggleItem,
-		...toolsPanelProps
+		className,
 	} = useToolsPanel( props );
 
+	// Props are not directly passed through to avoid exposing Grid props
+	// until agreement has been reached on how ToolsPanel layout should be
+	// handled.
 	return (
-		<View { ...toolsPanelProps } ref={ forwardedRef }>
+		<Grid columns={ 2 } className={ className } ref={ forwardedRef }>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
 					label={ label }
@@ -37,7 +40,7 @@ const ToolsPanel = (
 				/>
 				{ children }
 			</ToolsPanelContext.Provider>
-		</View>
+		</Grid>
 	);
 };
 

package/src/tools-panel/tools-panel/hook.ts

@@ -17,6 +17,8 @@ import type {
 	ToolsPanelProps,
 } from '../types';
 
+const DEFAULT_COLUMNS = 2;
+
 const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
@@ -133,7 +135,8 @@ export function useToolsPanel(
 		const hasDefaultMenuItems =
 			menuItems?.default && !! Object.keys( menuItems?.default ).length;
 		const wrapperStyle =
-			hasInnerWrapper && styles.ToolsPanelWithInnerWrapper;
+			hasInnerWrapper &&
+			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
 			! hasDefaultMenuItems &&
 			areAllOptionalControlsHidden &&

package/src/tools-panel/tools-panel-header/component.tsx

@@ -153,6 +153,7 @@ const ToolsPanelHeader = (
 					icon={ dropDownMenuIcon }
 					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
+					toggleProps={ { isSmall: true } }
 				>
 					{ ( { onClose = noop } ) => (
 						<>

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render correctly 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -56,7 +56,7 @@ exports[`props should render no truncate 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -102,7 +102,7 @@ exports[`props should render size 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/ui/form-group/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`props should render alignLabel 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
@@ -72,7 +72,7 @@ exports[`props should render vertically 1`] = `
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
   padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
   padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #000;
+  color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
   font-size: calc((13 / 13) * 13px);

package/src/utils/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
+export { useCombinedRef } from './use-combined-ref';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
 export { useLatestRef } from './use-latest-ref';

package/src/utils/hooks/use-combined-ref.ts

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { MutableRefObject, RefCallback } from 'react';
+
+type Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;
+
+export function useCombinedRef< T extends HTMLElement >( ...refs: Ref< T >[] ) {
+	const targetRef = useRef( null );
+
+	useEffect( () => {
+		refs.forEach( ( ref ) => {
+			if ( ! ref ) return;
+
+			if ( typeof ref === 'function' ) {
+				ref( targetRef.current );
+			} else {
+				ref.current = targetRef.current;
+			}
+		} );
+	}, [ refs ] );
+
+	return targetRef;
+}