Pass through props to DOM Node

[hapoza]

Describe the bug This isn't related to a single bug, it's a best practice that's not being followed in this project I tried adding "noValidate" prop to the Input component, so it renders as an attribute on the DOM Node <input>. It does not work because Styleguide in general (not just Input) tries to map every prop and does not allow for passing through unknown props to the DOM.

Expected behavior All props that aren't consumed by the Component itself during its lifecycle should be passed down as-is through to the underlying React (and eventually DOM) Element. I've seen this pattern used on many component libraries, some notable examples from the top React libs in Github: HP's Grommet Material UI ANT Design react-toolbox

Additional context Using this would also make the project easier to manage and make it more future-proof, because if everyone that needs to use a HTML5+ attribute has to add that to the component and create a PR, it's time wasted for everyone involved.

And the amount of lines of code needed also greatly decrease. Using the Input as the example, this is how it is now:

<input
  {...dataAttrs}
  ref={this.props.forwardedRef}
  onBlur={this.handleBlur}
  onFocus={this.handleFocus}
  onChange={this.handleChange}
  onKeyPress={this.handleKeyPress}
  onKeyDown={this.handleKeyDown}
  onKeyUp={this.handleKeyUp}
  className={classes}
  disabled={this.props.disabled}
  accept={this.props.accept}
  autoComplete={this.props.autoComplete}
  autoCorrect={this.props.autoCorrect}
  autoFocus={this.props.autoFocus}
  autoSave={this.props.autoSave}
  defaultValue={this.props.defaultValue}
  inputMode={this.props.inputMode}
  list={this.props.list}
  max={this.props.max}
  maxLength={this.props.maxLength}
  min={this.props.min}
  minLength={this.props.minLength}
  multiple={this.props.multiple}
  name={this.props.name}
  pattern={this.props.pattern}
  placeholder={this.props.placeholder}
  readOnly={this.props.readOnly}
  required={this.props.required}
  spellCheck={this.props.spellCheck}
  src={this.props.src}
  step={this.props.step}
  tabIndex={this.props.tabIndex}
  type={this.props.type}
  value={this.props.value}
  id={this.props.id}
  style={{
    WebkitAppearance: 'none',
  }}
/>

This is how it would become:

<input
  {...inputProps}
  ref={this.props.forwardedRef}
  onBlur={this.handleBlur}
  onFocus={this.handleFocus}
  onChange={this.handleChange}
  onKeyPress={this.handleKeyPress}
  onKeyDown={this.handleKeyDown}
  onKeyUp={this.handleKeyUp}
  className={classes}
  style={{
    WebkitAppearance: 'none',
  }}
/>

From 40 to 14 lines, a decrese of 65% just on this snippet. It would alse decrease the file size even more overall because there's no need to map out with PropTypes every. single. prop that serves as just a DOM attribute, that's a lot of work. React itself already does all of that and provides nice warnings and error messages.

[drawveloper]

Yes, yes, a thousand times yes. Opinions, not laws.

[klzns]

Sure, let's do this. If you want this faster, PRs are always welcome too!

[hapoza]

I'm not that familiar with Styleguide as a whole, but I can try! This would probably be a breaking change for the next major release though.