From cd2ad3282f600de8d2c478bb6bad17407b6142f2 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 23 Jun 2026 16:13:45 -0400
Subject: [PATCH 1/8] Components: Add missing descriptions for design system
 components

---
 packages/components/src/color-picker/component.tsx           | 4 ++++
 packages/components/src/color-picker/stories/index.story.tsx | 5 +++++
 packages/components/src/custom-select-control/index.tsx      | 5 +++++
 packages/components/src/navigator/stories/index.story.tsx    | 5 +++++
 packages/components/src/number-control/index.tsx             | 3 +++
 packages/components/src/resizable-box/index.tsx              | 4 ++++
 packages/components/src/slot-fill/index.tsx                  | 5 +++++
 7 files changed, 31 insertions(+)

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index 3a427db5bfe8c1..cb6dbd3567161b 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -247,6 +247,10 @@ const UnconnectedColorPicker = (
 	);
 };
 
+/**
+ * ColorPicker lets users select a color from a visual color surface, or by
+ * by editing its hex, RGB, or HSL values.
+ */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,
 	'ColorPicker'
diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx
index 75b0e3c81bac9d..a370517cf152d8 100644
--- a/packages/components/src/color-picker/stories/index.story.tsx
+++ b/packages/components/src/color-picker/stories/index.story.tsx
@@ -12,6 +12,11 @@ import { ColorPicker } from '../component';
 const meta: Meta< typeof ColorPicker > = {
 	tags: [ 'manifest' ],
 	component: ColorPicker,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <ColorPicker { ...args } />,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {
diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx
index 88c5e7b68ad66e..c3931ea3284ccd 100644
--- a/packages/components/src/custom-select-control/index.tsx
+++ b/packages/components/src/custom-select-control/index.tsx
@@ -52,6 +52,11 @@ function getDescribedBy( currentName: string, describedBy?: string ) {
 	return sprintf( __( 'Currently selected: %s' ), currentName );
 }
 
+/**
+ * CustomSelectControl is a dropdown for selecting a single option from a list,
+ * with support for custom styling. Use it instead of the `SelectControl` when
+ * options need richer markup (e.g. per-option styles or hints).
+ */
 function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
 ) {
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
index 7ba89126c2daf0..c50238168da3a3 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -19,6 +19,11 @@ const meta: Meta< typeof Navigator > = {
 		Button: Navigator.Button,
 		BackButton: Navigator.BackButton,
 	},
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Navigator { ...args } />,
 	title: 'Components/Navigation/Navigator',
 	id: 'components-navigator',
 	argTypes: {
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index b90130ec3e6728..89ea45b086072f 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -276,6 +276,9 @@ function UnforwardedNumberControl(
 	);
 }
 
+/**
+ * NumberControl lets users enter and adjust a numeric value.
+ */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';
 
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 8c5cd753ef1eb5..a51599e0a866d6 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -132,6 +132,10 @@ function UnforwardedResizableBox(
 	);
 }
 
+/**
+ * ResizableBox wraps content in a container with draggable handles, letting
+ * users interactively resize it along one or more edges or corners.
+ */
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
 ResizableBox.displayName = 'ResizableBox';
 
diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx
index 95920120792320..190b8dc93c59b8 100644
--- a/packages/components/src/slot-fill/index.tsx
+++ b/packages/components/src/slot-fill/index.tsx
@@ -30,6 +30,11 @@ import type {
 
 export { Fill };
 
+/**
+ * Slot marks a location where content rendered by matching `Fill` components
+ * elsewhere will appear. Use it to allow a component to define UI areas that
+ * can be extended from other parts of the application.
+ */
 export const Slot = forwardRef(
 	(
 		props: SlotComponentProps &

From f19f76205348d9b3cf530fbaaea0927349bf7368 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 23 Jun 2026 16:13:54 -0400
Subject: [PATCH 2/8] Components: Add missing descriptions for design system
 components

---
 packages/dataviews/src/dataform/index.tsx                | 5 +++++
 packages/dataviews/src/dataviews-picker/index.tsx        | 5 +++++
 packages/dataviews/src/dataviews/index.tsx               | 5 +++++
 packages/dataviews/src/dataviews/stories/index.story.tsx | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index a634f43fa4b6bc..eb257d81d72f98 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -12,6 +12,11 @@ import { DataFormProvider } from '../components/dataform-context';
 import { DataFormLayout } from '../components/dataform-layouts/data-form-layout';
 import normalizeForm from '../components/dataform-layouts/normalize-form';
 
+/**
+ * DataForm renders an auto-generated form for viewing and editing the fields of
+ * a data item, driven by a fields and form layout configuration. Use it to edit
+ * items of a dataset, often alongside `DataViews`.
+ */
 export default function DataForm< Item >( {
 	data,
 	form,
diff --git a/packages/dataviews/src/dataviews-picker/index.tsx b/packages/dataviews/src/dataviews-picker/index.tsx
index b1fa9bf3098cfe..194209df03e7dc 100644
--- a/packages/dataviews/src/dataviews-picker/index.tsx
+++ b/packages/dataviews/src/dataviews-picker/index.tsx
@@ -269,6 +269,11 @@ function DataViewsPicker< Item >( {
 	);
 }
 
+/**
+ * DataViewsPicker renders a dataset allowing users to select one or multiple
+ * items. It shares the layouts, search, and filtering of `DataViews` but is
+ * geared toward choosing items rather than managing them.
+ */
 // Populate the DataViews sub components
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {
diff --git a/packages/dataviews/src/dataviews/index.tsx b/packages/dataviews/src/dataviews/index.tsx
index 2503df2c40001f..6c9b291b4993ed 100644
--- a/packages/dataviews/src/dataviews/index.tsx
+++ b/packages/dataviews/src/dataviews/index.tsx
@@ -310,6 +310,11 @@ function DataViews< Item >( {
 	);
 }
 
+/**
+ * DataViews renders a dataset using configurable layouts (table, grid, list)
+ * with built-in search, filtering, sorting, pagination, and actions. Use it to
+ * display and manage a collection of records.
+ */
 // Populate the DataViews sub components
 const DataViewsSubComponents = DataViews as typeof DataViews & {
 	BulkActionToolbar: typeof BulkActionsFooter;
diff --git a/packages/dataviews/src/dataviews/stories/index.story.tsx b/packages/dataviews/src/dataviews/stories/index.story.tsx
index 6e41bbf49a0997..8a973d3ed31460 100644
--- a/packages/dataviews/src/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/dataviews/stories/index.story.tsx
@@ -24,6 +24,11 @@ const meta = {
 	tags: [ 'manifest' ],
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <DataViews { ...args } />,
 	args: {
 		containerHeight: 'auto',
 	},

From 062b394afb9368f5d922d5e629bfc52bf955ad58 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 23 Jun 2026 16:14:42 -0400
Subject: [PATCH 3/8] Automated Testing: Disable require-param for tsx files
 project-wide

The already-documented rationale for this override isn't specific to these few packages and should apply for any `.tsx` file throughout the project.
---
 tools/eslint/config.mjs | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/tools/eslint/config.mjs b/tools/eslint/config.mjs
index 4c762f1c8f538b..e5007cf6a22d49 100644
--- a/tools/eslint/config.mjs
+++ b/tools/eslint/config.mjs
@@ -557,12 +557,7 @@ export default dedupePlugins( [
 	// component always receives props and returns a React element, and its
 	// props should be documented through its TypeScript props types.
 	{
-		files: [
-			'**/@(storybook|stories)/**',
-			'packages/components/src/**/*.tsx',
-			'packages/theme/src/**/*.tsx',
-			'packages/ui/src/**/*.tsx',
-		],
+		files: [ '**/*.tsx' ],
 		rules: {
 			'jsdoc/require-param': 'off',
 		},

From 75c109fb663f02768341b6bdbd383cbb2b01ff0d Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 23 Jun 2026 16:42:47 -0400
Subject: [PATCH 4/8] Automated Testing: Restore Storybook wildcard extension
 for disabling reuqire-param

Not all of these files are `.tsx`, so the pattern simplification inadvertently started checking some files previously overridden to ignore
---
 tools/eslint/config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/eslint/config.mjs b/tools/eslint/config.mjs
index e5007cf6a22d49..94498d3d87547b 100644
--- a/tools/eslint/config.mjs
+++ b/tools/eslint/config.mjs
@@ -557,7 +557,7 @@ export default dedupePlugins( [
 	// component always receives props and returns a React element, and its
 	// props should be documented through its TypeScript props types.
 	{
-		files: [ '**/*.tsx' ],
+		files: [ '**/@(storybook|stories)/**', '**/*.tsx' ],
 		rules: {
 			'jsdoc/require-param': 'off',
 		},

From 7323f9a6bfc0bdc20b4daefda9aac228e08bc81c Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Tue, 23 Jun 2026 16:45:13 -0400
Subject: [PATCH 5/8] Add CHANGELOG notes

---
 packages/components/CHANGELOG.md | 1 +
 packages/dataviews/CHANGELOG.md  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a493be7f1ce65e..2f64faf00d9468 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -25,6 +25,7 @@
 ### Documentation
 
 -   `Menu`: Fix `overriden` typo to `overridden` in `CheckboxItemProps` and `RadioItemProps`. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Add component documentation for `ColorPicker`, `CustomSelectControl`, `Navigator`, `NumberControl`, `ResizableBox`, and `Slot` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
 
 ### Code Quality
 
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index f819eb0312848d..622a3aa84a7e1e 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -19,7 +19,8 @@
 
 ### Documentation
 
-- Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Add component documentation for `DataViews`, `DataViewsPicker`, and `DataForm` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
 
 ### Internal
 

From ac6abdc967896d0eacc3b2c807e7f4169f1caa64 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Wed, 24 Jun 2026 09:32:29 -0400
Subject: [PATCH 6/8] Components: Fix duplicate "by"

Co-Authored-By: Nik Tsekouras <16275880+ntsekouras@users.noreply.github.com>
---
 packages/components/src/color-picker/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index cb6dbd3567161b..e6fe6e6fd6b765 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -249,7 +249,7 @@ const UnconnectedColorPicker = (
 
 /**
  * ColorPicker lets users select a color from a visual color surface, or by
- * by editing its hex, RGB, or HSL values.
+ * editing its hex, RGB, or HSL values.
  */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,

From cbe3ac06b029d0cd6bed341377aa1d8d2db0b6b4 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Wed, 24 Jun 2026 09:34:55 -0400
Subject: [PATCH 7/8] Use code formatting for component name in description

Co-Authored-By: Marco Ciampini <1083581+ciampo@users.noreply.github.com>
---
 packages/components/src/color-picker/component.tsx      | 2 +-
 packages/components/src/custom-select-control/index.tsx | 6 +++---
 packages/components/src/number-control/index.tsx        | 2 +-
 packages/components/src/resizable-box/index.tsx         | 2 +-
 packages/components/src/slot-fill/index.tsx             | 2 +-
 packages/dataviews/src/dataform/index.tsx               | 6 +++---
 packages/dataviews/src/dataviews-picker/index.tsx       | 2 +-
 packages/dataviews/src/dataviews/index.tsx              | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index e6fe6e6fd6b765..c3a592ddea8174 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -248,7 +248,7 @@ const UnconnectedColorPicker = (
 };
 
 /**
- * ColorPicker lets users select a color from a visual color surface, or by
+ * `ColorPicker` lets users select a color from a visual color surface, or by
  * editing its hex, RGB, or HSL values.
  */
 export const ColorPicker = contextConnect(
diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx
index c3931ea3284ccd..2e85dac88ec291 100644
--- a/packages/components/src/custom-select-control/index.tsx
+++ b/packages/components/src/custom-select-control/index.tsx
@@ -53,9 +53,9 @@ function getDescribedBy( currentName: string, describedBy?: string ) {
 }
 
 /**
- * CustomSelectControl is a dropdown for selecting a single option from a list,
- * with support for custom styling. Use it instead of the `SelectControl` when
- * options need richer markup (e.g. per-option styles or hints).
+ * `CustomSelectControl` is a dropdown for selecting a single option from a
+ * list, with support for custom styling. Use it instead of the `SelectControl`
+ * when options need richer markup (e.g. per-option styles or hints).
  */
 function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 89ea45b086072f..78e98055728dfb 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -277,7 +277,7 @@ function UnforwardedNumberControl(
 }
 
 /**
- * NumberControl lets users enter and adjust a numeric value.
+ * `NumberControl` lets users enter and adjust a numeric value.
  */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index a51599e0a866d6..2a99a8fdfa61ae 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -133,7 +133,7 @@ function UnforwardedResizableBox(
 }
 
 /**
- * ResizableBox wraps content in a container with draggable handles, letting
+ * `ResizableBox` wraps content in a container with draggable handles, letting
  * users interactively resize it along one or more edges or corners.
  */
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx
index 190b8dc93c59b8..cee70efc93cf7e 100644
--- a/packages/components/src/slot-fill/index.tsx
+++ b/packages/components/src/slot-fill/index.tsx
@@ -31,7 +31,7 @@ import type {
 export { Fill };
 
 /**
- * Slot marks a location where content rendered by matching `Fill` components
+ * `Slot` marks a location where content rendered by matching `Fill` components
  * elsewhere will appear. Use it to allow a component to define UI areas that
  * can be extended from other parts of the application.
  */
diff --git a/packages/dataviews/src/dataform/index.tsx b/packages/dataviews/src/dataform/index.tsx
index eb257d81d72f98..7b3d8b92d6f255 100644
--- a/packages/dataviews/src/dataform/index.tsx
+++ b/packages/dataviews/src/dataform/index.tsx
@@ -13,9 +13,9 @@ import { DataFormLayout } from '../components/dataform-layouts/data-form-layout'
 import normalizeForm from '../components/dataform-layouts/normalize-form';
 
 /**
- * DataForm renders an auto-generated form for viewing and editing the fields of
- * a data item, driven by a fields and form layout configuration. Use it to edit
- * items of a dataset, often alongside `DataViews`.
+ * `DataForm` renders an auto-generated form for viewing and editing the fields
+ * of a data item, driven by a fields and form layout configuration. Use it to
+ * edit items of a dataset, often alongside `DataViews`.
  */
 export default function DataForm< Item >( {
 	data,
diff --git a/packages/dataviews/src/dataviews-picker/index.tsx b/packages/dataviews/src/dataviews-picker/index.tsx
index 194209df03e7dc..862396389ad7a3 100644
--- a/packages/dataviews/src/dataviews-picker/index.tsx
+++ b/packages/dataviews/src/dataviews-picker/index.tsx
@@ -270,7 +270,7 @@ function DataViewsPicker< Item >( {
 }
 
 /**
- * DataViewsPicker renders a dataset allowing users to select one or multiple
+ * `DataViewsPicker` renders a dataset allowing users to select one or multiple
  * items. It shares the layouts, search, and filtering of `DataViews` but is
  * geared toward choosing items rather than managing them.
  */
diff --git a/packages/dataviews/src/dataviews/index.tsx b/packages/dataviews/src/dataviews/index.tsx
index 6c9b291b4993ed..486b94fed60ca6 100644
--- a/packages/dataviews/src/dataviews/index.tsx
+++ b/packages/dataviews/src/dataviews/index.tsx
@@ -311,7 +311,7 @@ function DataViews< Item >( {
 }
 
 /**
- * DataViews renders a dataset using configurable layouts (table, grid, list)
+ * `DataViews` renders a dataset using configurable layouts (table, grid, list)
  * with built-in search, filtering, sorting, pagination, and actions. Use it to
  * display and manage a collection of records.
  */

From 0c286d33e8b6c6e1a2e11ac28219d1dcf0d9a253 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@automattic.com>
Date: Wed, 24 Jun 2026 09:35:36 -0400
Subject: [PATCH 8/8] Components: Clarify that NumberControl is an input

Co-Authored-By: Marco Ciampini <1083581+ciampo@users.noreply.github.com>
---
 packages/components/src/number-control/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 78e98055728dfb..361293f0a370ba 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -277,7 +277,8 @@ function UnforwardedNumberControl(
 }
 
 /**
- * `NumberControl` lets users enter and adjust a numeric value.
+ * `NumberControl` is a text input control that lets users enter and adjust a
+ * numeric value.
  */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';