} Current
- */
-/* eslint-enable jsdoc/valid-types */
-export function withNextFlexBlock( Current ) {
- return withNext( Current, FlexBlock, 'WPComponentsFlex', flexBlockAdapter );
-}
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index 919eb29fd4267..a1b27e8b8a265 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -1,241 +1,30 @@
-/**
- * External dependencies
- */
-import { boolean, number, select } from '@storybook/addon-knobs';
-import { random } from 'lodash';
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { arrowLeft } from '@wordpress/icons';
-
/**
* Internal dependencies
*/
-import Button from '../../button';
-import Flex from '../index';
-import FlexBlock from '../block';
-import FlexItem from '../item';
-
-import './style.css';
-
-export default { title: 'Components/Flex', component: Flex };
+import Flex from '../flex';
+import FlexItem from '../flex-item';
+import { View } from '../../view';
-const getStoryProps = () => {
- const showOutline = boolean( 'Example: Show Outline', true );
-
- const align = select(
- 'align',
- {
- top: 'top',
- center: 'center',
- bottom: 'bottom',
- },
- 'center'
- );
-
- const gap = number( 'gap', 1 );
-
- const justify = select(
- 'justify',
- {
- 'space-between': 'space-between',
- left: 'left',
- center: 'center',
- right: 'right',
- },
- 'space-between'
- );
-
- return {
- showOutline,
- align,
- gap,
- justify,
- };
-};
-
-const Box = ( props ) => {
- const { height, width, style: styleProps = {} } = props;
-
- const style = {
- background: '#ddd',
- fontSize: 12,
- ...styleProps,
- height: height || 40,
- width: width || '100%',
- };
-
- return ;
-};
-
-const EnhancedFlex = ( props ) => {
- const { showOutline, ...restProps } = props;
- const exampleClassName = showOutline ? 'example-only-show-outline' : '';
-
- return ;
+export default {
+ component: Flex,
+ title: 'G2 Components (Experimental)/Flex',
};
export const _default = () => {
- const showBlock = boolean( 'Example: Show Block', true );
- const differSize = boolean( 'Example: Differ Sizes', true );
- const props = getStoryProps();
-
- const baseSize = 40;
-
return (
-
-
-
- Item
-
-
- { showBlock && (
-
- Block
-
- ) }
-
-
- Item
-
-
- );
-};
-
-const ItemExample = () => {
- const props = getStoryProps();
-
- const [ items, setItems ] = useState( [
- {
- width: 40,
- height: 40,
- },
- ] );
-
- const addItem = () => {
- setItems( [
- ...items,
- { width: random( 12, 150 ), height: random( 12, 150 ) },
- ] );
- };
-
- const removeItem = () => {
- const nextItems = items.filter( ( item, index ) => {
- return index !== items.length - 1;
- } );
- setItems( nextItems );
- };
-
- return (
-
-
-
-
-
-
-
-
+ <>
+
+ Item
+ Item
-
-
- { items.map( ( item, index ) => (
-
-
-
- ) ) }
-
-
- );
-};
-
-export const flexItem = () => {
- return ;
-};
-
-const BlockExample = () => {
- const props = getStoryProps();
-
- const [ items, setItems ] = useState( [
- {
- height: 40,
- },
- ] );
-
- const addItem = () => {
- setItems( [ ...items, { height: random( 20, 150 ) } ] );
- };
-
- const removeItem = () => {
- const nextItems = items.filter( ( item, index ) => {
- return index !== items.length - 1;
- } );
- setItems( nextItems );
- };
-
- return (
-
-
-
-
-
-
-
+
+ Item
+
+ Item
+ Item
+ Item
-
-
-
-
-
- { items.map( ( item, index ) => (
-
-
-
- ) ) }
-
-
-
-
-
- );
-};
-
-export const flexBlock = () => {
- return ;
-};
-
-export const exampleActions = () => {
- const props = getStoryProps();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
};
diff --git a/packages/components/src/flex/stories/style.css b/packages/components/src/flex/stories/style.css
deleted file mode 100644
index 06a05379c3735..0000000000000
--- a/packages/components/src/flex/stories/style.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.components-flex.example-only-show-outline {
- box-shadow: 0 0 0 1px pink;
-}
-
-.components-flex.example-only-show-outline > * {
- box-shadow: 0 0 0 1px pink;
-}
diff --git a/packages/components/src/ui/flex/styles.js b/packages/components/src/flex/styles.js
similarity index 100%
rename from packages/components/src/ui/flex/styles.js
rename to packages/components/src/flex/styles.js
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
deleted file mode 100644
index 1ff2fdeb89ba5..0000000000000
--- a/packages/components/src/flex/styles/flex-styles.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-
-/**
- * @param {import('..').OwnProps} props
- */
-const alignStyle = ( { align } ) => {
- if ( align === undefined ) return '';
-
- const aligns = {
- top: 'flex-start',
- bottom: 'flex-end',
- };
-
- const value = aligns[ /** @type {'top' | 'bottom'} */ ( align ) ] || align;
-
- return css( {
- alignItems: value,
- } );
-};
-
-/**
- * @param {import('..').OwnProps} props
- */
-const justifyStyle = ( { justify, isReversed } ) => {
- const justifies = {
- left: 'flex-start',
- right: 'flex-end',
- };
- let value =
- justifies[ /** @type {'left' | 'right'} */ ( justify ) ] || justify;
-
- if (
- isReversed &&
- justifies[ /** @type {'left' | 'right'} */ ( justify ) ]
- ) {
- value = justify === 'left' ? justifies.right : justifies.left;
- }
-
- return css( {
- justifyContent: value,
- } );
-};
-
-/**
- * @param {import('..').OwnProps} Props
- */
-const gapStyle = ( { gap, isReversed } ) => {
- const base = 4;
- const value = typeof gap === 'number' ? base * gap : base;
- const dir = isReversed ? 'left' : 'right';
- const margin = `margin-${ dir }`;
-
- return css`
- > * {
- ${ margin }: ${ value }px;
-
- &:last-child {
- ${ margin }: 0;
- }
- }
- `;
-};
-
-/**
- * @param {import('..').OwnProps} props
- */
-const reversedStyles = ( { isReversed } ) => {
- if ( ! isReversed ) return '';
-
- return css`
- flex-direction: row-reverse;
- `;
-};
-
-export const Flex = styled.div`
- box-sizing: border-box;
- display: flex;
- width: 100%;
-
- ${ alignStyle }
- ${ justifyStyle }
- ${ reversedStyles }
- ${ gapStyle }
-`;
-
-export const Item = styled.div`
- box-sizing: border-box;
- min-width: 0;
- max-width: 100%;
-`;
-
-export const Block = styled( Item )`
- flex: 1;
-`;
diff --git a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap b/packages/components/src/flex/test/__snapshots__/index.js.snap
similarity index 100%
rename from packages/components/src/ui/flex/test/__snapshots__/index.js.snap
rename to packages/components/src/flex/test/__snapshots__/index.js.snap
diff --git a/packages/components/src/ui/flex/test/index.js b/packages/components/src/flex/test/index.js
similarity index 97%
rename from packages/components/src/ui/flex/test/index.js
rename to packages/components/src/flex/test/index.js
index 8a17edc0a3bdd..d20b383cbb883 100644
--- a/packages/components/src/ui/flex/test/index.js
+++ b/packages/components/src/flex/test/index.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
/**
* Internal dependencies
*/
-import { View } from '../../view';
+import { View } from '../../ui/view';
import Flex from '../flex';
import FlexItem from '../flex-item';
import FlexBlock from '../flex-block';
diff --git a/packages/components/src/ui/flex/types.ts b/packages/components/src/flex/types.ts
similarity index 94%
rename from packages/components/src/ui/flex/types.ts
rename to packages/components/src/flex/types.ts
index 4608717710283..e4521df5ebbb1 100644
--- a/packages/components/src/ui/flex/types.ts
+++ b/packages/components/src/flex/types.ts
@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
/**
* Internal dependencies
*/
-import type { ResponsiveCSSValue } from '../utils/types';
+import type { ResponsiveCSSValue } from '../ui/utils/types';
export type FlexDirection = ResponsiveCSSValue<
CSSProperties[ 'flexDirection' ]
@@ -61,6 +61,10 @@ export type FlexProps = {
* @default false
*/
wrap?: boolean;
+ /**
+ * @deprecated
+ */
+ isReversed?: boolean;
};
export type FlexItemProps = {
diff --git a/packages/components/src/ui/flex/use-flex-block.js b/packages/components/src/flex/use-flex-block.js
similarity index 66%
rename from packages/components/src/ui/flex/use-flex-block.js
rename to packages/components/src/flex/use-flex-block.js
index 4f32daa2eec1c..226e021772e8e 100644
--- a/packages/components/src/ui/flex/use-flex-block.js
+++ b/packages/components/src/flex/use-flex-block.js
@@ -1,11 +1,11 @@
/**
* Internal dependencies
*/
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
import { useFlexItem } from './use-flex-item';
/**
- * @param {import('../context').ViewOwnProps} props
+ * @param {import('../ui/context').ViewOwnProps} props
*/
export function useFlexBlock( props ) {
const otherProps = useContextSystem( props, 'FlexBlock' );
diff --git a/packages/components/src/ui/flex/use-flex-item.js b/packages/components/src/flex/use-flex-item.js
similarity index 81%
rename from packages/components/src/ui/flex/use-flex-item.js
rename to packages/components/src/flex/use-flex-item.js
index b2b691fd95eb0..63a8f5c6721fb 100644
--- a/packages/components/src/ui/flex/use-flex-item.js
+++ b/packages/components/src/flex/use-flex-item.js
@@ -6,12 +6,12 @@ import { css, cx } from 'emotion';
/**
* Internal dependencies
*/
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
import { useFlexContext } from './context';
import * as styles from './styles';
/**
- * @param {import('../context').ViewOwnProps} props
+ * @param {import('../ui/context').ViewOwnProps} props
*/
export function useFlexItem( props ) {
const {
diff --git a/packages/components/src/ui/flex/use-flex.js b/packages/components/src/flex/use-flex.js
similarity index 71%
rename from packages/components/src/ui/flex/use-flex.js
rename to packages/components/src/flex/use-flex.js
index 873a9c3b88745..536dabb8f5ba7 100644
--- a/packages/components/src/ui/flex/use-flex.js
+++ b/packages/components/src/flex/use-flex.js
@@ -7,17 +7,38 @@ import { css, cx } from 'emotion';
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import { useContextSystem } from '../context';
-import { useResponsiveValue } from '../utils/use-responsive-value';
-import { space } from '../utils/space';
+import { useContextSystem } from '../ui/context';
+import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import { space } from '../ui/utils/space';
import * as styles from './styles';
/**
- * @param {import('../context').ViewOwnProps} props
+ *
+ * @param {import('../ui/context').ViewOwnProps} props
+ * @return {import('../ui/context').ViewOwnProps} Props with the deprecated props removed.
+ */
+function useDeprecatedProps( { isReversed, ...otherProps } ) {
+ if ( typeof isReversed !== 'undefined' ) {
+ deprecated( 'Flex isReversed', {
+ alternative: 'Flex direction="row-reverse" or "column-reverse"',
+ since: '5.9',
+ } );
+ return {
+ ...otherProps,
+ direction: isReversed ? 'row-reverse' : 'row',
+ };
+ }
+
+ return otherProps;
+}
+
+/**
+ * @param {import('../ui/context').ViewOwnProps} props
*/
export function useFlex( props ) {
const {
@@ -29,7 +50,7 @@ export function useFlex( props ) {
justify = 'space-between',
wrap = false,
...otherProps
- } = useContextSystem( props, 'Flex' );
+ } = useContextSystem( useDeprecatedProps( props ), 'Flex' );
const directionAsArray = Array.isArray( directionProp )
? directionProp
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 3cbe2b1131261..85c9ad2ec3d26 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -54,9 +54,7 @@ export { default as Dropdown } from './dropdown';
export { default as DropdownMenu } from './dropdown-menu';
export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
export { default as ExternalLink } from './external-link';
-export { default as Flex } from './flex';
-export { default as FlexBlock } from './flex/block';
-export { default as FlexItem } from './flex/item';
+export { default as Flex, FlexBlock, FlexItem } from './flex';
export { default as FocalPointPicker } from './focal-point-picker';
export { default as FocusableIframe } from './focusable-iframe';
export { default as FontSizePicker } from './font-size-picker';
diff --git a/packages/components/src/ui/card/footer.js b/packages/components/src/ui/card/footer.js
index 86b1521f6903e..7fbef6d5c33ef 100644
--- a/packages/components/src/ui/card/footer.js
+++ b/packages/components/src/ui/card/footer.js
@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
-import { Flex } from '../flex';
+import Flex from '../../flex';
import * as styles from './styles';
/**
diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js
index 583c3b70b1603..8acd8d5ff4f0d 100644
--- a/packages/components/src/ui/card/header.js
+++ b/packages/components/src/ui/card/header.js
@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
-import { Flex } from '../flex';
+import Flex from '../../flex';
import * as styles from './styles';
/**
diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js
index f48a785313b52..3068ee26443dc 100644
--- a/packages/components/src/ui/control-group/component.js
+++ b/packages/components/src/ui/control-group/component.js
@@ -5,7 +5,7 @@
/**
* Internal dependencies
*/
-import { Flex } from '../flex';
+import Flex from '../../flex';
import { Grid } from '../grid';
import { useControlGroup } from './hook';
import { contextConnect } from '../context';
diff --git a/packages/components/src/ui/control-group/types.ts b/packages/components/src/ui/control-group/types.ts
index 83aa340a41baa..60e02f0186ed2 100644
--- a/packages/components/src/ui/control-group/types.ts
+++ b/packages/components/src/ui/control-group/types.ts
@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
/**
* Internal dependencies
*/
-import type { FlexProps } from '../flex/types';
+import type { FlexProps } from '../../flex/types';
export type ControlGroupContext = {
isFirst?: boolean;
diff --git a/packages/components/src/ui/flex/README.md b/packages/components/src/ui/flex/README.md
deleted file mode 100644
index e970053ffcea1..0000000000000
--- a/packages/components/src/ui/flex/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Flex
-
-`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, Text } from '@wordpress/components/ui';
-
-function Example() {
- return (
-
-
- Code
-
-
- Poetry
-
-
- );
-}
-```
-
-## Props
-
-##### align
-
-**Type**: `CSS['alignItems']`
-
-Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
-
-In the example below, `flex-start` will align the children content to the top.
-
-##### direction
-
-**Type**: `FlexDirection`
-
-The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
-
-##### expanded
-
-**Type**: `boolean`
-
-Expands to the maximum available width (if horizontal) or height (if vertical).
-
-##### gap
-
-**Type**: `number`
-
-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`).
-
-##### justify
-
-**Type**: `CSS['justifyContent']`
-
-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.
-
-##### wrap
-
-**Type**: `boolean`
-
-Determines if children should wrap.
diff --git a/packages/components/src/ui/flex/index.js b/packages/components/src/ui/flex/index.js
deleted file mode 100644
index fb2bdace6a1fa..0000000000000
--- a/packages/components/src/ui/flex/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as Flex } from './flex';
-export { default as FlexItem } from './flex-item';
-export { default as FlexBlock } from './flex-block';
-
-export * from './use-flex';
-export * from './use-flex-item';
-export * from './use-flex-block';
diff --git a/packages/components/src/ui/flex/stories/index.js b/packages/components/src/ui/flex/stories/index.js
deleted file mode 100644
index a1b27e8b8a265..0000000000000
--- a/packages/components/src/ui/flex/stories/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Internal dependencies
- */
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import { View } from '../../view';
-
-export default {
- component: Flex,
- title: 'G2 Components (Experimental)/Flex',
-};
-
-export const _default = () => {
- return (
- <>
-
- Item
- Item
-
-
- Item
-
- Item
-
- Item
- Item
-
-
- );
-};
diff --git a/packages/components/src/ui/h-stack/hook.js b/packages/components/src/ui/h-stack/hook.js
index 687e44cd91c41..4f10464f28cf9 100644
--- a/packages/components/src/ui/h-stack/hook.js
+++ b/packages/components/src/ui/h-stack/hook.js
@@ -2,7 +2,7 @@
* Internal dependencies
*/
import { hasConnectNamespace, useContextSystem } from '../context';
-import { FlexItem, useFlex } from '../flex';
+import { FlexItem, useFlex } from '../../flex';
import { getAlignmentProps } from './utils';
import { getValidChildren } from '../utils/get-valid-children';
diff --git a/packages/components/src/ui/h-stack/types.ts b/packages/components/src/ui/h-stack/types.ts
index 2dcdf4e83ff62..163e7ec5f9255 100644
--- a/packages/components/src/ui/h-stack/types.ts
+++ b/packages/components/src/ui/h-stack/types.ts
@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
/**
* Internal dependencies
*/
-import type { FlexProps } from '../flex/types';
+import type { FlexProps } from '../../flex/types';
export type HStackAlignment =
| 'bottom'
diff --git a/packages/components/src/ui/h-stack/utils.js b/packages/components/src/ui/h-stack/utils.js
index 288cdc79b7db9..780096da20b29 100644
--- a/packages/components/src/ui/h-stack/utils.js
+++ b/packages/components/src/ui/h-stack/utils.js
@@ -36,7 +36,7 @@ const V_ALIGNMENTS = {
/* eslint-disable jsdoc/valid-types */
/**
* @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment Where to align.
- * @param {import('../flex/types').FlexDirection} [direction='row'] Direction to align.
+ * @param {import('../../flex/types').FlexDirection} [direction='row'] Direction to align.
* @return {import('./types').AlignmentProps} Alignment props.
*/
/* eslint-enable jsdoc/valid-types */
diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js
index c081d671b65cd..40f1bb0fa5a43 100644
--- a/packages/components/src/ui/index.js
+++ b/packages/components/src/ui/index.js
@@ -3,7 +3,6 @@ export * from './control-group';
export * from './control-label';
export * from './divider';
export * from './elevation';
-export * from './flex';
export * from './form-group';
export * from './grid';
export * from './h-stack';
From 211980dfdf1ada1823d96ce5d59e497d3aeba7c5 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 28 Apr 2021 12:42:47 -0700
Subject: [PATCH 2/8] Fix various imports
---
.../angle-picker-control/styles/angle-picker-control-styles.js | 2 +-
.../components/src/box-control/styles/box-control-styles.js | 2 +-
packages/components/src/card/styles/card-styles.js | 2 +-
packages/components/src/flex/index.js | 2 +-
.../src/focal-point-picker/styles/focal-point-picker-style.js | 2 +-
packages/components/src/index.js | 2 +-
.../components/src/input-control/styles/input-control-styles.js | 2 +-
packages/components/src/ui/card/footer.js | 2 +-
packages/components/src/ui/card/header.js | 2 +-
packages/components/src/ui/control-group/component.js | 2 +-
10 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
index 46bfafa705165..f025cddb77907 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import { color } from '../../utils/style-mixins';
const CIRCLE_SIZE = 30;
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index c813365c7b4ee..7d42aa42dcb18 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import BaseUnitControl from '../../unit-control';
import { color, rtl } from '../../utils/style-mixins';
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 27421a29631d4..b884470c98c4b 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -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 = {
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
index 955d43692a525..fb2bdace6a1fa 100644
--- a/packages/components/src/flex/index.js
+++ b/packages/components/src/flex/index.js
@@ -1,4 +1,4 @@
-export { default } from './flex';
+export { default as Flex } from './flex';
export { default as FlexItem } from './flex-item';
export { default as FlexBlock } from './flex-block';
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index a672af57f338a..03acaf795d04c 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import BaseUnitControl from '../../unit-control';
import { color } from '../../utils/style-mixins';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 85c9ad2ec3d26..69fa690fa7cf3 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -54,7 +54,7 @@ export { default as Dropdown } from './dropdown';
export { default as DropdownMenu } from './dropdown-menu';
export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
export { default as ExternalLink } from './external-link';
-export { default as Flex, FlexBlock, FlexItem } from './flex';
+export { Flex, FlexBlock, FlexItem } from './flex';
export { default as FocalPointPicker } from './focal-point-picker';
export { default as FocusableIframe } from './focusable-iframe';
export { default as FontSizePicker } from './font-size-picker';
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 6ebb621c788cb..9aa80b78db50a 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
-import Flex, { FlexItem } from '../../flex';
+import { Flex, FlexItem } from '../../flex';
import Text from '../../text';
import { color, rtl } from '../../utils/style-mixins';
diff --git a/packages/components/src/ui/card/footer.js b/packages/components/src/ui/card/footer.js
index 7fbef6d5c33ef..40a7445010077 100644
--- a/packages/components/src/ui/card/footer.js
+++ b/packages/components/src/ui/card/footer.js
@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import * as styles from './styles';
/**
diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js
index 8acd8d5ff4f0d..051608dea02b8 100644
--- a/packages/components/src/ui/card/header.js
+++ b/packages/components/src/ui/card/header.js
@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import * as styles from './styles';
/**
diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js
index 3068ee26443dc..1e6060dca6dd2 100644
--- a/packages/components/src/ui/control-group/component.js
+++ b/packages/components/src/ui/control-group/component.js
@@ -5,7 +5,7 @@
/**
* Internal dependencies
*/
-import Flex from '../../flex';
+import { Flex } from '../../flex';
import { Grid } from '../grid';
import { useControlGroup } from './hook';
import { contextConnect } from '../context';
From 3b4e53fc90975d5764cc62e324b4256a1d479e61 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 29 Apr 2021 07:14:09 -0700
Subject: [PATCH 3/8] Update packages/components/CHANGELOG.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Greg Ziółkowski
---
packages/components/CHANGELOG.md | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a3a58def4fdda..a1697efc6f1b7 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,14 @@
- Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
- Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+### Deprecation
+
+- `isReversed` prop in `Flex` component has been deprecated. Use `direction` instead ([#31297](https://github.com/WordPress/gutenberg/pull/31297)).
+
+### Internal
+
+- `Flex`, `FlexBlock`, and `FlexItem` components have been re-written from the ground up ([#31297](https://github.com/WordPress/gutenberg/pull/31297)).
+
## 13.0.0 (2021-03-17)
### Breaking Change
From 93e5902e42afe58b289deb6a8e9ea5da0d8f880b Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 29 Apr 2021 07:14:21 -0700
Subject: [PATCH 4/8] Update packages/components/src/flex/README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Greg Ziółkowski
---
packages/components/src/flex/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
index e970053ffcea1..6d0ddc66c94ae 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/README.md
@@ -7,7 +7,7 @@
`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
```jsx
-import { Flex, FlexItem, FlexBlock, Text } from '@wordpress/components/ui';
+import { Flex, FlexItem, FlexBlock, __experimentalText as Text } from '@wordpress/components';
function Example() {
return (
From 0edc7d007b33073d0c40f42ca0c2b92cb18fd81a Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 29 Apr 2021 07:38:10 -0700
Subject: [PATCH 5/8] Reorganize files and add more READMEs
---
docs/manifest.json | 14 ++++++++++++-
.../components/src/flex/flex-block/README.md | 15 +++++++++++++
.../component.js} | 4 ++--
.../{use-flex-block.js => flex-block/hook.js} | 6 +++---
.../components/src/flex/flex-block/index.js | 2 ++
.../components/src/flex/flex-item/README.md | 21 +++++++++++++++++++
.../{flex-item.js => flex-item/component.js} | 4 ++--
.../{use-flex-item.js => flex-item/hook.js} | 8 +++----
.../components/src/flex/flex-item/index.js | 2 ++
.../components/src/flex/{ => flex}/README.md | 12 +++++------
.../src/flex/{flex.js => flex/component.js} | 10 ++++-----
.../src/flex/{use-flex.js => flex/hook.js} | 14 ++++++-------
packages/components/src/flex/flex/index.js | 2 ++
packages/components/src/flex/index.js | 10 +++------
packages/components/src/flex/types.ts | 8 -------
15 files changed, 87 insertions(+), 45 deletions(-)
create mode 100644 packages/components/src/flex/flex-block/README.md
rename packages/components/src/flex/{flex-block.js => flex-block/component.js} (79%)
rename packages/components/src/flex/{use-flex-block.js => flex-block/hook.js} (54%)
create mode 100644 packages/components/src/flex/flex-block/index.js
create mode 100644 packages/components/src/flex/flex-item/README.md
rename packages/components/src/flex/{flex-item.js => flex-item/component.js} (78%)
rename packages/components/src/flex/{use-flex-item.js => flex-item/hook.js} (70%)
create mode 100644 packages/components/src/flex/flex-item/index.js
rename packages/components/src/flex/{ => flex}/README.md (86%)
rename packages/components/src/flex/{flex.js => flex/component.js} (80%)
rename packages/components/src/flex/{use-flex.js => flex/hook.js} (83%)
create mode 100644 packages/components/src/flex/flex/index.js
diff --git a/docs/manifest.json b/docs/manifest.json
index de2f1851118fd..cb2e79f7e7f44 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -779,10 +779,22 @@
"markdown_source": "../packages/components/src/external-link/README.md",
"parent": "components"
},
+ {
+ "title": "FlexBlock",
+ "slug": "flex-block",
+ "markdown_source": "../packages/components/src/flex/flex-block/README.md",
+ "parent": "components"
+ },
+ {
+ "title": "FlexItem",
+ "slug": "flex-item",
+ "markdown_source": "../packages/components/src/flex/flex-item/README.md",
+ "parent": "components"
+ },
{
"title": "Flex",
"slug": "flex",
- "markdown_source": "../packages/components/src/flex/README.md",
+ "markdown_source": "../packages/components/src/flex/flex/README.md",
"parent": "components"
},
{
diff --git a/packages/components/src/flex/flex-block/README.md b/packages/components/src/flex/flex-block/README.md
new file mode 100644
index 0000000000000..76578c8949686
--- /dev/null
+++ b/packages/components/src/flex/flex-block/README.md
@@ -0,0 +1,15 @@
+# FlexBlock
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Usage
+
+See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexBlock`.
+
+## Props
+
+### display
+
+**Type**: `[CSSProperties['display']]`
+
+The CSS display property of `FlexBlock`.
diff --git a/packages/components/src/flex/flex-block.js b/packages/components/src/flex/flex-block/component.js
similarity index 79%
rename from packages/components/src/flex/flex-block.js
rename to packages/components/src/flex/flex-block/component.js
index 0d08af50545c4..7a1e35ec44372 100644
--- a/packages/components/src/flex/flex-block.js
+++ b/packages/components/src/flex/flex-block/component.js
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import { createComponent } from '../ui/utils';
-import { useFlexBlock } from './use-flex-block';
+import { createComponent } from '../../ui/utils';
+import { useFlexBlock } from './hook';
/**
* `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
diff --git a/packages/components/src/flex/use-flex-block.js b/packages/components/src/flex/flex-block/hook.js
similarity index 54%
rename from packages/components/src/flex/use-flex-block.js
rename to packages/components/src/flex/flex-block/hook.js
index 226e021772e8e..9780aa896ad58 100644
--- a/packages/components/src/flex/use-flex-block.js
+++ b/packages/components/src/flex/flex-block/hook.js
@@ -1,11 +1,11 @@
/**
* Internal dependencies
*/
-import { useContextSystem } from '../ui/context';
-import { useFlexItem } from './use-flex-item';
+import { useContextSystem } from '../../ui/context';
+import { useFlexItem } from '../flex-item';
/**
- * @param {import('../ui/context').ViewOwnProps} props
+ * @param {import('../../ui/context').ViewOwnProps} props
*/
export function useFlexBlock( props ) {
const otherProps = useContextSystem( props, 'FlexBlock' );
diff --git a/packages/components/src/flex/flex-block/index.js b/packages/components/src/flex/flex-block/index.js
new file mode 100644
index 0000000000000..5246179377dd8
--- /dev/null
+++ b/packages/components/src/flex/flex-block/index.js
@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlexBlock } from './hook';
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
new file mode 100644
index 0000000000000..b5e498b7bc822
--- /dev/null
+++ b/packages/components/src/flex/flex-item/README.md
@@ -0,0 +1,21 @@
+# FlexItem
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Usage
+
+See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexItem`.
+
+## Props
+
+### display
+
+**Type**: `[CSSProperties['display']]`
+
+The CSS display property of `FlexItem`.
+
+### isBlock
+
+**Type**: `[boolean]`
+
+Determins if `FlexItem` should render as an adaptive full-width block.
diff --git a/packages/components/src/flex/flex-item.js b/packages/components/src/flex/flex-item/component.js
similarity index 78%
rename from packages/components/src/flex/flex-item.js
rename to packages/components/src/flex/flex-item/component.js
index 53e80e0bb124d..bd03f3f1066bd 100644
--- a/packages/components/src/flex/flex-item.js
+++ b/packages/components/src/flex/flex-item/component.js
@@ -1,8 +1,8 @@
/**
* Internal dependencies
*/
-import { createComponent } from '../ui/utils';
-import { useFlexItem } from './use-flex-item';
+import { createComponent } from '../../ui/utils';
+import { useFlexItem } from './hook';
/**
* `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.
diff --git a/packages/components/src/flex/use-flex-item.js b/packages/components/src/flex/flex-item/hook.js
similarity index 70%
rename from packages/components/src/flex/use-flex-item.js
rename to packages/components/src/flex/flex-item/hook.js
index 63a8f5c6721fb..cc1fb57e2fbe3 100644
--- a/packages/components/src/flex/use-flex-item.js
+++ b/packages/components/src/flex/flex-item/hook.js
@@ -6,12 +6,12 @@ import { css, cx } from 'emotion';
/**
* Internal dependencies
*/
-import { useContextSystem } from '../ui/context';
-import { useFlexContext } from './context';
-import * as styles from './styles';
+import { useContextSystem } from '../../ui/context';
+import { useFlexContext } from '../context';
+import * as styles from '../styles';
/**
- * @param {import('../ui/context').ViewOwnProps} props
+ * @param {import('../../ui/context').ViewOwnProps} props
*/
export function useFlexItem( props ) {
const {
diff --git a/packages/components/src/flex/flex-item/index.js b/packages/components/src/flex/flex-item/index.js
new file mode 100644
index 0000000000000..897c2b45a6a60
--- /dev/null
+++ b/packages/components/src/flex/flex-item/index.js
@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlexItem } from './hook';
diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/flex/README.md
similarity index 86%
rename from packages/components/src/flex/README.md
rename to packages/components/src/flex/flex/README.md
index 6d0ddc66c94ae..bc6137d033a13 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/flex/README.md
@@ -27,7 +27,7 @@ function Example() {
##### align
-**Type**: `CSS['alignItems']`
+**Type**: `CSSProperties['alignItems']`
Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
@@ -35,31 +35,31 @@ In the example below, `flex-start` will align the children content to the top.
##### direction
-**Type**: `FlexDirection`
+**Type**: `[ResponsiveCSSValue]`
The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
##### expanded
-**Type**: `boolean`
+**Type**: `[boolean]`
Expands to the maximum available width (if horizontal) or height (if vertical).
##### gap
-**Type**: `number`
+**Type**: `[number | string]`
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`).
##### justify
-**Type**: `CSS['justifyContent']`
+**Type**: `[CSSProperties['justifyContent']]`
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.
##### wrap
-**Type**: `boolean`
+**Type**: `[boolean]`
Determines if children should wrap.
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex/component.js
similarity index 80%
rename from packages/components/src/flex/flex.js
rename to packages/components/src/flex/flex/component.js
index 2c9268fbdc178..21e8ff24b0816 100644
--- a/packages/components/src/flex/flex.js
+++ b/packages/components/src/flex/flex/component.js
@@ -1,13 +1,13 @@
/**
* Internal dependencies
*/
-import { contextConnect } from '../ui/context';
-import { useFlex } from './use-flex';
-import { FlexContext } from './context';
-import { View } from '../ui/view';
+import { contextConnect } from '../../ui/context';
+import { useFlex } from './hook';
+import { FlexContext } from './../context';
+import { View } from '../../ui/view';
/**
- * @param {import('../ui/context').ViewOwnProps} props
+ * @param {import('../../ui/context').ViewOwnProps} props
* @param {import('react').Ref} forwardedRef
*/
function Flex( props, forwardedRef ) {
diff --git a/packages/components/src/flex/use-flex.js b/packages/components/src/flex/flex/hook.js
similarity index 83%
rename from packages/components/src/flex/use-flex.js
rename to packages/components/src/flex/flex/hook.js
index 536dabb8f5ba7..89d1d8070ed94 100644
--- a/packages/components/src/flex/use-flex.js
+++ b/packages/components/src/flex/flex/hook.js
@@ -12,15 +12,15 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import { useContextSystem } from '../ui/context';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
-import { space } from '../ui/utils/space';
-import * as styles from './styles';
+import { useContextSystem } from '../../ui/context';
+import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
+import { space } from '../../ui/utils/space';
+import * as styles from '../styles';
/**
*
- * @param {import('../ui/context').ViewOwnProps} props
- * @return {import('../ui/context').ViewOwnProps} Props with the deprecated props removed.
+ * @param {import('../../ui/context').ViewOwnProps} props
+ * @return {import('../../ui/context').ViewOwnProps} Props with the deprecated props removed.
*/
function useDeprecatedProps( { isReversed, ...otherProps } ) {
if ( typeof isReversed !== 'undefined' ) {
@@ -38,7 +38,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
}
/**
- * @param {import('../ui/context').ViewOwnProps} props
+ * @param {import('../../ui/context').ViewOwnProps} props
*/
export function useFlex( props ) {
const {
diff --git a/packages/components/src/flex/flex/index.js b/packages/components/src/flex/flex/index.js
new file mode 100644
index 0000000000000..e0df125066cf5
--- /dev/null
+++ b/packages/components/src/flex/flex/index.js
@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useFlex } from './hook';
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
index fb2bdace6a1fa..8f320728aba4e 100644
--- a/packages/components/src/flex/index.js
+++ b/packages/components/src/flex/index.js
@@ -1,7 +1,3 @@
-export { default as Flex } from './flex';
-export { default as FlexItem } from './flex-item';
-export { default as FlexBlock } from './flex-block';
-
-export * from './use-flex';
-export * from './use-flex-item';
-export * from './use-flex-block';
+export { default as Flex, useFlex } from './flex';
+export { default as FlexItem, useFlexItem } from './flex-item';
+export { default as FlexBlock, useFlexBlock } from './flex-block';
diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts
index e4521df5ebbb1..f4360e145c201 100644
--- a/packages/components/src/flex/types.ts
+++ b/packages/components/src/flex/types.ts
@@ -22,10 +22,6 @@ export type FlexProps = {
* @default 'center'
*/
align?: CSSProperties[ 'alignItems' ];
- /**
- * @default false
- */
- alignItems?: boolean;
/**
* The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
*
@@ -51,10 +47,6 @@ export type FlexProps = {
* @default 'space-between'
*/
justify?: CSSProperties[ 'justifyContent' ];
- /**
- * @default false
- */
- justifyContent?: boolean;
/**
* Determines if children should wrap.
*
From a2766f8bc818224e56939779fca7261f016bee82 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 29 Apr 2021 07:50:55 -0700
Subject: [PATCH 6/8] Use absolute paths to other READMEs
---
packages/components/src/flex/flex-block/README.md | 2 +-
packages/components/src/flex/flex-item/README.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/flex/flex-block/README.md b/packages/components/src/flex/flex-block/README.md
index 76578c8949686..dde08b2c57dfd 100644
--- a/packages/components/src/flex/flex-block/README.md
+++ b/packages/components/src/flex/flex-block/README.md
@@ -4,7 +4,7 @@ A layout component to contain items of a fixed width within `Flex`.
## Usage
-See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexBlock`.
+See [`flex/README.md#usage`](/packages/comonents/src/flex/README.md#usage) for how to use `FlexBlock`.
## Props
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
index b5e498b7bc822..44024b3b9ca81 100644
--- a/packages/components/src/flex/flex-item/README.md
+++ b/packages/components/src/flex/flex-item/README.md
@@ -4,7 +4,7 @@ A layout component to contain items of a fixed width within `Flex`.
## Usage
-See [`flex/README.md#usage`](../flex/README.md#usage) for how to use `FlexItem`.
+See [`flex/README.md#usage`](/packages/comonents/src/flex/README.md#usage) for how to use `FlexItem`.
## Props
From bf4e0a6022ee37ad9ab9f7e87d523e2221810407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?=
Date: Fri, 30 Apr 2021 10:15:25 +0200
Subject: [PATCH 7/8] Update README.md
---
packages/components/src/flex/flex/README.md | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/flex/flex/README.md b/packages/components/src/flex/flex/README.md
index bc6137d033a13..46319661ebe24 100644
--- a/packages/components/src/flex/flex/README.md
+++ b/packages/components/src/flex/flex/README.md
@@ -1,4 +1,4 @@
-# Flex
+# Flex (Experimental)
`Flex` is a primitive layout component that adaptively aligns child content horizontally or vertically. `Flex` powers components like `HStack` and `VStack`.
@@ -7,7 +7,12 @@
`Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
```jsx
-import { Flex, FlexItem, FlexBlock, __experimentalText as Text } from '@wordpress/components';
+import {
+ __experimentalFlex as Flex,
+ __experimentalFlexBlock as FlexBlock,
+ __experimentalFlexItem as FlexItem,
+ __experimentalText as Text
+} from '@wordpress/components';
function Example() {
return (
From 7ff089e16c2b942a2caeb98d951b98a16ff0da10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?=
Date: Fri, 30 Apr 2021 10:16:09 +0200
Subject: [PATCH 8/8] Apply suggestions from code review
---
packages/components/src/flex/flex-block/README.md | 4 ++--
packages/components/src/flex/flex-item/README.md | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/components/src/flex/flex-block/README.md b/packages/components/src/flex/flex-block/README.md
index dde08b2c57dfd..2bcba18833824 100644
--- a/packages/components/src/flex/flex-block/README.md
+++ b/packages/components/src/flex/flex-block/README.md
@@ -1,10 +1,10 @@
-# FlexBlock
+# FlexBlock (Experimental)
A layout component to contain items of a fixed width within `Flex`.
## Usage
-See [`flex/README.md#usage`](/packages/comonents/src/flex/README.md#usage) for how to use `FlexBlock`.
+See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for how to use `FlexBlock`.
## Props
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
index 44024b3b9ca81..5b8aa14a7edd8 100644
--- a/packages/components/src/flex/flex-item/README.md
+++ b/packages/components/src/flex/flex-item/README.md
@@ -1,10 +1,10 @@
-# FlexItem
+# FlexItem (Experimental)
A layout component to contain items of a fixed width within `Flex`.
## Usage
-See [`flex/README.md#usage`](/packages/comonents/src/flex/README.md#usage) for how to use `FlexItem`.
+See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for how to use `FlexItem`.
## Props