feat(textfield): make required asterisk optional

field/internal/field.ts

@@ -25,6 +25,7 @@ export class Field extends LitElement {
   @property({type: Boolean}) error = false;
   @property({type: Boolean}) focused = false;
   @property() label = '';
+  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;
   @property({type: Boolean}) populated = false;
   @property({type: Boolean}) required = false;
   @property({type: Boolean}) resizable = false;
@@ -242,7 +243,9 @@ export class Field extends LitElement {
     };
 
     // Add '*' if a label is present and the field is required
-    const labelText = `${this.label}${this.required ? '*' : ''}`;
+    const labelText = `${this.label}${
+      this.required && !this.noAsterisk ? '*' : ''
+    }`;
 
     return html`
       <span class="label ${classMap(classes)}" aria-hidden=${!visible}

field/internal/field_test.ts

@@ -52,6 +52,7 @@ describe('Field', () => {
     const template = html`
       <md-test-field
         .label=${props.label ?? ''}
+        ?no-asterisk=${props.noAsterisk ?? false}
         ?disabled=${props.disabled ?? false}
         .error=${props.error ?? false}
         .populated=${props.populated ?? false}
@@ -334,6 +335,21 @@ describe('Field', () => {
         )
         .toBe('');
     });
+
+    it('should not render asterisk if required, but noAsterisk', async () => {
+      // Setup.
+      // Test case.
+      const labelValue = 'Label';
+      const {instance} = await setupTest({
+        required: true, label: labelValue, noAsterisk: true
+      });
+      //Assertion
+      expect(instance.labelText)
+        .withContext(
+          'label test should equal label without asterisk, when required and noAsterisk',
+        )
+        .toBe(labelValue);
+    });
   });
 
   describe('supporting text', () => {

textfield/internal/text-field.ts

@@ -132,6 +132,12 @@ export abstract class TextField extends textFieldBaseClass {
    */
   @property() label = '';
 
+  /**
+   * Disables the asterisk on the floating label, when the text field is
+   * required.
+   */
+  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;
+
   /**
    * Indicates that the user must specify a value for the input before the
    * owning form can be submitted and will render an error state when
@@ -554,6 +560,7 @@ export abstract class TextField extends textFieldBaseClass {
       ?has-end=${this.hasTrailingIcon}
       ?has-start=${this.hasLeadingIcon}
       label=${this.label}
+      ?no-asterisk=${this.noAsterisk}
       max=${this.maxLength}
       ?populated=${!!this.value}
       ?required=${this.required}