fix(Field): show warning in case of properties misuse (#407)

Author: tenphi

.changeset/cuddly-actors-boil.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix "for" attribute in field labels.

.changeset/spicy-apricots-doubt.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Show warning if a field is linked to a form but default value is provided. And in case when a field is unlinked but validation rules are provided.'

.size-limit.js

@@ -19,13 +19,13 @@ module.exports = [
         }),
       );
     },
-    limit: '214kB',
+    limit: '215kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '28 kB',
+    limit: '29 kB',
   },
 ];

src/components/forms/Form/use-field/types.ts

@@ -7,6 +7,7 @@ import {
   ValidationState,
 } from '../../../../shared';
 import { CubeFormInstance } from '../use-form';
+import { Props } from '../../../../tasty';
 
 export interface CubeFieldProps<T extends FieldTypes> {
   /** The initial value of the input. */
@@ -33,6 +34,7 @@ export interface CubeFieldProps<T extends FieldTypes> {
   validateTrigger?: ValidateTrigger;
   /** Message for the field. Some additional information or error notice */
   message?: ReactNode;
+  labelProps?: Props;
 }
 
 export type FieldReturnValue<T extends FieldTypes> = {

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

@@ -4,12 +4,13 @@ import { useDebugValue } from 'react';
 import { useChainedCallback, useEvent } from '../../../../_internal';
 import { useInsideLegacyField } from '../Field';
 import { mergeProps } from '../../../../utils/react';
+import { warn } from '../../../../utils/warnings';
 
 import { useField } from './use-field';
 
-import type { ValidateTrigger } from '../../../../shared';
 import type { CubeFieldProps } from './types';
 import type { FieldTypes } from '../types';
+import type { ValidateTrigger } from '../../../../shared';
 
 export type UseFieldPropsParams = {
   valuePropsMapper?: ({ value, onChange }) => any;
@@ -24,6 +25,19 @@ export type UseFieldPropsParams = {
   unsafe__isDisabled?: boolean;
 };
 
+const VALUE_PROPERTIES = [
+  'value',
+  'defaultValue',
+  'isSelected',
+  'defaultSelected',
+  'isIndeterminate',
+  'defaultIndeterminate',
+  'selectedKey',
+  'defaultSelectedKey',
+  'selectedKeys',
+  'defaultSelectedKeys',
+];
+
 export function useFieldProps<
   T extends FieldTypes,
   Props extends CubeFieldProps<T>,
@@ -77,7 +91,23 @@ export function useFieldProps<
     ),
   );
 
-  const result = isOutsideOfForm
+  if (props.rules && !props.name) {
+    warn(
+      `The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`,
+    );
+  }
+
+  if (isOutsideOfForm) {
+    for (const valuePropName of VALUE_PROPERTIES) {
+      if (valuePropName in props) {
+        warn(
+          `The "${valuePropName}" property is not suitable for fields that are part of a form. To set default values, please use the "defaultValues" property of the form component instead. To unlink the field from the form, remove the "name" property from the field.`,
+        );
+      }
+    }
+  }
+
+  const result: Props = isOutsideOfForm
     ? props
     : mergeProps(
         props,
@@ -89,6 +119,16 @@ export function useFieldProps<
         },
       );
 
+  if (result.id) {
+    if (!result.labelProps) {
+      result.labelProps = {};
+    }
+
+    if (result.labelProps) {
+      result.labelProps.for = result.id;
+    }
+  }
+
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue(result);

src/components/forms/Switch/Switch.tsx

@@ -190,7 +190,16 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
   let domRef = useFocusableRef(ref, inputRef);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
+  let { inputProps } = useSwitch(
+    {
+      ...props,
+      ...(typeof label === 'string' && label.trim()
+        ? { 'aria-label': label }
+        : {}),
+    },
+    useToggleState(props),
+    inputRef,
+  );
 
   const mods = {
     'inside-form': insideForm,