diff --git a/.changeset/soft-steaks-cross.md b/.changeset/soft-steaks-cross.md new file mode 100644 index 000000000..97ef5a467 --- /dev/null +++ b/.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 diff --git a/packages/collapsible/src/LionCollapsible.js b/packages/collapsible/src/LionCollapsible.js index 237b3b2c5..7d209ae16 100644 --- a/packages/collapsible/src/LionCollapsible.js +++ b/packages/collapsible/src/LionCollapsible.js @@ -11,15 +11,17 @@ const uuid = () => Math.random().toString(36).substr(2, 10); */ export class LionCollapsible extends LitElement { static get styles() { - return css` - :host { - display: block; - } + return [ + css` + :host { + display: block; + } - :host ::slotted([slot='content']) { - overflow: hidden; - } - `; + :host ::slotted([slot='content']) { + overflow: hidden; + } + `, + ]; } static get properties() { diff --git a/packages/form-core/src/FormControlMixin.js b/packages/form-core/src/FormControlMixin.js index e3504c5e5..2227810b8 100644 --- a/packages/form-core/src/FormControlMixin.js +++ b/packages/form-core/src/FormControlMixin.js @@ -613,60 +613,62 @@ 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 - ********************/ + ********************/ - :host { - display: block; - } + :host { + display: block; + } - :host([hidden]) { - display: none; - } + :host([hidden]) { + display: none; + } - :host([disabled]) { - pointer-events: none; - } + :host([disabled]) { + pointer-events: none; + } - :host([disabled]) .form-field__label ::slotted(*), - :host([disabled]) .form-field__help-text ::slotted(*) { - color: var(--disabled-text-color, #767676); - } + :host([disabled]) .form-field__label ::slotted(*), + :host([disabled]) .form-field__help-text ::slotted(*) { + color: var(--disabled-text-color, #767676); + } - /*********************** + /*********************** {block} .input-group - *********************/ + *********************/ - .input-group__container { - display: flex; - } + .input-group__container { + display: flex; + } - .input-group__input { - flex: 1; - display: flex; - } + .input-group__input { + flex: 1; + display: flex; + } - /***** {state} :disabled *****/ - :host([disabled]) .input-group ::slotted(slot='input') { - color: var(--disabled-text-color, #767676); - } + /***** {state} :disabled *****/ + :host([disabled]) .input-group ::slotted(slot='input') { + color: var(--disabled-text-color, #767676); + } - /*********************** + /*********************** {block} .form-control - **********************/ + **********************/ - .input-group__container > .input-group__input ::slotted(.form-control) { - flex: 1 1 auto; - margin: 0; /* remove input margin in Safari */ - font-size: 100%; /* normalize default input font-size */ - } - `; + .input-group__container > .input-group__input ::slotted(.form-control) { + flex: 1 1 auto; + margin: 0; /* remove input margin in Safari */ + font-size: 100%; /* normalize default input font-size */ + } + `, + ]; } /** diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index 599848825..18131238a 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/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; diff --git a/packages/helpers/sb-action-logger/src/SbActionLogger.js b/packages/helpers/sb-action-logger/src/SbActionLogger.js index ae7c0cd93..1e3285f78 100644 --- a/packages/helpers/sb-action-logger/src/SbActionLogger.js +++ b/packages/helpers/sb-action-logger/src/SbActionLogger.js @@ -12,111 +12,113 @@ export class SbActionLogger extends LitElement { } static get styles() { - return css` - :host { - --sb-action-logger-title-color: black; - --sb-action-logger-text-color: black; - --sb-action-logger-cue-color-primary: #3f51b5; - --sb-action-logger-cue-color-secondary: #c5cae9; - --sb-action-logger-cue-duration: 1000ms; + return [ + css` + :host { + --sb-action-logger-title-color: black; + --sb-action-logger-text-color: black; + --sb-action-logger-cue-color-primary: #3f51b5; + --sb-action-logger-cue-color-secondary: #c5cae9; + --sb-action-logger-cue-duration: 1000ms; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - display: block; - font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', - BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; - } + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + display: block; + font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', + BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; + } - .header__info { - color: var(--sb-action-logger-title-color); - display: flex; - align-items: center; - padding: 16px; - font-size: 16px; - } + .header__info { + color: var(--sb-action-logger-title-color); + display: flex; + align-items: center; + padding: 16px; + font-size: 16px; + } - .header__clear { - margin-left: 16px; - border-radius: 0px; - background-color: rgba(0, 0, 0, 0.05); - border: none; - cursor: pointer; - padding: 8px; - } + .header__clear { + margin-left: 16px; + border-radius: 0px; + background-color: rgba(0, 0, 0, 0.05); + border: none; + cursor: pointer; + padding: 8px; + } - .header__clear:hover { - background-color: rgba(0, 0, 0, 0.1); - } + .header__clear:hover { + background-color: rgba(0, 0, 0, 0.1); + } - .header__title { - margin: 0; - font-weight: bold; - flex-grow: 1; - } + .header__title { + margin: 0; + font-weight: bold; + flex-grow: 1; + } - .header__log-cue { - position: relative; - height: 3px; - background-color: var(--sb-action-logger-cue-color-secondary); - overflow: hidden; - } + .header__log-cue { + position: relative; + height: 3px; + background-color: var(--sb-action-logger-cue-color-secondary); + overflow: hidden; + } - .header__log-cue-overlay { - position: absolute; - height: 3px; - width: 50px; - left: -50px; - background-color: var(--sb-action-logger-cue-color-primary); - } - - .header__log-cue-overlay--slide { - animation: slidethrough var(--sb-action-logger-cue-duration) ease-in; - } - - @keyframes slidethrough { - from { - left: -50px; + .header__log-cue-overlay { + position: absolute; + height: 3px; width: 50px; + left: -50px; + background-color: var(--sb-action-logger-cue-color-primary); } - to { - left: 100%; - width: 500px; + .header__log-cue-overlay--slide { + animation: slidethrough var(--sb-action-logger-cue-duration) ease-in; } - } - .logger { - overflow-y: auto; - max-height: 110px; - } + @keyframes slidethrough { + from { + left: -50px; + width: 50px; + } - .logger__log { - padding: 16px; - display: flex; - } + to { + left: 100%; + width: 500px; + } + } - .logger__log:not(:last-child) { - border-bottom: 1px solid lightgrey; - } + .logger { + overflow-y: auto; + max-height: 110px; + } - .logger__log code { - color: var(--sb-action-logger-text-color); - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - } + .logger__log { + padding: 16px; + display: flex; + } - .logger__log-count { - line-height: 8px; - font-size: 12px; - padding: 4px; - border-radius: 4px; - margin-right: 8px; - color: white; - background-color: #777; - } - `; + .logger__log:not(:last-child) { + border-bottom: 1px solid lightgrey; + } + + .logger__log code { + color: var(--sb-action-logger-text-color); + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + } + + .logger__log-count { + line-height: 8px; + font-size: 12px; + padding: 4px; + border-radius: 4px; + margin-right: 8px; + color: white; + background-color: #777; + } + `, + ]; } constructor() { diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js index 20f0d370e..a5af5d846 100644 --- a/packages/listbox/src/ListboxMixin.js +++ b/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; diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js index 7a159784f..6df30d522 100644 --- a/packages/overlays/src/ArrowMixin.js +++ b/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} 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; diff --git a/packages/overlays/types/ArrowMixinTypes.d.ts b/packages/overlays/types/ArrowMixinTypes.d.ts index 0451176a6..cb9cf9315 100644 --- a/packages/overlays/types/ArrowMixinTypes.d.ts +++ b/packages/overlays/types/ArrowMixinTypes.d.ts @@ -15,7 +15,7 @@ export declare class ArrowHost { hasArrow: boolean; repositionComplete: Promise; - static styles: CSSResultArray; + static get styles(): CSSResultArray; render(): TemplateResult; _arrowTemplate(): TemplateResult; diff --git a/packages/pagination/src/LionPagination.js b/packages/pagination/src/LionPagination.js index b108021bd..835644c2f 100644 --- a/packages/pagination/src/LionPagination.js +++ b/packages/pagination/src/LionPagination.js @@ -13,25 +13,27 @@ 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` - :host { - cursor: default; - } + return [ + css` + :host { + cursor: default; + } - ul { - list-style: none; - padding: 0; - text-align: center; - } + ul { + list-style: none; + padding: 0; + text-align: center; + } - li { - display: inline-block; - } + li { + display: inline-block; + } - button[aria-current='true'] { - font-weight: bold; - } - `; + button[aria-current='true'] { + font-weight: bold; + } + `, + ]; } static get localizeNamespaces() {