diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md index d8470d905a1ae3..e041cb7f839209 100644 --- a/packages/components/src/alignment-matrix-control/README.md +++ b/packages/components/src/alignment-matrix-control/README.md @@ -5,14 +5,61 @@ AlignmentMatrixControl components enable adjustments to horizontal and vertical ## Usage ```jsx -import { AlignmentMatrixControl } from '@wordpress/components'; +import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; const Example = () => { - const [ alignment, setAlignment ] = useState( 'center center' ); + const [alignment, setAlignment] = useState('center center'); return ( - + setAlignment(newAlignment)} + /> ); }; ``` + +## Props + +The component accepts the following props: +### className + +The class that will be added with "component-alignment-matrix-control" to the classes of the wrapper component. +If no className is passed only "component-alignment-matrix-control" is used. + +- Type: `String` +- Required: No + +### id + +Unique ID for the component. +- Type: `String` +- Required: No +### label + +If provided, sets the aria-label attribute of the wrapper component. + +- Type: `String` +- Required: No +- Default: `Alignment Matrix Control` +### defaultValue + +If provided, sets the default alignment value. +- Type: `String` +- Required: No +- Default: `center center` + +### onChange + +A function that receives the updated alignment value. + +- Type: `function` +- Required: No +- Default: `noop` +### width + +If provided, sets the width of the wrapper component. + - Type: `Number` + - Required: No + - Default: `92`