-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CircularOptionPicker: refactor to TypeScript (#47937)
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
- Loading branch information
Showing
6 changed files
with
428 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
packages/components/src/circular-option-picker/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
# `CircularOptionPicker` | ||
|
||
<div class="callout callout-alert"> | ||
This component is not exported, and therefore can only be used internally to the `@wordpress/components` package. | ||
</div> | ||
|
||
`CircularOptionPicker` is a component that displays a set of options as circular buttons. | ||
|
||
## Usage | ||
|
||
```jsx | ||
import { CircularOptionPicker } from '../circular-option-picker'; | ||
import { useState } from '@wordpress/element'; | ||
|
||
const Example = () => { | ||
const [ currentColor, setCurrentColor ] = useState(); | ||
const colors = [ | ||
{ color: '#f00', name: 'Red' }, | ||
{ color: '#0f0', name: 'Green' }, | ||
{ color: '#00f', name: 'Blue' }, | ||
]; | ||
const colorOptions = ( | ||
<> | ||
{ colors.map( ( { color, name }, index ) => { | ||
return ( | ||
<CircularOptionPicker.Option | ||
key={ `${ color }-${ index }` } | ||
tooltipText={ name } | ||
style={ { backgroundColor: color, color } } | ||
isSelected={ index === currentColor } | ||
onClick={ () => setCurrentColor( index ) } | ||
aria-label={ name } | ||
/> | ||
); | ||
} ) } | ||
</> | ||
); | ||
return ( | ||
<CircularOptionPicker | ||
options={ colorOptions } | ||
actions={ | ||
<CircularOptionPicker.ButtonAction | ||
onClick={ () => setCurrentColor( undefined ) } | ||
> | ||
{ 'Clear' } | ||
</CircularOptionPicker.ButtonAction> | ||
} | ||
/> | ||
); | ||
}; | ||
``` | ||
|
||
## Props | ||
|
||
### `className`: `string` | ||
|
||
A CSS class to apply to the wrapper element. | ||
|
||
- Required: No | ||
|
||
### `actions`: `ReactNode` | ||
|
||
The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette`. | ||
|
||
Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component. | ||
|
||
- Required: No | ||
|
||
### `options`: `ReactNode` | ||
|
||
The options to be rendered, such as color swatches. | ||
|
||
Usually a `CircularOptionPicker.Option` component. | ||
|
||
- Required: No | ||
|
||
### `children`: `ReactNode` | ||
|
||
The child elements. | ||
|
||
- Required: No | ||
|
||
## Subcomponents | ||
|
||
### `CircularOptionPicker.ButtonAction` | ||
|
||
A `ButtonAction` is an action that is rendered as a button alongside the options themselves. | ||
|
||
A common use case is a 'clear' button to deselect the currently selected option. | ||
|
||
#### Props | ||
|
||
##### `className`: `string` | ||
|
||
A CSS class to apply to the underlying `Button` component. | ||
|
||
- Required: No | ||
|
||
##### `children`: `ReactNode` | ||
|
||
The button's children. | ||
|
||
- Required: No | ||
|
||
##### Inherited props | ||
|
||
`CircularOptionPicker.ButtonAction` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`. | ||
|
||
### `CircularOptionPicker.DropdownLinkAction` | ||
|
||
`CircularOptionPicker.DropdownLinkAction` is an action that's hidden behind a dropdown toggle. The button is formatted as a link and rendered as an `anchor` element. | ||
|
||
#### Props | ||
|
||
##### `className`: `string` | ||
|
||
A CSS class to apply to the underlying `Dropdown` component. | ||
|
||
- Required: No | ||
|
||
##### `linkText`: `string` | ||
|
||
The text to be displayed on the button. | ||
|
||
- Required: Yes | ||
|
||
##### `dropdownProps`: `object` | ||
|
||
The props for the underlying `Dropdown` component. | ||
|
||
Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.md#props), except for `className` and `renderToggle`. | ||
|
||
- Required: Yes | ||
|
||
##### `buttonProps`: `object` | ||
|
||
Props for the underlying `Button` component. | ||
|
||
Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. | ||
|
||
- Required: No |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
76a2cf2
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.
Flaky tests detected in 76a2cf2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4251925028
📝 Reported issues:
/test/e2e/specs/editor/blocks/navigation.spec.js
specs/editor/various/multi-block-selection.test.js