Merge pull request #131 from HelixDesignSystem/make-labels-optional

Make labels optional for text inputs

Author: 100stacks

src/PasswordText/index.js

@@ -11,14 +11,16 @@ const Password = React.forwardRef(
         ref={ref}
       >
         <input {...rest} id={id} required={required} placeholder={placeholder} type="password" />
-        <label
-          className={classnames({
-            hxRequired: required,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
+        {label && (
+          <label
+            className={classnames({
+              hxRequired: required,
+            })}
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
         {children}
       </hx-password-control>
     );

src/Text/index.js

@@ -14,15 +14,17 @@ const Text = React.forwardRef(
         ref={ref}
       >
         <input {...rest} id={id} required={required} type="text" />
-        <label
-          className={classnames({
-            hxOptional: optional,
-            hxRequired: required,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
+        {label && (
+          <label
+            className={classnames({
+              hxOptional: optional,
+              hxRequired: required,
+            })}
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
         {prefix && <span className="hxPrefix">{prefix}</span>}
         {suffix && <span className="hxSuffix">{suffix}</span>}
         {children}

src/TextArea/index.js

@@ -14,15 +14,17 @@ const TextArea = React.forwardRef(
         ref={ref}
       >
         <textarea {...rest} id={id} required={required} disabled={disabled} />
-        <label
-          className={classnames({
-            hxOptional: optional,
-            hxRequired: required,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
+        {label && (
+          <label
+            className={classnames({
+              hxOptional: optional,
+              hxRequired: required,
+            })}
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
         {children}
       </hx-textarea-control>
     );