From 25385edf12bb0b89bb1224b2b91d7141bd373514 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 23 Feb 2022 16:07:14 -0800
Subject: [PATCH] Use a textarea in the feedback modal

---
 src/input/Input.jsx        | 27 +++++++++++++++++++--------
 src/input/Input.module.css | 21 +++++++++++++++------
 src/room/FeedbackModal.jsx |  2 +-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/input/Input.jsx b/src/input/Input.jsx
index fa628e5..88e0008 100644
--- a/src/input/Input.jsx
+++ b/src/input/Input.jsx
@@ -38,14 +38,25 @@ export const InputField = forwardRef(
         )}
       >
         {prefix && <span>{prefix}</span>}
-        <input
-          id={id}
-          {...rest}
-          ref={ref}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-        />
+        {type === "textarea" ? (
+          <textarea
+            id={id}
+            {...rest}
+            ref={ref}
+            type={type}
+            disabled={disabled}
+          />
+        ) : (
+          <input
+            id={id}
+            {...rest}
+            ref={ref}
+            type={type}
+            checked={checked}
+            disabled={disabled}
+          />
+        )}
+
         <label htmlFor={id}>
           {type === "checkbox" && (
             <div className={styles.checkbox}>
diff --git a/src/input/Input.module.css b/src/input/Input.module.css
index 4555d34..0c94a16 100644
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -29,7 +29,8 @@
   border: 1px solid var(--inputBorderColor);
 }
 
-.inputField input {
+.inputField input,
+.inputField textarea {
   font-weight: 400;
   font-size: 15px;
   border: none;
@@ -42,6 +43,7 @@
 }
 
 .inputField.disabled input,
+.inputField.disabled textarea,
 .inputField.disabled span {
   color: var(--textColor2);
 }
@@ -54,12 +56,14 @@
   padding-right: 0;
 }
 
-.inputField input::placeholder {
+.inputField input::placeholder,
+.inputField textarea::placeholder {
   transition: color 0.25s ease-in 0s;
   color: transparent;
 }
 
-.inputField input:placeholder-shown:focus::placeholder {
+.inputField input:placeholder-shown:focus::placeholder,
+.inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
   color: var(--textColor2);
 }
@@ -86,13 +90,17 @@
   border-color: var(--inputBorderColorFocused);
 }
 
-.inputField input:focus {
+.inputField input:focus,
+.inputField textarea:focus {
   outline: 0;
 }
 
 .inputField input:focus + label,
 .inputField input:not(:placeholder-shown) + label,
-.inputField.prefix input + label {
+.inputField.prefix textarea + label,
+.inputField textarea:focus + label,
+.inputField textarea:not(:placeholder-shown) + label,
+.inputField.prefix textarea + label {
   background-color: var(--bgColor2);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
@@ -102,7 +110,8 @@
   pointer-events: auto;
 }
 
-.inputField input:focus + label {
+.inputField input:focus + label,
+.inputField textarea:focus + label {
   color: var(--inputBorderColorFocused);
 }
 
diff --git a/src/room/FeedbackModal.jsx b/src/room/FeedbackModal.jsx
index c12a542..34b524e 100644
--- a/src/room/FeedbackModal.jsx
+++ b/src/room/FeedbackModal.jsx
@@ -48,7 +48,7 @@ export function FeedbackModal({ inCall, roomId, ...rest }) {
               id="description"
               name="description"
               label="Description (optional)"
-              type="text"
+              type="textarea"
             />
           </FieldRow>
           <FieldRow>