Added prop for more direct access to input styles

burnt-labs · Apr 26, 2024 · 0cab3cf · 0cab3cf
1 parent f240e3f
commit 0cab3cf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx
@@ -121,7 +121,7 @@ export const AbstraxionSignin = () => {
             </h2>
           </div>
           <Input
-            className="!ui-text-[16px]"
+            baseInputClassName="!ui-text-[16px]"
             placeholder="Verification Code"
             value={otp}
             onChange={handleOtpChange}
@@ -152,7 +152,7 @@ export const AbstraxionSignin = () => {
             </h2>
           </div>
           <Input
-            className="!ui-text-[16px]"
+            baseInputClassName="!ui-text-[16px]"
             placeholder="Email address"
             value={email}
             onChange={handleEmailChange}

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
@@ -6,10 +6,13 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "prefix">;
 export interface ITextFieldProps extends BaseInputProps {
   className?: string;
   error?: string;
+  baseInputClassName?: string;
 }
 export function Input({
   className,
   placeholder,
+  // This should only be used for specific classes that can't override the base input styles.
+  baseInputClassName,
   value,
   error,
   onBlur,
@@ -46,7 +49,9 @@ export function Input({
       </label>
       <input
         {...props}
-        className={`ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
+        className={`${
+          baseInputClassName || ""
+        } ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
           error ? "ui-border-red-400" : ""
         } ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
         onBlur={handleBlur}