WordPress · sarayourfriend · Mar 26, 2021 · Mar 26, 2021 · Mar 29, 2021
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { styled } from '@wp-g2/styles';
 
 /**
  * Internal dependencies

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { styled } from '@wp-g2/styles';
 
 /**
  * WordPress dependencies

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { css } from '@emotion/core';
-import styled from '@emotion/styled';
+import { styled } from '@wp-g2/styles';
+
 /**
  * Internal dependencies
  */

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { styled } from '@wp-g2/styles';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { HorizontalRule } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import Flex from '../../flex';
+import { Flex } from '../../flex';
 import { color, space } from '../../utils/style-mixins';
 
 export const styleProps = {

@@ -1,98 +1,65 @@
 # Flex
 
-Flex is a layout-based component, which provides a convenient way to align user-interfaces.
+`Flex` is a primitive layout component that adaptively aligns child content horizontally or vertically. `Flex` powers components like `HStack` and `VStack`.
 
 ## Usage
 
+`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+
 ```jsx
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Flex, FlexItem, FlexBlock, Text } from '@wordpress/components/ui';
 
-const Example = () => {
+function Example() {
 	return (
 		<Flex>
 			<FlexItem>
-				<Icon icon={ wordpress } />
+				<Text>Code</Text>
 			</FlexItem>
 			<FlexBlock>
-				<h2>WordPress</h2>
+				<Text>Poetry</Text>
 			</FlexBlock>
 		</Flex>
 	);
-};
+}
 ```
 
-The most common use-case for `<Flex />` would be to automatically align two (or more) child items of varying sizes. By default, `<Flex />` would vertically center align them, and evenly spread the inner content horizontally, starting at the edges.
-
-Child items can be added directly. However, it is recommended that they are wrapped with `<FlexItem />` (which helps normalize layout styles).
-
-![Flex aligning and distributing 2 items of varying heights](https://make.wordpress.org/design/files/2020/06/flex-2-items.png)
-
-Adding more than 2 child items will spread them across with even gaps in between each item.
-
-![Flex aligning 3 items](https://make.wordpress.org/design/files/2020/06/flex-3-items.png)
-
-### Items and Blocks
-
-`<Flex />` provides 2 sub-components:
-
--   `<FlexItem />`
--   `<FlexBlock />`
-
-These components can be used in combination to achieve flexible adaptive layouts.
-
-`<FlexBlock />` components will grow their widths to take up the remaining space within the `<Flex />` wrapper.
-
-![Flex item with block](https://make.wordpress.org/design/files/2020/06/flex-item-block.png)
-
-`<Flex />` automatically provides "gap" spacing in-between all child items. This value can be adjusted using the `gap` component prop.
-
-`<FlexItem />` and `<FlexBlock />` can be used in combination.
-
-![Multiple Flex items with Flex block](https://make.wordpress.org/design/files/2020/06/flex-item-block-item.png)
+## Props
 
-## Sub-Components
+##### align
 
-This component provides a collection of sub-component that can be used to compose various interfaces.
+**Type**: `CSS['alignItems']`
 
-### `FlexBlock`
+Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
 
-A layout component that expands to fit the remaining space of `Flex`.
+In the example below, `flex-start` will align the children content to the top.
 
-### `FlexItem`
+##### direction
 
-A layout component to contain items of a fixed width within `Flex`.
+**Type**: `FlexDirection`
 
-## Props
+The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-### align
+##### expanded
 
-Vertically aligns children components using the CSS [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property.
+**Type**: `boolean`
 
--   Type: `String`
--   Required: No
--   Default: `center`
+Expands to the maximum available width (if horizontal) or height (if vertical).
 
-### gap
+##### gap
 
-Determines the spacing in between children components. The `gap` value is a multiplier to the base value of `4`.
+**Type**: `number`
 
--   Type: `Number`
--   Required: No
--   Default: `2`
+Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
 
-### isReversed
+##### justify
 
-Reverses the render order of children components.
+**Type**: `CSS['justifyContent']`
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
+In the example below, `flex-start` will align the children content to the left.
 
-### justify
+##### wrap
 
-Horizontally aligns children components using the CSS [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) property.
+**Type**: `boolean`
 
--   Type: `String`
--   Required: No
--   Default: `space-between`
+Determines if children should wrap.
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import { useFlexBlock } from './use-flex-block';
 
 /**

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import { useFlexItem } from './use-flex-item';
 
 /**

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import { useFlex } from './use-flex';
 
 /**

@@ -1,64 +1,7 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
+export { default as Flex } from './flex';
+export { default as FlexItem } from './flex-item';
+export { default as FlexBlock } from './flex-block';
 
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Flex as BaseFlex } from './styles/flex-styles';
-import { withNextFlex } from './next';
-
-export { default as FlexBlock } from './block';
-export { default as FlexItem } from './item';
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @typedef OwnProps
- * @property {import('react').CSSProperties['alignItems'] | 'top' | 'bottom'} [align='center'] Sets align-items. Top and bottom are shorthand for flex-start and flex-end respectively.
- * @property {number} [gap=2] Determines the spacing in between children components. The `gap` value is a multiplier to the base value of `4`.
- * @property {import('react').CSSProperties['justifyContent'] | 'left' | 'right'} [justify='space-between']          * Sets jusifty-content. Left and right are shorthand for flex-start and flex-end respectively, not the actual CSS value.
- * @property {boolean} [isReversed=false] Reversed the flex direction.
- */
-/* eslint-enable jsdoc/valid-types */
-
-/** @typedef {OwnProps & import('react').HTMLProps<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>} Props */
-
-/**
- * @param {Props} props
- * @param {import('react').Ref<HTMLDivElement>} ref
- */
-function FlexComponent(
-	{
-		align = 'center',
-		className,
-		gap = 2,
-		justify = 'space-between',
-		isReversed = false,
-		...props
-	},
-	ref
-) {
-	const classes = classnames( 'components-flex', className );
-
-	return (
-		<BaseFlex
-			{ ...props }
-			align={ align }
-			className={ classes }
-			ref={ ref }
-			gap={ gap }
-			justify={ justify }
-			isReversed={ isReversed }
-		/>
-	);
-}
-
-export const Flex = withNextFlex( forwardRef( FlexComponent ) );
-
-export default Flex;
+export * from './use-flex';
+export * from './use-flex-item';
+export * from './use-flex-block';