ItemGroup: migrate Storybook to controls, refactor to TypeScript (#46945

) * Rename file to TSX * Simplify and rewrite stories using controls instead of knobs * Add named exports, add component JSDocs * Fix border-box styles for `Item` * CHANGELOG * Rework Storybook examples * Snapshots * 🧹 * Moar snapshots * Format files
WordPress · Jan 9, 2023 · f69c191 · f69c191 · github-actions · Jan 9, 2023
1 parent 39dbf19
commit f69c191
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 284 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 -   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
 -   `SandBox`: Convert to TypeScript ([#46478](https://github.com/WordPress/gutenberg/pull/46478)).
 -   `ResponsiveWrapper`: Convert to TypeScript ([#46480](https://github.com/WordPress/gutenberg/pull/46480)).
+-   `ItemGroup`: migrate Storybook to controls, refactor to TypeScript ([46945](https://github.com/WordPress/gutenberg/pull/46945)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx
@@ -12,7 +12,7 @@ import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';
 import type { ItemGroupProps } from '../types';
 
-function ItemGroup(
+function UnconnectedItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -40,4 +40,27 @@ function ItemGroup(
 	);
 }
 
-export default contextConnect( ItemGroup, 'ItemGroup' );
+/**
+ * `ItemGroup` displays a list of `Item`s grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const ItemGroup = contextConnect( UnconnectedItemGroup, 'ItemGroup' );
+
+export default ItemGroup;
diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx
@@ -11,7 +11,7 @@ import { useItem } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 
-function Item(
+function UnconnectedItem(
 	props: WordPressComponentProps< ItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -24,4 +24,28 @@ function Item(
 	);
 }
 
-export default contextConnect( Item, 'Item' );
+/**
+ * `Item` is used in combination with `ItemGroup` to display a list of items
+ * grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const Item = contextConnect( UnconnectedItem, 'Item' );
+
+export default Item;
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js