test(textarea): update e2e test for new vars

Author: brandyscarney

core/src/components/textarea/test/bottom-content/index.html

@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
@@ -29,13 +29,6 @@
         margin-top: 10px;
       }
 
-      @media screen and (max-width: 800px) {
-        .grid {
-          grid-template-columns: 1fr;
-          padding: 0;
-        }
-      }
-
       ion-textarea.custom-error-color {
         --highlight-color-invalid: purple;
       }
@@ -54,67 +47,111 @@
         <div class="grid">
           <div class="grid-item">
             <h2>No Hint</h2>
-            <ion-textarea label="Email"></ion-textarea>
+            <ion-textarea label="Label"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Hint: Stacked</h2>
+            <ion-textarea label="Label" label-placement="stacked"></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Helper Hint</h2>
-            <ion-textarea label="Email" helper-text="Enter your email"></ion-textarea>
+            <h2>Helper Text</h2>
+            <ion-textarea label="Label" helper-text="Helper text"></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Error Hint</h2>
+            <h2>Helper Text: Stacked</h2>
+            <ion-textarea label="Label" label-placement="stacked" helper-text="Helper text"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Text</h2>
+            <ion-textarea class="ion-touched ion-invalid" label="Label" error-text="Error text"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Text: Stacked</h2>
             <ion-textarea
               class="ion-touched ion-invalid"
-              label="Email"
-              error-text="Please enter a valid email"
+              label="Label"
+              label-placement="stacked"
+              error-text="Error text"
             ></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Custom Error Color</h2>
+            <h2>Error Text: Custom Color</h2>
             <ion-textarea
               class="ion-touched ion-invalid custom-error-color"
-              label="Email"
-              error-text="Please enter a valid email"
+              label="Label"
+              error-text="Error text"
             ></ion-textarea>
           </div>
 
+          <div class="grid-item">
+            <h2>Helper Text: Wrapping</h2>
+            <ion-textarea
+              label="Label"
+              helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text"
+            >
+            </ion-textarea>
+          </div>
+
           <div class="grid-item">
             <h2>Counter</h2>
-            <ion-textarea label="Email" counter="true" maxlength="100"></ion-textarea>
+            <ion-textarea label="Label" counter="true" maxlength="100"></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Custom Counter</h2>
-            <ion-textarea id="custom-counter" label="Email" counter="true" maxlength="100"></ion-textarea>
+            <h2>Counter: Custom</h2>
+            <ion-textarea id="custom-counter" label="Label" counter="true" maxlength="100"></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Counter with Helper</h2>
-            <ion-textarea label="Email" counter="true" maxlength="100" helper-text="Enter an email"></ion-textarea>
+            <h2>Counter: with Helper</h2>
+            <ion-textarea label="Label" counter="true" maxlength="100" helper-text="Helper text"></ion-textarea>
           </div>
 
           <div class="grid-item">
-            <h2>Counter with Error</h2>
+            <h2>Counter: with Error</h2>
             <ion-textarea
               class="ion-touched ion-invalid"
-              label="Email"
+              label="Label"
               counter="true"
               maxlength="100"
-              error-text="Please enter a valid email"
+              error-text="Error text"
             ></ion-textarea>
           </div>
         </div>
 
-        <script>
-          const customCounterTextarea = document.querySelector('ion-textarea#custom-counter');
-          customCounterTextarea.counterFormatter = (inputLength, maxLength) => {
-            const length = maxLength - inputLength;
-            return `${maxLength - inputLength} characters left`;
-          };
-        </script>
+        <button class="expand" onclick="toggleFill()">Toggle Fill</button>
       </ion-content>
     </ion-app>
+
+    <script>
+      const customCounterTextarea = document.querySelector('ion-textarea#custom-counter');
+      customCounterTextarea.counterFormatter = (inputLength, maxLength) => {
+        const length = maxLength - inputLength;
+        return `${maxLength - inputLength} characters left`;
+      };
+
+      const textareas = document.querySelectorAll('ion-textarea');
+
+      function toggleFill() {
+        textareas.forEach((textarea) => {
+          switch (textarea.fill) {
+            case 'outline':
+              textarea.fill = 'solid';
+              break;
+            case 'solid':
+              textarea.fill = undefined;
+              break;
+            default:
+              textarea.fill = 'outline';
+          }
+        });
+      }
+    </script>
   </body>
 </html>