test(input): update e2e test to improve examples

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

@@ -15,10 +15,11 @@
     <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;
       }
+
       h2 {
         font-size: 12px;
         font-weight: normal;
@@ -27,12 +28,6 @@
 
         margin-top: 10px;
       }
-      @media screen and (max-width: 800px) {
-        .grid {
-          grid-template-columns: 1fr;
-          padding: 0;
-        }
-      }
 
       ion-input.custom-error-color {
         --highlight-color-invalid: purple;
@@ -52,67 +47,111 @@
         <div class="grid">
           <div class="grid-item">
             <h2>No Hint</h2>
-            <ion-input label="Email"></ion-input>
+            <ion-input label="Label"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Hint: Stacked</h2>
+            <ion-input label="Label" label-placement="stacked"></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Helper Hint</h2>
-            <ion-input label="Email" helper-text="Enter your email"></ion-input>
+            <h2>Helper Text</h2>
+            <ion-input label="Label" helper-text="Helper text"></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Error Hint</h2>
+            <h2>Helper Text: Stacked</h2>
+            <ion-input label="Label" label-placement="stacked" helper-text="Helper text"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Text</h2>
+            <ion-input class="ion-touched ion-invalid" label="Label" error-text="Error text"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Text: Stacked</h2>
             <ion-input
               class="ion-touched ion-invalid"
-              label="Email"
-              error-text="Please enter a valid email"
+              label="Label"
+              label-placement="stacked"
+              error-text="Error text"
             ></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Custom Error Color</h2>
+            <h2>Error Text: Custom Color</h2>
             <ion-input
               class="ion-touched ion-invalid custom-error-color"
-              label="Email"
-              error-text="Please enter a valid email"
+              label="Label"
+              error-text="Error text"
             ></ion-input>
           </div>
 
+          <div class="grid-item">
+            <h2>Helper Text: Wrapping</h2>
+            <ion-input
+              label="Label"
+              helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text"
+            >
+            </ion-input>
+          </div>
+
           <div class="grid-item">
             <h2>Counter</h2>
-            <ion-input label="Email" counter="true" maxlength="100"></ion-input>
+            <ion-input label="Label" counter="true" maxlength="100"></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Custom Counter</h2>
-            <ion-input id="custom-counter" label="Email" counter="true" maxlength="100"></ion-input>
+            <h2>Counter: Custom</h2>
+            <ion-input id="custom-counter" label="Label" counter="true" maxlength="100"></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Counter with Helper</h2>
-            <ion-input label="Email" counter="true" maxlength="100" helper-text="Enter an email"></ion-input>
+            <h2>Counter: with Helper</h2>
+            <ion-input label="Label" counter="true" maxlength="100" helper-text="Helper text"></ion-input>
           </div>
 
           <div class="grid-item">
-            <h2>Counter with Error</h2>
+            <h2>Counter: with Error</h2>
             <ion-input
               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-input>
           </div>
         </div>
 
-        <script>
-          const customCounterInput = document.querySelector('ion-input#custom-counter');
-          customCounterInput.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 customCounterInput = document.querySelector('ion-input#custom-counter');
+      customCounterInput.counterFormatter = (inputLength, maxLength) => {
+        const length = maxLength - inputLength;
+        return `${maxLength - inputLength} characters left`;
+      };
+
+      const inputs = document.querySelectorAll('ion-input');
+
+      function toggleFill() {
+        inputs.forEach((input) => {
+          switch (input.fill) {
+            case 'outline':
+              input.fill = 'solid';
+              break;
+            case 'solid':
+              input.fill = undefined;
+              break;
+            default:
+              input.fill = 'outline';
+          }
+        });
+      }
+    </script>
   </body>
 </html>