Skip to content

Commit

Permalink
Move Usage section to the top of the README. remove experimental prop…
Browse files Browse the repository at this point in the history
…s from README
  • Loading branch information
kienstra committed Oct 25, 2022
1 parent bb25a62 commit 4fd5d9c
Showing 1 changed file with 30 additions and 46 deletions.
76 changes: 30 additions & 46 deletions packages/components/src/color-palette/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,36 @@

ColorPalette allows the user to pick a color from a list of pre-defined color entries.

## Usage

```jsx
import { ColorPalette } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyColorPalette = () => {
const [ color, setColor ] = useState ( '#f00' )
const colors = [
{ name: 'red', color: '#f00' },
{ name: 'white', color: '#fff' },
{ name: 'blue', color: '#00f' },
];

return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( color ) => setColor( color ) }
/>
);
} );
```

If you're using this component outside the editor, you can
[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
`Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.

## Props

The component accepts the following props.
Expand Down Expand Up @@ -59,49 +89,3 @@ Whether the palette should have a clearing button.
- Type: `Boolean`
- Required: No
- Default: true

### __experimentalHasMultipleOrigins

Whether the colors prop is an array of color palettes, rather than an array of color objects.

- Type: `Boolean`
- Required: No
- Default: false

### __experimentalIsRenderedInSidebar

Whether this is rendered in the sidebar.

- Type: `Boolean`
- Required: No
- Default: false

## Usage

```jsx
import { ColorPalette } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyColorPalette = () => {
const [ color, setColor ] = useState ( '#f00' )
const colors = [
{ name: 'red', color: '#f00' },
{ name: 'white', color: '#fff' },
{ name: 'blue', color: '#00f' },
];

return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( color ) => setColor( color ) }
/>
);
} );
```

If you're using this component outside the editor, you can
[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
`Popover.Slot` further up the element tree and within a
`SlotFillProvider` overall.

0 comments on commit 4fd5d9c

Please sign in to comment.