feat(project): add support for left and right control to TextField

jwplayer · Jul 20, 2021 · 5926efd · 5926efd
1 parent 6c6efa0
commit 5926efd
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 28 deletions.
diff --git a/src/components/TextField/TextField.module.scss b/src/components/TextField/TextField.module.scss
@@ -11,20 +11,28 @@
       color: theme.$text-field-error-color;
     }
 
-    .input {
+    .container {
       border-color: theme.$text-field-error-color;
     }
   }
 
   &.disabled {
-    .input {
+    .container {
       opacity: 0.7;
     }
   }
 
+  &.leftControl .input {
+    padding-left: 0;
+  }
+
+  &.rightControl .input {
+    padding-right: 0;
+  }
+
   &:hover {
     &:not(.disabled) {
-      .input {
+      .container {
         background-color: theme.$text-field-hover-bg-color;
         border-color: theme.$text-field-hover-border-color;
       }
@@ -35,28 +43,46 @@
 .label {
   display: block;
   margin-bottom: 4px;
+  text-align: left;
 }
 
-.input {
+.control > div {
+  width: 48px;
+  height: 48px;
+}
+
+.container {
+  display: flex;
   width: 100%;
-  min-height: 48px;
-  padding: 14px 16px;
+
   color: theme.$text-field-resting-color;
-  font-size: 16px;
-  line-height: 18px;
+
   background-color: theme.$text-field-bg-color;
   border: 1px solid theme.$text-field-resting-border-color;
   border-radius: 4px;
   transition: border 0.2s ease;
 
-  &:focus {
+  &:focus-within {
     color: theme.$text-field-active-color;
     border-color: theme.$text-field-active-border-color;
-    outline: none;
   }
 }
 
+.input {
+  width: 100%;
+  min-height: 48px;
+  padding: 14px 16px;
+  color: inherit;
+  font-size: 16px;
+  line-height: 18px;
+  background: transparent;
+  border: none;
+  outline: none;
+  appearance: none;
+}
+
 .helperText {
   margin-top: 4px;
   font-size: 12px;
+  text-align: left;
 }
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -15,6 +15,8 @@ type Props = {
   onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
   error?: boolean;
   disabled?: boolean;
   required?: boolean;
@@ -23,14 +25,27 @@ type Props = {
   rows?: number;
 };
 
-const TextField: React.FC<Props> = ({ className, label, error, helperText, multiline, type = 'text', rows = 3, ...rest }: Props) => {
+const TextField: React.FC<Props> = ({
+  className,
+  label,
+  error,
+  helperText,
+  multiline,
+  leftControl,
+  rightControl,
+  type = 'text',
+  rows = 3,
+  ...rest
+}: Props) => {
   const id = useOpaqueId('text-field', rest.name);
   const InputComponent = multiline ? 'textarea' : 'input';
   const textFieldClassName = classNames(
     styles.textField,
     {
       [styles.error]: error,
       [styles.disabled]: rest.disabled,
+      [styles.leftControl]: !!leftControl,
+      [styles.rightControl]: !!rightControl,
     },
     className,
   );
@@ -50,7 +65,11 @@ const TextField: React.FC<Props> = ({ className, label, error, helperText, multi
       <label htmlFor={id} className={styles.label}>
         {label}
       </label>
-      <InputComponent className={styles.input} {...inputProps} />
+      <div className={styles.container}>
+        {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
+        <InputComponent className={styles.input} {...inputProps} />
+        {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
+      </div>
       {helperText ? <div className={styles.helperText}>{helperText}</div> : null}
     </div>
   );

diff --git a/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -11,14 +11,18 @@ exports[`<TextField> renders and matches multiline snapshot 1`] = `
     >
       Label
     </label>
-    <textarea
-      class="input"
-      id="text-field_1235_name"
-      name="name"
-      placeholder="Placeholder"
-      rows="3"
-      type="text"
-    />
+    <div
+      class="container"
+    >
+      <textarea
+        class="input"
+        id="text-field_1235_name"
+        name="name"
+        placeholder="Placeholder"
+        rows="3"
+        type="text"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -34,14 +38,18 @@ exports[`<TextField> renders and matches snapshot 1`] = `
     >
       Label
     </label>
-    <input
-      class="input"
-      id="text-field_1235_name"
-      name="name"
-      placeholder="Placeholder"
-      type="text"
-      value=""
-    />
+    <div
+      class="container"
+    >
+      <input
+        class="input"
+        id="text-field_1235_name"
+        name="name"
+        placeholder="Placeholder"
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;