@trend/textfield - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

package.json

 {
   "name": "@trend/textfield",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "TREND Component for inputting, editing, and selecting text.",
@@ -5,0 +5,0 @@ "repository": {

src/Input.js

@@ -6,3 +6,6 @@ import React from 'react';
 import TextFieldContext from './Context';
+import { validations } from './validator';
 
+const validators = Object.keys(validations);
+
 // NOTE: This should be moved to a new package for handling utilities.
@@ -33,2 +36,6 @@ function callAll(...fns) {
 
+  hasValidations(props) {
+    return validators.some(v => props.hasOwnProperty(v))
+  }
+
   isTextarea(variant) {
@@ -56,2 +63,8 @@ return variant === 'textarea';
               ...props,
+              'aria-controls':
+                textfield.hasHelperText() && this.hasValidations(props)
+                  ? textfield.helperId
+                  : undefined,
+              'aria-invalid': textfield.isInvalid,
+              'aria-describedby': textfield.describeInput(),
               className: cn(textfield.cssClasses.INPUT, props.className),
@@ -58,0 +71,0 @@ disabled: textfield.isDisabled,

src/TextField.js

@@ -71,2 +71,5 @@ import React from 'react';
       cssClasses: props.cssClasses,
+      describeInput: this.describeInput,
+      hasHelperText: this.hasHelperText,
+      helperId: `${props.id}-helper-text`,
       id: props.id,
@@ -114,2 +117,8 @@ isDirty: false,
 
+  describeInput = () => {
+    return this.hasHelperText() || !!this.props.validators
+      ? this.state.helperId
+      : undefined;
+  }
+
   getIconProps = () => ({
@@ -120,2 +129,6 @@ className: this.state.cssClasses.ICON,
 
+  hasHelperText = () => {
+    return this.props.helperText || this.state.validationMessage;
+  }
+
   render() {
@@ -132,2 +145,3 @@ const {
       cssClasses,
+      helperId,
       id,
@@ -157,4 +171,4 @@ isDirty,
         </div>
-        {(helperText || validationMessage) &&
-          <div className={cssClasses.HELPER}>
+        {this.hasHelperText()
+          ? <div className={cssClasses.HELPER} id={helperId}>
             {
@@ -165,3 +179,5 @@ !isInvalid || (isInvalid && !validationMessage)
             }
-        </div>}
+          </div>
+          : false
+        }
       </TextFieldContext.Provider>
@@ -168,0 +184,0 @@ );

src/validator.js

@@ -8,3 +8,3 @@ import isFunction from 'lodash/isFunction';
 
-const validations = {
+export const validations = {
   required: target => {
@@ -11,0 +11,0 @@ const error = {

stories/component.story.js

@@ -51,3 +51,2 @@ import React from 'react';
             disabled={disabled}
-            helperText="Helper text"
             disabled={disabled}
@@ -54,0 +53,0 @@ BeginningIcon={Data}>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64888

increased by1.31%

Lines of code

729

increased by3.4%

No dependency changes