Docs(web): Add TextField demo #DS-913

- TextField demo in web is now same as demo in web-react and web-twig
lmc-eu · Sep 19, 2023 · 2fed992 · 2fed992
1 parent e179f05
commit 2fed992
Showing 1 changed file with 56 additions and 14 deletions.
diff --git a/packages/web/src/scss/components/TextField/index.html b/packages/web/src/scss/components/TextField/index.html
@@ -1,9 +1,11 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Default</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldDefault" class="TextField__label">Label</label>
       <input type="text" id="textFieldDefault" class="TextField__input" name="default" placeholder="Placeholder" />
@@ -18,47 +20,63 @@ <h2 class="docs-Heading">Default</h2>
       <label for="textFieldPassword" class="TextField__label">Label</label>
       <input type="password" id="textFieldPassword" class="TextField__input" name="password" placeholder="Placeholder" value="Filled" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Required</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldRequired" class="TextField__label TextField__label--required">Label</label>
       <input type="text" id="textFieldRequired" class="TextField__input" name="required" placeholder="Placeholder" required />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Hidden Label</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldHiddenLabel" class="TextField__label TextField__label--hidden">Label</label>
       <input type="text" id="textFieldHiddenLabel" class="TextField__input" name="hiddenLabel" placeholder="Placeholder" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Helper Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldHelperText" class="TextField__label">Label</label>
       <input type="text" id="textFieldHelperText" class="TextField__input" name="helperText" placeholder="Placeholder" />
       <div class="TextField__helperText">Helper text</div>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Disabled</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField TextField--disabled">
       <label for="textFieldDisabled" class="TextField__label">Label</label>
       <input type="text" id="textFieldDisabled" class="TextField__input" name="disabled" placeholder="Placeholder" disabled />
@@ -77,13 +95,17 @@ <h2 class="docs-Heading">Disabled</h2>
         value="Filled"
       />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Validation State with Validation Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField TextField--success">
       <label for="textFieldSuccess" class="TextField__label">Label</label>
       <input type="text" id="textFieldSuccess" class="TextField__input" name="success" placeholder="Placeholder" value="Filled" />
@@ -118,43 +140,57 @@ <h2 class="docs-Heading">Validation State with Validation Text</h2>
       <div class="TextField__helperText">This is helper text</div>
       <div class="TextField__validationText">Danger validation text</div>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Fluid</h2>
 
-  <div class="TextField TextField--fluid">
-    <label for="textFieldFluid" class="TextField__label">Label</label>
-    <input type="text" id="textFieldFluid" class="TextField__input" name="fluid" placeholder="Placeholder" value="Filled" />
+  <div class="docs-Stack docs-Stack--start">
+
+    <div class="TextField TextField--fluid">
+      <label for="textFieldFluid" class="TextField__label">Label</label>
+      <input type="text" id="textFieldFluid" class="TextField__input" name="fluid" placeholder="Placeholder" value="Filled" />
+    </div>
+
   </div>
+
 </section>
 
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Size</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldSize" class="TextField__label">4000 (in Roman numerals)</label>
       <input type="text" size="4" id="textFieldSize" class="TextField__input" name="size" placeholder="Placeholder" />
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Inline</h2>
 
-  <div class="docs-FormFieldGrid">
-    <div style="display: flex; gap: 1rem; align-items: flex-start">
+  <div class="docs-Stack docs-Stack--start">
+
+    <div style="display: flex; gap: 1rem; align-items: flex-start; max-width: 320px;">
       <div class="TextField">
         <label for="textFieldInline" class="TextField__label TextField__label--hidden">Hidden Label</label>
         <input type="text" id="textFieldInline" class="TextField__input" name="inline" placeholder="Placeholder" value="Filled" />
       </div>
       <button type="button" class="Button Button--primary Button--medium">Button</button>
     </div>
 
-    <div style="display: flex; gap: 1rem; align-items: flex-start">
+    <div style="display: flex; gap: 1rem; align-items: flex-start; max-width: 320px;">
       <div class="TextField">
         <label for="textFieldInlineFirst" class="TextField__label TextField__label--hidden">Hidden Label</label>
         <input type="text" id="textFieldInlineFirst" class="TextField__input" name="inlineFirst" placeholder="Placeholder" value="Filled" />
@@ -187,13 +223,17 @@ <h2 class="docs-Heading">Inline</h2>
       </div>
       <button type="button" class="Button Button--primary Button--medium">Button</button>
     </div>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Password Toggle</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <div class="TextField">
       <label for="textFieldPasswordToggle" class="TextField__label">Password Toggle</label>
       <div class="TextField__passwordToggle">
@@ -258,7 +298,9 @@ <h2 class="docs-Heading">Password Toggle</h2>
         </button>
       </div>
     </div>
+
   </div>
+
 </section>
 
 {{/layout/plain }}