Move font size component into gutenberg repository.

packages/components/package.json

@@ -46,6 +46,7 @@
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
 		"@wp-g2/components": "^0.0.117",
+		"@wp-g2/context": "^0.0.117",
 		"@wp-g2/styles": "^0.0.117",
 		"@wp-g2/substate": "^0.0.117",
 		"@wp-g2/utils": "^0.0.117",

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

@@ -18,7 +18,7 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import CustomSelectControl from '../custom-select-control';
 import VisuallyHidden from '../visually-hidden';
-import { withNextComponent } from './next';
+import { withNextComponent } from './next/';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';

packages/components/src/font-size-picker/next/font-size-control-select.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { contextConnect, useContextSystem } from '@wp-g2/context';
+import { noop } from '@wp-g2/utils';
+import {
+	Grid,
+	TextInput,
+	SelectDropdown,
+	FormGroup,
+	Button,
+	View,
+} from '@wp-g2/components';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectTemplateColumns } from './font-size-control-utils';
+
+function FontSizeControlSelect( props, forwardedRef ) {
+	const {
+		customLabel,
+		disabled,
+		inputValue,
+		isDefaultValue,
+		label,
+		max,
+		min,
+		onChange = noop,
+		onInputChange = noop,
+		onReset = noop,
+		options = [],
+		size,
+		value,
+		withNumberInput,
+		withSelect,
+		...otherProps
+	} = useContextSystem( props, 'FontSizeControlSelect' );
+
+	const templateColumns = getSelectTemplateColumns( withNumberInput );
+	const subControlsTemplateColumns = withNumberInput ? '1fr 1fr' : '1fr';
+
+	const renderItem = useCallback(
+		( { name, style } ) => <span style={ style }>{ name }</span>,
+		[]
+	);
+
+	return (
+		<Grid alignment="bottom" templateColumns={ templateColumns }>
+			{ withSelect && (
+				<FormGroup label={ label }>
+					<SelectDropdown
+						disabled={ disabled }
+						max={ 260 }
+						onChange={ onChange }
+						options={ options }
+						ref={ forwardedRef }
+						renderItem={ renderItem }
+						size={ size }
+						value={ value }
+						{ ...otherProps }
+					/>
+				</FormGroup>
+			) }
+			<Grid
+				alignment="bottom"
+				templateColumns={ subControlsTemplateColumns }
+			>
+				{ withNumberInput && (
+					<FormGroup label={ customLabel }>
+						<TextInput
+							disabled={ disabled }
+							max={ max }
+							min={ min }
+							onChange={ onInputChange }
+							size={ size }
+							type="number"
+							value={ inputValue }
+						/>
+					</FormGroup>
+				) }
+				<View>
+					<Button
+						disabled={ isDefaultValue }
+						isBlock
+						onClick={ onReset }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</View>
+			</Grid>
+		</Grid>
+	);
+}
+
+export default contextConnect( FontSizeControlSelect, 'FontSizeControlSelect' );

packages/components/src/font-size-picker/next/font-size-control-slider.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * External dependencies
+ */
+import { noop } from '@wp-g2/utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ControlLabel,
+	Grid,
+	Slider,
+	TextInput,
+	VStack,
+} from '@wp-g2/components';
+import { getSliderTemplateColumns } from './font-size-control-utils';
+
+function FontSizeControlSlider( props ) {
+	const {
+		label = __( 'Custom size' ),
+		disabled,
+		min,
+		max,
+		onChange = noop,
+		size,
+		value,
+		withSlider,
+	} = props;
+
+	if ( ! withSlider ) return null;
+
+	const templateColumns = getSliderTemplateColumns();
+
+	const controlProps = {
+		disabled,
+		min,
+		max,
+		onChange,
+		size,
+		value,
+	};
+
+	return (
+		<VStack spacing={ 0 }>
+			<ControlLabel>{ label }</ControlLabel>
+			<Grid templateColumns={ templateColumns }>
+				<Slider { ...controlProps } />
+				<TextInput { ...controlProps } type="number" />
+			</Grid>
+		</VStack>
+	);
+}
+
+export default FontSizeControlSlider;

packages/components/src/font-size-picker/next/font-size-control-styles.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { css } from '@wp-g2/styles';
+
+export const FontSizeControl = css`
+	appearance: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+`;

