Components: Add missing descriptions for design system components (WordPress#79460)

* Components: Add missing descriptions for design system components

* Components: Add missing descriptions for design system components

* 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.

* 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

* Add CHANGELOG notes

* Components: Fix duplicate "by"

Co-Authored-By: Nik Tsekouras <16275880+ntsekouras@users.noreply.github.com>

* Use code formatting for component name in description

Co-Authored-By: Marco Ciampini <1083581+ciampo@users.noreply.github.com>

* Components: Clarify that NumberControl is an input

Co-Authored-By: Marco Ciampini <1083581+ciampo@users.noreply.github.com>

---------

Co-authored-by: Nik Tsekouras <16275880+ntsekouras@users.noreply.github.com>
Co-authored-by: Marco Ciampini <1083581+ciampo@users.noreply.github.com>

Co-authored-by: aduth <aduth@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

Author: 3 people

packages/components/CHANGELOG.md

@@ -49,6 +49,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
 

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
+ * editing its hex, RGB, or HSL values.
+ */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,
 	'ColorPicker'

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: {

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 >
 ) {

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: {

packages/components/src/number-control/index.tsx

@@ -276,6 +276,10 @@ function UnforwardedNumberControl(
 	);
 }
 
+/**
+ * `NumberControl` is a text input control that lets users enter and adjust a
+ * numeric value.
+ */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';
 

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

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 &

packages/dataviews/CHANGELOG.md

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

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,