feat: make Form/FieldLabel use new Textfield markup

BREAKING CHANGE: migrated to next Textfield markup

Author: lazd

components/fieldlabel/metadata/fieldlabel.yml

@@ -6,24 +6,32 @@ examples:
     name: Standard
     markup: |
       <label for="lifestory" class="spectrum-FieldLabel">Life Story</label>
-      <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">
+      <div class="spectrum-Textfield">
+        <input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
+      </div>
 
       <label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life Story</label>
-      <input id="lifestory2" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>
+      <div class="spectrum-Textfield is-disabled">
+        <input id="lifestory2" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input" disabled>
+      </div>
   - id: fieldlabel-side
     name: Left
     description: A left aligned field label.
     markup: |
       <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life Story</label>
 
-      <textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+      <div class="spectrum-Textfield spectrum-Textfield--multiline">
+        <textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
+      </div>
   - id: fieldlabel-side
     name: Right
     description: A right aligned field label.
     markup: |
       <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life Story</label>
 
-      <textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+      <div class="spectrum-Textfield spectrum-Textfield--multiline">
+        <textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
+      </div>
   - id: fieldlabel
     name: Required
     description: Field label for a required field.
@@ -33,10 +41,14 @@ examples:
           <use xlink:href="#spectrum-css-icon-Asterisk" />
         </svg>
       </label>
-      <input id="lifestory3" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">
+      <div class="spectrum-Textfield">
+        <input id="lifestory3" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
+      </div>
 
       <label for="lifestory4" class="spectrum-FieldLabel">Life Story (Required)</label>
-      <input id="lifestory4" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">
+      <div class="spectrum-Textfield">
+        <input id="lifestory4" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input">
+      </div>
 
       <br/>
       <br/>
@@ -46,12 +58,16 @@ examples:
           <use xlink:href="#spectrum-css-icon-Asterisk" />
         </svg>
       </label>
-      <textarea id="lifestory5" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+      <div class="spectrum-Textfield spectrum-Textfield--multiline">
+        <textarea id="lifestory5" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input"></textarea>
+      </div>
 
 
       <label for="lifestory6" class="spectrum-FieldLabel is-disabled">Life Story
         <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
           <use xlink:href="#spectrum-css-icon-Asterisk" />
         </svg>
       </label>
-      <input id="lifestory6" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>
+      <div class="spectrum-Textfield is-disabled">
+        <input id="lifestory6" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield-input" disabled>
+      </div>

components/fieldlabel/metadata/form.yml

@@ -9,13 +9,17 @@ examples:
         <div class="spectrum-Form-item">
           <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
           <div class="spectrum-Form-itemField">
-            <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+            <div class="spectrum-Textfield spectrum-Textfield--multiline">
+              <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
           <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress">Email Address</label>
           <div class="spectrum-Form-itemField">
-            <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            <div class="spectrum-Textfield">
+              <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
@@ -75,7 +79,9 @@ examples:
           <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper">Age</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-Stepper">
-              <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              <div class="spectrum-Textfield spectrum-Stepper-textfield">
+                <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              </div>
               <span class="spectrum-Stepper-buttons">
                 <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
@@ -100,13 +106,17 @@ examples:
         <div class="spectrum-Form-item">
           <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--right">Company Title</label>
           <div class="spectrum-Form-itemField">
-            <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+            <div class="spectrum-Textfield spectrum-Textfield--multiline">
+              <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
           <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-emailaddress">Email Address</label>
           <div class="spectrum-Form-itemField">
-            <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            <div class="spectrum-Textfield">
+              <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
@@ -166,7 +176,9 @@ examples:
           <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="fieldLabelExample-stepper">Age</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-Stepper">
-              <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              <div class="spectrum-Textfield spectrum-Stepper-textfield">
+                <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              </div>
               <span class="spectrum-Stepper-buttons">
                 <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
@@ -191,13 +203,17 @@ examples:
         <div class="spectrum-Form-item">
           <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel">Company Title</label>
           <div class="spectrum-Form-itemField">
-            <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
+            <div class="spectrum-Textfield spectrum-Textfield--multiline">
+              <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield-input"></textarea>
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
           <label class="spectrum-Form-itemLabel" for="fieldLabelExample-emailaddress">Email Address</label>
           <div class="spectrum-Form-itemField">
-            <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            <div class="spectrum-Textfield">
+              <input class="spectrum-Textfield-input" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
+            </div>
           </div>
         </div>
         <div class="spectrum-Form-item">
@@ -257,7 +273,9 @@ examples:
           <label class="spectrum-Form-itemLabel" for="fieldLabelExample-stepper">Age</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-Stepper">
-              <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              <div class="spectrum-Textfield spectrum-Stepper-textfield">
+                <input type="number" class="spectrum-Textfield-input spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
+              </div>
               <span class="spectrum-Stepper-buttons">
                 <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
                   <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">