Skip to content

Commit 0105c9a

Browse files
sarayourfriendJon Q
sarayourfriend
and
Jon Q
authored
Components: Add G2 Flex (#28609)
* Components: Add G2 Flex * Add types to current Flex * Adapter G2 flex components * Fix tests * Components: Move G2 Flex into UI * Update with latest from g2 * Fix integration of `ui/flex` with `InputControl` Co-authored-by: Jon Q <hello@jonquach.com>
1 parent b13f304 commit 0105c9a

File tree

27 files changed

+1609
-16
lines changed

27 files changed

+1609
-16
lines changed

‎packages/components/src/flex/block.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,29 @@
22
* External dependencies
33
*/
44
import classnames from 'classnames';
5+
/**
6+
* WordPress dependencies
7+
*/
8+
import { forwardRef } from '@wordpress/element';
9+
510
/**
611
* Internal dependencies
712
*/
813
import { Block } from './styles/flex-styles';
14+
import { withNextFlexBlock } from './next';
915

1016
/**
11-
* WordPress dependencies
17+
* @typedef {import('react').HTMLProps<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>} Props
1218
*/
13-
import { forwardRef } from '@wordpress/element';
1419

20+
/**
21+
* @param {Props} props
22+
* @param {import('react').Ref<HTMLDivElement>} ref
23+
*/
1524
function FlexBlock( { className, ...props }, ref ) {
1625
const classes = classnames( 'components-flex__block', className );
1726

1827
return <Block { ...props } className={ classes } ref={ ref } />;
1928
}
2029

21-
export default forwardRef( FlexBlock );
30+
export default withNextFlexBlock( forwardRef( FlexBlock ) );

‎packages/components/src/flex/index.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,27 @@ import { forwardRef } from '@wordpress/element';
1212
* Internal dependencies
1313
*/
1414
import { Flex as BaseFlex } from './styles/flex-styles';
15+
import { withNextFlex } from './next';
1516

1617
export { default as FlexBlock } from './block';
1718
export { default as FlexItem } from './item';
1819

20+
/* eslint-disable jsdoc/valid-types */
21+
/**
22+
* @typedef OwnProps
23+
* @property {import('react').CSSProperties['alignItems'] | 'top' | 'bottom'} [align='center'] Sets align-items. Top and bottom are shorthand for flex-start and flex-end respectively.
24+
* @property {number} [gap=2] Determines the spacing in between children components. The `gap` value is a multiplier to the base value of `4`.
25+
* @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.
26+
* @property {boolean} [isReversed=false] Reversed the flex direction.
27+
*/
28+
/* eslint-enable jsdoc/valid-types */
29+
30+
/** @typedef {OwnProps & import('react').HTMLProps<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>} Props */
31+
32+
/**
33+
* @param {Props} props
34+
* @param {import('react').Ref<HTMLDivElement>} ref
35+
*/
1936
function FlexComponent(
2037
{
2138
align = 'center',
@@ -42,6 +59,6 @@ function FlexComponent(
4259
);
4360
}
4461

45-
export const Flex = forwardRef( FlexComponent );
62+
export const Flex = withNextFlex( forwardRef( FlexComponent ) );
4663

4764
export default Flex;

‎packages/components/src/flex/item.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,29 @@
33
*/
44
import classnames from 'classnames';
55

6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { forwardRef } from '@wordpress/element';
10+
611
/**
712
* Internal dependencies
813
*/
914
import { Item } from './styles/flex-styles';
15+
import { withNextFlexItem } from './next';
1016

1117
/**
12-
* WordPress dependencies
18+
* @typedef {import('react').RefAttributes<HTMLDivElement> & import('react').HTMLProps<HTMLDivElement>} Props
1319
*/
14-
import { forwardRef } from '@wordpress/element';
1520

21+
/**
22+
* @param {Props} props
23+
* @param {import('react').Ref<HTMLDivElement>} ref
24+
*/
1625
function FlexItem( { className, ...props }, ref ) {
1726
const classes = classnames( 'components-flex__item', className );
1827

1928
return <Item { ...props } className={ classes } ref={ ref } />;
2029
}
2130

22-
export default forwardRef( FlexItem );
31+
export default withNextFlexItem( forwardRef( FlexItem ) );

‎packages/components/src/flex/next.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { withNext } from '../ui/context';
5+
import {
6+
Flex as NextFlex,
7+
FlexItem as NextFlexItem,
8+
FlexBlock as NextFlexBlock,
9+
} from '../ui/flex';
10+
11+
const Flex = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlex : undefined;
12+
const FlexBlock =
13+
process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlexBlock : undefined;
14+
const FlexItem =
15+
process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextFlexItem : undefined;
16+
17+
/**
18+
* @param {import('./index').Props} props Current props.
19+
* @return {import('../ui/flex/types').FlexProps} Next props.
20+
*/
21+
const flexAdapter = ( { isReversed, ...restProps } ) => ( {
22+
// There's no equivalent for `direction` on the original component so we can just translate `isReversed` to it
23+
direction: isReversed ? 'row-reverse' : 'row',
24+
...restProps,
25+
// 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
26+
wrap: undefined,
27+
} );
28+
29+
/**
30+
* @param {import('./item').Props} props Current props.
31+
* @return {import('../ui/flex/types').FlexItemProps} Next props.
32+
*/
33+
const flexItemAdapter = ( props ) => ( {
34+
...props,
35+
// ensure these are undefined so the default takes over
36+
isBlock: undefined,
37+
display: undefined,
38+
} );
39+
40+
/**
41+
* @param {import('./block').Props} props Current props.
42+
* @return {import('../ui/flex/types').FlexBlockProps} Next props.
43+
*/
44+
const flexBlockAdapter = ( props ) => ( {
45+
...props,
46+
// ensure this is undefined so the default takes over
47+
display: undefined,
48+
} );
49+
50+
/* eslint-disable jsdoc/valid-types */
51+
/**
52+
* @param {import('react').ForwardRefExoticComponent<import('./index').Props>} Current
53+
*/
54+
/* eslint-enable jsdoc/valid-types */
55+
export function withNextFlex( Current ) {
56+
return withNext( Current, Flex, 'WPComponentsFlex', flexAdapter );
57+
}
58+
59+
/* eslint-disable jsdoc/valid-types */
60+
/**
61+
* @param {import('react').ForwardRefExoticComponent<import('./item').Props>} Current
62+
*/
63+
/* eslint-enable jsdoc/valid-types */
64+
export function withNextFlexItem( Current ) {
65+
return withNext( Current, FlexItem, 'WPComponentsFlex', flexItemAdapter );
66+
}
67+
68+
/* eslint-disable jsdoc/valid-types */
69+
/**
70+
* @param {import('react').ForwardRefExoticComponent<import('./block').Props>} Current
71+
*/
72+
/* eslint-enable jsdoc/valid-types */
73+
export function withNextFlexBlock( Current ) {
74+
return withNext( Current, FlexBlock, 'WPComponentsFlex', flexBlockAdapter );
75+
}

‎packages/components/src/flex/styles/flex-styles.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,39 @@
44
import { css } from '@emotion/core';
55
import styled from '@emotion/styled';
66

7+
/**
8+
* @param {import('..').OwnProps} props
9+
*/
710
const alignStyle = ( { align } ) => {
11+
if ( align === undefined ) return '';
12+
813
const aligns = {
914
top: 'flex-start',
1015
bottom: 'flex-end',
1116
};
12-
const value = aligns[ align ] || align;
17+
18+
const value = aligns[ /** @type {'top' | 'bottom'} */ ( align ) ] || align;
1319

1420
return css( {
1521
alignItems: value,
1622
} );
1723
};
1824

25+
/**
26+
* @param {import('..').OwnProps} props
27+
*/
1928
const justifyStyle = ( { justify, isReversed } ) => {
2029
const justifies = {
2130
left: 'flex-start',
2231
right: 'flex-end',
2332
};
24-
let value = justifies[ justify ] || justify;
33+
let value =
34+
justifies[ /** @type {'left' | 'right'} */ ( justify ) ] || justify;
2535

26-
if ( isReversed && justifies[ justify ] ) {
36+
if (
37+
isReversed &&
38+
justifies[ /** @type {'left' | 'right'} */ ( justify ) ]
39+
) {
2740
value = justify === 'left' ? justifies.right : justifies.left;
2841
}
2942

@@ -32,6 +45,9 @@ const justifyStyle = ( { justify, isReversed } ) => {
3245
} );
3346
};
3447

48+
/**
49+
* @param {import('..').OwnProps} Props
50+
*/
3551
const gapStyle = ( { gap, isReversed } ) => {
3652
const base = 4;
3753
const value = typeof gap === 'number' ? base * gap : base;
@@ -49,6 +65,9 @@ const gapStyle = ( { gap, isReversed } ) => {
4965
`;
5066
};
5167

68+
/**
69+
* @param {import('..').OwnProps} props
70+
*/
5271
const reversedStyles = ( { isReversed } ) => {
5372
if ( ! isReversed ) return '';
5473

@@ -64,8 +83,8 @@ export const Flex = styled.div`
6483
6584
${ alignStyle }
6685
${ justifyStyle }
67-
${ gapStyle }
6886
${ reversedStyles }
87+
${ gapStyle }
6988
`;
7089

7190
export const Item = styled.div`

‎packages/components/src/font-size-picker/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { isNumber, isString } from 'lodash';
99
import { __ } from '@wordpress/i18n';
1010
import { useInstanceId } from '@wordpress/compose';
1111
import { textColor } from '@wordpress/icons';
12-
import { useMemo } from '@wordpress/element';
12+
import { useMemo, forwardRef } from '@wordpress/element';
1313

1414
/**
1515
* Internal dependencies
@@ -177,4 +177,4 @@ function FontSizePicker(
177177
);
178178
}
179179

180-
export default withNextComponent( FontSizePicker );
180+
export default withNextComponent( forwardRef( FontSizePicker ) );

‎packages/components/src/input-control/input-base.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export function InputBase(
4343
ref
4444
) {
4545
const id = useUniqueId( idProp );
46+
const hideLabel = hideLabelFromVision || ! label;
4647

4748
return (
4849
<Root
@@ -51,6 +52,7 @@ export function InputBase(
5152
isFocused={ isFocused }
5253
labelPosition={ labelPosition }
5354
ref={ ref }
55+
__unstableVersion="next"
5456
>
5557
<LabelWrapper>
5658
<Label
@@ -67,6 +69,7 @@ export function InputBase(
6769
__unstableInputWidth={ __unstableInputWidth }
6870
className="components-input-control__container"
6971
disabled={ disabled }
72+
hideLabel={ hideLabel }
7073
isFocused={ isFocused }
7174
labelPosition={ labelPosition }
7275
>

‎packages/components/src/input-control/styles/input-control-styles.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ const containerDisabledStyles = ( { disabled } ) => {
5959
return css( { backgroundColor } );
6060
};
6161

62+
// Normalizes the margins from the <Flex /> (components/ui/flex/) container.
63+
const containerMarginStyles = ( { hideLabel } ) => {
64+
return hideLabel ? css( { margin: '0 !important' } ) : null;
65+
};
66+
6267
const containerWidthStyles = ( { __unstableInputWidth, labelPosition } ) => {
6368
if ( ! __unstableInputWidth ) return css( { width: '100%' } );
6469

@@ -82,6 +87,7 @@ export const Container = styled.div`
8287
position: relative;
8388
8489
${ containerDisabledStyles }
90+
${ containerMarginStyles }
8591
${ containerWidthStyles }
8692
`;
8793

‎packages/components/src/text/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@ const Text = styled.p(
1717
text
1818
);
1919

20+
// @ts-ignore Text _is_ forwarded ref but the styled component definition doesn't include $$typeof so we'll just ignore it here
2021
export default withNextComponent( Text );

‎packages/components/src/text/next.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const adapter = ( { as, variant, ...restProps } ) => ( {
2929

3030
/* eslint-disable jsdoc/valid-types */
3131
/**
32-
* @param {import('react').ComponentType<AdaptedTextProps>} Current
32+
* @param {import('react').ForwardRefExoticComponent<AdaptedTextProps>} Current
3333
*/
3434
/* eslint-enable jsdoc/valid-types */
3535
export function withNextComponent( Current ) {

0 commit comments

Comments
 (0)