refactor: use ifDefined directive for theme attribute propagation (#8276

)
vaadin · Dec 4, 2024 · 4f7958c · 4f7958c
1 parent 4dc1add
commit 4f7958c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/packages/number-field/src/vaadin-lit-number-field.js b/packages/number-field/src/vaadin-lit-number-field.js
@@ -5,6 +5,7 @@
  */
 import '@vaadin/input-container/src/vaadin-lit-input-container.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -45,7 +46,7 @@ class NumberField extends NumberFieldMixin(ThemableMixin(ElementMixin(PolylitMix
           .readonly="${this.readonly}"
           .disabled="${this.disabled}"
           .invalid="${this.invalid}"
-          theme="${this._theme}"
+          theme="${ifDefined(this._theme)}"
         >
           <div
             part="decrease-button"

diff --git a/packages/select/src/vaadin-lit-select.js b/packages/select/src/vaadin-lit-select.js
@@ -9,6 +9,7 @@ import './vaadin-lit-select-list-box.js';
 import './vaadin-lit-select-overlay.js';
 import './vaadin-lit-select-value-button.js';
 import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -65,7 +66,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lit
           .readonly="${this.readonly}"
           .disabled="${this.disabled}"
           .invalid="${this.invalid}"
-          theme="${this._theme}"
+          theme="${ifDefined(this._theme)}"
           @click="${this._onClick}"
         >
           <slot name="prefix" slot="prefix"></slot>
@@ -89,7 +90,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lit
         .withBackdrop="${this._phone}"
         .renderer="${this.renderer || this.__defaultRenderer}"
         ?phone="${this._phone}"
-        theme="${this._theme}"
+        theme="${ifDefined(this._theme)}"
         ?no-vertical-overlap="${this.noVerticalOverlap}"
         @opened-changed="${this._onOpenedChanged}"
         @vaadin-overlay-open="${this._onOverlayOpen}"

diff --git a/packages/text-area/src/vaadin-lit-text-area.js b/packages/text-area/src/vaadin-lit-text-area.js
@@ -5,6 +5,7 @@
  */
 import '@vaadin/input-container/src/vaadin-lit-input-container.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -46,7 +47,7 @@ export class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(PolylitMi
           .readonly="${this.readonly}"
           .disabled="${this.disabled}"
           .invalid="${this.invalid}"
-          theme="${this._theme}"
+          theme="${ifDefined(this._theme)}"
           @scroll="${this._onScroll}"
         >
           <slot name="prefix" slot="prefix"></slot>

diff --git a/packages/text-field/src/vaadin-lit-text-field.js b/packages/text-field/src/vaadin-lit-text-field.js
@@ -5,6 +5,7 @@
  */
 import '@vaadin/input-container/src/vaadin-lit-input-container.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -45,7 +46,7 @@ export class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(Polylit
           .readonly="${this.readonly}"
           .disabled="${this.disabled}"
           .invalid="${this.invalid}"
-          theme="${this._theme}"
+          theme="${ifDefined(this._theme)}"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>