packages/components/src/font-size-picker/next/font-size-control-utils.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * External dependencies
+ */
+import { ui } from '@wp-g2/styles';
+import { createUnitValue, is, parseUnitValue } from '@wp-g2/utils';
+
+const DEFAULT_FONT_SIZE = 'default';
+const CUSTOM_FONT_SIZE = 'custom';
+const MAX_FONT_SIZE_DISPLAY = '25px';
+const ASIDE_CONTROL_WIDTH = 70;
+
+export function hasUnit( value ) {
+	const [ , unit ] = parseUnitValue( value );
+	return !! unit;
+}
+
+function getFontSize( values = [], value ) {
+	return values.find( ( item ) => item.size === value );
+}
+
+function isCustomValue( values = [], value ) {
+	const item = getFontSize( values, value );
+	return !! item;
+}
+
+export function isCustomSelectedItem( selectedItem ) {
+	return selectedItem?.key === CUSTOM_FONT_SIZE;
+}
+
+export function getSelectValueFromFontSize( fontSizes, value ) {
+	if ( ! value ) return DEFAULT_FONT_SIZE;
+
+	const fontSize = getFontSize( fontSizes, value );
+	return fontSize ? fontSize.slug : CUSTOM_FONT_SIZE;
+}
+
+export function getSelectOptions( { disableCustomFontSizes, options, value } ) {
+	if ( disableCustomFontSizes && ! options.length ) return null;
+
+	options = [
+		{ slug: DEFAULT_FONT_SIZE, name: __( 'Default' ), size: undefined },
+		...options,
+	];
+
+	if ( ! isCustomValue( options, value ) && ! disableCustomFontSizes ) {
+		options.push( { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } );
+	}
+
+	return options.map( ( option ) => {
+		const fontSize = is.number( option.size )
+			? createUnitValue( option.size, 'px' )
+			: option.size;
+
+		return {
+			key: option.slug,
+			name: option.name,
+			size: option.size,
+			style: {
+				fontSize: `min( ${ fontSize }, ${ MAX_FONT_SIZE_DISPLAY } )`,
+			},
+		};
+	} );
+}
+
+export function getInputValue( fontSizes = [], value ) {
+	const hasUnits = hasUnit( value || fontSizes[ 0 ]?.size );
+
+	let noUnitsValue;
+	if ( ! hasUnits ) {
+		noUnitsValue = value;
+	} else {
+		noUnitsValue = parseInt( value );
+	}
+
+	const isPixelValue =
+		is.number( value ) || ( is.string( value ) && value.endsWith( 'px' ) );
+
+	const inputValue = ( isPixelValue && noUnitsValue ) || '';
+
+	return inputValue;
+}
+
+export function getSelectTemplateColumns( withNumberInput ) {
+	return withNumberInput
+		? `minmax(0, 1fr) minmax(auto, ${ ui.value.px(
+				ASIDE_CONTROL_WIDTH * 2
+		  ) })`
+		: `minmax(0, 2fr) minmax(auto, ${ ui.value.px(
+				ASIDE_CONTROL_WIDTH
+		  ) })`;
+}
+
+export function getSliderTemplateColumns() {
+	return `2fr minmax(auto, ${ ui.value.px( ASIDE_CONTROL_WIDTH ) })`;
+}

packages/components/src/font-size-picker/next/font-size-control.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * External dependencies
+ */
+import { contextConnect } from '@wp-g2/context';
+import { View, VisuallyHidden, VStack } from '@wp-g2/components';
+
+/**
+ * Internal dependencies
+ */
+import FontSizeControlSelect from './font-size-control-select';
+import FontSizeControlSlider from './font-size-control-slider';
+import { useFontSizeControl } from './use-font-size-control';
+
+function FontSizeControl( props, forwardedRef ) {
+	const {
+		customLabel = __( 'Custom' ),
+		disabled,
+		label,
+		max,
+		min,
+		options,
+		inputValue,
+		isDefaultValue,
+		value,
+		onChange,
+		onReset,
+		onInputChange,
+		selectDropdownProps,
+		size,
+		withSlider,
+		withNumberInput,
+		withSelect,
+		...otherProps
+	} = useFontSizeControl( props );
+
+	if ( ! options ) return null;
+
+	return (
+		<View as="fieldset" { ...otherProps }>
+			<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			<VStack spacing={ 3 }>
+				<FontSizeControlSelect
+					{ ...selectDropdownProps }
+					customLabel={ customLabel }
+					disabled={ disabled }
+					inputValue={ inputValue }
+					isDefaultValue={ isDefaultValue }
+					label={ label }
+					max={ max }
+					min={ min }
+					onChange={ onChange }
+					onInputChange={ onInputChange }
+					onReset={ onReset }
+					options={ options }
+					ref={ forwardedRef }
+					size={ size }
+					value={ value }
+					withNumberInput={ withNumberInput }
+					withSelect={ withSelect }
+				/>
+				<FontSizeControlSlider
+					disabled={ disabled }
+					max={ max }
+					min={ min }
+					onChange={ onInputChange }
+					size={ size }
+					value={ inputValue }
+					withSlider={ withSlider }
+				/>
+			</VStack>
+		</View>
+	);
+}
+
+export default contextConnect( FontSizeControl, 'FontSizeControl' );

packages/components/src/font-size-picker/next.js → packages/components/src/font-size-picker/next/index.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { FontSizeControl } from '@wp-g2/components';
-
 /**
  * Internal dependencies
  */
-import { __unstableWithNext as withNext } from '../__next/context';
+import { __unstableWithNext as withNext } from '../../__next/context';
+import FontSizeControl from './font-size-control';
 
 const FontSizePicker =
 	process.env.COMPONENT_SYSTEM_PHASE === 1