UnitControl: Fixed documentation for units attribute (#31901)

WordPress · Jun 2, 2021 · b61a2d8 · b61a2d8
1 parent 4793303
commit b61a2d8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
@@ -108,21 +108,23 @@ Collection of available units.
 Example:
 
 ```jsx
-import { __experimentalUnitControl as UnitControl } from '@wordpress/block-editor/';
+import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
+
 	const units = [
 		{ value: 'px', label: 'px', default: 0 },
 		{ value: '%', label: '%', default: 10 },
 		{ value: 'em', label: 'em', default: 0 },
 	];
 
-	return <UnitControl onChange={ setValue } value={ value } />;
+	return <UnitControl onChange={ setValue } value={ value } units={units} />;
 };
 ```
 
-A `default` value for (in the example above, `10` for `%`), if defined, is set as the new `value` when a unit changes. This is helpful in scenarios where changing a unit may cause drastic results, such as changing from `px` to `vh`.
+A `default` value (in the example above, `10` for `%`), if defined, is set as the new `value` when a unit changes. This is helpful in scenarios where changing a unit may cause drastic results, such as changing from `px` to `vh`.
 
 ### value
 

diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { boolean, number, select, text } from '@storybook/addon-knobs';
+import { boolean, number, select, text, object } from '@storybook/addon-knobs';
 import styled from '@emotion/styled';
 
 /**
@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import UnitControl from '../';
+import { CSS_UNITS } from '../utils';
 
 export default {
 	title: 'Components/UnitControl',
@@ -41,6 +42,7 @@ function Example() {
 			'default'
 		),
 		step: number( 'step', 1 ),
+		units: object( 'units', CSS_UNITS ),
 	};
 
 	return (