fix(Label): for attribute and styles when Switch is inside (#413)

Author: tenphi

.changeset/ninety-buttons-explain.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix Field label sizing.

src/components/forms/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { useFocusableRef } from '@react-spectrum/utils';
-import { forwardRef, useContext, useRef } from 'react';
+import { forwardRef, useContext, useMemo, useRef } from 'react';
 import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
@@ -20,13 +20,13 @@ import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { useFieldProps, useFormProps } from '../Form';
-import { FieldWrapper } from '../FieldWrapper';
 import { FieldBaseProps } from '../../../shared';
 import {
   castNullableIsSelected,
   WithNullableSelected,
 } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
+import { wrapWithField } from '../wrapper';
 
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
@@ -37,7 +37,9 @@ import type { AriaCheckboxProps } from '@react-types/checkbox';
 export interface CubeCheckboxProps
   extends BaseProps,
     AriaCheckboxProps,
-    FieldBaseProps {}
+    FieldBaseProps {
+  inputStyles?: Styles;
+}
 
 function CheckOutlined() {
   return (
@@ -51,7 +53,7 @@ function CheckOutlined() {
 }
 function IndeterminateOutline() {
   return (
-    <svg width="9" height="3" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="8" height="2" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M0 .044v2.001l.026.025h8.063V.044H0z" fill="#fff" />
     </svg>
   );
@@ -69,6 +71,7 @@ const CheckboxWrapperElement = tasty({
     flow: 'row',
     preset: 'default',
     cursor: 'pointer',
+    width: 'max max-content',
   },
 });
 
@@ -135,32 +138,28 @@ function Checkbox(
     isDisabled = false,
     insideForm,
     isRequired,
-    autoFocus,
     children,
     label,
-    extra,
     validationState,
     labelProps,
     labelStyles,
     labelPosition,
-    necessityLabel,
-    necessityIndicator,
-    message,
-    description,
-    requiredMark = true,
-    tooltip,
+    inputStyles,
     isHidden,
-    labelSuffix,
     ...otherProps
   } = props;
 
   let styles: Styles = extractStyles(props, OUTER_STYLES);
-  let inputStyles = extractStyles(props, BLOCK_STYLES);
 
-  labelStyles = {
-    ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
-    ...labelStyles,
-  };
+  inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+
+  labelStyles = useMemo(
+    () => ({
+      ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
+      ...labelStyles,
+    }),
+    [insideForm, labelStyles],
+  );
 
   let { isFocused, focusProps } = useFocus({ isDisabled }, true);
   let { hoverProps, isHovered } = useHover({ isDisabled });
@@ -232,44 +231,25 @@ function Checkbox(
       styles={{ position: 'relative' }}
     >
       <HiddenInput
-        data-qa={qa || 'Checkbox'}
+        data-qa="HiddenInput"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
       />
-      <CheckboxElement qa="Checkbox" mods={mods} styles={inputStyles}>
+      <CheckboxElement qa={qa || 'Checkbox'} mods={mods} styles={inputStyles}>
         {markIcon}
       </CheckboxElement>
-      {children && <Text>{children}</Text>}
+      {children && <Text nowrap>{children}</Text>}
     </CheckboxWrapperElement>
   );
 
   if (insideForm && !groupState) {
-    return (
-      <FieldWrapper
-        {...{
-          as: 'label',
-          labelPosition,
-          label,
-          extra,
-          styles,
-          isRequired,
-          labelStyles,
-          isHidden,
-          labelProps,
-          isDisabled,
-          validationState,
-          necessityLabel,
-          necessityIndicator,
-          message,
-          description,
-          requiredMark,
-          tooltip,
-          labelSuffix,
-          Component: checkboxField,
-          ref: domRef,
-        }}
-      />
-    );
+    return wrapWithField(checkboxField, domRef, {
+      ...props,
+      children: null,
+      labelStyles,
+      inputStyles,
+      styles,
+    });
   }
 
   return (

src/components/forms/Checkbox/CheckboxGroup.tsx

@@ -12,13 +12,14 @@ import {
   Styles,
   tasty,
 } from '../../../tasty';
-import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
 import { FieldBaseProps } from '../../../shared';
 import {
   castNullableArrayValue,
   WithNullableValue,
 } from '../../../utils/react/nullableValue';
 import { useFieldProps, FormContext, useFormProps } from '../Form';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 
 import { CheckboxGroupContext } from './context';
 
@@ -76,14 +77,14 @@ function CheckboxGroup(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {
     description,
     labelStyles,
     tooltip,
+    labelProps: baseLabelProps,
     labelSuffix,
     inputStyles,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
 
   let styles = extractStyles(otherProps, CONTAINER_STYLES);
-  let { fieldWrapperProps } = extractFieldWrapperProps(props);
 
   let state = useCheckboxGroupState(props);
   let { groupProps, labelProps } = useCheckboxGroup(props, state);
@@ -108,16 +109,13 @@ function CheckboxGroup(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {
     </CheckGroupElement>
   );
 
-  return (
-    <FieldWrapper
-      {...fieldWrapperProps}
-      ref={domRef}
-      Component={radioGroup}
-      fieldProps={groupProps}
-      labelProps={labelProps}
-      styles={styles}
-    />
-  );
+  return wrapWithField(radioGroup, domRef, {
+    ...props,
+    children: null,
+    fieldProps: groupProps,
+    labelProps: mergeProps(baseLabelProps, labelProps),
+    styles,
+  });
 }
 
 /**

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

@@ -304,25 +304,26 @@ const Template: StoryFn<typeof Form> = (args) => {
             { required: true, message: 'Specify at least a single option' },
           ]}
         >
-          <CheckboxGroup orientation="horizontal">
+          <CheckboxGroup orientation="vertical">
             <Checkbox value="one">One</Checkbox>
             <Checkbox value="two">Two</Checkbox>
             <Checkbox value="three">Three</Checkbox>
           </CheckboxGroup>
         </Field>
         <Field name="radioGroup" label="Radio group">
-          <Radio.Group orientation="horizontal">
+          <Radio.Group orientation="vertical">
             <Radio value="one">One</Radio>
             <Radio value="two">Two</Radio>
             <Radio value="three">Three</Radio>
           </Radio.Group>
         </Field>
-        <Field
+        <Checkbox
           name="checkbox"
           rules={[{ required: true, message: 'This field is required' }]}
+          label="Checkbox field"
         >
-          <Checkbox label="Checkbox field">Checkbox value</Checkbox>
-        </Field>
+          Checkbox value
+        </Checkbox>
         <Switch
           name="switch"
           label="Switch field"

src/components/forms/Form/Field.tsx

@@ -121,6 +121,7 @@ export function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {
     isDisabled,
     isLoading,
     styles,
+    labelProps,
     labelPosition = 'top',
     labelStyles,
     labelSuffix,
@@ -142,6 +143,14 @@ export function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {
 
   if (!child) return null;
 
+  if (id) {
+    if (!labelProps) {
+      labelProps = {};
+    }
+
+    labelProps.for = id;
+  }
+
   if (__props.nonInput) {
     return (
       <LegacyFieldProvider>
@@ -153,6 +162,7 @@ export function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {
           necessityLabel={necessityLabel}
           isRequired={isRequired}
           label={label}
+          labelProps={labelProps}
           extra={extra}
           tooltip={tooltip}
           message={message}

src/components/forms/Form/use-field/use-field-props.tsx

@@ -120,9 +120,7 @@ export function useFieldProps<
       result.labelProps = {};
     }
 
-    if (result.labelProps) {
-      result.labelProps.for = result.id;
-    }
+    result.labelProps.for = result.id;
   }
 
   if (process.env.NODE_ENV === 'development') {

src/components/forms/RadioGroup/RadioGroup.tsx

@@ -13,12 +13,13 @@ import {
   Styles,
   tasty,
 } from '../../../tasty';
-import { FieldWrapper } from '../FieldWrapper';
 import { FieldBaseProps } from '../../../shared';
 import {
   castNullableStringValue,
   WithNullableValue,
 } from '../../../utils/react/nullableValue';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 
 import { RadioContext } from './context';
 
@@ -60,23 +61,14 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
   let {
     isDisabled,
     isRequired,
-    necessityIndicator,
-    label,
-    extra,
     labelPosition = 'top',
     validationState,
     children,
     orientation,
-    message,
-    description,
-    labelStyles,
-    requiredMark = true,
-    tooltip,
-    isHidden,
     styles,
     groupStyles,
     insideForm,
-    labelSuffix,
+    labelProps: baseLabelProps,
     isSolid,
     ...otherProps
   } = props;
@@ -117,32 +109,13 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
     </RadioGroupElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        fieldProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        tooltip,
-        isHidden,
-        orientation,
-        Component: radioGroup,
-        ref: domRef,
-        labelSuffix,
-      }}
-    />
-  );
+  return wrapWithField(radioGroup, domRef, {
+    ...props,
+    children: null,
+    fieldProps,
+    labelProps: mergeProps(baseLabelProps, labelProps),
+    styles,
+  });
 }
 
 /**