-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TreeSelect: Deprecate 36px default size #67855
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
# TreeSelect | ||
|
||
TreeSelect component is used to generate select input fields. | ||
<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Taking this opportunity to convert this to an auto-generated README. |
||
|
||
## Usage | ||
<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-treeselect--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p> | ||
|
||
Render a user interface to select the parent page in a hierarchy of pages: | ||
Generates a hierarchical select input. | ||
|
||
```jsx | ||
import { useState } from 'react'; | ||
|
@@ -15,7 +15,8 @@ const MyTreeSelect = () => { | |
|
||
return ( | ||
<TreeSelect | ||
__nextHasNoMarginBottom | ||
__nextHasNoMarginBottom | ||
__next40pxDefaultSize | ||
label="Parent page" | ||
noOptionLabel="No parent page" | ||
onChange={ ( newPage ) => setPage( newPage ) } | ||
|
@@ -50,51 +51,165 @@ 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is useful information that we removed by auto-generating the README. Can we make sure it gets included? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Mmm right, I think this is something we need to address at the package level. The majority of our components that do pass down props, we don't say that explicitly (e.g. in the canonical Storybook props docs), even though the TS types include them. Extracted to #67979 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds good to be addressed as a follow-up 👍 |
||
### `__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` | ||
|
||
### label | ||
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` | ||
|
||
If this property is added, a label will be generated using label property as the content. | ||
|
||
- Type: `String` | ||
- Required: No | ||
- Type: `ReactNode` | ||
- Required: No | ||
|
||
### `labelPosition` | ||
|
||
The position of the label. | ||
|
||
### noOptionLabel | ||
- 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<HTMLSelectElement>; }) => 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 | ||
`<option>` attributes. | ||
|
||
### onChange | ||
- Type: `readonly ({ label: string; value: string; } & Omit<OptionHTMLAttributes<HTMLOptionElement>, "label" | "value">)[]` | ||
- Required: No | ||
|
||
A function that receives the id of the new node element that is being selected. | ||
### `prefix` | ||
|
||
Renders an element on the left side of the input. | ||
|
||
By default, the prefix is aligned with the edge of the input border, with no padding. | ||
If you want to apply standard padding in accordance with the size variant, wrap the element in | ||
the provided `<InputControlPrefixWrapper>` component. | ||
|
||
```jsx | ||
import { | ||
__experimentalInputControl as InputControl, | ||
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, | ||
} from '@wordpress/components'; | ||
|
||
<InputControl | ||
prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>} | ||
/> | ||
``` | ||
|
||
- Type: `function` | ||
- Required: Yes | ||
- Type: `ReactNode` | ||
- Required: No | ||
|
||
### selectedId | ||
### `selectedId` | ||
|
||
The id of the currently selected node. | ||
|
||
- Type: `string` | `string[]` | ||
- Required: No | ||
- Type: `string` | ||
- Required: No | ||
|
||
### tree | ||
### `size` | ||
|
||
Adjusts the size of the input. | ||
|
||
- Type: `"default" | "small" | "compact" | "__unstable-large"` | ||
- Required: No | ||
- Default: `'default'` | ||
|
||
### `suffix` | ||
|
||
Renders an element on the right side of the input. | ||
|
||
By default, the suffix is aligned with the edge of the input border, with no padding. | ||
If you want to apply standard padding in accordance with the size variant, wrap the element in | ||
the provided `<InputControlSuffixWrapper>` component. | ||
|
||
```jsx | ||
import { | ||
__experimentalInputControl as InputControl, | ||
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, | ||
} from '@wordpress/components'; | ||
|
||
<InputControl | ||
suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>} | ||
/> | ||
``` | ||
|
||
- Type: `ReactNode` | ||
- Required: No | ||
|
||
### `tree` | ||
|
||
An array containing the tree objects with the possible nodes the user can select. | ||
|
||
- Type: `Object[]` | ||
- Required: No | ||
- Type: `Tree[]` | ||
- Required: No | ||
|
||
#### __nextHasNoMarginBottom | ||
### `variant` | ||
|
||
Start opting into the new margin-free styles that will become the default in a future version. | ||
The style variant of the control. | ||
|
||
- Type: `Boolean` | ||
- Required: No | ||
- Default: `false` | ||
- Type: `"default" | "minimal"` | ||
- Required: No | ||
- Default: `'default'` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"$schema": "../../schemas/docs-manifest.json", | ||
"displayName": "TreeSelect", | ||
"filePath": "./index.tsx" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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' ]; | ||
Comment on lines
+27
to
+30
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Overriding the prop description here because the original description includes mentions of a |
||
/** | ||
* An array containing the tree objects with the possible nodes the user can select. | ||
*/ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tweaking so the code snippets render correctly in a Markdown file.