Merge pull request #1300 from ing-bank/chore/styles-array

fix: use ...styles / CSSResult[] everywhere for types consistency
2021-03-31 09:51:57 +02:00 · 2021-03-31 09:51:57 +02:00 · 084624e854
commit 084624e854
parent 806017a5b1 6ea0298884
24 changed files with 44 additions and 27 deletions
--- a/.changeset/silver-mayflies-dance.md
+++ b/.changeset/silver-mayflies-dance.md
@ -0,0 +1,14 @@
+---
+'@lion/checkbox-group': patch
+'@lion/combobox': patch
+'@lion/form-core': patch
+'@lion/input-amount': patch
+'@lion/input-stepper': patch
+'@lion/listbox': patch
+'@lion/overlays': patch
+'@lion/switch': patch
+'@lion/textarea': patch
+'@lion/tooltip': patch
+---
+
+Always use ...styles and [css``] everywhere consistently, meaning an array of CSSResult. Makes it easier on TSC.
--- a/docs/blog/ing-open-sources-lion.md
+++ b/docs/blog/ing-open-sources-lion.md
@ -156,7 +156,7 @@ import { LionTabs } from '@lion/tabs';
 export class LeaTabs extends LionTabs {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        /* my stylings */
      `,
--- a/docs/components/content/tabs/src/lea-tabs.js
+++ b/docs/components/content/tabs/src/lea-tabs.js
@ -4,7 +4,7 @@ import { LionTabs } from '@lion/tabs';
 export class LeaTabs extends LionTabs {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          background: #222;
--- a/docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js
+++ b/docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js
@ -15,7 +15,7 @@ export class GhOption extends LionOption {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          display: flex;
@ -118,7 +118,7 @@ export class GhCombobox extends LionCombobox {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        /** @configure LionCombobox */

--- a/docs/components/inputs/combobox/src/md-combobox/md-combobox.js
+++ b/docs/components/inputs/combobox/src/md-combobox/md-combobox.js
@ -9,7 +9,7 @@ import './style/load-roboto.js';
 export class MdOption extends LionOption {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          position: relative;
@ -69,7 +69,7 @@ customElements.define('md-option', MdOption);
 export class MdCombobox extends MdFieldMixin(LionCombobox) {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        .input-group__container {
          display: flex;
--- a/docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js
+++ b/docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js
@ -17,7 +17,7 @@ class WaOption extends LionOption {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          --background-default: white;
@ -287,7 +287,7 @@ customElements.define('wa-option', WaOption);
 class WaCombobox extends LionCombobox {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,
--- a/docs/components/interaction/tooltip/features.md
+++ b/docs/components/interaction/tooltip/features.md
@ -170,7 +170,7 @@ export const customArrow = () => {
      class extends LionTooltip {
        static get styles() {
          return [
-            super.styles,
+            ...super.styles,
            css`
              :host {
                --tooltip-arrow-width: 20px;
--- a/docs/guides/how-to/get-started.md
+++ b/docs/guides/how-to/get-started.md
@ -38,7 +38,7 @@ import { LionInput } from '@lion/input';
 class MyInput extends LionInput {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        /* your styles here */
      `,
--- a/packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js
+++ b/packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js
@ -4,7 +4,7 @@ import { MyCounter } from '../src/MyCounter.js';
 export class MyExtension extends MyCounter {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        button {
          background: #c43f16;
--- a/packages-node/providence-analytics/dashboard/src/app/components/p-table/PTable.js
+++ b/packages-node/providence-analytics/dashboard/src/app/components/p-table/PTable.js
@ -17,7 +17,7 @@ export class PTable extends DecorateMixin(LitElement) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        /**
         * Structural css
--- a/packages-node/providence-analytics/dashboard/src/app/p-board.js
+++ b/packages-node/providence-analytics/dashboard/src/app/p-board.js
@ -35,7 +35,7 @@ class PBoard extends DecorateMixin(LitElement) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      utilsStyles,
      tooltipStyles,
      css`
--- a/packages/checkbox-group/src/LionCheckboxIndeterminate.js
+++ b/packages/checkbox-group/src/LionCheckboxIndeterminate.js
@ -8,7 +8,7 @@ import { LionCheckbox } from './LionCheckbox.js';
 export class LionCheckboxIndeterminate extends LionCheckbox {
  static get styles() {
    return [
-      super.styles || [],
+      ...(super.styles || []),
      css`
        :host .choice-field__nested-checkboxes {
          display: block;
--- a/packages/combobox/docs/google-combobox/google-combobox.js
+++ b/packages/combobox/docs/google-combobox/google-combobox.js
@ -20,7 +20,7 @@ export class GoogleOption extends LinkMixin(LionOption) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host {
          position: relative;
@ -106,7 +106,7 @@ customElements.define('google-option', GoogleOption);
 export class GoogleCombobox extends LionCombobox {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        /** @configure FormControlMixin */

--- a/packages/combobox/src/LionCombobox.js
+++ b/packages/combobox/src/LionCombobox.js
@ -37,7 +37,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        .input-group__input {
          display: flex;
--- a/packages/form-core/src/FormControlMixin.js
+++ b/packages/form-core/src/FormControlMixin.js
@ -6,6 +6,7 @@ import { Unparseable } from './validate/Unparseable.js';
 /**
 * @typedef {import('@lion/core').TemplateResult} TemplateResult
 * @typedef {import('@lion/core').CSSResult} CSSResult
+ * @typedef {import('@lion/core').CSSResultArray} CSSResultArray
 * @typedef {import('@lion/core').nothing} nothing
 * @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap
 * @typedef {import('../types/FormControlMixinTypes.js').FormControlMixin} FormControlMixin
@ -618,7 +619,7 @@ const FormControlMixinImplementation = superclass =>
     */
    static get styles() {
      return [
-        super.styles || [],
+        .../** @type {CSSResultArray} */ (super.styles || []),
        css`
          /**********************
            {block} .form-field
--- a/packages/form-core/src/choice-group/ChoiceInputMixin.js
+++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js
@ -137,7 +137,7 @@ const ChoiceInputMixinImplementation = superclass =>
     */
    static get styles() {
      return [
-        super.styles || [],
+        ...(super.styles || []),
        css`
          :host {
            display: flex;
--- a/packages/input-amount/src/LionInputAmount.js
+++ b/packages/input-amount/src/LionInputAmount.js
@ -53,7 +53,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        .input-group__container > .input-group__input ::slotted(.form-control) {
          text-align: right;
--- a/packages/input-stepper/src/LionInputStepper.js
+++ b/packages/input-stepper/src/LionInputStepper.js
@ -10,7 +10,7 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/form-core';
 export class LionInputStepper extends LionInput {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        .input-group__container > .input-group__input ::slotted(.form-control) {
          text-align: center;
--- a/packages/listbox/src/ListboxMixin.js
+++ b/packages/listbox/src/ListboxMixin.js
@ -75,7 +75,7 @@ const ListboxMixinImplementation = superclass =>

    static get styles() {
      return [
-        super.styles || [],
+        ...(super.styles || []),
        css`
          :host {
            display: block;
--- a/packages/listbox/types/ListboxMixinTypes.d.ts
+++ b/packages/listbox/types/ListboxMixinTypes.d.ts
@ -1,5 +1,5 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { LitElement } from '@lion/core';
+import { LitElement, CSSResultArray } from '@lion/core';
 import { SlotHost } from '@lion/core/types/SlotMixinTypes';

 import { FormControlHost } from '@lion/form-core/types/FormControlMixinTypes';
@ -9,6 +9,7 @@ import { LionOptions } from '../src/LionOptions.js';
 import { LionOption } from '../src/LionOption.js';

 export declare class ListboxHost {
+  static get styles(): CSSResultArray;
  /**
   * When true, will synchronize activedescendant and selected element on
   * arrow key navigation.
--- a/packages/overlays/src/ArrowMixin.js
+++ b/packages/overlays/src/ArrowMixin.js
@ -6,6 +6,7 @@ import { OverlayMixin } from './OverlayMixin.js';
 * @typedef {import('../types/ArrowMixinTypes').ArrowMixin} ArrowMixin
 * @typedef {import('@popperjs/core/lib/popper').Options} PopperOptions
 * @typedef {import('@popperjs/core/lib/enums').Placement} Placement
+ * @typedef {import('@lion/core').CSSResultArray} CSSResultArray
 */

 /**
@ -26,7 +27,7 @@ export const ArrowMixinImplementation = superclass =>

    static get styles() {
      return [
-        super.styles || [],
+        .../** @type {CSSResultArray} */ (super.styles || []),
        css`
          :host {
            --tooltip-arrow-width: 12px;
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@ -5,7 +5,7 @@ import { LionSwitchButton } from './LionSwitchButton.js';
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        :host([hidden]) {
          display: none;
--- a/packages/textarea/src/LionTextarea.js
+++ b/packages/textarea/src/LionTextarea.js
@ -149,7 +149,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {

  static get styles() {
    return [
-      super.styles,
+      ...super.styles,
      css`
        .input-group__container > .input-group__input ::slotted(.form-control) {
          overflow-x: hidden; /* for FF adds height to the TextArea to reserve place for scroll-bars */
--- a/packages/tooltip/src/LionTooltip.js
+++ b/packages/tooltip/src/LionTooltip.js
@ -23,7 +23,7 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {

  static get styles() {
    return [
-      super.styles ? super.styles : [],
+      ...super.styles,
      css`
        :host {
          display: inline-block;