update props to use ReactNode so the user can choose the text element…

…s, and css updates
EasyPost · Dec 16, 2024 · e9b952e · e9b952e
1 parent f56b274
commit e9b952e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/easy-ui-react/src/InputField/InputField.module.scss b/easy-ui-react/src/InputField/InputField.module.scss
@@ -181,13 +181,13 @@
   z-index: component-token("inputfield", "z-index");
   min-width: design-token("space.3");
   height: design-token("space.3");
+  pointer-events: none;
 }
 
 .inputTextPlacementSm {
   top: design-token("space.1");
   min-width: design-token("space.2");
   height: design-token("space.2");
-  font-size: design-token("font-size.75");
 }
 
 .inputTextPlacementLg {
@@ -196,10 +196,8 @@
 
 .textStart {
   left: design-token("space.1.5");
-  color: design-token("color.neutral.600");
 }
 
 .textEnd {
   right: design-token("space.1.5");
-  color: design-token("color.neutral.400");
 }
diff --git a/easy-ui-react/src/InputField/InputField.tsx b/easy-ui-react/src/InputField/InputField.tsx
@@ -91,9 +91,9 @@ export type InputFieldProps = AriaTextFieldProps & {
   /** Right aligned icon on input. */
   iconAtEnd?: IconSymbol;
   /** Left aligned text on input */
-  textAtStart?: string;
+  textAtStart?: ReactNode;
   /** Right aligned text on input */
-  textAtEnd?: string;
+  textAtEnd?: ReactNode;
 };
 /**
  * @privateRemarks

diff --git a/easy-ui-react/src/InputField/inputText.tsx b/easy-ui-react/src/InputField/inputText.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Text } from "../Text";
 import { InputSize } from "./InputField";
 import styles from "./InputField.module.scss";
@@ -18,15 +18,14 @@ export type TextFieldTextProps = {
    */
   size?: InputSize;
   /** Text to display alongside input. */
-  text: string;
+  text: ReactNode;
 };
 
 /**
  * @privateRemarks
  * The InputText component has been designed for use on the InputField
  * component. Text can appears either at the start or end of the input
  */
-
 export function InputText(props: TextFieldTextProps) {
   const { alignment = "start", size = "md", text } = props;
   return (
@@ -37,7 +36,12 @@ export function InputText(props: TextFieldTextProps) {
         styles[variationName("inputTextPlacement", size)],
       )}
     >
-      <Text>{text}</Text>
+      <Text
+        variant={size === "sm" ? "body2" : "body1"}
+        color={alignment === "start" ? "neutral.600" : "neutral.400"}
+      >
+        {text}
+      </Text>
     </div>
   );
 }
diff --git a/easy-ui-react/src/TextField/TextField.stories.tsx b/easy-ui-react/src/TextField/TextField.stories.tsx
@@ -55,7 +55,7 @@ export const PrefixAndSuffix: Story = {
     label: "Label",
     placeholder: "Placeholder text",
     helperText: "Optional helper text",
-    textAtStart: "2.5",
+    textAtStart: "$",
     textAtEnd: "in",
   },
 };
@@ -88,8 +88,8 @@ export const SmallTextFields: Story = {
         helperText="Optional helper text"
         label="Label"
         placeholder="Placeholder text"
+        textAtStart="$"
         textAtEnd="in"
-        textAtStart="2.5"
       />
     </>
   ),
@@ -123,8 +123,8 @@ export const LargeTextFields: Story = {
         helperText="Optional helper text"
         label="Label"
         placeholder="Placeholder text"
+        textAtStart="$"
         textAtEnd="in"
-        textAtStart="2.5"
       />
     </>
   ),