From 3a8925b7682de67cb790cb6739cfb15ffb866b18 Mon Sep 17 00:00:00 2001
From: Scott Rees <6165315+reesscot@users.noreply.github.com>
Date: Wed, 16 Mar 2022 19:20:49 -0700
Subject: [PATCH] fix: update complex field components to allow absolute
 positioning (#1530)

---
 .changeset/thick-pumas-guess.md                |  7 +++++++
 packages/react/src/primitives/Radio/Radio.tsx  | 15 +++++++++++++++
 .../src/primitives/SliderField/SliderField.tsx |  4 +++-
 .../primitives/StepperField/StepperField.tsx   | 18 ++++++++++++++++++
 .../primitives/TextAreaField/TextAreaField.tsx | 18 ++++++++++++++++--
 .../src/primitives/TextField/TextField.tsx     | 16 +++++++++++++++-
 6 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/thick-pumas-guess.md

diff --git a/.changeset/thick-pumas-guess.md b/.changeset/thick-pumas-guess.md
new file mode 100644
index 00000000000..447eba2d015
--- /dev/null
+++ 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
index 09dbf4f7abd..507fb0406a3 100644
--- 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
index 6d89d145bc6..8f873f834c7 100644
--- 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
index cb2047a3d81..9b877b6c9b7 100644
--- 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
index 9dad3fcdcb9..7fbe7c85e98 100644
--- 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
index 88c5d0e1a4b..1332320c9fa 100644
--- 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}
     >