refactor!: remove overlayClass property from overlay components (#9926)

Author: sissbruecker

packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts

@@ -6,7 +6,6 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { AvatarI18n } from '@vaadin/avatar/src/vaadin-avatar.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 
 export interface AvatarGroupI18n extends AvatarI18n {
@@ -33,7 +32,6 @@ export declare function AvatarGroupMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<AvatarGroupMixinClass> &
   Constructor<I18nMixinClass<AvatarGroupI18n>> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ResizeMixinClass> &
   T;
 

packages/avatar-group/src/vaadin-avatar-group-mixin.js

@@ -7,7 +7,6 @@ import { html, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
@@ -29,10 +28,9 @@ const DEFAULT_I18N = {
  * @polymerMixin
  * @mixes I18nMixin
  * @mixes ResizeMixin
- * @mixes OverlayClassMixin
  */
 export const AvatarGroupMixin = (superClass) =>
-  class AvatarGroupMixinClass extends I18nMixin(DEFAULT_I18N, ResizeMixin(OverlayClassMixin(superClass))) {
+  class AvatarGroupMixinClass extends I18nMixin(DEFAULT_I18N, ResizeMixin(superClass)) {
     static get properties() {
       return {
         /**

packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js

@@ -331,19 +331,3 @@ snapshots["vaadin-avatar-group opened overlay"] =
 `;
 /* end snapshot vaadin-avatar-group opened overlay */
 
-snapshots["vaadin-avatar-group opened overlay class"] = 
-`<vaadin-avatar-group-overlay
-  class="avatar-group-overlay custom"
-  exportparts="overlay, content"
-  id="overlay"
-  no-vertical-overlap=""
-  popover="manual"
-  start-aligned=""
-  top-aligned=""
->
-  <slot name="overlay">
-  </slot>
-</vaadin-avatar-group-overlay>
-`;
-/* end snapshot vaadin-avatar-group opened overlay class */
-

packages/avatar-group/test/dom/avatar-group.test.js

@@ -49,11 +49,5 @@ describe('vaadin-avatar-group', () => {
     it('overlay', async () => {
       await expect(group.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
     });
-
-    it('overlay class', async () => {
-      group.overlayClass = 'avatar-group-overlay custom';
-      await nextUpdate(group);
-      await expect(group.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
-    });
   });
 });

packages/avatar-group/test/typings/avatar-group.types.ts

@@ -1,7 +1,6 @@
 import '../../vaadin-avatar-group.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { AvatarGroupMixinClass } from '../../src/vaadin-avatar-group-mixin.js';
@@ -15,7 +14,6 @@ const group = document.createElement('vaadin-avatar-group');
 assertType<AvatarGroupItem[] | undefined>(group.items);
 assertType<number | null | undefined>(group.maxItemsVisible);
 assertType<AvatarGroupI18n>(group.i18n);
-assertType<string>(group.overlayClass);
 
 // Item properties
 const item: AvatarGroupItem = group.items ? group.items[0] : {};
@@ -33,6 +31,5 @@ assertType<AvatarGroupI18n>({ activeUsers: { one: '1 user' } });
 assertType<AvatarGroupMixinClass>(group);
 assertType<ElementMixinClass>(group);
 assertType<I18nMixinClass<AvatarGroupI18n>>(group);
-assertType<OverlayClassMixinClass>(group);
 assertType<ResizeMixinClass>(group);
 assertType<ThemableMixinClass>(group);

packages/combo-box/src/vaadin-combo-box-base-mixin.d.ts

@@ -7,7 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 
@@ -18,7 +17,6 @@ export declare function ComboBoxBaseMixin<T extends Constructor<HTMLElement>>(
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
 

packages/combo-box/src/vaadin-combo-box-base-mixin.js

@@ -8,7 +8,6 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { isElementFocused, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
@@ -19,13 +18,10 @@ import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
  * @mixes FocusMixin
  * @mixes InputMixin
  * @mixes KeyboardMixin
- * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} superClass
  */
 export const ComboBoxBaseMixin = (superClass) =>
-  class ComboBoxMixinBaseClass extends OverlayClassMixin(
-    KeyboardMixin(InputMixin(DisabledMixin(FocusMixin(superClass)))),
-  ) {
+  class ComboBoxMixinBaseClass extends KeyboardMixin(InputMixin(DisabledMixin(FocusMixin(superClass)))) {
     static get properties() {
       return {
         /**

packages/combo-box/src/vaadin-combo-box-mixin.d.ts

@@ -7,7 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ComboBox } from './vaadin-combo-box.js';
@@ -26,7 +25,6 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
 

packages/combo-box/src/vaadin-combo-box.d.ts

@@ -9,7 +9,6 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
@@ -236,7 +235,6 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
     PatternMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
-    OverlayClassMixinClass,
     InputMixinClass,
     ClearButtonMixinClass,
     InputControlMixinClass,

packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js

@@ -481,23 +481,6 @@ snapshots["vaadin-combo-box host opened overlay shadow"] =
 `;
 /* end snapshot vaadin-combo-box host opened overlay shadow */
 
-snapshots["vaadin-combo-box host opened overlay class"] = 
-`<vaadin-combo-box-overlay
-  class="combo-box-overlay custom"
-  exportparts="overlay, content, loader"
-  id="overlay"
-  no-vertical-overlap=""
-  opened=""
-  popover="manual"
-  start-aligned=""
-  top-aligned=""
->
-  <slot name="overlay">
-  </slot>
-</vaadin-combo-box-overlay>
-`;
-/* end snapshot vaadin-combo-box host opened overlay class */
-
 snapshots["vaadin-combo-box host opened theme overlay"] = 
 `<vaadin-combo-box-overlay
   exportparts="overlay, content, loader"