From 654f135aea3a22f24475b20dffc0b0cca0ee65a5 Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Thu, 28 Jan 2021 13:50:43 -0800 Subject: [PATCH 1/7] Components: Add G2 Flex --- docs/manifest.json | 6 + packages/components/src/flex/next/README.md | 156 ++++ .../components/src/flex/next/flex-block.js | 23 + .../components/src/flex/next/flex-item.js | 23 + .../components/src/flex/next/flex-styles.js | 20 + packages/components/src/flex/next/flex.js | 41 ++ packages/components/src/flex/next/index.js | 7 + .../components/src/flex/next/stories/index.js | 33 + .../next/test/__snapshots__/Flex.test.js.snap | 687 ++++++++++++++++++ .../components/src/flex/next/test/index.js | 64 ++ packages/components/src/flex/next/types.ts | 199 +++++ .../src/flex/next/use-flex-block.js | 19 + .../components/src/flex/next/use-flex-item.js | 39 + packages/components/src/flex/next/use-flex.js | 100 +++ 14 files changed, 1417 insertions(+) create mode 100644 packages/components/src/flex/next/README.md create mode 100644 packages/components/src/flex/next/flex-block.js create mode 100644 packages/components/src/flex/next/flex-item.js create mode 100644 packages/components/src/flex/next/flex-styles.js create mode 100644 packages/components/src/flex/next/flex.js create mode 100644 packages/components/src/flex/next/index.js create mode 100644 packages/components/src/flex/next/stories/index.js create mode 100644 packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap create mode 100644 packages/components/src/flex/next/test/index.js create mode 100644 packages/components/src/flex/next/types.ts create mode 100644 packages/components/src/flex/next/use-flex-block.js create mode 100644 packages/components/src/flex/next/use-flex-item.js create mode 100644 packages/components/src/flex/next/use-flex.js diff --git a/docs/manifest.json b/docs/manifest.json index b28dff5a8988be..91cb1dfc041d89 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -923,6 +923,12 @@ "markdown_source": "../packages/components/src/external-link/README.md", "parent": "components" }, + { + "title": "Next", + "slug": "next", + "markdown_source": "../packages/components/src/flex/next/README.md", + "parent": "components" + }, { "title": "Flex", "slug": "flex", diff --git a/packages/components/src/flex/next/README.md b/packages/components/src/flex/next/README.md new file mode 100644 index 00000000000000..d8cbb87668c60a --- /dev/null +++ b/packages/components/src/flex/next/README.md @@ -0,0 +1,156 @@ +# 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 live +import { Flex, FlexItem, FlexBlock, Text, View } from '@wp-g2/components'; + +function Example() { + return ( + + + + Ana + + + + + Elsa + + + + ); +} +``` + +## 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. + +```jsx live +import { Flex, Text, View } from '@wp-g2/components'; +import { ui } from '@wp-g2/styles'; + +function Example() { + return ( + + + Ana + + + Elsa + + + ); +} +``` + +##### expanded + +**Type**: `boolean` + +Expands to the maximum available width (if horizontal) or height (if vertical). + +```jsx live +import { Flex, Text, View } from '@wp-g2/components'; +import { ui } from '@wp-g2/styles'; + +function Example() { + return ( + + + Ana + + + Elsa + + + ); +} +``` + +##### 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`). + +```jsx live +import { Flex, Text, View } from '@wp-g2/components'; +import { ui } from '@wp-g2/styles'; + +function Example() { + return ( + + + Ana + + + Elsa + + + ); +} +``` + +##### 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. + +```jsx live +import { Flex, Text, View } from '@wp-g2/components'; +import { ui } from '@wp-g2/styles'; + +function Example() { + return ( + + + Ana + + + Elsa + + + Olaf + + + Kristoff + + + Queen Iduna + + + King Agnarr + + + Yelena + + + ); +} +``` diff --git a/packages/components/src/flex/next/flex-block.js b/packages/components/src/flex/next/flex-block.js new file mode 100644 index 00000000000000..f766daf6b4011d --- /dev/null +++ b/packages/components/src/flex/next/flex-block.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { createComponent } from '../../utils'; +import { useFlexBlock } from './use-flex-block'; + +/** + * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`. + * + * @example + * ```jsx + * + * ... + * + * ``` + */ +const FlexBlock = createComponent( { + as: 'div', + useHook: useFlexBlock, + name: 'FlexBlock', +} ); + +export default FlexBlock; diff --git a/packages/components/src/flex/next/flex-item.js b/packages/components/src/flex/next/flex-item.js new file mode 100644 index 00000000000000..74db58d1cac2cd --- /dev/null +++ b/packages/components/src/flex/next/flex-item.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { createComponent } from '../../utils'; +import { useFlexItem } from './use-flex-item'; + +/** + * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`. + * + * @example + * ```jsx + * + * ... + * + * ``` + */ +const FlexItem = createComponent( { + as: 'div', + useHook: useFlexItem, + name: 'FlexItem', +} ); + +export default FlexItem; diff --git a/packages/components/src/flex/next/flex-styles.js b/packages/components/src/flex/next/flex-styles.js new file mode 100644 index 00000000000000..b66c49222b1922 --- /dev/null +++ b/packages/components/src/flex/next/flex-styles.js @@ -0,0 +1,20 @@ +/** + * External dependencies + */ +import { css } from '@wp-g2/styles'; + +export const Flex = css` + display: flex; +`; + +export const Item = css` + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; +`; + +export const block = css` + flex: 1; +`; diff --git a/packages/components/src/flex/next/flex.js b/packages/components/src/flex/next/flex.js new file mode 100644 index 00000000000000..d10350c53df47f --- /dev/null +++ b/packages/components/src/flex/next/flex.js @@ -0,0 +1,41 @@ +/** + * Internal dependencies + */ +import { createComponent } from '../../utils'; +import { useFlex } from './use-flex'; + +/** + * `Flex` is a primitive layout component that adaptively aligns child content horizontally or vertically. `Flex` powers components like `HStack` and `VStack`. + * + * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`. + * + * + * @example + * ```jsx + * import { Flex, FlexItem, FlexBlock, Text, View } from `@wp-g2/components` + * + * function Example() { + * return ( + * + * + * + * Ana + * + * + * + * + * Elsa + * + * + * + * ); + * } + * ``` + */ +const Flex = createComponent( { + as: 'div', + useHook: useFlex, + name: 'Flex', +} ); + +export default Flex; diff --git a/packages/components/src/flex/next/index.js b/packages/components/src/flex/next/index.js new file mode 100644 index 00000000000000..9ef13fc078b635 --- /dev/null +++ b/packages/components/src/flex/next/index.js @@ -0,0 +1,7 @@ +export { default } from './flex'; +export { default as FlexBlock } from './flex-block'; +export { default as FlexItem } from './flex-item'; + +export * from './use-flex'; +export * from './use-flex-block'; +export * from './use-flex-item'; diff --git a/packages/components/src/flex/next/stories/index.js b/packages/components/src/flex/next/stories/index.js new file mode 100644 index 00000000000000..4d3f18726e5c55 --- /dev/null +++ b/packages/components/src/flex/next/stories/index.js @@ -0,0 +1,33 @@ +/** + * Internal dependencies + */ +import { Placeholder, Spacer } from '../../index'; +import { Flex, FlexItem } from '../index'; + +export default { + component: Flex, + title: 'Components/Flex', +}; + +const ItemView = ( props ) => ; + +export const _default = () => { + return ( + <> + + + Item + Item + + + + Item + + Item + + Item + Item + + + ); +}; diff --git a/packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap b/packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap new file mode 100644 index 00000000000000..6316b49d873b89 --- /dev/null +++ b/packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap @@ -0,0 +1,687 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props should render + wrap non Flex children 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + +
+
+
+
+
+
+`; + +exports[`props should render align 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +
+
+
+
+`; + +exports[`props should render correctly 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +
+
+
+
+`; + +exports[`props should render justify 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + width: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +
+
+
+
+`; + +exports[`props should render spacing 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +
+
+
+
+`; diff --git a/packages/components/src/flex/next/test/index.js b/packages/components/src/flex/next/test/index.js new file mode 100644 index 00000000000000..d59bb18385b51e --- /dev/null +++ b/packages/components/src/flex/next/test/index.js @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { View } from '../../View'; +import Flex, { FlexBlock, FlexItem } from '../index'; + +describe( 'props', () => { + test( 'should render correctly', () => { + const { container } = render( + + + + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render + wrap non Flex children', () => { + const { container } = render( + + + +
+ + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render align', () => { + const { container } = render( + + + + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render justify', () => { + const { container } = render( + + + + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render spacing', () => { + const { container } = render( + + + + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/components/src/flex/next/types.ts b/packages/components/src/flex/next/types.ts new file mode 100644 index 00000000000000..88572250ee7c7d --- /dev/null +++ b/packages/components/src/flex/next/types.ts @@ -0,0 +1,199 @@ +import { CSSProperties } from 'react'; +import { PolymorphicComponent } from '@wp-g2/create-styles'; +import { ResponsiveCSSValue } from '../../utils/types'; + +export type FlexDirection = ResponsiveCSSValue< CSSProperties[ 'flexDirection' ] >; + +export type FlexProps = { + /** + * 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. + * + * @default 'center' + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * ) + * } + * ``` + */ + 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. + * + * @default 'row' + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * ) + * } + * ``` + */ + direction?: FlexDirection; + /** + * Expands to the maximum available width (if horizontal) or height (if vertical). + * + * @default true + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * ) + * } + * ``` + */ + expanded?: boolean; + /** + * 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`). + * + * @default 2 + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * ) + * } + * ``` + */ + gap?: number; + /** + * 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. + * + * @default 'space-between' + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * ) + * } + * ``` + */ + justify?: CSSProperties[ 'justifyContent' ]; + /** + * @default false + */ + justifyContent?: boolean; + /** + * Determines if children should wrap. + * + * @default false + * + * @example + * ```jsx + * import { Flex, Text, View } from `@wp-g2/components` + * import { ui } from `@wp-g2/styles` + * + * function Example() { + * return ( + * + * + * Ana + * + * + * Elsa + * + * + * Olaf + * + * + * Kristoff + * + * + * Queen Iduna + * + * + * King Agnarr + * + * + * Yelena + * + * + * ) + * } + * ``` + */ + wrap?: boolean; +}; + +export type FlexItemProps = { + /** + * The (CSS) display of the `FlexItem`. + */ + display: CSSProperties[ 'display' ]; + /** + * Determines if `FlexItem` should render as an adaptive full-width block. + * + * @default true + */ + isBlock: boolean; +}; + +export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >; \ No newline at end of file diff --git a/packages/components/src/flex/next/use-flex-block.js b/packages/components/src/flex/next/use-flex-block.js new file mode 100644 index 00000000000000..8a6b7673c27071 --- /dev/null +++ b/packages/components/src/flex/next/use-flex-block.js @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { useContextSystem } from '@wp-g2/context'; + +/** + * Internal dependencies + */ +import { useFlexItem } from './use-flex-item'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + */ +export function useFlexBlock( props ) { + const otherProps = useContextSystem( props, 'FlexBlock' ); + const flexItemProps = useFlexItem( { isBlock: true, ...otherProps } ); + + return flexItemProps; +} diff --git a/packages/components/src/flex/next/use-flex-item.js b/packages/components/src/flex/next/use-flex-item.js new file mode 100644 index 00000000000000..f36f74c7220d1f --- /dev/null +++ b/packages/components/src/flex/next/use-flex-item.js @@ -0,0 +1,39 @@ +/** + * External dependencies + */ +import { useContextSystem } from '@wp-g2/context'; +import { css, cx, ui } from '@wp-g2/styles'; + +/** + * Internal dependencies + */ +import * as styles from './flex-styles'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + */ +export function useFlexItem( props ) { + const { + className, + display: displayProp, + isBlock = false, + ...otherProps + } = useContextSystem( props, 'FlexItem' ); + const sx = {}; + + sx.Base = css( { + display: displayProp || ui.get( 'FlexItemDisplay' ), + } ); + + const classes = cx( + styles.Item, + sx.Base, + isBlock && styles.block, + className + ); + + return { + ...otherProps, + className: classes, + }; +} diff --git a/packages/components/src/flex/next/use-flex.js b/packages/components/src/flex/next/use-flex.js new file mode 100644 index 00000000000000..2ad4ab1f53d272 --- /dev/null +++ b/packages/components/src/flex/next/use-flex.js @@ -0,0 +1,100 @@ +/** + * External dependencies + */ +import { useContextSystem } from '@wp-g2/context'; +import { css, cx, ui, useResponsiveValue } from '@wp-g2/styles'; + +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from './flex-styles'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + */ +export function useFlex( props ) { + const { + align = 'center', + alignItems, + className, + direction: directionProp = 'row', + expanded = true, + gap = 2, + justify = 'space-between', + justifyContent, + wrap = false, + ...otherProps + } = useContextSystem( props, 'Flex' ); + + const direction = useResponsiveValue( directionProp ); + + const isColumn = + typeof direction === 'string' && !! direction.includes( 'column' ); + const isReverse = + typeof direction === 'string' && direction.includes( 'reverse' ); + + const classes = useMemo( () => { + const sx = {}; + + sx.Base = css( { + [ ui.createToken( 'FlexGap' ) ]: ui.space( gap ), + [ ui.createToken( 'FlexItemDisplay' ) ]: isColumn ? 'block' : null, + [ ui.createToken( 'FlexItemMarginBottom' ) ]: isColumn + ? ui.get( 'FlexGap' ) + : 0, + [ ui.createToken( 'FlexItemMarginRight' ) ]: + ! isColumn && ! isReverse ? ui.get( 'FlexGap' ) : 0, + [ ui.createToken( 'FlexItemMarginLeft' ) ]: + ! isColumn && isReverse ? ui.get( 'FlexGap' ) : 0, + alignItems: alignItems || isColumn ? 'normal' : align, + flexDirection: direction, + flexWrap: wrap ? 'wrap' : undefined, + justifyContent: justifyContent || justify, + height: isColumn && expanded ? '100%' : undefined, + width: ! isColumn && expanded ? '100%' : undefined, + /** + * Workaround to optimize DOM rendering. + * We'll enhance alignment with naive parent flex assumptions. + * + * Trade-off: + * Far less DOM less. However, UI rendering is not as reliable. + */ + '> * + *:not(marquee)': { + marginTop: isColumn ? ui.space( gap ) : undefined, + marginRight: + ! isColumn && isReverse ? ui.space( gap ) : undefined, + marginLeft: + ! isColumn && ! isReverse ? ui.space( gap ) : undefined, + }, + /** + * Improves stability of width/height rendering. + * https://github.com/ItsJonQ/g2/pull/149 + */ + '> *': { + minWidth: ! isColumn ? 0 : null, + minHeight: isColumn ? 0 : null, + }, + } ); + + return cx( styles.Flex, sx.Base, className ); + }, [ + align, + alignItems, + className, + direction, + expanded, + gap, + isColumn, + isReverse, + justify, + justifyContent, + wrap, + ] ); + + return { ...otherProps, className: classes }; +} From 854f78776c3769a06aed6e33824d7b513739737d Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Fri, 29 Jan 2021 11:03:19 -0800 Subject: [PATCH 2/7] Add types to current Flex --- packages/components/src/flex/block.js | 8 ++++++ packages/components/src/flex/index.js | 16 +++++++++++ packages/components/src/flex/item.js | 8 ++++++ packages/components/src/flex/next/types.ts | 1 - packages/components/src/flex/next/use-flex.js | 21 ++++++++------- .../components/src/flex/styles/flex-styles.js | 27 ++++++++++++++++--- packages/components/tsconfig.json | 1 + 7 files changed, 67 insertions(+), 15 deletions(-) diff --git a/packages/components/src/flex/block.js b/packages/components/src/flex/block.js index adcded360dbb30..8db6d981d5742c 100644 --- a/packages/components/src/flex/block.js +++ b/packages/components/src/flex/block.js @@ -12,6 +12,14 @@ import { Block } from './styles/flex-styles'; */ import { forwardRef } from '@wordpress/element'; +/** + * @typedef {import('react').HTMLProps} Props + */ + +/** + * @param {Props} props + * @param {import('react').Ref} ref + */ function FlexBlock( { className, ...props }, ref ) { const classes = classnames( 'components-flex__block', className ); diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js index 98f188db0254dc..a98bbd79fa0373 100644 --- a/packages/components/src/flex/index.js +++ b/packages/components/src/flex/index.js @@ -16,6 +16,22 @@ import { Flex as BaseFlex } from './styles/flex-styles'; 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} Props */ + +/** + * @param {Props} props + * @param {import('react').Ref} ref + */ function FlexComponent( { align = 'center', diff --git a/packages/components/src/flex/item.js b/packages/components/src/flex/item.js index 9112d010c1f0ca..d394d94b73aaa3 100644 --- a/packages/components/src/flex/item.js +++ b/packages/components/src/flex/item.js @@ -13,6 +13,14 @@ import { Item } from './styles/flex-styles'; */ import { forwardRef } from '@wordpress/element'; +/** + * @typedef {import('react').HTMLProps} Props + */ + +/** + * @param {Props} param0 + * @param {import('react').Ref} ref + */ function FlexItem( { className, ...props }, ref ) { const classes = classnames( 'components-flex__item', className ); diff --git a/packages/components/src/flex/next/types.ts b/packages/components/src/flex/next/types.ts index 88572250ee7c7d..fbfe1ac7df847f 100644 --- a/packages/components/src/flex/next/types.ts +++ b/packages/components/src/flex/next/types.ts @@ -1,5 +1,4 @@ import { CSSProperties } from 'react'; -import { PolymorphicComponent } from '@wp-g2/create-styles'; import { ResponsiveCSSValue } from '../../utils/types'; export type FlexDirection = ResponsiveCSSValue< CSSProperties[ 'flexDirection' ] >; diff --git a/packages/components/src/flex/next/use-flex.js b/packages/components/src/flex/next/use-flex.js index 2ad4ab1f53d272..ee7ff6ea00c00b 100644 --- a/packages/components/src/flex/next/use-flex.js +++ b/packages/components/src/flex/next/use-flex.js @@ -20,18 +20,19 @@ import * as styles from './flex-styles'; export function useFlex( props ) { const { align = 'center', - alignItems, className, direction: directionProp = 'row', expanded = true, gap = 2, justify = 'space-between', - justifyContent, wrap = false, ...otherProps } = useContextSystem( props, 'Flex' ); - const direction = useResponsiveValue( directionProp ); + const directionAsArray = Array.isArray( directionProp ) + ? directionProp + : [ directionProp ]; + const direction = useResponsiveValue( directionAsArray ); const isColumn = typeof direction === 'string' && !! direction.includes( 'column' ); @@ -43,7 +44,9 @@ export function useFlex( props ) { sx.Base = css( { [ ui.createToken( 'FlexGap' ) ]: ui.space( gap ), - [ ui.createToken( 'FlexItemDisplay' ) ]: isColumn ? 'block' : null, + [ ui.createToken( 'FlexItemDisplay' ) ]: isColumn + ? 'block' + : undefined, [ ui.createToken( 'FlexItemMarginBottom' ) ]: isColumn ? ui.get( 'FlexGap' ) : 0, @@ -51,10 +54,10 @@ export function useFlex( props ) { ! isColumn && ! isReverse ? ui.get( 'FlexGap' ) : 0, [ ui.createToken( 'FlexItemMarginLeft' ) ]: ! isColumn && isReverse ? ui.get( 'FlexGap' ) : 0, - alignItems: alignItems || isColumn ? 'normal' : align, + alignItems: isColumn ? 'normal' : align, flexDirection: direction, flexWrap: wrap ? 'wrap' : undefined, - justifyContent: justifyContent || justify, + justifyContent: justify, height: isColumn && expanded ? '100%' : undefined, width: ! isColumn && expanded ? '100%' : undefined, /** @@ -76,15 +79,14 @@ export function useFlex( props ) { * https://github.com/ItsJonQ/g2/pull/149 */ '> *': { - minWidth: ! isColumn ? 0 : null, - minHeight: isColumn ? 0 : null, + minWidth: ! isColumn ? 0 : undefined, + minHeight: isColumn ? 0 : undefined, }, } ); return cx( styles.Flex, sx.Base, className ); }, [ align, - alignItems, className, direction, expanded, @@ -92,7 +94,6 @@ export function useFlex( props ) { isColumn, isReverse, justify, - justifyContent, wrap, ] ); diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js index 89ba8383584f9d..1ff2fdeb89ba53 100644 --- a/packages/components/src/flex/styles/flex-styles.js +++ b/packages/components/src/flex/styles/flex-styles.js @@ -4,26 +4,39 @@ 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[ align ] || align; + + 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[ justify ] || justify; + let value = + justifies[ /** @type {'left' | 'right'} */ ( justify ) ] || justify; - if ( isReversed && justifies[ justify ] ) { + if ( + isReversed && + justifies[ /** @type {'left' | 'right'} */ ( justify ) ] + ) { value = justify === 'left' ? justifies.right : justifies.left; } @@ -32,6 +45,9 @@ const justifyStyle = ( { justify, isReversed } ) => { } ); }; +/** + * @param {import('..').OwnProps} Props + */ const gapStyle = ( { gap, isReversed } ) => { const base = 4; const value = typeof gap === 'number' ? base * gap : base; @@ -49,6 +65,9 @@ const gapStyle = ( { gap, isReversed } ) => { `; }; +/** + * @param {import('..').OwnProps} props + */ const reversedStyles = ( { isReversed } ) => { if ( ! isReversed ) return ''; @@ -64,8 +83,8 @@ export const Flex = styled.div` ${ alignStyle } ${ justifyStyle } - ${ gapStyle } ${ reversedStyles } + ${ gapStyle } `; export const Item = styled.div` diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 5d42b26b890f1d..1bee38372d725a 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -15,6 +15,7 @@ "src/animate/**/*", "src/base-control/**/*", "src/dashicon/**/*", + "src/flex/**/*", "src/tip/**/*", "src/ui/**/*", "src/utils/**/*", From bb45238b751c93c0a8f76df8c8b0c427e1c66836 Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Fri, 29 Jan 2021 12:50:46 -0800 Subject: [PATCH 3/7] Adapter G2 flex components --- packages/components/src/flex/block.js | 13 ++-- packages/components/src/flex/index.js | 5 +- packages/components/src/flex/item.js | 15 ++-- packages/components/src/flex/next/flex.js | 2 +- packages/components/src/flex/next/index.js | 76 ++++++++++++++++++- .../components/src/flex/next/stories/index.js | 27 +++---- packages/components/src/flex/next/types.ts | 4 +- .../components/src/font-size-picker/index.js | 4 +- packages/components/src/text/index.js | 1 + packages/components/src/text/next.js | 2 +- .../components/src/ui/context/with-next.js | 4 +- 11 files changed, 112 insertions(+), 41 deletions(-) diff --git a/packages/components/src/flex/block.js b/packages/components/src/flex/block.js index 8db6d981d5742c..ffe3ad85030f51 100644 --- a/packages/components/src/flex/block.js +++ b/packages/components/src/flex/block.js @@ -3,17 +3,18 @@ */ import classnames from 'classnames'; /** - * Internal dependencies + * WordPress dependencies */ -import { Block } from './styles/flex-styles'; +import { forwardRef } from '@wordpress/element'; /** - * WordPress dependencies + * Internal dependencies */ -import { forwardRef } from '@wordpress/element'; +import { Block } from './styles/flex-styles'; +import { withNextFlexBlock } from './next'; /** - * @typedef {import('react').HTMLProps} Props + * @typedef {import('react').HTMLProps & import('react').RefAttributes} Props */ /** @@ -26,4 +27,4 @@ function FlexBlock( { className, ...props }, ref ) { return ; } -export default forwardRef( FlexBlock ); +export default withNextFlexBlock( forwardRef( FlexBlock ) ); diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js index a98bbd79fa0373..4da5e5425baad6 100644 --- a/packages/components/src/flex/index.js +++ b/packages/components/src/flex/index.js @@ -12,6 +12,7 @@ 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'; @@ -26,7 +27,7 @@ export { default as FlexItem } from './item'; */ /* eslint-enable jsdoc/valid-types */ -/** @typedef {OwnProps & import('react').HTMLProps} Props */ +/** @typedef {OwnProps & import('react').HTMLProps & import('react').RefAttributes} Props */ /** * @param {Props} props @@ -58,6 +59,6 @@ function FlexComponent( ); } -export const Flex = forwardRef( FlexComponent ); +export const Flex = withNextFlex( forwardRef( FlexComponent ) ); export default Flex; diff --git a/packages/components/src/flex/item.js b/packages/components/src/flex/item.js index d394d94b73aaa3..26ac665ae4ea91 100644 --- a/packages/components/src/flex/item.js +++ b/packages/components/src/flex/item.js @@ -4,21 +4,22 @@ import classnames from 'classnames'; /** - * Internal dependencies + * WordPress dependencies */ -import { Item } from './styles/flex-styles'; +import { forwardRef } from '@wordpress/element'; /** - * WordPress dependencies + * Internal dependencies */ -import { forwardRef } from '@wordpress/element'; +import { Item } from './styles/flex-styles'; +import { withNextFlexItem } from './next'; /** - * @typedef {import('react').HTMLProps} Props + * @typedef {import('react').RefAttributes & import('react').HTMLProps} Props */ /** - * @param {Props} param0 + * @param {Props} props * @param {import('react').Ref} ref */ function FlexItem( { className, ...props }, ref ) { @@ -27,4 +28,4 @@ function FlexItem( { className, ...props }, ref ) { return ; } -export default forwardRef( FlexItem ); +export default withNextFlexItem( forwardRef( FlexItem ) ); diff --git a/packages/components/src/flex/next/flex.js b/packages/components/src/flex/next/flex.js index d10350c53df47f..98bdbf12f5ac9c 100644 --- a/packages/components/src/flex/next/flex.js +++ b/packages/components/src/flex/next/flex.js @@ -12,7 +12,7 @@ import { useFlex } from './use-flex'; * * @example * ```jsx - * import { Flex, FlexItem, FlexBlock, Text, View } from `@wp-g2/components` + * import { Flex, FlexItem, FlexBlock, Text, View } from `@wordpress/components` * * function Example() { * return ( diff --git a/packages/components/src/flex/next/index.js b/packages/components/src/flex/next/index.js index 9ef13fc078b635..25d9c3cc08c260 100644 --- a/packages/components/src/flex/next/index.js +++ b/packages/components/src/flex/next/index.js @@ -1,7 +1,77 @@ -export { default } from './flex'; -export { default as FlexBlock } from './flex-block'; -export { default as FlexItem } from './flex-item'; +/** + * Internal dependencies + */ +import { __unstableWithNext as withNext } from '../../__next/context'; +import NextFlex from './flex'; +import NextFlexBlock from './flex-block'; +import NextFlexItem from './flex-item'; export * from './use-flex'; export * from './use-flex-block'; export * from './use-flex-item'; + +const Flex = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlex : undefined; +const FlexBlock = + process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlexBlock : undefined; +const FlexItem = + process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlexItem : undefined; + +/** + * @param {import('../index').Props} props Current props. + * @return {import('./types').FlexProps} Next props. + */ +const flexAdapter = ( { isReversed, ...restProps } ) => ( { + // There's no equivalent for `direction` on the original component so we can just translate `isReversed` to it + direction: isReversed ? 'row-reverse' : 'row', + ...restProps, + // There's an HTML attribute named `wrap` that will exist in `restProps` so we need to set it to undefined so the default behavior of the next component takes over + wrap: undefined, +} ); + +/** + * @param {import('../item').Props} props Current props. + * @return {import('./types').FlexItemProps} Next props. + */ +const flexItemAdapter = ( props ) => ( { + ...props, + // ensure these are undefined so the default takes over + isBlock: undefined, + display: undefined, +} ); + +/** + * @param {import('../block').Props} props Current props. + * @return {import('./types').FlexBlockProps} Next props. + */ +const flexBlockAdapter = ( props ) => ( { + ...props, + // ensure this is undefined so the default takes over + display: undefined, +} ); + +/* eslint-disable jsdoc/valid-types */ +/** + * @param {import('react').ForwardRefExoticComponent} Current + */ +/* eslint-enable jsdoc/valid-types */ +export function withNextFlex( Current ) { + return withNext( Current, Flex, 'WPComponentsFlex', flexAdapter ); +} + +/* eslint-disable jsdoc/valid-types */ +/** + * @param {import('react').ForwardRefExoticComponent} Current + */ +/* eslint-enable jsdoc/valid-types */ +export function withNextFlexItem( Current ) { + return withNext( Current, FlexItem, 'WPComponentsFlex', flexItemAdapter ); +} + +/* eslint-disable jsdoc/valid-types */ +/** + * @param {import('react').ForwardRefExoticComponent} Current + */ +/* eslint-enable jsdoc/valid-types */ +export function withNextFlexBlock( Current ) { + return withNext( Current, FlexBlock, 'WPComponentsFlex', flexBlockAdapter ); +} diff --git a/packages/components/src/flex/next/stories/index.js b/packages/components/src/flex/next/stories/index.js index 4d3f18726e5c55..c374b29c1c0eb8 100644 --- a/packages/components/src/flex/next/stories/index.js +++ b/packages/components/src/flex/next/stories/index.js @@ -1,32 +1,29 @@ /** * Internal dependencies */ -import { Placeholder, Spacer } from '../../index'; -import { Flex, FlexItem } from '../index'; +import Flex from '../flex'; +import FlexItem from '../flex-item'; +import View from '../../../view'; export default { component: Flex, - title: 'Components/Flex', + title: 'Components/G2/Flex', }; -const ItemView = ( props ) => ; - export const _default = () => { return ( <> - - - Item - Item - - + + Item + Item + - Item + Item - Item + Item - Item - Item + Item + Item ); diff --git a/packages/components/src/flex/next/types.ts b/packages/components/src/flex/next/types.ts index fbfe1ac7df847f..eaa773655dd850 100644 --- a/packages/components/src/flex/next/types.ts +++ b/packages/components/src/flex/next/types.ts @@ -186,13 +186,13 @@ export type FlexItemProps = { /** * The (CSS) display of the `FlexItem`. */ - display: CSSProperties[ 'display' ]; + display?: CSSProperties[ 'display' ]; /** * Determines if `FlexItem` should render as an adaptive full-width block. * * @default true */ - isBlock: boolean; + isBlock?: boolean; }; export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >; \ No newline at end of file diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index c726e1ed523c69..764aece8cbef05 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -9,7 +9,7 @@ import { isNumber, isString } from 'lodash'; import { __ } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; import { textColor } from '@wordpress/icons'; -import { useMemo } from '@wordpress/element'; +import { useMemo, forwardRef } from '@wordpress/element'; /** * Internal dependencies @@ -177,4 +177,4 @@ function FontSizePicker( ); } -export default withNextComponent( FontSizePicker ); +export default withNextComponent( forwardRef( FontSizePicker ) ); diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js index fb815c5571d84b..e6eb39c0c6cb34 100644 --- a/packages/components/src/text/index.js +++ b/packages/components/src/text/index.js @@ -17,4 +17,5 @@ const Text = styled.p( text ); +// @ts-ignore Text _is_ forwarded ref but the styled component definition doesn't include $$typeof so we'll just ignore it here export default withNextComponent( Text ); diff --git a/packages/components/src/text/next.js b/packages/components/src/text/next.js index 04936258945912..a818f51cbe0cd0 100644 --- a/packages/components/src/text/next.js +++ b/packages/components/src/text/next.js @@ -29,7 +29,7 @@ export const adapter = ( { as, variant, ...restProps } ) => ( { /* eslint-disable jsdoc/valid-types */ /** - * @param {import('react').ComponentType} Current + * @param {import('react').ForwardRefExoticComponent} Current */ /* eslint-enable jsdoc/valid-types */ export function withNextComponent( Current ) { diff --git a/packages/components/src/ui/context/with-next.js b/packages/components/src/ui/context/with-next.js index a0b7770f582be0..88701c4480943e 100644 --- a/packages/components/src/ui/context/with-next.js +++ b/packages/components/src/ui/context/with-next.js @@ -6,13 +6,13 @@ import { contextConnect, useContextSystem } from '@wp-g2/context'; /** * @template {{}} TCurrentProps * @template {{}} TNextProps - * @param {import('react').ComponentType} CurrentComponent + * @param {import('react').ForwardRefExoticComponent} CurrentComponent * @param {import('react').ComponentType} NextComponent * @param {string} namespace * @param {(props: TCurrentProps) => TNextProps} adapter */ export function withNext( - CurrentComponent = () => null, + CurrentComponent, NextComponent = () => null, namespace = 'Component', adapter = ( p ) => /** @type {any} */ ( p ) From 6b730f2d4ab62703cdda30df8f297406e8561b47 Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Fri, 29 Jan 2021 13:19:31 -0800 Subject: [PATCH 4/7] Fix tests --- .../{Flex.test.js.snap => index.js.snap} | 390 +++++++++--------- .../components/src/flex/next/test/index.js | 6 +- 2 files changed, 199 insertions(+), 197 deletions(-) rename packages/components/src/flex/next/test/__snapshots__/{Flex.test.js.snap => index.js.snap} (82%) diff --git a/packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap b/packages/components/src/flex/next/test/__snapshots__/index.js.snap similarity index 82% rename from packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap rename to packages/components/src/flex/next/test/__snapshots__/index.js.snap index 6316b49d873b89..6674889debdd5e 100644 --- a/packages/components/src/flex/next/test/__snapshots__/Flex.test.js.snap +++ b/packages/components/src/flex/next/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render + wrap non Flex children 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -37,27 +37,27 @@ exports[`props should render + wrap non Flex children 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { min-width: 0; } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -77,15 +77,15 @@ exports[`props should render + wrap non Flex children 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { @@ -99,21 +99,30 @@ exports[`props should render + wrap non Flex children 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } @media (prefers-reduced-motion) { .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -124,45 +133,36 @@ exports[`props should render + wrap non Flex children 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; } @media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; }
@@ -181,49 +181,24 @@ exports[`props should render align 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - width: 100%; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); } @media (prefers-reduced-motion) { .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { - min-width: 0; + -webkit-transition: none !important; + transition: none !important; } .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { @@ -243,18 +218,21 @@ exports[`props should render align 1`] = ` min-height: 0; min-width: 0; display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } @media (prefers-reduced-motion) { .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { @@ -268,41 +246,63 @@ exports[`props should render align 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; } @media (prefers-reduced-motion) { .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { + min-width: 0; }
@@ -310,7 +310,7 @@ exports[`props should render align 1`] = ` `; exports[`props should render correctly 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -346,27 +346,27 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -386,18 +386,18 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -420,29 +420,29 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; }
@@ -461,49 +461,24 @@ exports[`props should render justify 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - width: 100%; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); } @media (prefers-reduced-motion) { .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { - min-width: 0; + -webkit-transition: none !important; + transition: none !important; } .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { @@ -523,18 +498,21 @@ exports[`props should render justify 1`] = ` min-height: 0; min-width: 0; display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } @media (prefers-reduced-motion) { .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { @@ -548,41 +526,63 @@ exports[`props should render justify 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + width: 100%; } @media (prefers-reduced-motion) { .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { + min-width: 0; }
@@ -590,7 +590,7 @@ exports[`props should render justify 1`] = ` `; exports[`props should render spacing 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -626,27 +626,27 @@ exports[`props should render spacing 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -660,28 +660,28 @@ exports[`props should render spacing 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; }
`; diff --git a/packages/components/src/flex/next/test/index.js b/packages/components/src/flex/next/test/index.js index d59bb18385b51e..66e53aeb4ee212 100644 --- a/packages/components/src/flex/next/test/index.js +++ b/packages/components/src/flex/next/test/index.js @@ -6,8 +6,10 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import { View } from '../../View'; -import Flex, { FlexBlock, FlexItem } from '../index'; +import View from '../../../view'; +import Flex from '../flex'; +import FlexItem from '../flex-item'; +import FlexBlock from '../flex-block'; describe( 'props', () => { test( 'should render correctly', () => { From dd9e4a5cc502a5a5ba48fb7996877bd092ce150b Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Tue, 2 Feb 2021 08:50:38 -0800 Subject: [PATCH 5/7] Components: Move G2 Flex into UI --- docs/manifest.json | 6 ---- .../src/flex/{next/index.js => next.js} | 32 +++++++++---------- .../src/{flex/next => ui/flex}/README.md | 10 +++--- .../src/{flex/next => ui/flex}/flex-block.js | 2 +- .../src/{flex/next => ui/flex}/flex-item.js | 2 +- .../src/{flex/next => ui/flex}/flex-styles.js | 0 .../src/{flex/next => ui/flex}/flex.js | 2 +- packages/components/src/ui/flex/index.js | 7 ++++ .../{flex/next => ui/flex}/stories/index.js | 4 +-- .../flex}/test/__snapshots__/index.js.snap | 0 .../src/{flex/next => ui/flex}/test/index.js | 2 +- .../src/{flex/next => ui/flex}/types.ts | 14 ++++---- .../{flex/next => ui/flex}/use-flex-block.js | 0 .../{flex/next => ui/flex}/use-flex-item.js | 0 .../src/{flex/next => ui/flex}/use-flex.js | 0 packages/components/src/ui/index.js | 1 + packages/components/src/ui/utils/types.ts | 2 ++ 17 files changed, 43 insertions(+), 41 deletions(-) rename packages/components/src/flex/{next/index.js => next.js} (65%) rename packages/components/src/{flex/next => ui/flex}/README.md (90%) rename packages/components/src/{flex/next => ui/flex}/flex-block.js (89%) rename packages/components/src/{flex/next => ui/flex}/flex-item.js (89%) rename packages/components/src/{flex/next => ui/flex}/flex-styles.js (100%) rename packages/components/src/{flex/next => ui/flex}/flex.js (95%) create mode 100644 packages/components/src/ui/flex/index.js rename packages/components/src/{flex/next => ui/flex}/stories/index.js (86%) rename packages/components/src/{flex/next => ui/flex}/test/__snapshots__/index.js.snap (100%) rename packages/components/src/{flex/next => ui/flex}/test/index.js (97%) rename packages/components/src/{flex/next => ui/flex}/types.ts (91%) rename packages/components/src/{flex/next => ui/flex}/use-flex-block.js (100%) rename packages/components/src/{flex/next => ui/flex}/use-flex-item.js (100%) rename packages/components/src/{flex/next => ui/flex}/use-flex.js (100%) diff --git a/docs/manifest.json b/docs/manifest.json index 91cb1dfc041d89..b28dff5a8988be 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -923,12 +923,6 @@ "markdown_source": "../packages/components/src/external-link/README.md", "parent": "components" }, - { - "title": "Next", - "slug": "next", - "markdown_source": "../packages/components/src/flex/next/README.md", - "parent": "components" - }, { "title": "Flex", "slug": "flex", diff --git a/packages/components/src/flex/next/index.js b/packages/components/src/flex/next.js similarity index 65% rename from packages/components/src/flex/next/index.js rename to packages/components/src/flex/next.js index 25d9c3cc08c260..541b01be1f41f6 100644 --- a/packages/components/src/flex/next/index.js +++ b/packages/components/src/flex/next.js @@ -1,14 +1,12 @@ /** * Internal dependencies */ -import { __unstableWithNext as withNext } from '../../__next/context'; -import NextFlex from './flex'; -import NextFlexBlock from './flex-block'; -import NextFlexItem from './flex-item'; - -export * from './use-flex'; -export * from './use-flex-block'; -export * from './use-flex-item'; +import { withNext } from '../ui/context'; +import { + Flex as NextFlex, + FlexItem as NextFlexItem, + FlexBlock as NextFlexBlock, +} from '../ui/flex'; const Flex = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlex : undefined; const FlexBlock = @@ -17,8 +15,8 @@ const FlexItem = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlexItem : undefined; /** - * @param {import('../index').Props} props Current props. - * @return {import('./types').FlexProps} Next props. + * @param {import('./index').Props} props Current props. + * @return {import('../ui/flex/types').FlexProps} Next props. */ const flexAdapter = ( { isReversed, ...restProps } ) => ( { // There's no equivalent for `direction` on the original component so we can just translate `isReversed` to it @@ -29,8 +27,8 @@ const flexAdapter = ( { isReversed, ...restProps } ) => ( { } ); /** - * @param {import('../item').Props} props Current props. - * @return {import('./types').FlexItemProps} Next props. + * @param {import('./item').Props} props Current props. + * @return {import('../ui/flex/types').FlexItemProps} Next props. */ const flexItemAdapter = ( props ) => ( { ...props, @@ -40,8 +38,8 @@ const flexItemAdapter = ( props ) => ( { } ); /** - * @param {import('../block').Props} props Current props. - * @return {import('./types').FlexBlockProps} Next props. + * @param {import('./block').Props} props Current props. + * @return {import('../ui/flex/types').FlexBlockProps} Next props. */ const flexBlockAdapter = ( props ) => ( { ...props, @@ -51,7 +49,7 @@ const flexBlockAdapter = ( props ) => ( { /* eslint-disable jsdoc/valid-types */ /** - * @param {import('react').ForwardRefExoticComponent} Current + * @param {import('react').ForwardRefExoticComponent} Current */ /* eslint-enable jsdoc/valid-types */ export function withNextFlex( Current ) { @@ -60,7 +58,7 @@ export function withNextFlex( Current ) { /* eslint-disable jsdoc/valid-types */ /** - * @param {import('react').ForwardRefExoticComponent} Current + * @param {import('react').ForwardRefExoticComponent} Current */ /* eslint-enable jsdoc/valid-types */ export function withNextFlexItem( Current ) { @@ -69,7 +67,7 @@ export function withNextFlexItem( Current ) { /* eslint-disable jsdoc/valid-types */ /** - * @param {import('react').ForwardRefExoticComponent} Current + * @param {import('react').ForwardRefExoticComponent} Current */ /* eslint-enable jsdoc/valid-types */ export function withNextFlexBlock( Current ) { diff --git a/packages/components/src/flex/next/README.md b/packages/components/src/ui/flex/README.md similarity index 90% rename from packages/components/src/flex/next/README.md rename to packages/components/src/ui/flex/README.md index d8cbb87668c60a..5b40592e00301f 100644 --- a/packages/components/src/flex/next/README.md +++ b/packages/components/src/ui/flex/README.md @@ -7,7 +7,7 @@ `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`. ```jsx live -import { Flex, FlexItem, FlexBlock, Text, View } from '@wp-g2/components'; +import { Flex, FlexItem, FlexBlock, Text, View } from '@wordpress/components/ui'; function Example() { return ( @@ -44,7 +44,7 @@ In the example below, `flex-start` will align the children content to the top. The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally. ```jsx live -import { Flex, Text, View } from '@wp-g2/components'; +import { Flex, Text, View } from '@wordpress/components/ui'; import { ui } from '@wp-g2/styles'; function Example() { @@ -68,7 +68,7 @@ function Example() { Expands to the maximum available width (if horizontal) or height (if vertical). ```jsx live -import { Flex, Text, View } from '@wp-g2/components'; +import { Flex, Text, View } from '@wordpress/components/ui'; import { ui } from '@wp-g2/styles'; function Example() { @@ -92,7 +92,7 @@ function Example() { 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`). ```jsx live -import { Flex, Text, View } from '@wp-g2/components'; +import { Flex, Text, View } from '@wordpress/components/ui'; import { ui } from '@wp-g2/styles'; function Example() { @@ -123,7 +123,7 @@ In the example below, `flex-start` will align the children content to the left. Determines if children should wrap. ```jsx live -import { Flex, Text, View } from '@wp-g2/components'; +import { Flex, Text, View } from '@wordpress/components/ui'; import { ui } from '@wp-g2/styles'; function Example() { diff --git a/packages/components/src/flex/next/flex-block.js b/packages/components/src/ui/flex/flex-block.js similarity index 89% rename from packages/components/src/flex/next/flex-block.js rename to packages/components/src/ui/flex/flex-block.js index f766daf6b4011d..a3d87336ac964c 100644 --- a/packages/components/src/flex/next/flex-block.js +++ b/packages/components/src/ui/flex/flex-block.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { createComponent } from '../../utils'; +import { createComponent } from '../utils'; import { useFlexBlock } from './use-flex-block'; /** diff --git a/packages/components/src/flex/next/flex-item.js b/packages/components/src/ui/flex/flex-item.js similarity index 89% rename from packages/components/src/flex/next/flex-item.js rename to packages/components/src/ui/flex/flex-item.js index 74db58d1cac2cd..c65636fc74c7ab 100644 --- a/packages/components/src/flex/next/flex-item.js +++ b/packages/components/src/ui/flex/flex-item.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { createComponent } from '../../utils'; +import { createComponent } from '../utils'; import { useFlexItem } from './use-flex-item'; /** diff --git a/packages/components/src/flex/next/flex-styles.js b/packages/components/src/ui/flex/flex-styles.js similarity index 100% rename from packages/components/src/flex/next/flex-styles.js rename to packages/components/src/ui/flex/flex-styles.js diff --git a/packages/components/src/flex/next/flex.js b/packages/components/src/ui/flex/flex.js similarity index 95% rename from packages/components/src/flex/next/flex.js rename to packages/components/src/ui/flex/flex.js index 98bdbf12f5ac9c..c3980e340db610 100644 --- a/packages/components/src/flex/next/flex.js +++ b/packages/components/src/ui/flex/flex.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { createComponent } from '../../utils'; +import { createComponent } from '../utils'; import { useFlex } from './use-flex'; /** diff --git a/packages/components/src/ui/flex/index.js b/packages/components/src/ui/flex/index.js new file mode 100644 index 00000000000000..fb2bdace6a1fa2 --- /dev/null +++ b/packages/components/src/ui/flex/index.js @@ -0,0 +1,7 @@ +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/flex/next/stories/index.js b/packages/components/src/ui/flex/stories/index.js similarity index 86% rename from packages/components/src/flex/next/stories/index.js rename to packages/components/src/ui/flex/stories/index.js index c374b29c1c0eb8..a1b27e8b8a2656 100644 --- a/packages/components/src/flex/next/stories/index.js +++ b/packages/components/src/ui/flex/stories/index.js @@ -3,11 +3,11 @@ */ import Flex from '../flex'; import FlexItem from '../flex-item'; -import View from '../../../view'; +import { View } from '../../view'; export default { component: Flex, - title: 'Components/G2/Flex', + title: 'G2 Components (Experimental)/Flex', }; export const _default = () => { diff --git a/packages/components/src/flex/next/test/__snapshots__/index.js.snap b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap similarity index 100% rename from packages/components/src/flex/next/test/__snapshots__/index.js.snap rename to packages/components/src/ui/flex/test/__snapshots__/index.js.snap diff --git a/packages/components/src/flex/next/test/index.js b/packages/components/src/ui/flex/test/index.js similarity index 97% rename from packages/components/src/flex/next/test/index.js rename to packages/components/src/ui/flex/test/index.js index 66e53aeb4ee212..cc5eb5fecc781a 100644 --- a/packages/components/src/flex/next/test/index.js +++ b/packages/components/src/ui/flex/test/index.js @@ -6,7 +6,7 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import View from '../../../view'; +import { View } from '../../view'; import Flex from '../flex'; import FlexItem from '../flex-item'; import FlexBlock from '../flex-block'; diff --git a/packages/components/src/flex/next/types.ts b/packages/components/src/ui/flex/types.ts similarity index 91% rename from packages/components/src/flex/next/types.ts rename to packages/components/src/ui/flex/types.ts index eaa773655dd850..3e3c84fa4fdf32 100644 --- a/packages/components/src/flex/next/types.ts +++ b/packages/components/src/ui/flex/types.ts @@ -1,5 +1,5 @@ import { CSSProperties } from 'react'; -import { ResponsiveCSSValue } from '../../utils/types'; +import { ResponsiveCSSValue } from '../utils/types'; export type FlexDirection = ResponsiveCSSValue< CSSProperties[ 'flexDirection' ] >; @@ -13,7 +13,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { @@ -42,7 +42,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { @@ -67,7 +67,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { @@ -92,7 +92,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { @@ -118,7 +118,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { @@ -147,7 +147,7 @@ export type FlexProps = { * * @example * ```jsx - * import { Flex, Text, View } from `@wp-g2/components` + * import { Flex, Text, View } from `@wordpress/components/ui` * import { ui } from `@wp-g2/styles` * * function Example() { diff --git a/packages/components/src/flex/next/use-flex-block.js b/packages/components/src/ui/flex/use-flex-block.js similarity index 100% rename from packages/components/src/flex/next/use-flex-block.js rename to packages/components/src/ui/flex/use-flex-block.js diff --git a/packages/components/src/flex/next/use-flex-item.js b/packages/components/src/ui/flex/use-flex-item.js similarity index 100% rename from packages/components/src/flex/next/use-flex-item.js rename to packages/components/src/ui/flex/use-flex-item.js diff --git a/packages/components/src/flex/next/use-flex.js b/packages/components/src/ui/flex/use-flex.js similarity index 100% rename from packages/components/src/flex/next/use-flex.js rename to packages/components/src/ui/flex/use-flex.js diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js index cddfa1a2e22a5e..bd1d80d9b124a8 100644 --- a/packages/components/src/ui/index.js +++ b/packages/components/src/ui/index.js @@ -1,3 +1,4 @@ +export * from './flex'; export * from './grid'; export * from './text'; export * from './truncate'; diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/ui/utils/types.ts index 68f9c644fc64ab..bb92504c5b33fc 100644 --- a/packages/components/src/ui/utils/types.ts +++ b/packages/components/src/ui/utils/types.ts @@ -7,3 +7,5 @@ export type Options> = { useHook: (props: P) => any; memo?: boolean; }; + +export type ResponsiveCSSValue = Array | T; From bd20f816eda5231d34eefa9764d596956b05527b Mon Sep 17 00:00:00 2001 From: Sara Marcondes Date: Wed, 3 Feb 2021 09:53:33 -0800 Subject: [PATCH 6/7] Update with latest from g2 --- .../components/src/ui/flex/flex-styles.js | 24 ++++++++++++++ packages/components/src/ui/flex/use-flex.js | 32 ++++++++++++++----- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/packages/components/src/ui/flex/flex-styles.js b/packages/components/src/ui/flex/flex-styles.js index b66c49222b1922..532b5e5ebfe5bc 100644 --- a/packages/components/src/ui/flex/flex-styles.js +++ b/packages/components/src/ui/flex/flex-styles.js @@ -18,3 +18,27 @@ export const Item = css` export const block = css` flex: 1; `; + +/** + * Workaround to optimize DOM rendering. + * We'll enhance alignment with naive parent flex assumptions. + * + * Trade-off: + * Far less DOM less. However, UI rendering is not as reliable. + */ + +/** + * Improves stability of width/height rendering. + * https://github.com/ItsJonQ/g2/pull/149 + */ +export const ItemsColumn = css` + > * { + min-height: 0; + } +`; + +export const ItemsRow = css` + > * { + min-width: 0; + } +`; diff --git a/packages/components/src/ui/flex/use-flex.js b/packages/components/src/ui/flex/use-flex.js index ee7ff6ea00c00b..87237dc0aaf9c3 100644 --- a/packages/components/src/ui/flex/use-flex.js +++ b/packages/components/src/ui/flex/use-flex.js @@ -60,6 +60,10 @@ export function useFlex( props ) { justifyContent: justify, height: isColumn && expanded ? '100%' : undefined, width: ! isColumn && expanded ? '100%' : undefined, + marginBottom: wrap ? `calc(${ ui.space( gap ) } * -1)` : undefined, + } ); + + sx.Items = css( { /** * Workaround to optimize DOM rendering. * We'll enhance alignment with naive parent flex assumptions. @@ -74,17 +78,29 @@ export function useFlex( props ) { marginLeft: ! isColumn && ! isReverse ? ui.space( gap ) : undefined, }, - /** - * Improves stability of width/height rendering. - * https://github.com/ItsJonQ/g2/pull/149 - */ - '> *': { - minWidth: ! isColumn ? 0 : undefined, - minHeight: isColumn ? 0 : undefined, + } ); + + sx.WrapItems = css( { + '> *:not(marquee)': { + marginBottom: ui.space( gap ), + marginLeft: + ! isColumn && isReverse ? ui.space( gap ) : undefined, + marginRight: + ! isColumn && ! isReverse ? ui.space( gap ) : undefined, + }, + '> *:last-child:not(marquee)': { + marginLeft: ! isColumn && isReverse ? 0 : undefined, + marginRight: ! isColumn && ! isReverse ? 0 : undefined, }, } ); - return cx( styles.Flex, sx.Base, className ); + return cx( + styles.Flex, + sx.Base, + wrap ? sx.WrapItems : sx.Items, + isColumn ? styles.ItemsColumn : styles.ItemsRow, + className + ); }, [ align, className, From 52a2e124d14ccb1538cf8e38640792c5e44fb6b4 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 3 Feb 2021 13:14:16 -0500 Subject: [PATCH 7/7] Fix integration of `ui/flex` with `InputControl` --- packages/components/src/input-control/input-base.js | 3 +++ .../src/input-control/styles/input-control-styles.js | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/packages/components/src/input-control/input-base.js b/packages/components/src/input-control/input-base.js index 49ce733912b496..fd47c76473a60d 100644 --- a/packages/components/src/input-control/input-base.js +++ b/packages/components/src/input-control/input-base.js @@ -43,6 +43,7 @@ export function InputBase( ref ) { const id = useUniqueId( idProp ); + const hideLabel = hideLabelFromVision || ! label; return (