InputControl: Fix labelPosition rendering with new ui/flex component (#…

…29226)

* InputControl: Fix labelPosition rendering with new ui/flex component

* Fix storybook/main webpackFinal config

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

@@ -24,6 +24,26 @@ function useUniqueId( idProp ) {
 	return idProp || id;
 }
 
+// Adapter to map props for the new ui/flex compopnent.
+function getUIFlexProps( { labelPosition } ) {
+	const props = {};
+	switch ( labelPosition ) {
+		case 'top':
+			props.direction = 'column';
+			props.gap = 0;
+			break;
+		case 'bottom':
+			props.direction = 'column-reverse';
+			props.gap = 0;
+			break;
+		case 'edge':
+			props.justify = 'space-between';
+			break;
+	}
+
+	return props;
+}
+
 export function InputBase(
 	{
 		__unstableInputWidth,
@@ -48,6 +68,7 @@ export function InputBase(
 	return (
 		<Root
 			{ ...props }
+			{ ...getUIFlexProps( { labelPosition } ) }
 			className={ className }
 			isFocused={ isFocused }
 			labelPosition={ labelPosition }

storybook/main.js

@@ -5,6 +5,10 @@ const stories = [
 	'../packages/icons/src/**/stories/*.js',
 ].filter( Boolean );
 
+const customEnvVariables = {
+	COMPONENT_SYSTEM_PHASE: 1,
+};
+
 module.exports = {
 	stories,
 	addons: [
@@ -17,4 +21,20 @@ module.exports = {
 		'@storybook/addon-viewport',
 		'@storybook/addon-a11y',
 	],
+	// Workaround:
+	// https://github.com/storybookjs/storybook/issues/12270
+	webpackFinal: async ( config ) => {
+		// Find the DefinePlugin
+		const plugin = config.plugins.find( ( p ) => {
+			return p.definitions && p.definitions[ 'process.env' ];
+		} );
+		// Add custom env variables
+		Object.keys( customEnvVariables ).forEach( ( key ) => {
+			plugin.definitions[ 'process.env' ][ key ] = JSON.stringify(
+				customEnvVariables[ key ]
+			);
+		} );
+
+		return config;
+	},
 };