Merge pull request #5616 from npeters-dev:text-field-optional-asterisk

PiperOrigin-RevId: 636585863

field/demo/demo.ts

@@ -38,6 +38,7 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     new Knob('focused', {ui: boolInput(), defaultValue: false}),
     new Knob('populated', {ui: boolInput(), defaultValue: false}),
     new Knob('required', {ui: boolInput(), defaultValue: false}),
+    new Knob('noAsterisk', {ui: boolInput(), defaultValue: false}),
     new Knob('Leading icon', {ui: boolInput(), defaultValue: false}),
     new Knob('Trailing icon', {ui: boolInput(), defaultValue: false}),
     new Knob('resizable', {ui: boolInput(), defaultValue: false}),

field/demo/stories.ts

@@ -22,6 +22,7 @@ export interface StoryKnobs {
   focused: boolean;
   populated: boolean;
   required: boolean;
+  noAsterisk: boolean;
   'Leading icon': boolean;
   'Trailing icon': boolean;
   resizable: boolean;
@@ -48,6 +49,7 @@ const filled: MaterialStoryInit<StoryKnobs> = {
       disabled,
       error,
       focused,
+      noAsterisk,
       populated,
       required,
       resizable,
@@ -73,6 +75,7 @@ const filled: MaterialStoryInit<StoryKnobs> = {
         .focused=${focused}
         .hasStart=${hasStart}
         .hasEnd=${hasEnd}
+        .noAsterisk=${noAsterisk}
         .populated=${populated}
         .required=${required}
         supporting-text=${supportingText}
@@ -95,6 +98,7 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
       disabled,
       error,
       focused,
+      noAsterisk,
       populated,
       required,
       resizable,
@@ -122,6 +126,7 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
         .focused=${focused}
         .hasStart=${hasStart}
         .hasEnd=${hasEnd}
+        .noAsterisk=${noAsterisk}
         .populated=${populated}
         .required=${required}
         supporting-text=${supportingText}

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', () => {

select/demo/demo.ts

@@ -32,6 +32,7 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),
     new Knob('quick', {ui: boolInput(), defaultValue: false}),
     new Knob('required', {ui: boolInput(), defaultValue: false}),
+    new Knob('noAsterisk', {ui: boolInput(), defaultValue: false}),
     new Knob('disabled', {ui: boolInput(), defaultValue: false}),
     new Knob('errorText', {ui: textInput(), defaultValue: ''}),
     new Knob('supportingText', {ui: textInput(), defaultValue: ''}),

select/demo/stories.ts

@@ -19,6 +19,7 @@ export interface StoryKnobs {
   typeaheadDelay: number;
   quick: boolean;
   required: boolean;
+  noAsterisk: boolean;
   disabled: boolean;
   errorText: string;
   supportingText: string;
@@ -41,6 +42,7 @@ const selects: MaterialStoryInit<StoryKnobs> = {
           .label=${knobs.label}
           .quick=${knobs.quick}
           .required=${knobs.required}
+          .noAsterisk=${knobs.noAsterisk}
           .disabled=${knobs.disabled}
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
@@ -58,6 +60,7 @@ const selects: MaterialStoryInit<StoryKnobs> = {
           .label=${knobs.label}
           .quick=${knobs.quick}
           .required=${knobs.required}
+          .noAsterisk=${knobs.noAsterisk}
           .disabled=${knobs.disabled}
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}

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}

textfield/demo/stories.ts

@@ -213,12 +213,14 @@ const forms: MaterialStoryInit<StoryKnobs> = {
             label="First name"
             name="first-name"
             required
+            no-asterisk
             autocomplete="given-name"></md-filled-text-field>
           <md-filled-text-field
             ?disabled=${knobs.disabled}
             label="Last name"
             name="last-name"
             required
+            no-asterisk
             autocomplete="family-name"></md-filled-text-field>
         </div>
         <div class="row buttons">

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}