feat(input): add max-length prop to top-level

documentation-site/components/yard/config/input.ts

@@ -193,6 +193,12 @@ export const inputProps = {
     description: 'max value when used as input type=number',
     hidden: true,
   },
+  maxLength: {
+    value: undefined,
+    type: PropTypes.Number,
+    description: 'max number of characters accepted in the input element',
+    hidden: true,
+  },
   ...pick(changeHandlers, [
     'onBlur',
     'onKeyDown',

src/input/__tests__/__snapshots__/base-input.test.js.snap

@@ -41,6 +41,7 @@ Object {
   "id": undefined,
   "inputMode": "text",
   "max": undefined,
+  "maxLength": undefined,
   "min": undefined,
   "name": "",
   "onBlur": [Function],

src/input/__tests__/__snapshots__/input.test.js.snap

@@ -17,6 +17,7 @@ Object {
   "id": undefined,
   "inputMode": "text",
   "max": undefined,
+  "maxLength": undefined,
   "min": undefined,
   "name": "",
   "onBlur": [Function],

src/input/__tests__/__snapshots__/masked-input.test.js.snap

@@ -68,6 +68,7 @@ Object {
   "id": undefined,
   "inputMode": "text",
   "max": undefined,
+  "maxLength": undefined,
   "min": undefined,
   "name": "",
   "onBlur": [Function],

src/input/base-input.js

@@ -328,6 +328,7 @@ class BaseInput<T: EventTarget> extends React.Component<
           disabled={this.props.disabled}
           id={this.props.id}
           inputMode={this.props.inputMode}
+          maxLength={this.props.maxLength}
           name={this.props.name}
           onBlur={this.onBlur}
           onChange={this.props.onChange}

src/input/types.js

@@ -124,6 +124,7 @@ export type BaseInputPropsT<T> = {|
   clearable?: boolean,
   /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */
   clearOnEscape?: boolean,
+  maxLength?: number,
   onClear?: (e: SyntheticEvent<T>) => mixed,
   overrides: BaseInputComponentsT,
   placeholder?: string,

src/pin-code/pin-code.js

@@ -80,7 +80,6 @@ export default class PinCode extends React.Component<PropsT, StateT> {
               inputMode="numeric"
               inputRef={this._inputRefs.ref(i)}
               key={i}
-              maxLength="1"
               name={this.props.name}
               onBlur={() => this.setState({hasFocus: false})}
               onFocus={() => this.setState({hasFocus: true})}

src/textarea/__tests__/__snapshots__/textarea.test.js.snap

@@ -17,6 +17,7 @@ Object {
   "id": undefined,
   "inputMode": "text",
   "max": undefined,
+  "maxLength": undefined,
   "min": undefined,
   "name": "",
   "onBlur": [Function],