From f20ad34487f80c0292459dfadbb0d4ef3a3189b0 Mon Sep 17 00:00:00 2001
From: Ryan Welcher <me@ryanwelcher.com>
Date: Wed, 8 Sep 2021 00:04:47 -0400
Subject: [PATCH] AlignmentMatrixControl : Fix/update docs (#34624)

* Update example to import correctly and use a more verbose example in the onChange prop.
* Add prop details.

Co-authored-by: Ryan Welcher <ryanwelcher@automattic.com>
---
 .../src/alignment-matrix-control/README.md    | 53 +++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

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 (
-		<AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />
+		<AlignmentMatrixControl
+			value={alignment}
+			onChange={(newAlignment) => 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 <Composite/> 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 <Composite/> 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 <Composite/> component.
+ - Type: `Number`
+ - Required: No
+ - Default: `92`