feat(Form): horizontal layout support (#283)

Author: tenphi

.changeset/famous-bananas-rest.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix label positioning for side layout in Form.
+Fix RangeSlider's usage inside forms with `labelPosition="side"`.

src/components/forms/Checkbox/Checkbox.tsx

@@ -64,14 +64,11 @@ const CheckboxWrapperElement = tasty({
     position: 'relative',
     display: 'flex',
     placeItems: 'center start',
+    placeContent: 'baseline',
     gap: '1x',
     flow: 'row',
     preset: 'default',
     cursor: 'pointer',
-    margin: {
-      '': 0,
-      'inside-form & side-label': '1.5x top',
-    },
   },
 });
 
@@ -266,7 +263,7 @@ function Checkbox(
       ref={domRef}
     >
       {checkboxField}
-      {label && (
+      {label ? (
         <Element
           styles={labelStyles}
           mods={{
@@ -276,9 +273,9 @@ function Checkbox(
           }}
           {...filterBaseProps(labelProps)}
         >
-          {label || children}
+          {label}
         </Element>
-      )}
+      ) : null}
     </CheckboxWrapperElement>
   );
 }

src/components/forms/Checkbox/CheckboxGroup.tsx

@@ -29,10 +29,6 @@ const WRAPPER_STYLES = {
     '': '1fr',
     'has-sider': 'max-content 1fr',
   },
-  gap: {
-    '': '0',
-    'has-sider': '1x',
-  },
   placeItems: 'baseline start',
 };
 
@@ -50,7 +46,6 @@ const CheckGroupElement = tasty({
       '': '1x',
       horizontal: '1x 2x',
     },
-    padding: '(1x - 1bw) 0',
   },
 });
 

src/components/forms/FieldWrapper.tsx

