fix: update complex field components to allow absolute positioning (#…

…1530)
aws-amplify · Mar 17, 2022 · 3a8925b · 3a8925b
1 parent 12fcc60
commit 3a8925b
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 4 deletions.
diff --git a/.changeset/thick-pumas-guess.md b/.changeset/thick-pumas-guess.md
@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix: update complex field components (TextField, TextAreaField, etc) to apply absolute positioning from Figma
+
+Figma to Studio integration will absolutely position components when autolayout is not enabled in Figma. This causes an issue for field components that were passing position, top, and left, and padding down to the input element, causing the layout not to match Figma. This is fixed by moving the absolute position props and padding up to the container Flex element.
diff --git a/packages/react/src/primitives/Radio/Radio.tsx b/packages/react/src/primitives/Radio/Radio.tsx
@@ -17,6 +17,14 @@ export const RadioPrimitive: Primitive<RadioProps, 'input'> = (
     testId,
     value,
     labelPosition: radioLabelPosition,
+    height, // @TODO: remove custom destructuring for 3.0 release
+    width, // @TODO: remove custom destructuring for 3.0 release
+    bottom, // @TODO: remove custom destructuring for 3.0 release
+    left, // @TODO: remove custom destructuring for 3.0 release
+    position, // @TODO: remove custom destructuring for 3.0 release
+    padding, // @TODO: remove custom destructuring for 3.0 release
+    right, // @TODO: remove custom destructuring for 3.0 release
+    top, // @TODO: remove custom destructuring for 3.0 release
     ...rest
   },
   ref
@@ -54,6 +62,13 @@ export const RadioPrimitive: Primitive<RadioProps, 'input'> = (
       className={classNames(ComponentClassNames.Radio, className)}
       data-disabled={shouldBeDisabled}
       data-label-position={labelPosition}
+      width={width}
+      bottom={bottom}
+      top={top}
+      right={right}
+      left={left}
+      position={position}
+      padding={padding}
     >
       {children && (
         <Text

diff --git a/packages/react/src/primitives/SliderField/SliderField.tsx b/packages/react/src/primitives/SliderField/SliderField.tsx
@@ -53,7 +53,8 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
   const descriptionId = useStableId();
   const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
 
-  const { flexContainerStyleProps, rest } = splitPrimitiveProps(_rest);
+  const { flexContainerStyleProps, baseStyleProps, rest } =
+    splitPrimitiveProps(_rest);
 
   const isControlled = value !== undefined;
 
@@ -86,6 +87,7 @@ const SliderFieldPrimitive: Primitive<SliderFieldProps, typeof Root> = (
       )}
       testId={testId}
       data-size={size}
+      {...baseStyleProps}
       {...flexContainerStyleProps}
     >
       <Label

diff --git a/packages/react/src/primitives/StepperField/StepperField.tsx b/packages/react/src/primitives/StepperField/StepperField.tsx
@@ -40,6 +40,16 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
     size,
     variation,
     testId,
+
+    bottom, // @TODO: remove custom destructuring for 3.0 release
+    height, // @TODO: remove custom destructuring for 3.0 release
+    left, // @TODO: remove custom destructuring for 3.0 release
+    padding, // @TODO: remove custom destructuring for 3.0 release
+    position, // @TODO: remove custom destructuring for 3.0 release
+    right, // @TODO: remove custom destructuring for 3.0 release
+    top, // @TODO: remove custom destructuring for 3.0 release
+    width, // @TODO: remove custom destructuring for 3.0 release
+
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     value: controlledValue,
     ..._rest
@@ -83,6 +93,14 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
       data-size={size}
       data-variation={variation}
       testId={testId}
+      width={width}
+      height={height}
+      position={position}
+      padding={padding}
+      top={top}
+      right={right}
+      left={left}
+      bottom={bottom}
       {...flexContainerStyleProps}
     >
       <Label htmlFor={fieldId} visuallyHidden={labelHidden}>

diff --git a/packages/react/src/primitives/TextAreaField/TextAreaField.tsx b/packages/react/src/primitives/TextAreaField/TextAreaField.tsx
@@ -22,14 +22,22 @@ const TextAreaFieldPrimitive: Primitive<TextAreaFieldProps, 'textarea'> = (
     descriptiveText,
     errorMessage,
     hasError = false,
-    height,
     id,
     label,
     labelHidden = false,
     rows,
     size,
     testId,
-    width,
+
+    bottom, // @TODO: remove custom destructuring for 3.0 release
+    height, // @TODO: remove custom destructuring for 3.0 release
+    left, // @TODO: remove custom destructuring for 3.0 release
+    padding, // @TODO: remove custom destructuring for 3.0 release
+    position, // @TODO: remove custom destructuring for 3.0 release
+    right, // @TODO: remove custom destructuring for 3.0 release
+    top, // @TODO: remove custom destructuring for 3.0 release
+    width, // @TODO: remove custom destructuring for 3.0 release
+
     ..._rest
   } = props;
 
@@ -51,6 +59,12 @@ const TextAreaFieldPrimitive: Primitive<TextAreaFieldProps, 'textarea'> = (
       height={height}
       testId={testId}
       width={width}
+      bottom={bottom}
+      left={left}
+      right={right}
+      top={top}
+      position={position}
+      padding={padding}
       {...flexContainerStyleProps}
     >
       <Label htmlFor={fieldId} visuallyHidden={labelHidden}>

diff --git a/packages/react/src/primitives/TextField/TextField.tsx b/packages/react/src/primitives/TextField/TextField.tsx
@@ -30,7 +30,6 @@ const TextFieldPrimitive = <Multiline extends boolean>(
     descriptiveText,
     errorMessage,
     hasError = false,
-    height, // @TODO: remove custom destructuring for 3.0 release
     id,
     label,
     labelHidden = false,
@@ -42,7 +41,16 @@ const TextFieldPrimitive = <Multiline extends boolean>(
     type, // remove from rest to prevent passing as DOM attribute to textarea
     size,
     testId,
+
+    bottom, // @TODO: remove custom destructuring for 3.0 release
+    height, // @TODO: remove custom destructuring for 3.0 release
+    left, // @TODO: remove custom destructuring for 3.0 release
+    padding, // @TODO: remove custom destructuring for 3.0 release
+    position, // @TODO: remove custom destructuring for 3.0 release
+    right, // @TODO: remove custom destructuring for 3.0 release
+    top, // @TODO: remove custom destructuring for 3.0 release
     width, // @TODO: remove custom destructuring for 3.0 release
+
     ..._rest
   } = props;
 
@@ -97,9 +105,15 @@ const TextFieldPrimitive = <Multiline extends boolean>(
         ComponentClassNames.TextField,
         className
       )}
+      bottom={bottom}
       data-size={size}
       height={height}
+      left={right}
+      padding={padding}
+      position={position}
+      right={right}
       testId={testId}
+      top={top}
       width={width}
       {...flexContainerStyleProps}
     >