Merge pull request #1085 from ing-bank/fix/types-styles

fix: make styles consistent across lion and fix some missing types

.changeset/soft-steaks-cross.md

@@ -0,0 +1,10 @@
+---
+'@lion/collapsible': patch
+'@lion/form-core': patch
+'@lion/helpers': patch
+'@lion/listbox': patch
+'@lion/overlays': patch
+'@lion/pagination': patch
+---
+
+Always use CSSResultArray for styles getters and be consistent. This makes typing for subclassers significantly easier. Also added some fixes for missing types in mixins where the superclass was not typed properly. This highlighted some issues with incomplete mixin contracts

packages/collapsible/src/LionCollapsible.js

@@ -11,7 +11,8 @@ const uuid = () => Math.random().toString(36).substr(2, 10);
  */
 export class LionCollapsible extends LitElement {
   static get styles() {
-    return css`
+    return [
+      css`
         :host {
           display: block;
         }
@@ -19,7 +20,8 @@ export class LionCollapsible extends LitElement {
         :host ::slotted([slot='content']) {
           overflow: hidden;
         }
-    `;
+      `,
+    ];
   }
 
   static get properties() {

packages/form-core/src/FormControlMixin.js

@@ -613,11 +613,12 @@ const FormControlMixinImplementation = superclass =>
      *  - {element} .input-group__bottom (optional) : placeholder element for additional styling
      *               (like an animated line for material design input)
      * - {element} .input-group__after (optional) :  a suffix that resides outside the container
-     *
-     * @return {CSSResult | CSSResult[]}
      */
     static get styles() {
-      return css`
+      const superCtor = /** @type {typeof import('@lion/core').LitElement} */ (super.constructor);
+      return [
+        superCtor.styles ? superCtor.styles : [],
+        css`
           /**********************
             {block} .form-field
            ********************/
@@ -666,7 +667,8 @@ const FormControlMixinImplementation = superclass =>
             margin: 0; /* remove input margin in Safari */
             font-size: 100%; /* normalize default input font-size */
           }
-      `;
+        `,
+      ];
     }
 
     /**

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -136,7 +136,9 @@ const ChoiceInputMixinImplementation = superclass =>
      * For [role=option] extensions, please override completely
      */
     static get styles() {
+      const superCtor = /** @type {typeof import('@lion/core').LitElement} */ (super.constructor);
       return [
+        superCtor.styles ? superCtor.styles : [],
         css`
           :host {
             display: flex;

packages/helpers/sb-action-logger/src/SbActionLogger.js

@@ -12,7 +12,8 @@ export class SbActionLogger extends LitElement {
   }
 
   static get styles() {
-    return css`
+    return [
+      css`
         :host {
           --sb-action-logger-title-color: black;
           --sb-action-logger-text-color: black;
@@ -116,7 +117,8 @@ export class SbActionLogger extends LitElement {
           color: white;
           background-color: #777;
         }
-    `;
+      `,
+    ];
   }
 
   constructor() {

packages/listbox/src/ListboxMixin.js

@@ -73,7 +73,9 @@ const ListboxMixinImplementation = superclass =>
     }
 
     static get styles() {
+      const superCtor = /** @type {typeof import('@lion/core').LitElement} */ (super.constructor);
       return [
+        superCtor.styles ? superCtor.styles : [],
         css`
           :host {
             display: block;

packages/overlays/src/ArrowMixin.js

@@ -1,4 +1,5 @@
 import { css, html, dedupeMixin } from '@lion/core';
+import { OverlayMixin } from './OverlayMixin.js';
 
 /**
  * @typedef {import('../types/OverlayConfig').OverlayConfig} OverlayConfig
@@ -8,9 +9,10 @@ import { css, html, dedupeMixin } from '@lion/core';
 
 /**
  * @type {ArrowMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass
  */
 export const ArrowMixinImplementation = superclass =>
-  class ArrowMixin extends superclass {
+  class ArrowMixin extends OverlayMixin(superclass) {
     static get properties() {
       return {
         hasArrow: {
@@ -22,8 +24,9 @@ export const ArrowMixinImplementation = superclass =>
     }
 
     static get styles() {
+      const superCtor = /** @type {typeof import('@lion/core').LitElement} */ (super.constructor);
       return [
-        super.styles ? super.styles : [],
+        superCtor.styles ? superCtor.styles : [],
         css`
           :host {
             --tooltip-arrow-width: 12px;

packages/overlays/types/ArrowMixinTypes.d.ts

@@ -15,7 +15,7 @@ export declare class ArrowHost {
   hasArrow: boolean;
   repositionComplete: Promise<void>;
 
-  static styles: CSSResultArray;
+  static get styles(): CSSResultArray;
 
   render(): TemplateResult;
   _arrowTemplate(): TemplateResult;

packages/pagination/src/LionPagination.js

@@ -13,7 +13,8 @@ import { LocalizeMixin } from '@lion/localize';
 // @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110
 export class LionPagination extends LocalizeMixin(LitElement) {
   static get styles() {
-    return css`
+    return [
+      css`
         :host {
           cursor: default;
         }
@@ -31,7 +32,8 @@ export class LionPagination extends LocalizeMixin(LitElement) {
         button[aria-current='true'] {
           font-weight: bold;
         }
-    `;
+      `,
+    ];
   }
 
   static get localizeNamespaces() {