refactor: mark disabled and checked as boolean values in lit temp…

…lates. PiperOrigin-RevId: 462716556
material-components · Jul 22, 2022 · 10a6d35 · 10a6d35
1 parent 42168d3
commit 10a6d35
Show file tree

Hide file tree

Showing 16 changed files with 21 additions and 21 deletions.
diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -119,7 +119,7 @@ export abstract class Button extends ActionElement implements ButtonState {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult|string {
-    return html`<md-ripple class="md3-button__ripple" .disabled="${
+    return html`<md-ripple class="md3-button__ripple" ?disabled="${
         this.disabled}"></md-ripple>`;
   }
 

diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts
@@ -103,7 +103,7 @@ export class Checkbox extends ActionElement {
   /** @soyTemplate */
   protected renderRipple(): TemplateResult {
     return html`<md-ripple
-        .disabled="${this.disabled}"
+        ?disabled="${this.disabled}"
         unbounded></md-ripple>`;
   }
 
@@ -158,7 +158,7 @@ export class Checkbox extends ActionElement {
               data-indeterminate="${this.indeterminate ? 'true' : 'false'}"
               ?disabled="${this.disabled}"
               .indeterminate="${this.indeterminate}"
-              .checked="${this.checked}"
+              ?checked="${this.checked}"
               .value="${this.value}"
               @change="${this.handleChange}"
               @focus="${this.handleFocus}"

diff --git a/fab/lib/fab-shared.ts b/fab/lib/fab-shared.ts
@@ -93,7 +93,7 @@ export abstract class FabShared extends ActionElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult {
-    return html`<md-ripple class="md3-fab__ripple" .disabled="${
+    return html`<md-ripple class="md3-fab__ripple" ?disabled="${
         this.disabled}"></md-ripple>`;
   }
 

diff --git a/field/test/field_test.ts b/field/test/field_test.ts
@@ -65,7 +65,7 @@ describe('Field', () => {
           return html`
             <md-test-field
               .label=${props.label}
-              .disabled=${props.disabled ?? false}
+              ?disabled=${props.disabled ?? false}
               .error=${props.error ?? false}
               .populated=${props.populated ?? false}
               .required=${props.required ?? false}

diff --git a/field/test/filled-field_test.ts b/field/test/filled-field_test.ts
@@ -60,7 +60,7 @@ describe('Field', () => {
             return html`
               <md-test-filled-field
                 .label=${props.label}
-                .disabled=${props.disabled ?? false}
+                ?disabled=${props.disabled ?? false}
                 .error=${props.error ?? false}
                 .populated=${props.populated ?? false}
                 .required=${props.required ?? false}

diff --git a/field/test/outlined-field_test.ts b/field/test/outlined-field_test.ts
@@ -45,7 +45,7 @@ describe('Field', () => {
             return html`
               <md-test-outlined-field
                 .label=${props.label}
-                .disabled=${props.disabled ?? false}
+                ?disabled=${props.disabled ?? false}
                 .error=${props.error ?? false}
                 .populated=${props.populated ?? false}
                 .required=${props.required ?? false}

diff --git a/iconbutton/lib/icon-button-toggle.ts b/iconbutton/lib/icon-button-toggle.ts
@@ -56,7 +56,7 @@ export abstract class IconButtonToggle extends ActionElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult {
-    return html`<md-ripple .disabled="${
+    return html`<md-ripple ?disabled="${
         this.disabled}" unbounded> </md-ripple>`;
   }
 

diff --git a/iconbutton/lib/icon-button.ts b/iconbutton/lib/icon-button.ts
@@ -44,7 +44,7 @@ export abstract class IconButton extends ActionElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult|string {
-    return html`<md-ripple .disabled="${
+    return html`<md-ripple ?disabled="${
         this.disabled}" unbounded> </md-ripple>`;
   }
 

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
@@ -126,8 +126,8 @@ export class Radio extends ActionElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult|string {
-    return html`<md-ripple unbounded 
-        .disabled="${this.disabled}"></md-ripple>`;
+    return html`<md-ripple unbounded
+        ?disabled="${this.disabled}"></md-ripple>`;
   }
 
   /** @soyTemplate */
@@ -248,7 +248,7 @@ export class Radio extends ActionElement {
           aria-label="${ifDefined(this.ariaLabel)}"
           aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
           aria-describedby="${ifDefined(this.ariaDescribedBy)}"
-          .checked="${this.checked}"
+          ?checked="${this.checked}"
           .value="${this.value}"
           ?disabled="${this.disabled}"
           @change="${this.changeHandler}"

diff --git a/segmented_button/lib/segmented-button.ts b/segmented_button/lib/segmented-button.ts
@@ -114,7 +114,7 @@ export class SegmentedButton extends ActionElement {
         tabindex="${this.disabled ? '-1' : '0'}"
         aria-label="${ifDefined(this.ariaLabel)}"
         aria-pressed=${this.selected}
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
         @pointerdown="${this.handlePointerDown}"
@@ -159,7 +159,7 @@ export class SegmentedButton extends ActionElement {
 
   /** @soyTemplate */
   protected renderRipple(): TemplateResult|string {
-    return html`<md-ripple .disabled="${
+    return html`<md-ripple ?disabled="${
         this.disabled}" class="md3-segmented-button__ripple"> </md-ripple>`;
   }
 

diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts
@@ -75,7 +75,7 @@ export class Switch extends ActionElement {
         aria-checked="${this.selected}"
         aria-label="${ifDefined(ariaLabelValue)}"
         aria-labelledby="${ifDefined(ariaLabelledByValue)}"
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         @click=${this.handleClick}
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
@@ -95,7 +95,7 @@ export class Switch extends ActionElement {
         type="checkbox"
         aria-hidden="true"
         name="${this.name}"
-        .checked=${this.selected}
+        ?checked=${this.selected}
         .value=${this.value}
       >
     `;

diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
@@ -37,7 +37,7 @@ export class MdFilledTextField extends FilledTextField {
       <md-filled-field
         class="md3-text-field__field"
         id=${this.fieldId}
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
         .populated=${!!this.value}

diff --git a/textfield/lib/filled-text-field_test.ts b/textfield/lib/filled-text-field_test.ts
@@ -28,7 +28,7 @@ class TestTextField extends FilledTextField {
       <md-filled-field
         class="md3-text-field__field"
         id=${this.fieldId}
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
         .populated=${Boolean(this.value)}

diff --git a/textfield/lib/outlined-text-field_test.ts b/textfield/lib/outlined-text-field_test.ts
@@ -28,7 +28,7 @@ class TestTextField extends OutlinedTextField {
        <md-outlined-field
          class="md3-text-field__field"
          id=${this.fieldId}
-         .disabled=${this.disabled}
+         ?disabled=${this.disabled}
          .error=${this.error}
          .label=${this.label}
          .populated=${Boolean(this.value)}

diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts
@@ -32,7 +32,7 @@ class TestTextField extends TextField {
       <md-filled-field
         class="md3-text-field__field"
         id=${this.fieldId}
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
         .populated=${Boolean(this.value)}

diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
@@ -37,7 +37,7 @@ export class MdOutlinedTextField extends OutlinedTextField {
       <md-outlined-field
         class="md3-text-field__field"
         id=${this.fieldId}
-        .disabled=${this.disabled}
+        ?disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
         .populated=${!!this.value}