From be5bb43100fbf0df3a7cfec4c4d4399559a23114 Mon Sep 17 00:00:00 2001
From: Nino Peters <dev@ninopeters.de>
Date: Tue, 14 May 2024 14:49:49 +0200
Subject: [PATCH 1/2] feat(textfield): make required asterisk optional

---
 field/internal/field.ts          |  5 ++++-
 field/internal/field_test.ts     | 16 ++++++++++++++++
 textfield/internal/text-field.ts |  7 +++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/field/internal/field.ts b/field/internal/field.ts
index e60ee26a9c..345e146358 100644
--- a/field/internal/field.ts
+++ b/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}
diff --git a/field/internal/field_test.ts b/field/internal/field_test.ts
index 5f40b4b46e..8785e19551 100644
--- a/field/internal/field_test.ts
+++ b/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', () => {
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
index f76fc96056..989aaa4d1c 100644
--- a/textfield/internal/text-field.ts
+++ b/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}

From 8f194a51dbc85ead2d9d8c10e0be69f183788a31 Mon Sep 17 00:00:00 2001
From: Nino Peters <dev@ninopeters.de>
Date: Wed, 22 May 2024 14:46:03 +0200
Subject: [PATCH 2/2] feat(select): make required asterisk optional

---
 select/internal/select.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/select/internal/select.ts b/select/internal/select.ts
index 792fa6df4d..0f02f78073 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -106,6 +106,12 @@ export abstract class Select extends selectBaseClass {
    */
   @property() label = '';
 
+  /**
+   * Disables the asterisk on the floating label, when the select is
+   * required.
+   */
+  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;
+
   /**
    * Conveys additional information below the select, such as how it should
    * be used.
@@ -395,6 +401,7 @@ export abstract class Select extends selectBaseClass {
           aria-controls="listbox"
           class="field"
           label=${this.label}
+          ?no-asterisk=${this.noAsterisk}
           .focused=${this.focused || this.open}
           .populated=${!!this.displayText}
           .disabled=${this.disabled}