refactor: rename theme property to _theme, deprecate theme (#3529)

Co-authored-by: Marcin Sikorski <marcin.s@xml-int.com>
vaadin · Mar 11, 2022 · 7634ebc · 7634ebc
1 parent 189177b
commit 7634ebc
Show file tree

Hide file tree

Showing 33 changed files with 153 additions and 92 deletions.
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -117,7 +117,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
             abbr="[[item.abbr]]"
             img="[[item.img]]"
             part="avatar"
-            theme$="[[theme]]"
+            theme$="[[_theme]]"
             i18n="[[i18n]]"
             color-index="[[item.colorIndex]]"
           ></vaadin-avatar>
@@ -127,7 +127,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
           part="avatar"
           hidden$="[[__computeMoreHidden(items.length, __itemsInView, __maxReached)]]"
           abbr="[[__computeMore(items.length, __itemsInView, maxItemsVisible)]]"
-          theme$="[[theme]]"
+          theme$="[[_theme]]"
           on-click="_onOverflowClick"
           on-keydown="_onOverflowKeyDown"
           aria-haspopup="listbox"
@@ -144,7 +144,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
                   img="[[item.img]]"
                   i18n="[[i18n]]"
                   part="avatar"
-                  theme$="[[theme]]"
+                  theme$="[[_theme]]"
                   color-index="[[item.colorIndex]]"
                   tabindex="-1"
                   aria-hidden="true"

diff --git a/packages/combo-box/src/vaadin-combo-box-light.js b/packages/combo-box/src/vaadin-combo-box-light.js
@@ -86,7 +86,7 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
         _item-id-path="[[itemIdPath]]"
         _item-label-path="[[itemLabelPath]]"
         loading="[[loading]]"
-        theme="[[theme]]"
+        theme="[[_theme]]"
       ></vaadin-combo-box-dropdown>
     `;
   }

diff --git a/packages/combo-box/src/vaadin-combo-box.js b/packages/combo-box/src/vaadin-combo-box.js
@@ -179,7 +179,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
           readonly="[[readonly]]"
           disabled="[[disabled]]"
           invalid="[[invalid]]"
-          theme$="[[theme]]"
+          theme$="[[_theme]]"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
@@ -207,7 +207,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
         _item-id-path="[[itemIdPath]]"
         _item-label-path="[[itemLabelPath]]"
         loading="[[loading]]"
-        theme="[[theme]]"
+        theme="[[_theme]]"
       ></vaadin-combo-box-dropdown>
     `;
   }

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js b/packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js
@@ -116,7 +116,7 @@ class ConfirmDialogDialog extends Dialog {
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js
@@ -81,7 +81,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
         id="dialog"
         opened="{{opened}}"
         aria-label="[[_getAriaLabel(header)]]"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         no-close-on-outside-click
         no-close-on-esc="[[noCloseOnEsc]]"
       ></vaadin-confirm-dialog-dialog>

diff --git a/packages/context-menu/src/vaadin-context-menu-overlay.js b/packages/context-menu/src/vaadin-context-menu-overlay.js
@@ -55,7 +55,7 @@ class ContextMenuOverlay extends PositionMixin(OverlayElement) {
   }
 
   static get observers() {
-    return ['_themeChanged(theme)'];
+    return ['_themeChanged(_theme)'];
   }
 
   ready() {

diff --git a/packages/context-menu/src/vaadin-context-menu.js b/packages/context-menu/src/vaadin-context-menu.js
@@ -224,7 +224,7 @@ class ContextMenu extends ControllerMixin(ElementMixin(ThemePropertyMixin(ItemsM
         with-backdrop="[[_phone]]"
         phone$="[[_phone]]"
         model="[[_context]]"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
       >
       </vaadin-context-menu-overlay>
     `;

diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.js b/packages/context-menu/src/vaadin-contextmenu-items-mixin.js
@@ -166,8 +166,8 @@ export const ItemsMixin = (superClass) =>
       subMenuOverlay._setParentOverlay(parent);
 
       // Set theme attribute from parent element
-      if (parent.theme) {
-        subMenu.setAttribute('theme', parent.theme);
+      if (parent.hasAttribute('theme')) {
+        subMenu.setAttribute('theme', parent.getAttribute('theme'));
       } else {
         subMenu.removeAttribute('theme');
       }
@@ -217,7 +217,7 @@ export const ItemsMixin = (superClass) =>
           component.setAttribute('role', 'separator');
         }
 
-        this._setMenuItemTheme(component, item, this.theme);
+        this._setMenuItemTheme(component, item, this._theme);
 
         component._item = item;
 
@@ -280,7 +280,7 @@ export const ItemsMixin = (superClass) =>
       `;
         flush();
         const listBox = root.querySelector('vaadin-context-menu-list-box');
-        this.theme && listBox.setAttribute('theme', this.theme);
+        this._theme && listBox.setAttribute('theme', this._theme);
         listBox.classList.add('vaadin-menu-list-box');
         requestAnimationFrame(() => listBox.setAttribute('role', 'menu'));
 
@@ -377,8 +377,8 @@ export const ItemsMixin = (superClass) =>
         });
       } else {
         const listBox = root.querySelector('vaadin-context-menu-list-box');
-        if (this.theme) {
-          listBox.setAttribute('theme', this.theme);
+        if (this._theme) {
+          listBox.setAttribute('theme', this._theme);
         } else {
           listBox.removeAttribute('theme');
         }

diff --git a/packages/crud/src/vaadin-crud-dialog.js b/packages/crud/src/vaadin-crud-dialog.js
@@ -108,7 +108,7 @@ class CrudDialog extends Dialog {
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"

diff --git a/packages/crud/src/vaadin-crud.js b/packages/crud/src/vaadin-crud.js
@@ -242,7 +242,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         <div id="main">
           <slot name="grid">
             <vaadin-crud-grid
-              theme$="[[theme]]"
+              theme$="[[_theme]]"
               id="grid"
               include="[[include]]"
               exclude="[[exclude]]"
@@ -282,12 +282,12 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
         aria-label="[[__editorAriaLabel]]"
         no-close-on-outside-click="[[__isDirty]]"
         no-close-on-esc="[[__isDirty]]"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         on-opened-changed="__onDialogOpened"
       ></vaadin-crud-dialog>
 
       <vaadin-confirm-dialog
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         id="confirmCancel"
         on-confirm="__confirmCancel"
         cancel
@@ -299,7 +299,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       ></vaadin-confirm-dialog>
 
       <vaadin-confirm-dialog
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         id="confirmDelete"
         on-confirm="__confirmDelete"
         cancel
@@ -608,7 +608,7 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
   static get observers() {
     return [
       '__headerNodeChanged(_headerNode, __isNew, i18n.newItem, i18n.editItem)',
-      '__formChanged(_form, theme, include, exclude)',
+      '__formChanged(_form, _theme, include, exclude)',
       '__onI18Change(i18n, _grid)',
       '__onEditOnClickChange(editOnClick, _grid)',
       '__hostPropsChanged(' +

diff --git a/packages/date-picker/src/vaadin-date-picker-light.js b/packages/date-picker/src/vaadin-date-picker-light.js
@@ -75,7 +75,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         on-vaadin-overlay-close="_onOverlayClosed"
         restore-focus-on-close
         restore-focus-node="[[inputElement]]"
-        theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
+        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
       >
         <template>
           <vaadin-date-picker-overlay-content
@@ -92,7 +92,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
             on-date-tap="_close"
             role="dialog"
             part="overlay-content"
-            theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
+            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
           >
           </vaadin-date-picker-overlay-content>
         </template>

diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content.js b/packages/date-picker/src/vaadin-date-picker-overlay-content.js
@@ -182,7 +182,7 @@ class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(Po
               min-date="[[minDate]]"
               max-date="[[maxDate]]"
               part="month"
-              theme$="[[theme]]"
+              theme$="[[_theme]]"
               on-keydown="__onMonthCalendarKeyDown"
             >
             </vaadin-month-calendar>

diff --git a/packages/date-picker/src/vaadin-date-picker.js b/packages/date-picker/src/vaadin-date-picker.js
@@ -138,7 +138,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
           readonly="[[readonly]]"
           disabled="[[disabled]]"
           invalid="[[invalid]]"
-          theme$="[[theme]]"
+          theme$="[[_theme]]"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
@@ -158,7 +158,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       <vaadin-date-picker-overlay
         id="overlay"
         fullscreen$="[[_fullscreen]]"
-        theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
+        theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
         restore-focus-on-close
@@ -180,7 +180,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
             role="dialog"
             on-date-tap="_close"
             part="overlay-content"
-            theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
+            theme$="[[__getOverlayTheme(_theme, _overlayInitialized)]]"
           ></vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>

diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -370,7 +370,7 @@ class DateTimePicker extends FieldMixin(
       '__readonlyChanged(readonly)',
       '__i18nChanged(i18n.*)',
       '__autoOpenDisabledChanged(autoOpenDisabled)',
-      '__themeChanged(theme, __datePicker, __timePicker)',
+      '__themeChanged(_theme, __datePicker, __timePicker)',
       '__pickersChanged(__datePicker, __timePicker)'
     ];
   }

diff --git a/packages/dialog/src/vaadin-dialog.js b/packages/dialog/src/vaadin-dialog.js
@@ -184,7 +184,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"

diff --git a/packages/login/src/vaadin-login-form.js b/packages/login/src/vaadin-login-form.js
@@ -58,7 +58,7 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
         }
       </style>
       <vaadin-login-form-wrapper
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         part="vaadin-login-native-form-wrapper"
         action="{{action}}"
         disabled="{{disabled}}"

diff --git a/packages/login/src/vaadin-login-overlay.js b/packages/login/src/vaadin-login-overlay.js
@@ -55,7 +55,7 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
         with-backdrop
         title="[[title]]"
         description="[[description]]"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
       >
         <vaadin-login-form
           theme="with-overlay"

diff --git a/packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js
@@ -197,29 +197,6 @@ export const ButtonsMixin = (superClass) =>
       button.setAttribute('tabindex', disabled ? '-1' : '0');
     }
 
-    /**
-     * @param {string | null} theme
-     * @protected
-     * @override
-     */
-    _setTheme(theme) {
-      super._setTheme(theme);
-
-      // Initializing, do nothing
-      if (!this.shadowRoot) {
-        return;
-      }
-
-      this.__applyTheme(theme);
-    }
-
-    /** @private */
-    __applyTheme(theme) {
-      this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
-
-      this.__detectOverflow();
-    }
-
     /** @protected */
     _setButtonTheme(btn, hostTheme) {
       let theme = hostTheme;
@@ -277,9 +254,10 @@ export const ButtonsMixin = (superClass) =>
         this._appendButton(button);
         this._setButtonDisabled(button, item.disabled);
         this._initButtonAttrs(button);
+        this._setButtonTheme(button, this._theme);
       });
 
-      this.__applyTheme(this.theme);
+      this.__detectOverflow();
     }
 
     /**

diff --git a/packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-interactions-mixin.js
@@ -27,7 +27,7 @@ export const InteractionsMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_itemsChanged(items, items.splices)', '_themeChanged(theme)'];
+      return ['_itemsChanged(items, items.splices)'];
     }
 
     /** @protected */
@@ -54,15 +54,6 @@ export const InteractionsMixin = (superClass) =>
       return this.getAttribute('dir') === 'rtl';
     }
 
-    /** @private */
-    _themeChanged(theme) {
-      if (theme) {
-        this._subMenu.setAttribute('theme', theme);
-      } else {
-        this._subMenu.removeAttribute('theme');
-      }
-    }
-
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);

diff --git a/packages/menu-bar/src/vaadin-menu-bar.d.ts b/packages/menu-bar/src/vaadin-menu-bar.d.ts
@@ -135,6 +135,12 @@ declare class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(Eleme
    */
   i18n: MenuBarI18n;
 
+  /**
+   * A callback for the `_theme` property observer.
+   * It propagates the host theme to the buttons and the sub menu.
+   */
+  protected _themeChanged(theme: string | null): void;
+
   addEventListener<K extends keyof MenuBarEventMap>(
     type: K,
     listener: (this: MenuBar, ev: MenuBarEventMap[K]) => void,

diff --git a/packages/menu-bar/src/vaadin-menu-bar.js b/packages/menu-bar/src/vaadin-menu-bar.js
@@ -201,6 +201,10 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
     };
   }
 
+  static get observers() {
+    return ['_themeChanged(_theme)'];
+  }
+
   /**
    * Override method inherited from `DisabledMixin`
    * to update the `disabled` property for the buttons
@@ -218,6 +222,26 @@ class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(
     }
   }
 
+  /**
+   * A callback for the `_theme` property observer.
+   * It propagates the host theme to the buttons and the sub menu.
+   *
+   * @param {string | null} theme
+   * @protected
+   */
+  _themeChanged(theme) {
+    if (this.shadowRoot) {
+      this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
+      this.__detectOverflow();
+    }
+
+    if (theme) {
+      this._subMenu.setAttribute('theme', theme);
+    } else {
+      this._subMenu.removeAttribute('theme');
+    }
+  }
+
   /** @private */
   __updateButtonsDisabled(disabled) {
     this._buttons.forEach((btn) => {

diff --git a/packages/notification/src/vaadin-notification.js b/packages/notification/src/vaadin-notification.js
@@ -260,7 +260,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
           display: none;
         }
       </style>
-      <vaadin-notification-card theme$="[[theme]]"> </vaadin-notification-card>
+      <vaadin-notification-card theme$="[[_theme]]"> </vaadin-notification-card>
     `;
   }