feat(components/input): polymorphic attribs to input component

deca-org · Nov 8, 2022 · cd4b4e3 · cd4b4e3
1 parent 1a2ad07
commit cd4b4e3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
@@ -10,7 +10,8 @@ import ButtonIcon from './ButtonIcon';
 /**
  * Buttons allow users to take actions, and make choices, with a single tap.
  */
-export interface ButtonProps<T extends React.ElementType> extends React.ComponentPropsWithRef<'button'> {
+export interface ButtonProps<T extends React.ElementType>
+  extends React.ComponentPropsWithRef<'button'> {
   /**
    * The content of the component.
    */
@@ -84,7 +85,7 @@ export interface ButtonProps<T extends React.ElementType> extends React.Componen
 }
 
 const Button = React.forwardRef(
-  <T extends React.ElementType = "button">(
+  <T extends React.ElementType = 'button'>(
     {
       role = 'button',
       as,
@@ -103,7 +104,8 @@ const Button = React.forwardRef(
       children,
       pill = false,
       ...btnProps
-    }: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+    }: ButtonProps<T> &
+      Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
     ref: React.Ref<HTMLButtonElement | null>
   ) => {
     const hasText = useMemo(
@@ -129,7 +131,7 @@ const Button = React.forwardRef(
     const preClass = 'decaButton';
 
     const { dark } = React.useContext(ThemeContext);
-    
+
     return (
       <StyledButton
         role={role}

diff --git a/src/lib/Input/Input.tsx b/src/lib/Input/Input.tsx
@@ -20,7 +20,7 @@ export type FormElement = HTMLInputElement | HTMLTextAreaElement;
 /**
  * Inputs allow users to enter text into a UI. They typically appear in forms and dialogs.
  */
-export interface InputProps
+export interface InputProps<T extends React.ElementType>
   extends Modify<
     React.ComponentPropsWithRef<'input'>,
     {
@@ -58,7 +58,7 @@ export interface InputProps
   /**
    * Changes which tag component outputs.
    */
-  as?: keyof JSX.IntrinsicElements;
+  as?: T;
   /**
    * Placeholder text for component.
    */
@@ -114,14 +114,14 @@ export interface InputProps
 }
 
 const Input = React.forwardRef(
-  (
+  <T extends React.ElementType = 'input'>(
     {
       label,
       className = '',
       disabled = false,
       size = 'md',
       variant = 'solid',
-      as = 'input',
+      as,
       css,
       focusColor = 'primary',
       maxWidth = false,
@@ -135,7 +135,8 @@ const Input = React.forwardRef(
       onBlur,
       pill = false,
       ...props
-    }: InputProps,
+    }: InputProps<T> &
+      Omit<React.ComponentPropsWithoutRef<T>, keyof InputProps<T>>,
     ref: React.Ref<FormElement | null>
   ) => {
     const inputRef = useRef<UnionToIntersection<FormElement>>(null);