From 111d2ee81efc51ae7e4eb403b766b5dcde81de55 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:43:45 +0900 Subject: [PATCH 1/5] TreeSelect: Deprecate 36px default size --- packages/components/src/tree-select/index.tsx | 10 +++++++++- .../components/src/tree-select/stories/index.story.tsx | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx index 075ae1268e3c72..36625714421bbf 100644 --- a/packages/components/src/tree-select/index.tsx +++ b/packages/components/src/tree-select/index.tsx @@ -11,6 +11,7 @@ import { SelectControl } from '../select-control'; import type { TreeSelectProps, Tree, Truthy } from './types'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; import { ContextSystemProvider } from '../context'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const CONTEXT_VALUE = { BaseControl: { @@ -35,7 +36,7 @@ function getSelectOptions( } /** - * TreeSelect component is used to generate select input fields. + * Generates a hierarchical select input. * * ```jsx * import { TreeSelect } from '@wordpress/components'; @@ -47,6 +48,7 @@ function getSelectOptions( * return ( * setPage( newPage ) } @@ -99,6 +101,12 @@ export function TreeSelect( props: TreeSelectProps ) { ].filter( < T, >( option: T ): option is Truthy< T > => !! option ); }, [ noOptionLabel, tree ] ); + maybeWarnDeprecated36pxSize( { + componentName: 'TreeSelect', + size: restProps.size, + __next40pxDefaultSize: restProps.__next40pxDefaultSize, + } ); + return ( = ( props ) => { export const Default = TreeSelectWithState.bind( {} ); Default.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, label: 'Label Text', noOptionLabel: 'No parent page', help: 'Help text to explain the select control.', From 9fb481ac25d040f342eb1570436afc7ecff596a5 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:44:04 +0900 Subject: [PATCH 2/5] Fix types --- packages/components/src/tree-select/types.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tree-select/types.ts b/packages/components/src/tree-select/types.ts index da90ece3a658e8..59e8e173fab02f 100644 --- a/packages/components/src/tree-select/types.ts +++ b/packages/components/src/tree-select/types.ts @@ -16,11 +16,18 @@ export interface Tree { // `TreeSelect` inherits props from `SelectControl`, but only // in single selection mode (ie. when the `multiple` prop is not defined). export interface TreeSelectProps - extends Omit< SelectControlSingleSelectionProps, 'value' | 'multiple' > { + extends Omit< + SelectControlSingleSelectionProps, + 'value' | 'multiple' | 'onChange' + > { /** * If this property is added, an option will be added with this label to represent empty selection. */ noOptionLabel?: string; + /** + * A function that receives the value of the new option that is being selected as input. + */ + onChange?: SelectControlSingleSelectionProps[ 'onChange' ]; /** * An array containing the tree objects with the possible nodes the user can select. */ From 40a8cd133ab7a139b2c2109da26ea6b1d0328a43 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:44:29 +0900 Subject: [PATCH 3/5] Auto-generate readme --- packages/components/src/tree-select/README.md | 167 +++++++++++++++--- .../src/tree-select/docs-manifest.json | 5 + 2 files changed, 143 insertions(+), 29 deletions(-) create mode 100644 packages/components/src/tree-select/docs-manifest.json diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md index 3d26488478bd0c..73b835a62d5b55 100644 --- a/packages/components/src/tree-select/README.md +++ b/packages/components/src/tree-select/README.md @@ -1,21 +1,22 @@ # TreeSelect -TreeSelect component is used to generate select input fields. + -## Usage +

See the WordPress Storybook for more detailed, interactive documentation.

-Render a user interface to select the parent page in a hierarchy of pages: +Generates a hierarchical select input. ```jsx -import { useState } from 'react'; import { TreeSelect } from '@wordpress/components'; +import { useState } from '@wordpress/element'; const MyTreeSelect = () => { const [ page, setPage ] = useState( 'p21' ); return ( setPage( newPage ) } @@ -50,51 +51,159 @@ const MyTreeSelect = () => { ); } ``` - ## Props -The set of props accepted by the component will be specified below. -Props not included in this set will be applied to the SelectControl component being used. +### `__next40pxDefaultSize` + +Start opting into the larger default height that will become the default size in a future version. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `__nextHasNoMarginBottom` + +Start opting into the new margin-free styles that will become the default in a future version. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `children` + +As an alternative to the `options` prop, `optgroup`s and `options` can be +passed in as `children` for more customizability. + + - Type: `ReactNode` + - Required: No + +### `disabled` + +If true, the `input` will be disabled. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `hideLabelFromVision` + +If true, the label will only be visible to screen readers. + + - Type: `boolean` + - Required: No + - Default: `false` + +### `help` + +Additional description for the control. + +Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. + + - Type: `ReactNode` + - Required: No -### label +### `label` If this property is added, a label will be generated using label property as the content. -- Type: `String` -- Required: No + - Type: `ReactNode` + - Required: No -### noOptionLabel +### `labelPosition` + +The position of the label. + + - Type: `"top" | "bottom" | "side" | "edge"` + - Required: No + - Default: `'top'` + +### `noOptionLabel` If this property is added, an option will be added with this label to represent empty selection. -- Type: `String` -- Required: No + - Type: `string` + - Required: No + +### `onChange` + +A function that receives the value of the new option that is being selected as input. + + - Type: `(value: string, extra?: { event?: ChangeEvent; }) => void` + - Required: No + +### `options` + +An array of option property objects to be rendered, +each with a `label` and `value` property, as well as any other +`