Skip to content
Next Next commit
Update README and JSDoc
  • Loading branch information
DaniGuardiola committed Sep 24, 2024
commit b7f9af87f212b83c68d6f1b92daa6d9ee1e2024d
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
# BorderBoxControl

<div class="callout callout-alert">
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
</div>
<br />

This component provides users with the ability to configure a single "flat"
border or separate borders per side.
An input control for the color, style, and width of the border of a box. The
border can be customized as a whole, or individually for each side of the box.

## Development guidelines

Expand All @@ -28,7 +23,7 @@ show "Mixed" placeholder text.

```jsx
import { useState } from 'react';
import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
import { BorderBoxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const colors = [
Expand Down Expand Up @@ -76,35 +71,35 @@ colors are organized by multiple origins.

Each color may be an object containing a `name` and `color` value.

- Required: No
- Default: `[]`
- Required: No
- Default: `[]`

### `disableCustomColors`: `boolean`

This toggles the ability to choose custom colors.

- Required: No
- Required: No

### `enableAlpha`: `boolean`

This controls whether the alpha channel will be offered when selecting
custom colors.

- Required: No
- Default: `false`
- Required: No
- Default: `false`

### `enableStyle`: `boolean`

This controls whether to support border style selections.

- Required: No
- Default: `true`
- Required: No
- Default: `true`

### `hideLabelFromVision`: `boolean`

Provides control over whether the label will only be visible to screen readers.

- Required: No
- Required: No

### `label`: `string`

Expand All @@ -113,7 +108,7 @@ If provided, a label will be generated using this as the content.
_Whether it is visible only to screen readers is controlled via
`hideLabelFromVision`._

- Required: No
- Required: No

### `onChange`: `( value?: Object ) => void`

Expand All @@ -123,7 +118,7 @@ borders, or `undefined`.

_Note: The will be `undefined` if a user clears all borders._

- Required: Yes
- Required: Yes

### `popoverPlacement`: `string`

Expand All @@ -133,21 +128,21 @@ By default, popovers are displayed relative to the button that initiated the pop

The available base placements are 'top', 'right', 'bottom', 'left'. Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.

- Required: No
- Required: No

### `popoverOffset`: `number`

The space between the popover and the control wrapper.

- Required: No
- Required: No

### `size`: `string`

Size of the control.

- Required: No
- Default: `default`
- Allowed values: `default`, `__unstable-large`
- Required: No
- Default: `default`
- Allowed values: `default`, `__unstable-large`

### `value`: `Object`

Expand All @@ -158,6 +153,7 @@ properties or a "split" border which defines the previous properties but for
each side; `top`, `right`, `bottom`, and `left`.

Examples:

```js
const flatBorder = { color: '#72aee6', style: 'solid', width: '1px' };
const splitBorders = {
Expand All @@ -168,11 +164,11 @@ const splitBorders = {
};
```

- Required: No
- Required: No

### `__next40pxDefaultSize`: `boolean`

Start opting into the larger default height that will become the default size in a future version.

- Required: No
- Default: `false`
- Required: No
- Default: `false`
Original file line number Diff line number Diff line change
Expand Up @@ -147,22 +147,11 @@ const UnconnectedBorderBoxControl = (
};

/**
* The `BorderBoxControl` effectively has two view states. The first, a "linked"
* view, allows configuration of a flat border via a single `BorderControl`.
* The second, a "split" view, contains a `BorderControl` for each side
* as well as a visualizer for the currently selected borders. Each view also
* contains a button to toggle between the two.
*
* When switching from the "split" view to "linked", if the individual side
* borders are not consistent, the "linked" view will display any border
* properties selections that are consistent while showing a mixed state for
* those that aren't. For example, if all borders had the same color and style
* but different widths, then the border dropdown in the "linked" view's
* `BorderControl` would show that consistent color and style but the "linked"
* view's width input would show "Mixed" placeholder text.
* An input control for the color, style, and width of the border of a box. The
* border can be customized as a whole, or individually for each side of the box.
*
* ```jsx
* import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
* import { BorderBoxControl } from '@wordpress/components';
* import { __ } from '@wordpress/i18n';
*
* const colors = [
Expand Down