From 6ea029888448c82671cbde4a39323c26d8b8adfb Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Tue, 30 Mar 2021 17:25:02 +0200 Subject: [PATCH] fix: use ...styles / CSSResult[] everywhere for types consistency --- .changeset/silver-mayflies-dance.md | 14 ++++++++++++++ docs/blog/ing-open-sources-lion.md | 2 +- docs/components/content/tabs/src/lea-tabs.js | 2 +- .../inputs/combobox/src/gh-combobox/gh-combobox.js | 4 ++-- .../inputs/combobox/src/md-combobox/md-combobox.js | 4 ++-- .../inputs/combobox/src/wa-combobox/wa-combobox.js | 4 ++-- docs/components/interaction/tooltip/features.md | 2 +- docs/guides/how-to/get-started.md | 2 +- .../demo/my-extension/MyExtension.js | 2 +- .../dashboard/src/app/components/p-table/PTable.js | 2 +- .../dashboard/src/app/p-board.js | 2 +- .../src/LionCheckboxIndeterminate.js | 2 +- .../docs/google-combobox/google-combobox.js | 4 ++-- packages/combobox/src/LionCombobox.js | 2 +- packages/form-core/src/FormControlMixin.js | 3 ++- .../form-core/src/choice-group/ChoiceInputMixin.js | 2 +- packages/input-amount/src/LionInputAmount.js | 2 +- packages/input-stepper/src/LionInputStepper.js | 2 +- packages/listbox/src/ListboxMixin.js | 2 +- packages/listbox/types/ListboxMixinTypes.d.ts | 3 ++- packages/overlays/src/ArrowMixin.js | 3 ++- packages/switch/src/LionSwitch.js | 2 +- packages/textarea/src/LionTextarea.js | 2 +- packages/tooltip/src/LionTooltip.js | 2 +- 24 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 .changeset/silver-mayflies-dance.md diff --git a/.changeset/silver-mayflies-dance.md b/.changeset/silver-mayflies-dance.md new file mode 100644 index 000000000..64d0636dc --- /dev/null +++ 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. diff --git a/docs/blog/ing-open-sources-lion.md b/docs/blog/ing-open-sources-lion.md index fe9197ee0..9a5bde71f 100644 --- 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 */ `, diff --git a/docs/components/content/tabs/src/lea-tabs.js b/docs/components/content/tabs/src/lea-tabs.js index 3c3f385a0..66c0a785c 100644 --- 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; diff --git a/docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js b/docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js index 7c6880ca8..0964f3c20 100644 --- 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 */ diff --git a/docs/components/inputs/combobox/src/md-combobox/md-combobox.js b/docs/components/inputs/combobox/src/md-combobox/md-combobox.js index db579b814..0b8bdbc3c 100644 --- 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; diff --git a/docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js b/docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js index c786ba8a7..43baf56a8 100644 --- 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, diff --git a/docs/components/interaction/tooltip/features.md b/docs/components/interaction/tooltip/features.md index fe6f54b79..2f46a1aea 100644 --- 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; diff --git a/docs/guides/how-to/get-started.md b/docs/guides/how-to/get-started.md index 30479d456..b78877085 100644 --- 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 */ `, diff --git a/packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js b/packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js index ce75716c2..8e84d5c46 100644 --- 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; diff --git 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 index 415bb3023..24e0dc94b 100644 --- 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 diff --git a/packages-node/providence-analytics/dashboard/src/app/p-board.js b/packages-node/providence-analytics/dashboard/src/app/p-board.js index 2fdd722f3..2d25f86fd 100644 --- 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` diff --git a/packages/checkbox-group/src/LionCheckboxIndeterminate.js b/packages/checkbox-group/src/LionCheckboxIndeterminate.js index 1d379149d..11688c4fe 100644 --- 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; diff --git a/packages/combobox/docs/google-combobox/google-combobox.js b/packages/combobox/docs/google-combobox/google-combobox.js index b218174a4..fe6601773 100644 --- 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 */ diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js index 3de26b7af..0bd9340c4 100644 --- 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; diff --git a/packages/form-core/src/FormControlMixin.js b/packages/form-core/src/FormControlMixin.js index e2fa0065a..4ce740082 100644 --- 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 diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index de629f464..86af1f667 100644 --- 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; diff --git a/packages/input-amount/src/LionInputAmount.js b/packages/input-amount/src/LionInputAmount.js index 928172916..9b188b211 100644 --- 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; diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 6ec6800f8..e7d462e6c 100644 --- 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; diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js index 61972bdc2..a5fb8ae38 100644 --- 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; diff --git a/packages/listbox/types/ListboxMixinTypes.d.ts b/packages/listbox/types/ListboxMixinTypes.d.ts index ae7ba245c..c80036edc 100644 --- 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. diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js index e631925a5..60e89d4fe 100644 --- 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; diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index cd490f68e..e3910b049 100644 --- 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; diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js index 8418d0a8c..abaa1cdd9 100644 --- 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 */ diff --git a/packages/tooltip/src/LionTooltip.js b/packages/tooltip/src/LionTooltip.js index dfe28aadd..168c71c13 100644 --- 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;