feat(formfield): Add mdc-label class to <label>

PiperOrigin-RevId: 520396029

Author: kvizcarra

packages/mdc-form-field/README.md

@@ -37,7 +37,7 @@ Use the `mdc-form-field` element to wrap any combination of adjacent _input_ and
       ...
     </div>
   </div>
-  <label for="my-checkbox">This is my checkbox</label>
+  <label class="mdc-label" for="my-checkbox">This is my checkbox</label>
 </div>
 ```
 
@@ -72,7 +72,7 @@ By default, the input will be positioned before the label. You can position the
       ...
     </div>
   </div>
-  <label for="my-checkbox">This is my checkbox</label>
+  <label class="mdc-label" for="my-checkbox">This is my checkbox</label>
 </div>
 ```
 
@@ -88,15 +88,15 @@ If the label text is too long for a single line, it will wrap the text by defaul
       ...
     </div>
   </div>
-  <label for="my-checkbox">This some really really really long text</label>
+  <label class="mdc-label" for="my-checkbox">This some really really really long text</label>
 </div>
 ```
 
 ## `MDCFormField` Properties and Methods
 
 Property | Value Type | Description
 --- | --- | ---
-`input` | String | Gets and sets the form field input. 
+`input` | String | Gets and sets the form field input.
 
 In order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.
 

packages/mdc-form-field/test/component.test.ts

@@ -29,7 +29,7 @@ function getFixture() {
   return createFixture(html`
     <div class="mdc-form-field">
       <input type="radio" id="radio" checked name="radio">
-      <label for="radio">Foo</label>
+      <label class="mdc-label" for="radio">Foo</label>
     </div>
   `);
 }