BaseControl: Connect to context system (#57408)

* BaseControl: Connect to context system * Improve type versatility * Update changelog * Fix duplicate class name
WordPress · Jan 4, 2024 · 1ba116b · 1ba116b
1 parent 228344b
commit 1ba116b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -27,6 +27,7 @@
 -   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
 -   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
 -   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `BaseControl`: Connect to context system ([#57408](https://github.com/WordPress/gutenberg/pull/57408)).
 -   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)).
 -   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
 

diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
@@ -16,6 +16,7 @@ import {
 	StyledVisualLabel,
 } from './styles/base-control-styles';
 import type { WordPressComponentProps } from '../context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
@@ -42,19 +43,21 @@ export { useBaseControlProps } from './hooks';
  * );
  * ```
  */
-export const BaseControl = ( {
-	__nextHasNoMarginBottom = false,
-	id,
-	label,
-	hideLabelFromVision = false,
-	help,
-	className,
-	children,
-}: BaseControlProps ) => {
+const UnconnectedBaseControl = (
+	props: WordPressComponentProps< BaseControlProps, null >
+) => {
+	const {
+		__nextHasNoMarginBottom = false,
+		id,
+		label,
+		hideLabelFromVision = false,
+		help,
+		className,
+		children,
+	} = useContextSystem( props, 'BaseControl' );
+
 	return (
-		<Wrapper
-			className={ classnames( 'components-base-control', className ) }
-		>
+		<Wrapper className={ className }>
 			<StyledField
 				className="components-base-control__field"
 				// TODO: Official deprecation for this should start after all internal usages have been migrated
@@ -79,9 +82,7 @@ export const BaseControl = ( {
 					( hideLabelFromVision ? (
 						<VisuallyHidden as="label">{ label }</VisuallyHidden>
 					) : (
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
+						<VisualLabel>{ label }</VisualLabel>
 					) ) }
 				{ children }
 			</StyledField>
@@ -132,6 +133,10 @@ export const VisualLabel = ( {
 		</StyledVisualLabel>
 	);
 };
-BaseControl.VisualLabel = VisualLabel;
+
+export const BaseControl = Object.assign(
+	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
+	{ VisualLabel }
+);
 
 export default BaseControl;
diff --git a/packages/components/src/context/wordpress-component.ts b/packages/components/src/context/wordpress-component.ts
@@ -8,14 +8,19 @@ export type WordPressComponentProps<
 	/** Prop types. */
 	P,
 	/** The HTML element to inherit props from. */
-	T extends React.ElementType,
+	T extends React.ElementType | null,
 	/** Supports polymorphism through the `as` prop. */
 	IsPolymorphic extends boolean = true,
 > = P &
-	// The `children` prop is being explicitly omitted since it is otherwise implicitly added
-	// by `ComponentPropsWithRef`. The context is that components should require the `children`
-	// prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
-	Omit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &
+	( T extends React.ElementType
+		? // The `children` prop is being explicitly omitted since it is otherwise implicitly added
+		  // by `ComponentPropsWithRef`. The context is that components should require the `children`
+		  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
+		  Omit<
+				React.ComponentPropsWithoutRef< T >,
+				'as' | keyof P | 'children'
+		  >
+		: {} ) &
 	( IsPolymorphic extends true
 		? {
 				/** The HTML element or React component to render the component as. */
@@ -24,7 +29,7 @@ export type WordPressComponentProps<
 		: {} );
 
 export type WordPressComponent<
-	T extends React.ElementType,
+	T extends React.ElementType | null,
 	O,
 	IsPolymorphic extends boolean,
 > = {