Global Styles: Move prototype from G2

packages/components/src/index.js

@@ -79,6 +79,7 @@ export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
 export { default as __experimentalInputControl } from './input-control';
+export { Item, ItemGroup } from './item-group';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';

packages/components/src/item-group/context.js

@@ -0,0 +1,7 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const ItemGroupContext = createContext( { size: 'medium' } );
+export const useItemGroupContext = () => useContext( ItemGroupContext );

packages/components/src/item-group/index.js

@@ -0,0 +1,2 @@
+export { default as Item, useItem } from './item';
+export { default as ItemGroup, useItemGroup } from './item-group';

packages/components/src/item-group/item-group/component.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { contextConnect } from '../../ui/context';
+import { ItemGroupContext, useItemGroupContext } from '../context';
+import { useItemGroup } from './hook';
+import { View } from '../../view';
+
+function ItemGroup( props, ref ) {
+	const { bordered, separated, size: sizeProp, ...otherProps } = useItemGroup(
+		props
+	);
+
+	const { size: contextSize } = useItemGroupContext();
+
+	const spacedAround = ! bordered && ! separated;
+	const size = sizeProp || contextSize;
+
+	const contextValue = {
+		spacedAround,
+		size,
+	};
+
+	return (
+		<ItemGroupContext.Provider value={ contextValue }>
+			<View { ...otherProps } ref={ ref } />
+		</ItemGroupContext.Provider>
+	);
+}
+
+export default contextConnect( ItemGroup, 'ItemGroup' );

packages/components/src/item-group/item-group/hook.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { cx } from 'emotion';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem } from '../../ui/context';
+import * as styles from '../styles';
+
+export function useItemGroup( props ) {
+	const {
+		bordered = false,
+		className,
+		role = 'list',
+		rounded = true,
+		separated = false,
+		...otherProps
+	} = useContextSystem( props, 'ItemGroup' );
+
+	const classes = cx(
+		bordered && styles.bordered,
+		( bordered || separated ) && styles.separated,
+		rounded && styles.rounded,
+		className
+	);
+
+	return {
+		bordered,
+		className: classes,
+		role,
+		separated,
+		...otherProps,
+	};
+}

packages/components/src/item-group/item-group/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useItemGroup } from './hook';

packages/components/src/item-group/item/component.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import { createComponent } from '../../ui/utils';
+import { useItem } from './hook';
+
+export default createComponent( {
+	useHook: useItem,
+	as: 'div',
+	name: 'Item',
+} );