ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Joren Broekema 2020-11-10 11:44:51 +01:00
parent acbd1aa01f
commit b222fd781f
9 changed files with 180 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.changeset/soft-steaks-cross.md Normal file
View file

@ -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

18
packages/collapsible/src/LionCollapsible.js
View file

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

80
packages/form-core/src/FormControlMixin.js
View file

@ -613,60 +613,62 @@ const FormControlMixinImplementation = superclass =>
* - {element} .input-group__bottom (optional) : placeholder element for additional styling * - {element} .input-group__bottom (optional) : placeholder element for additional styling
* (like an animated line for material design input) * (like an animated line for material design input)
* - {element} .input-group__after (optional) : a suffix that resides outside the container * - {element} .input-group__after (optional) : a suffix that resides outside the container
*
* @return {CSSResult | CSSResult[]}
*/ */
static get styles() { static get styles() {
return css` const superCtor = /** @type {typeof import('@lion/core').LitElement} */ (super.constructor);
/********************** return [
superCtor.styles ? superCtor.styles : [],
css`
/**********************
{block} .form-field {block} .form-field
********************/ ********************/
:host { :host {
display: block; display: block;
} }
:host([hidden]) { :host([hidden]) {
display: none; display: none;
} }
:host([disabled]) { :host([disabled]) {
pointer-events: none; pointer-events: none;
} }
:host([disabled]) .form-field__label ::slotted(*), :host([disabled]) .form-field__label ::slotted(*),
:host([disabled]) .form-field__help-text ::slotted(*) { :host([disabled]) .form-field__help-text ::slotted(*) {
color: var(--disabled-text-color, #767676); color: var(--disabled-text-color, #767676);
} }
/*********************** /***********************
{block} .input-group {block} .input-group
*********************/ *********************/
.input-group__container { .input-group__container {
display: flex; display: flex;
} }
.input-group__input { .input-group__input {
flex: 1; flex: 1;
display: flex; display: flex;
} }
/***** {state} :disabled *****/ /***** {state} :disabled *****/
:host([disabled]) .input-group ::slotted(slot='input') { :host([disabled]) .input-group ::slotted(slot='input') {
color: var(--disabled-text-color, #767676); color: var(--disabled-text-color, #767676);
} }
/*********************** /***********************
{block} .form-control {block} .form-control
**********************/ **********************/
.input-group__container > .input-group__input ::slotted(.form-control) { .input-group__container > .input-group__input ::slotted(.form-control) {
flex: 1 1 auto; flex: 1 1 auto;
margin: 0; /* remove input margin in Safari */ margin: 0; /* remove input margin in Safari */
font-size: 100%; /* normalize default input font-size */ font-size: 100%; /* normalize default input font-size */
} }
`; `,
];
} }
/** /**

2
packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

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

180
packages/helpers/sb-action-logger/src/SbActionLogger.js
View file

@ -12,111 +12,113 @@ export class SbActionLogger extends LitElement {
} }
static get styles() { static get styles() {
return css` return [
:host { css`
--sb-action-logger-title-color: black; :host {
--sb-action-logger-text-color: black; --sb-action-logger-title-color: black;
--sb-action-logger-cue-color-primary: #3f51b5; --sb-action-logger-text-color: black;
--sb-action-logger-cue-color-secondary: #c5cae9; --sb-action-logger-cue-color-primary: #3f51b5;
--sb-action-logger-cue-duration: 1000ms; --sb-action-logger-cue-color-secondary: #c5cae9;
--sb-action-logger-cue-duration: 1000ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: block; display: block;
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
.header__info { .header__info {
color: var(--sb-action-logger-title-color); color: var(--sb-action-logger-title-color);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
font-size: 16px; font-size: 16px;
} }
.header__clear { .header__clear {
margin-left: 16px; margin-left: 16px;
border-radius: 0px; border-radius: 0px;
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 8px; padding: 8px;
} }
.header__clear:hover { .header__clear:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.header__title { .header__title {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
flex-grow: 1; flex-grow: 1;
} }
.header__log-cue { .header__log-cue {
position: relative; position: relative;
height: 3px; height: 3px;
background-color: var(--sb-action-logger-cue-color-secondary); background-color: var(--sb-action-logger-cue-color-secondary);
overflow: hidden; overflow: hidden;
} }
.header__log-cue-overlay { .header__log-cue-overlay {
position: absolute; position: absolute;
height: 3px; 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;
width: 50px; width: 50px;
left: -50px;
background-color: var(--sb-action-logger-cue-color-primary);
} }
to { .header__log-cue-overlay--slide {
left: 100%; animation: slidethrough var(--sb-action-logger-cue-duration) ease-in;
width: 500px;
} }
}
.logger { @keyframes slidethrough {
overflow-y: auto; from {
max-height: 110px; left: -50px;
} width: 50px;
}
.logger__log { to {
padding: 16px; left: 100%;
display: flex; width: 500px;
} }
}
.logger__log:not(:last-child) { .logger {
border-bottom: 1px solid lightgrey; overflow-y: auto;
} max-height: 110px;
}
.logger__log code { .logger__log {
color: var(--sb-action-logger-text-color); padding: 16px;
white-space: pre-wrap; /* css-3 */ display: flex;
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 { .logger__log:not(:last-child) {
line-height: 8px; border-bottom: 1px solid lightgrey;
font-size: 12px; }
padding: 4px;
border-radius: 4px; .logger__log code {
margin-right: 8px; color: var(--sb-action-logger-text-color);
color: white; white-space: pre-wrap; /* css-3 */
background-color: #777; 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() { constructor() {

2
packages/listbox/src/ListboxMixin.js
View file

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

7
packages/overlays/src/ArrowMixin.js
View file

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

2
packages/overlays/types/ArrowMixinTypes.d.ts vendored
View file

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

34
packages/pagination/src/LionPagination.js
View file

@ -13,25 +13,27 @@ import { LocalizeMixin } from '@lion/localize';
// @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110 // @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110
export class LionPagination extends LocalizeMixin(LitElement) { export class LionPagination extends LocalizeMixin(LitElement) {
static get styles() { static get styles() {
return css` return [
:host { css`
cursor: default; :host {
} cursor: default;
}
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
li { li {
display: inline-block; display: inline-block;
} }
button[aria-current='true'] { button[aria-current='true'] {
font-weight: bold; font-weight: bold;
} }
`; `,
];
} }
static get localizeNamespaces() { static get localizeNamespaces() {