studiobakers / react-ui-toolkit

Bakers Studio's React-based UI Toolkit
MIT License
15 stars 2 forks source link

Let's omit <disabled> prop that comes from React.InputHTMLAttributes<HTMLInputElement> #43

Closed edizcelik closed 3 years ago

edizcelik commented 3 years ago

As we have a separate isDisabled prop, we should omit disabled prop that comes from React.InputHTMLAttributes so that we disallow using disabled as prop to Input component. Or remove isDisabled in favour of using disabled prop. https://github.com/Hipo/react-ui-toolkit/blob/master/src/form/input/Input.tsx#L8

I think we should clean the typing here so that there are no duplications. For example, we should remove onFocus and onBlur as they are already available from React.InputHTMLAttributes<HTMLInputElement> in the form that we want. Also, onChange is required for our Input component however we should allow it to be optional which is how it is defined within React.InputHTMLAttributes<HTMLInputElement>. For example, some inputs might always be disabled so there is no need to define a onChange for them.

export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "name">
 & {
  name: string;
  testid?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  isDisabled?: boolean;
  hasError?: boolean;
  customClassName?: string;
  inputContainerRef?: React.RefObject<HTMLDivElement>;
}