From 07fca0875d34165a98713c616b9ce8d28832cde0 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Mar 2022 18:51:39 +0900
Subject: [PATCH 01/15] BaseControl: Change file extensions to typescript

---
 packages/components/src/base-control/{index.js => index.tsx}      | 0
 .../components/src/base-control/stories/{index.js => index.tsx}   | 0
 .../styles/{base-control-styles.js => base-control-styles.ts}     | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/components/src/base-control/{index.js => index.tsx} (100%)
 rename packages/components/src/base-control/stories/{index.js => index.tsx} (100%)
 rename packages/components/src/base-control/styles/{base-control-styles.js => base-control-styles.ts} (100%)

diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.tsx
similarity index 100%
rename from packages/components/src/base-control/index.js
rename to packages/components/src/base-control/index.tsx
diff --git a/packages/components/src/base-control/stories/index.js b/packages/components/src/base-control/stories/index.tsx
similarity index 100%
rename from packages/components/src/base-control/stories/index.js
rename to packages/components/src/base-control/stories/index.tsx
diff --git a/packages/components/src/base-control/styles/base-control-styles.js b/packages/components/src/base-control/styles/base-control-styles.ts
similarity index 100%
rename from packages/components/src/base-control/styles/base-control-styles.js
rename to packages/components/src/base-control/styles/base-control-styles.ts

From caf979dc0c1d75290f71749978d873980b75d269 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Mar 2022 23:30:32 +0900
Subject: [PATCH 02/15] Convert types

---
 .../components/src/base-control/index.tsx     | 71 ++++++++++---------
 packages/components/src/base-control/types.ts | 51 +++++++++++++
 2 files changed, 90 insertions(+), 32 deletions(-)
 create mode 100644 packages/components/src/base-control/types.ts

diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index a8c19457d13644..4d6721fdea23bf 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -2,11 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { FunctionComponent } from 'react';
 
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '../visually-hidden';
+import type { BaseControlProps, BaseControlVisualLabelProps } from './types';
 import {
 	Wrapper,
 	StyledField,
@@ -16,35 +18,29 @@ import {
 } from './styles/base-control-styles';
 
 /**
- * @typedef Props
- * @property {boolean}                   [__nextHasNoMarginBottom] Start opting into the new margin-free styles that will become the default in a future version.
- * @property {string}                    [id]                      The id of the element to which labels and help text are being generated.
- *                                                                 That element should be passed as a child.
- * @property {import('react').ReactNode} help                      If this property is added, a help text will be
- *                                                                 generated using help property as the content.
- * @property {import('react').ReactNode} [label]                   If this property is added, a label will be generated
- *                                                                 using label property as the content.
- * @property {boolean}                   [hideLabelFromVision]     If true, the label will only be visible to screen readers.
- * @property {string}                    [className]               The class that will be added with "components-base-control" to the
- *                                                                 classes of the wrapper div. If no className is passed only
- *                                                                 components-base-control is used.
- * @property {import('react').ReactNode} [children]                The content to be displayed within
- *                                                                 the BaseControl.
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * @example
+ * // Render a `BaseControl` for a textarea input
+ * import { BaseControl } from '@wordpress/components';
+ *
+ * const MyBaseControl = () => (
+ *   <BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
+ *     <textarea id="textarea-1" />
+ *   </BaseControl>
+ * );
  */
-
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-function BaseControl( {
+export const BaseControl: FunctionComponent< BaseControlProps > & {
+	VisualLabel: typeof VisualLabel;
+} = ( {
 	__nextHasNoMarginBottom = false,
 	id,
 	label,
-	hideLabelFromVision,
+	hideLabelFromVision = false,
 	help,
 	className,
 	children,
-} ) {
+} ) => {
 	return (
 		<Wrapper
 			className={ classnames( 'components-base-control', className ) }
@@ -90,19 +86,29 @@ function BaseControl( {
 			) }
 		</Wrapper>
 	);
-}
-
-/**
- * @typedef VisualLabelProps
- * @property {string}                    [className] Class name
- * @property {import('react').ReactNode} [children]  Children
- */
+};
 
 /**
- * @param {VisualLabelProps} Props
- * @return {JSX.Element} Element
+ * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ *
+ * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+ * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+ * otherwise use if the `label` prop was passed.
+ *
+ * @example
+ * import { BaseControl } from '@wordpress/components';
+ *
+ * const MyBaseControl = () => (
+ * 	<BaseControl help="This button is already accessibly labeled.">
+ * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+ * 		<Button>Select an author</Button>
+ * 	</BaseControl>
+ * );
  */
-BaseControl.VisualLabel = ( { className, children } ) => {
+export const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( {
+	className,
+	children,
+} ) => {
 	return (
 		<StyledVisualLabel
 			className={ classnames(
@@ -114,5 +120,6 @@ BaseControl.VisualLabel = ( { className, children } ) => {
 		</StyledVisualLabel>
 	);
 };
+BaseControl.VisualLabel = VisualLabel;
 
 export default BaseControl;
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
new file mode 100644
index 00000000000000..b74fd937cdceb1
--- /dev/null
+++ b/packages/components/src/base-control/types.ts
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	Wrapper,
+	StyledField,
+	StyledVisualLabel,
+} from './styles/base-control-styles';
+
+export type BaseControlProps = {
+	/**
+	 * Start opting into the new margin-free styles that will become the default in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * The id of the element to which labels and help text are being generated.
+	 * That element should be passed as a child.
+	 */
+	id?: string;
+	/**
+	 * If this property is added, a help text will be generated using help property as the content.
+	 */
+	help?: ReactNode;
+	/**
+	 * If this property is added, a label will be generated using label property as the content.
+	 */
+	label?: ReactNode;
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	className?: HTMLAttributes< typeof Wrapper >[ 'className' ];
+	/**
+	 * The content to be displayed within the `BaseControl`.
+	 */
+	children?: HTMLAttributes< typeof StyledField >[ 'children' ];
+};
+
+export type BaseControlVisualLabelProps = Pick<
+	HTMLAttributes< typeof StyledVisualLabel >,
+	'className' | 'children'
+>;

From b8931654537ed8d865534830ed245d7b84dfd5e6 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Mar 2022 23:34:56 +0900
Subject: [PATCH 03/15] Update stories

---
 .../src/base-control/stories/index.tsx        | 89 +++++++++----------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/base-control/stories/index.tsx b/packages/components/src/base-control/stories/index.tsx
index ed238093846225..67af4ab2a3c8c2 100644
--- a/packages/components/src/base-control/stories/index.tsx
+++ b/packages/components/src/base-control/stories/index.tsx
@@ -1,17 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import BaseControl from '../';
+import BaseControl from '..';
 import Button from '../../button';
-import { Spacer } from '../../spacer';
 
-export default {
+const meta: ComponentMeta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
-	subcomponents: { BaseControl: BaseControl.VisualLabel },
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
 };
+export default meta;
 
-const BaseControlWithTextarea = ( { id, ...props } ) => {
+const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = ( {
+	id,
+	...props
+} ) => {
 	return (
 		<BaseControl id={ id } { ...props }>
 			<textarea style={ { display: 'block' } } id={ id } />
@@ -19,63 +34,45 @@ const BaseControlWithTextarea = ( { id, ...props } ) => {
 	);
 };
 
-export const Default = BaseControlWithTextarea.bind( {} );
+export const Default: ComponentStory<
+	typeof BaseControl
+> = BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	id: 'textarea-1',
-	label: '',
-	hideLabelFromVision: false,
-	help: '',
-};
-
-export const WithLabel = BaseControlWithTextarea.bind( {} );
-WithLabel.args = {
-	...Default.args,
 	label: 'Label text',
 };
 
 export const WithHelpText = BaseControlWithTextarea.bind( {} );
 WithHelpText.args = {
-	...WithLabel.args,
+	...Default.args,
 	help: 'Help text adds more explanation.',
 };
 
-export const WithVisualLabel = ( { visualLabelChildren, ...props } ) => {
+/**
+ * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ *
+ * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+ * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+ * otherwise use if the `label` prop was passed.
+ */
+export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
+	props
+) => {
+	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
+
 	return (
-		<>
-			<BaseControl { ...props }>
-				<div>
-					<BaseControl.VisualLabel>
-						{ visualLabelChildren }
-					</BaseControl.VisualLabel>
-				</div>
+		<BaseControl { ...props }>
+			<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>
+			<div>
 				<Button variant="secondary">Select an author</Button>
-			</BaseControl>
-			<Spacer marginTop={ 12 }>
-				<p>
-					<code>BaseControl.VisualLabel</code> is used to render a
-					purely visual label inside a <code>BaseControl</code>{ ' ' }
-					component.
-				</p>
-				<p>
-					It should <strong>only</strong> be used in cases where the
-					children being rendered inside BaseControl are already
-					accessibly labeled, e.g., a button, but we want an
-					additional visual label for that section equivalent to the
-					labels BaseControl would otherwise use if the{ ' ' }
-					<code>label</code> prop was passed.
-				</p>
-			</Spacer>
-		</>
+			</div>
+		</BaseControl>
 	);
 };
 WithVisualLabel.args = {
 	...Default.args,
 	help: 'This button is already accessibly labeled.',
-	visualLabelChildren: 'Author',
-};
-WithVisualLabel.argTypes = {
-	visualLabelChildren: {
-		name: 'VisualLabel children',
-	},
+	id: undefined,
+	label: undefined,
 };

From b606f7f219e030c2155b3b18154593ed2880d165 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Mar 2022 23:52:09 +0900
Subject: [PATCH 04/15] Clarify `id` description

---
 packages/components/src/base-control/README.md | 16 +++++++++-------
 packages/components/src/base-control/index.tsx |  1 +
 packages/components/src/base-control/types.ts  |  4 ++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index 6e507ee4df87a8..a924a591d7bc44 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -1,14 +1,15 @@
 # BaseControl
 
-BaseControl component is used to generate labels and help text for components handling user inputs.
+`BaseControl` is a component used to generate labels and help text for components handling user inputs.
 
 ## Usage
 
-Render a BaseControl for a textarea input:
+Render a `BaseControl` for a textarea input:
 
 ```jsx
 import { BaseControl } from '@wordpress/components';
 
+// The `id` prop is necessary to accessibly associate the label with the textarea
 const MyBaseControl = () => (
 	<BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
 		<textarea id="textarea-1" />
@@ -22,10 +23,10 @@ The component accepts the following props:
 
 ### id
 
-The id of the element to which labels and help text are being generated. That element should be passed as a child.
+The HTML `id` of the element (passed in as a child to `BaseControl`) to which labels and help text are being generated. This is necessary to accessibly associate the label with that element.
 
 -   Type: `String`
--   Required: Yes
+-   Required: No
 
 ### label
 
@@ -73,8 +74,9 @@ Start opting into the new margin-free styles that will become the default in a f
 
 ## BaseControl.VisualLabel
 
-`BaseControl.VisualLabel` component is used to render a purely visual label inside a `BaseControl` component.
-It should only be used in cases where the children being rendered inside BaseControl are already properly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels BaseControl would otherwise use if the label prop was passed.
+`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+
+It should only be used in cases where the children being rendered inside BaseControl are already accessibly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would otherwise use if the `label` prop was passed.
 
 ## Usage
 
@@ -82,7 +84,7 @@ It should only be used in cases where the children being rendered inside BaseCon
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl help="Pressing the Select an author button will open a modal that allows an advanced mechanism for author selection">
+	<BaseControl help="This button is already accessibly labeled.">
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 4d6721fdea23bf..e08c9946408a1e 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -24,6 +24,7 @@ import {
  * // Render a `BaseControl` for a textarea input
  * import { BaseControl } from '@wordpress/components';
  *
+ * // The `id` prop is necessary to accessibly associate the label with the textarea
  * const MyBaseControl = () => (
  *   <BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
  *     <textarea id="textarea-1" />
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index b74fd937cdceb1..5de5a104657aaf 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -20,8 +20,8 @@ export type BaseControlProps = {
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**
-	 * The id of the element to which labels and help text are being generated.
-	 * That element should be passed as a child.
+	 * The HTML `id` of the element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
+	 * This is necessary to accessibly associate the label with that element.
 	 */
 	id?: string;
 	/**

From 64df83bfaea8cfafb8fe275016b2ef128e074cfd Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 16 Mar 2022 00:16:32 +0900
Subject: [PATCH 05/15] Make ids in stories unique

---
 packages/components/src/base-control/stories/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/base-control/stories/index.tsx b/packages/components/src/base-control/stories/index.tsx
index 67af4ab2a3c8c2..1c4fdbca512149 100644
--- a/packages/components/src/base-control/stories/index.tsx
+++ b/packages/components/src/base-control/stories/index.tsx
@@ -39,13 +39,14 @@ export const Default: ComponentStory<
 > = BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
-	id: 'textarea-1',
+	id: 'textarea-default-1',
 	label: 'Label text',
 };
 
 export const WithHelpText = BaseControlWithTextarea.bind( {} );
 WithHelpText.args = {
 	...Default.args,
+	id: 'textarea-with-help-text-1',
 	help: 'Help text adds more explanation.',
 };
 

From 00e909153e7532b6ffa3b3d69483542b11d8bc22 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 16 Mar 2022 01:05:26 +0900
Subject: [PATCH 06/15] Remove mentions of hard-coded class names

---
 packages/components/src/base-control/README.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index a924a591d7bc44..d940a7bc2fdc24 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -51,8 +51,7 @@ If this property is added, a help text will be generated using help property as
 
 ### className
 
-The class that will be added with "components-base-control" to the classes of the wrapper div.
-If no className is passed only components-base-control is used.
+Any other classes to add to the wrapper div.
 
 -   Type: `String`
 -   Required: No
@@ -95,8 +94,7 @@ const MyBaseControl = () => (
 
 #### className
 
-The class that will be added with `components-base-control__label` to the classes of the wrapper div.
-If no className is passed only `components-base-control__label` is used.
+Any other classes to add to the wrapper div.
 
 -   Type: `String`
 -   Required: No

From 6697a09cf1ddba92c5c33b10dd8de8bfe46c0e31 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 18 Mar 2022 03:26:04 +0900
Subject: [PATCH 07/15] Add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9eea42bcf61ca0..72720ef4cd0cb0 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -20,6 +20,7 @@
 
 -   Delete the `composeStateReducers` utility function ([#39262](https://github.com/WordPress/gutenberg/pull/39262)).
 -   `BoxControl`: stop using `UnitControl`'s deprecated `unit` prop ([#39511](https://github.com/WordPress/gutenberg/pull/39511)).
+-   `BaseControl`: Convert to TypeScript ([#39468](https://github.com/WordPress/gutenberg/pull/39468)).
 
 ### Bug Fix
 

From bcf38a5532bf6439a527f7b89b08b00927bde260 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 19 Mar 2022 00:03:19 +0900
Subject: [PATCH 08/15] Update snapshots

---
 .../tools-panel/test/__snapshots__/index.js.snap | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
index 771f9a8008889d..0ff75b502fdb0c 100644
--- a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
+++ b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
@@ -89,15 +89,15 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   max-width: 100%;
 }
 
-.emotion-6.emotion-6 .e1puf3u4 {
+.emotion-6.emotion-6 .ej5x27r4 {
   margin-bottom: 0;
 }
 
-.emotion-6.emotion-6 .e1puf3u4 .e1puf3u3:last-child {
+.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child {
   margin-bottom: 0;
 }
 
-.emotion-6 .e1puf3u1 {
+.emotion-6 .ej5x27r1 {
   margin-bottom: 0;
 }
 
@@ -106,7 +106,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 }
 
 .emotion-6 .components-custom-select-control__label,
-.emotion-6 .e1puf3u2 {
+.emotion-6 .ej5x27r2 {
   line-height: 1.4em;
 }
 
@@ -121,15 +121,15 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   max-width: 100%;
 }
 
-.emotion-8.emotion-8 .e1puf3u4 {
+.emotion-8.emotion-8 .ej5x27r4 {
   margin-bottom: 0;
 }
 
-.emotion-8.emotion-8 .e1puf3u4 .e1puf3u3:last-child {
+.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child {
   margin-bottom: 0;
 }
 
-.emotion-8 .e1puf3u1 {
+.emotion-8 .ej5x27r1 {
   margin-bottom: 0;
 }
 
@@ -138,7 +138,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 }
 
 .emotion-8 .components-custom-select-control__label,
-.emotion-8 .e1puf3u2 {
+.emotion-8 .ej5x27r2 {
   line-height: 1.4em;
 }
 

From dc97c1c5e40ac68136c7f09ede19ebed83e32858 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 23 Mar 2022 00:35:12 +0900
Subject: [PATCH 09/15] Remove unnecessary comment for `children` prop

---
 packages/components/src/base-control/types.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 5de5a104657aaf..324f0786eac40a 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -39,9 +39,6 @@ export type BaseControlProps = {
 	 */
 	hideLabelFromVision?: boolean;
 	className?: HTMLAttributes< typeof Wrapper >[ 'className' ];
-	/**
-	 * The content to be displayed within the `BaseControl`.
-	 */
 	children?: HTMLAttributes< typeof StyledField >[ 'children' ];
 };
 

From 9d37bd175d3ac1d45ae482277b2f55c93cd6698c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 23 Mar 2022 00:36:33 +0900
Subject: [PATCH 10/15] Require `children` prop

This matches the readme and common-sense usage of this component
---
 packages/components/src/base-control/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 324f0786eac40a..8bb999b8f82857 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -39,7 +39,7 @@ export type BaseControlProps = {
 	 */
 	hideLabelFromVision?: boolean;
 	className?: HTMLAttributes< typeof Wrapper >[ 'className' ];
-	children?: HTMLAttributes< typeof StyledField >[ 'children' ];
+	children: HTMLAttributes< typeof StyledField >[ 'children' ];
 };
 
 export type BaseControlVisualLabelProps = Pick<

From 478a7c40e31f3a31e9f58ff1209b0475901e645d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 24 Mar 2022 02:11:33 +0900
Subject: [PATCH 11/15] Revert "Remove unnecessary comment for `children` prop"

This reverts commit 6e59dbe480f162683504cdb3c4fa691e6e43d0d6.

# Conflicts:
#	packages/components/src/base-control/types.ts
---
 packages/components/src/base-control/types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 8bb999b8f82857..971496e10fb152 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -39,6 +39,9 @@ export type BaseControlProps = {
 	 */
 	hideLabelFromVision?: boolean;
 	className?: HTMLAttributes< typeof Wrapper >[ 'className' ];
+	/**
+	 * The content to be displayed within the `BaseControl`.
+	 */
 	children: HTMLAttributes< typeof StyledField >[ 'children' ];
 };
 

From 24a74a6592a72dab0580493e92c89fb2703caf6e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 24 Mar 2022 04:16:34 +0900
Subject: [PATCH 12/15] Simplify className/children props

---
 packages/components/src/base-control/types.ts | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 971496e10fb152..0cefb33db0ec90 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
-import type {
-	Wrapper,
-	StyledField,
-	StyledVisualLabel,
-} from './styles/base-control-styles';
+import type { ReactNode } from 'react';
 
 export type BaseControlProps = {
 	/**
@@ -38,14 +29,14 @@ export type BaseControlProps = {
 	 * @default false
 	 */
 	hideLabelFromVision?: boolean;
-	className?: HTMLAttributes< typeof Wrapper >[ 'className' ];
+	className?: string;
 	/**
 	 * The content to be displayed within the `BaseControl`.
 	 */
-	children: HTMLAttributes< typeof StyledField >[ 'children' ];
+	children: ReactNode;
 };
 
-export type BaseControlVisualLabelProps = Pick<
-	HTMLAttributes< typeof StyledVisualLabel >,
-	'className' | 'children'
->;
+export type BaseControlVisualLabelProps = {
+	className?: string;
+	children: ReactNode;
+};

From 8325df10e960def660874009ff79c0ac47b13c17 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 24 Mar 2022 04:16:51 +0900
Subject: [PATCH 13/15] Disable `children` control

---
 packages/components/src/base-control/stories/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/base-control/stories/index.tsx b/packages/components/src/base-control/stories/index.tsx
index 1c4fdbca512149..20bae840f41b5a 100644
--- a/packages/components/src/base-control/stories/index.tsx
+++ b/packages/components/src/base-control/stories/index.tsx
@@ -13,6 +13,7 @@ const meta: ComponentMeta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	argTypes: {
+		children: { control: { type: null } },
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
 	},

From 8214be2fe62364ff7b5c88fd3f889520b549f788 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 24 Mar 2022 04:18:24 +0900
Subject: [PATCH 14/15] Simplify BaseControl type and rely more on inference

Without this, the docgen is confused and fails to mark `children` as required
---
 packages/components/src/base-control/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index e08c9946408a1e..ab2af8858dbaae 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -31,9 +31,7 @@ import {
  *   </BaseControl>
  * );
  */
-export const BaseControl: FunctionComponent< BaseControlProps > & {
-	VisualLabel: typeof VisualLabel;
-} = ( {
+export const BaseControl = ( {
 	__nextHasNoMarginBottom = false,
 	id,
 	label,
@@ -41,7 +39,7 @@ export const BaseControl: FunctionComponent< BaseControlProps > & {
 	help,
 	className,
 	children,
-} ) => {
+}: BaseControlProps ) => {
 	return (
 		<Wrapper
 			className={ classnames( 'components-base-control', className ) }

From e6fa3ddcb53e043efa13c6a571c652d5702ea748 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 24 Mar 2022 07:17:13 +0900
Subject: [PATCH 15/15] Fixup changelog entry position

---
 packages/components/CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 72720ef4cd0cb0..ccd526664ea57b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `BaseControl`: Convert to TypeScript ([#39468](https://github.com/WordPress/gutenberg/pull/39468)).
+
 ## 19.7.0 (2022-03-23)
 
 ### Enhancements
@@ -20,7 +24,6 @@
 
 -   Delete the `composeStateReducers` utility function ([#39262](https://github.com/WordPress/gutenberg/pull/39262)).
 -   `BoxControl`: stop using `UnitControl`'s deprecated `unit` prop ([#39511](https://github.com/WordPress/gutenberg/pull/39511)).
--   `BaseControl`: Convert to TypeScript ([#39468](https://github.com/WordPress/gutenberg/pull/39468)).
 
 ### Bug Fix