@@ -22,23 +22,22 @@ const FieldElement = tasty({
     display: 'grid',
     gridColumns: {
       '': '1fr',
-      'has-sider': '@(label-width, auto) 1fr',
+      'has-sider': '@(full-label-width, auto) 1fr',
     },
-    gap: {
-      '': '1x',
-      'has-sider': '@(column-gap, 1x)',
-    },
-    placeItems: 'start stretch',
+    gap: 0,
+    placeItems: 'baseline stretch',
+    '@full-label-width': '(@label-width + 1x)',
 
     LabelArea: {
       display: 'block',
       width: {
         '': 'initial',
         'has-sider': '@label-width',
       },
-      padding: {
-        '': 'initial',
-        'has-sider': '1.25x top',
+      margin: {
+        '': '1x bottom',
+        'has-sider': '1x right',
+        ':empty': '0',
       },
     },
 

src/components/forms/Form/ComplexForm.stories.tsx

@@ -266,7 +266,7 @@ const Template: StoryFn<typeof Form> = (args) => {
             return !!email;
           }}
         >
-          <TextInput type="email" label="Email field" />
+          <TextInput type="email" size="small" label="Email field" />
         </Field>
         <Field name="password">
           <PasswordInput label="Password field" />
@@ -306,7 +306,7 @@ const Template: StoryFn<typeof Form> = (args) => {
           </CheckboxGroup>
         </Field>
         <Field name="radioGroup" label="Radio group">
-          <Radio.Group>
+          <Radio.Group orientation="horizontal">
             <Radio value="one">One</Radio>
             <Radio value="two">Two</Radio>
             <Radio value="three">Three</Radio>
@@ -322,7 +322,7 @@ const Template: StoryFn<typeof Form> = (args) => {
           name="switch"
           rules={[{ required: true, message: 'This field is required' }]}
         >
-          <Switch label="Switch field" />
+          <Switch label="Switch field">Switch value</Switch>
         </Field>
         <Field
           name="number"
@@ -331,6 +331,7 @@ const Template: StoryFn<typeof Form> = (args) => {
           <NumberInput label="Number field" minValue={-1} />
         </Field>
         <Field
+          label="Slider"
           name="slider"
           rules={[{ required: true, message: 'This field is required' }]}
         >
@@ -352,6 +353,9 @@ export const FormInsideDialog: StoryFn = () => {
 
 export const Default = Template.bind({});
 
+export const ComplexFormSideLabel = Template.bind({});
+ComplexFormSideLabel.args = { labelPosition: 'side' };
+
 export const ComplexErrorMessage = ComplexErrorTemplate.bind({});
 
 export const AsyncValidation = AsyncValidationTemplate.bind({});

src/components/forms/Form/Field.tsx

@@ -188,6 +188,7 @@ export function Field<T extends FieldTypes>(allProps: CubeFieldProps<T>) {
     labelStyles,
     labelSuffix,
   } = props;
+
   const nonInput = !name;
   const fieldName: string =
     name != null ? (Array.isArray(name) ? name.join('.') : name) : '';

src/components/forms/Form/Form.tsx

@@ -33,8 +33,18 @@ const FormElement = tasty({
   as: 'form',
   qa: 'Form',
   styles: {
-    display: 'block',
-    flow: 'column',
+    display: {
+      '': 'block',
+      horizontal: 'flex',
+    },
+    flow: {
+      '': 'column',
+      horizontal: 'row',
+    },
+    placeItems: {
+      '': 'initial',
+      horizontal: 'center',
+    },
     gap: '2x',
     '@label-width': '25x',
   },
@@ -76,6 +86,7 @@ export interface CubeFormProps<T extends FieldTypes = FieldTypes>
   form?: CubeFormInstance<T, CubeFormData<T>>;
   /** The size of the side area with labels. Only for `labelPosition="side"` */
   labelWidth?: Styles['width'];
+  orientation?: 'vertical' | 'horizontal';
 }
 
 function Form<T extends FieldTypes>(
@@ -87,7 +98,8 @@ function Form<T extends FieldTypes>(
     qa,
     name,
     children,
-    labelPosition = 'top',
+    labelPosition,
+    orientation,
     isRequired,
     necessityIndicator,
     isDisabled,
@@ -105,6 +117,19 @@ function Form<T extends FieldTypes>(
     ...otherProps
   } = props;
   const firstRunRef = useRef(true);
+  const isHorizontal = orientation === 'horizontal';
+
+  if (!orientation) {
+    orientation = 'vertical';
+  }
+
+  if (!labelPosition) {
+    labelPosition = isHorizontal ? 'side' : 'top';
+  }
+
+  if (!labelWidth) {
+    labelWidth = isHorizontal ? 'auto' : undefined;
+  }
 
   ref = useCombinedRefs(ref);
 
@@ -180,6 +205,7 @@ function Form<T extends FieldTypes>(
   let ctx = {
     labelPosition,
     labelStyles,
+    orientation,
     necessityIndicator,
     validateTrigger,
     requiredMark,
@@ -208,7 +234,7 @@ function Form<T extends FieldTypes>(
       ref={domRef}
       noValidate
       styles={styles}
-      mods={{ 'has-sider': labelPosition === 'side' }}
+      mods={{ 'has-sider': labelPosition === 'side', horizontal: isHorizontal }}
       onSubmit={onSubmitCallback}
     >
       <FormContext.Provider value={ctx}>

src/components/forms/RadioGroup/RadioGroup.tsx

@@ -42,10 +42,6 @@ const RadioGroupElement = tasty({
       horizontal: 'row wrap',
     },
     gap: '1x',
-    padding: {
-      '': 0,
-      'inside-form & side-label': '1.5x 0',
-    },
   },
 });
 
@@ -124,6 +120,7 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
         requiredMark,
         tooltip,
         isHidden,
+        orientation,
         Component: radioGroup,
         ref: domRef,
         labelSuffix,

src/components/forms/RangeSlider/RangeInput.tsx

@@ -40,6 +40,8 @@ export function RangeInput(props: RangeInputProps) {
 
   return (
     <NumberInput
+      insideForm={false}
+      labelPosition="top"
       {...otherProps}
       hideStepper
       size="small"

src/components/forms/RangeSlider/RangeSlider.tsx

@@ -13,6 +13,7 @@ import {
   Styles,
 } from '../../../tasty';
 import { CubeNumberInputProps } from '../NumberInput/NumberInput';
+import { useFormProps } from '../Form';
 
 import { Slide } from './Slide';
 import { Gradation } from './Gradation';
@@ -45,7 +46,12 @@ export interface CubeRangeSliderProps
   formatOptions?: CubeNumberInputProps['formatOptions'];
 }
 
-function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
+function RangeSlider(
+  allProps: CubeRangeSliderProps,
+  ref: DOMRef<HTMLDivElement>,
+) {
+  const props = useFormProps(allProps);
+
   let {
     labelPosition,
     label,
@@ -64,7 +70,6 @@ function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
     gradation,
     step = 1,
     isDisabled,
-    orientation = 'horizontal',
     showInput,
     inputStyles,
     minValue,
@@ -73,9 +78,12 @@ function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
     formatOptions,
     onChange,
     onChangeEnd,
+    orientation: formOrientation,
     ...otherProps
   } = props;
 
+  let orientation = allProps.orientation || 'horizontal';
+
   const [min, max] = getMinMaxValue(minValue, maxValue, value || defaultValue);
   const ranges = getRanges(defaultValue || value || [0, 1]);
   const isSingle = ranges.length <= 1;

src/components/forms/RangeSlider/styled.ts

@@ -78,10 +78,12 @@ export const StyledControls = tasty({
 });
 
 export const StyledSlider = tasty({
+  qa: 'RangeSlider',
   as: 'section',
   styles: {
     position: 'relative',
-    display: 'flex',
+    display: 'inline-flex',
+    verticalAlign: 'middle',
     gap: {
       '': '0',
       inputs: '1x',
@@ -92,10 +94,6 @@ export const StyledSlider = tasty({
     },
     alignItems: 'center',
     width: '100%',
-    padding: {
-      '': '0',
-      sideLabel: '0.75x top',
-    },
   },
 });