[WNMGDS-382] Update datefield and textfield input type (#647)

* update datefield and textfield with inputmode * updates to remove min and max from datefield * remove css for input type number * add maskpatterns to mask * start work on numeric prop for textfield * Add numeric prop and use it in DateField * Update snaps * Move mask overlay logic to Mask * PR feedback Co-authored-by: bernardwang <[email protected]> Co-authored-by: Bernard <[email protected]>
CMSgov · Mar 17, 2020 · c3c746d · c3c746d
1 parent 8fb3b5c
commit c3c746d
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 171 deletions.
diff --git a/packages/core/src/components/DateField/DateField.jsx b/packages/core/src/components/DateField/DateField.jsx
@@ -82,7 +82,7 @@ export class DateField extends React.PureComponent {
       inversed: this.props.inversed,
       onBlur: (this.props.onBlur || this.props.onComponentBlur) && this.handleBlur,
       onChange: this.props.onChange && this.handleChange,
-      type: 'number'
+      numeric: true
     };
     const labelId = this.labelId();
 
@@ -109,8 +109,6 @@ export class DateField extends React.PureComponent {
               this.monthInput = el;
               if (this.props.monthFieldRef) this.props.monthFieldRef(el);
             }}
-            max="12"
-            min="1"
             defaultValue={this.props.monthDefaultValue}
             label={this.props.monthLabel}
             name={this.props.monthName}
@@ -127,8 +125,6 @@ export class DateField extends React.PureComponent {
               this.dayInput = el;
               if (this.props.dayFieldRef) this.props.dayFieldRef(el);
             }}
-            max="31"
-            min="1"
             defaultValue={this.props.dayDefaultValue}
             label={this.props.dayLabel}
             name={this.props.dayName}
@@ -147,8 +143,6 @@ export class DateField extends React.PureComponent {
             }}
             defaultValue={this.props.yearDefaultValue}
             label={this.props.yearLabel}
-            min={this.props.yearMin}
-            max={this.props.yearMax}
             name={this.props.yearName}
             value={this.props.yearValue}
             aria-describedby={labelId}
@@ -167,7 +161,6 @@ DateField.defaultProps = {
   monthLabel: 'Month',
   monthName: 'month',
   yearLabel: 'Year',
-  yearMin: 1900,
   yearName: 'year',
   dateFormatter: defaultDateFormatter
 };
@@ -282,14 +275,6 @@ DateField.propTypes = {
    * Label for the year `input` field
    */
   yearLabel: PropTypes.node,
-  /**
-   * Max value for the year `input` field
-   */
-  yearMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Minimum value for the year `input` field
-   */
-  yearMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * `name` for the year field
    */