inputs: React doesn't like camelCase props on dom elements

[stuller]

We recently updated input components to pass down all props so we could use things like autoFocus, but now we are getting JS warnings in console because "React does not recognize the isValid prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isvalid instead. If you accidentally passed it from a parent component, remove it from the DOM element."

Basically this happens for any camelcase prop, including the ones used by Atlas like isValid, errorText, and iconTooltip.

We do still want it to pass down anything that a dom element could use, like autoFocus or data attributes.

Derek thinks he's got a solution.

[Darper]

Lol. Such little faith with that last paragraph.

[stuller]

lol was trying to avoid over-committing you. i have full confidence 😄

[Raymans]

#716 uses custom prop types to filter out from spread, this case we don't hacky eslint and let render method more clear and focused, but still, duplicate with propTypes (needed for styleguide).

hopefully we could use spread in propTypes like

Input.customPropTypes = {
  "errorText": PropTypes.string,
  "isValid": PropTypes.bool,
  "validator": PropTypes.func,
  "onBeforeChange": PropTypes.func,
  "uppercase": PropTypes.bool,
  "mask": PropTypes.string
};

Input.propTypes = {
  ...Input.customPropTypes,
  "isValid": PropTypes.bool,

but which is not supported in styleguide yet.
styleguidist/react-styleguidist#792
reactjs/react-docgen#246

any idea could be better?

[Raymans]

Checkbox, Dropdown, Radio, Switch also need to be handled

[Darper]

Closed by PR #716