From de46c4c2610d977133726e9d5a1264808ba12669 Mon Sep 17 00:00:00 2001
From: stdavis <stdavis@utah.gov>
Date: Thu, 19 Dec 2024 10:33:24 -0700
Subject: [PATCH] fix(TextField): add support for `inputProps.className`

---
 .../src/components/TextField.stories.tsx                 | 8 ++++++++
 packages/utah-design-system/src/components/TextField.tsx | 9 ++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/utah-design-system/src/components/TextField.stories.tsx b/packages/utah-design-system/src/components/TextField.stories.tsx
index cbecf022..ba49a10f 100644
--- a/packages/utah-design-system/src/components/TextField.stories.tsx
+++ b/packages/utah-design-system/src/components/TextField.stories.tsx
@@ -19,6 +19,14 @@ export default meta;
 
 export const Example = {};
 
+export const Large = {
+  args: {
+    inputProps: {
+      className: 'text-2xl',
+    },
+  },
+};
+
 export const HtmlValidation = (args: any) => (
   <form
     onSubmit={(event) => {
diff --git a/packages/utah-design-system/src/components/TextField.tsx b/packages/utah-design-system/src/components/TextField.tsx
index bdffb93c..b644e935 100644
--- a/packages/utah-design-system/src/components/TextField.tsx
+++ b/packages/utah-design-system/src/components/TextField.tsx
@@ -5,6 +5,7 @@ import {
   type InputProps,
   type ValidationResult,
 } from 'react-aria-components';
+import { twJoin } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
 import {
   Description,
@@ -35,6 +36,12 @@ export const TextField = forwardRef(function TextField(
   { label, description, errorMessage, inputProps, ...props }: TextFieldProps,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
+  // mix in input classes if necessary
+  let inputClasses = inputStyles();
+  if (inputProps?.className) {
+    inputClasses = twJoin(inputStyles(), inputProps.className as string);
+  }
+
   return (
     <AriaTextField
       {...props}
@@ -44,7 +51,7 @@ export const TextField = forwardRef(function TextField(
       )}
     >
       {label && <Label>{label}</Label>}
-      <Input ref={ref} {...inputProps} className={inputStyles} />
+      <Input ref={ref} {...inputProps} className={inputClasses} />
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </AriaTextField>