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

chore: add consistent styles inheritance for types

Browse source
This commit is contained in:
Joren Broekema 2020-10-05 10:26:05 +02:00
parent 2f48f59244
commit 7f744e6368
5 changed files with 54 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -607,58 +607,56 @@ const FormControlMixinImplementation = superclass =>
* @return {CSSResult | CSSResult[]} * @return {CSSResult | CSSResult[]}
*/ */
static get styles() { static get styles() {
return [ return css`
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, #adadad); color: var(--disabled-text-color, #adadad);
} }
/*********************** /***********************
{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, #adadad); color: var(--disabled-text-color, #adadad);
} }
/*********************** /***********************
{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 */
} }
`, `;
];
} }
/** /**

1
packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js
View file

@ -46,7 +46,6 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
<${childTag} name="custom[]"></${childTag}> <${childTag} name="custom[]"></${childTag}>
</${tag}> </${tag}>
`)); `));
console.log(fieldset.formElements['custom[]'][1]);
fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
fieldset.formElements['custom[]'][1].modelValue = undefined; fieldset.formElements['custom[]'][1].modelValue = undefined;

2
packages/form-core/types/NativeTextFieldMixinTypes.d.ts vendored
View file

@ -14,6 +14,6 @@ export declare class NativeTextFieldHost {
export declare function NativeTextFieldImplementation<T extends Constructor<NativeTextField>>( export declare function NativeTextFieldImplementation<T extends Constructor<NativeTextField>>(
superclass: T, superclass: T,
): T & Constructor<NativeTextFieldHost> & NativeTextFieldHost; ): T & Constructor<NativeTextFieldHost> & NativeTextFieldHost & typeof NativeTextField;
export type NativeTextFieldMixin = typeof NativeTextFieldImplementation; export type NativeTextFieldMixin = typeof NativeTextFieldImplementation;

13
packages/input-amount/src/LionInputAmount.js
View file

@ -53,11 +53,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
} }
static get styles() { static get styles() {
return css` return [
.input-group__container > .input-group__input ::slotted(.form-control) { super.styles,
text-align: right; css`
} .input-group__container > .input-group__input ::slotted(.form-control) {
`; text-align: right;
}
`,
];
} }
constructor() { constructor() {

13
packages/input-stepper/src/LionInputStepper.js
View file

@ -10,11 +10,14 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/form-core';
// @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you.
export class LionInputStepper extends LionInput { export class LionInputStepper extends LionInput {
static get styles() { static get styles() {
return css` return [
.input-group__container > .input-group__input ::slotted(.form-control) { super.styles,
text-align: center; css`
} .input-group__container > .input-group__input ::slotted(.form-control) {
`; text-align: center;
}
`,
];
} }
static get properties() { static get properties() {