Primitive fields cleanup - split primitive props (aws-amplify#572)

packages/react/src/primitives/Checkbox/Checkbox.tsx

@@ -8,34 +8,26 @@ import { Text } from '../Text';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { CheckboxProps } from '../types/checkbox';
 import { Primitive } from '../types/view';
+import { splitPrimitiveProps } from '../shared/styleUtils';
 import { ComponentClassNames } from '../shared/constants';
 import { useTestId } from '../utils/testUtils';
 
 export const Checkbox: Primitive<CheckboxProps, 'input'> = ({
-  alignContent,
-  alignItems,
-  backgroundColor,
   checked,
   children,
   className,
-  color,
   defaultChecked,
-  direction,
   hasError,
   id,
   isDisabled,
-  isReadOnly,
-  isRequired,
-  justifyContent,
-  gap,
-  name,
   onChange: onChangeProp,
   size,
   testId,
-  value,
-  wrap,
-  ...rest
+  ..._rest
 }) => {
+  const { baseStyleProps, flexContainerStyleProps, rest } =
+    splitPrimitiveProps(_rest);
+
   // controlled way should always override uncontrolled way
   const initialChecked = checked !== undefined ? checked : defaultChecked;
 
@@ -50,17 +42,12 @@ export const Checkbox: Primitive<CheckboxProps, 'input'> = ({
 
   return (
     <Flex
-      alignContent={alignContent}
-      alignItems={alignItems}
       as="label"
       className={classNames(ComponentClassNames.Checkbox, className)}
       data-disabled={isDisabled}
-      direction={direction}
-      gap={gap}
-      justifyContent={justifyContent}
-      wrap={wrap}
       testId={testId}
-      {...rest}
+      {...baseStyleProps}
+      {...flexContainerStyleProps}
     >
       <VisuallyHidden>
         <Input
@@ -69,14 +56,11 @@ export const Checkbox: Primitive<CheckboxProps, 'input'> = ({
           defaultChecked={defaultChecked}
           id={id}
           isDisabled={isDisabled}
-          isReadOnly={isReadOnly}
-          isRequired={isRequired}
-          name={name}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}
           type="checkbox"
-          value={value}
+          {...rest}
         />
       </VisuallyHidden>
       <Flex

packages/react/src/primitives/RadioGroupField/RadioGroupField.tsx

@@ -9,29 +9,25 @@ import { RadioGroupFieldProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared/constants';
 import { useStableId } from '../shared/utils';
 
-export const RadioGroupField: Primitive<RadioGroupFieldProps, 'input'> = ({
-  alignContent,
-  alignItems,
+// Note: RadioGroupField doesn't extend the JSX.IntrinsicElements<'input'> types (instead extending 'typeof Flex')
+// because all rest props are passed to Flex container
+export const RadioGroupField: Primitive<RadioGroupFieldProps, typeof Flex> = ({
   children,
   className,
   defaultValue,
   descriptiveText,
-  direction = 'column',
   errorMessage,
-  gap,
   hasError = false,
   id,
   isDisabled,
   isRequired,
   isReadOnly,
-  justifyContent,
   label,
   labelHidden = false,
   onChange,
   name,
   size,
   value,
-  wrap,
   ...rest
 }) => {
   const fieldId = useStableId(id);
@@ -62,18 +58,12 @@ export const RadioGroupField: Primitive<RadioGroupFieldProps, 'input'> = ({
 
   return (
     <Flex
-      alignContent={alignContent}
-      alignItems={alignItems}
       className={classNames(
         ComponentClassNames.Field,
         ComponentClassNames.RadioGroupField,
         className
       )}
       data-size={size}
-      direction={direction}
-      gap={gap}
-      justifyContent={justifyContent}
-      wrap={wrap}
       {...rest}
     >
       <Label id={fieldId} visuallyHidden={labelHidden}>

packages/react/src/primitives/StepperField/StepperField.tsx

@@ -15,40 +15,38 @@ import { ComponentClassNames } from '../shared/constants';
 import { SharedText } from '../shared/i18n';
 import { useStableId } from '../shared/utils';
 import { Primitive } from '../types/view';
+import { splitPrimitiveProps } from '../shared/styleUtils';
 
 export const DECREASE_ICON = 'decrease-icon';
 export const INCREASE_ICON = 'increase-icon';
 
 export const StepperField: Primitive<StepperFieldProps, 'input'> = (props) => {
   const {
-    alignContent,
-    alignItems,
     className,
     descriptiveText,
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     defaultValue,
-    direction,
     errorMessage,
-    gap,
     hasError = false,
     id,
     isDisabled,
     isReadOnly,
     isRequired,
-    justifyContent,
     label,
     labelHidden = false,
     onStepChange,
     size,
     testId,
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     value: controlledValue,
-    wrap,
-    ...rest
+    ..._rest
   } = props;
 
   const fieldId = useStableId(id);
 
+  const { baseStyleProps, flexContainerStyleProps, rest } =
+    splitPrimitiveProps(_rest);
+
   const {
     step,
     value,
@@ -64,19 +62,14 @@ export const StepperField: Primitive<StepperFieldProps, 'input'> = (props) => {
 
   return (
     <Flex
-      alignContent={alignContent}
-      alignItems={alignItems}
       className={classNames(
         ComponentClassNames.Field,
         ComponentClassNames.StepperField,
         className
       )}
       data-size={size}
-      direction={direction}
-      gap={gap}
-      justifyContent={justifyContent}
       testId={testId}
-      wrap={wrap}
+      {...flexContainerStyleProps}
     >
       <Label htmlFor={fieldId} visuallyHidden={labelHidden}>
         {label}
@@ -130,6 +123,7 @@ export const StepperField: Primitive<StepperFieldProps, 'input'> = (props) => {
           size={size}
           type="number"
           value={inputValue}
+          {...baseStyleProps}
           {...rest}
         />
       </FieldGroup>

packages/react/src/primitives/TextField/TextField.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
+import { splitPrimitiveProps } from '../shared/styleUtils';
 import { FieldDescription, FieldErrorMessage } from '../Field';
 import { FieldGroup } from '../FieldGroup';
 import { Flex } from '../Flex';
@@ -28,16 +29,11 @@ export const TextField = <Multiline extends boolean>(
   props: PrimitiveProps<TextFieldProps<Multiline>, 'input' | 'textarea'>
 ) => {
   const {
-    alignContent,
-    alignItems,
     className,
     descriptiveText,
-    direction = 'column',
     errorMessage,
-    gap,
     hasError = false,
     id,
-    justifyContent,
     label,
     labelHidden = false,
     outerEndComponent,
@@ -48,12 +44,14 @@ export const TextField = <Multiline extends boolean>(
     type, // remove from rest to prevent passing as DOM attribute to textarea
     size,
     testId,
-    wrap,
-    ...rest
+    ..._rest
   } = props;
 
   const fieldId = useStableId(id);
 
+  const { flexContainerStyleProps, baseStyleProps, rest } =
+    splitPrimitiveProps(_rest);
+
   let control: JSX.Element = null;
   if (isTextAreaField(props)) {
     const { rows } = props;
@@ -63,6 +61,7 @@ export const TextField = <Multiline extends boolean>(
         id={fieldId}
         rows={rows ?? DEFAULT_ROW_COUNT}
         size={size}
+        {...baseStyleProps}
         {...rest}
       />
     );
@@ -74,26 +73,22 @@ export const TextField = <Multiline extends boolean>(
         id={fieldId}
         size={size}
         type={type}
+        {...baseStyleProps}
         {...rest}
       />
     );
   }
 
   return (
     <Flex
-      alignContent={alignContent}
-      alignItems={alignItems}
       className={classNames(
         ComponentClassNames.Field,
         ComponentClassNames.TextField,
         className
       )}
       data-size={size}
-      direction={direction}
-      gap={gap}
-      justifyContent={justifyContent}
       testId={testId}
-      wrap={wrap}
+      {...flexContainerStyleProps}
     >
       <Label htmlFor={fieldId} visuallyHidden={labelHidden}>
         {label}

packages/react/src/primitives/shared/__tests__/styleUtils.test.tsx

@@ -6,10 +6,16 @@ import {
   convertGridSpan,
   convertStylePropsToStyleObj,
   getGridSpan,
+  splitPrimitiveProps,
   useNonStyleProps,
   useTransformStyleProps,
 } from '../styleUtils';
-import { ComponentPropsToStylePropsMap, ViewProps } from '../../types';
+import {
+  BaseStyleProps,
+  ComponentPropsToStylePropsMap,
+  FlexContainerStyleProps,
+  ViewProps,
+} from '../../types';
 import { Breakpoint } from '../../types/responsive';
 
 const props: ViewProps = {
@@ -262,3 +268,47 @@ describe('useTransformStyleProps', () => {
     );
   });
 });
+
+describe('splitPrimitiveProps', () => {
+  it('should split props into base, flex and rest', () => {
+    const baseStyleProps: BaseStyleProps = {
+      backgroundColor: 'yellow',
+      alignSelf: 'baseline',
+      area: 'auto',
+      basis: 'content',
+      border: '1px solid black',
+      borderRadius: '2px',
+    };
+    const flexContainerStyleProps: FlexContainerStyleProps = {
+      alignContent: 'space-around',
+      alignItems: 'baseline',
+      columnGap: '2rem',
+      direction: 'column-reverse',
+      gap: '2rem',
+      justifyContent: 'space-around',
+      rowGap: '4rem',
+      wrap: 'nowrap',
+    };
+    const restProps = {
+      type: 'textarea',
+      rows: '4',
+      autoComplete: 'current-password',
+      name: 'password',
+      placeholder: 'Password',
+    };
+
+    const {
+      baseStyleProps: resultBaseStyleProps,
+      flexContainerStyleProps: resultFlexContainerStyleProps,
+      rest: resultRest,
+    } = splitPrimitiveProps({
+      ...baseStyleProps,
+      ...flexContainerStyleProps,
+      ...restProps,
+    });
+
+    expect(resultRest).toEqual(restProps);
+    expect(resultFlexContainerStyleProps).toEqual(flexContainerStyleProps);
+    expect(resultBaseStyleProps).toEqual(baseStyleProps);
+  });
+});