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[]}
*/
static get styles() {
return [
css`
/**********************
return 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, #adadad);
}
:host([disabled]) .form-field__label ::slotted(*),
:host([disabled]) .form-field__help-text ::slotted(*) {
color: var(--disabled-text-color, #adadad);
}
/***********************
/***********************
{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, #adadad);
}
/***** {state} :disabled *****/
:host([disabled]) .input-group ::slotted(slot='input') {
color: var(--disabled-text-color, #adadad);
}
/***********************
/***********************
{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 */
}
`;
}
/**

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}>
</${tag}>
`));
console.log(fieldset.formElements['custom[]'][1]);
fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
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>>(
superclass: T,
): T & Constructor<NativeTextFieldHost> & NativeTextFieldHost;
): T & Constructor<NativeTextFieldHost> & NativeTextFieldHost & typeof NativeTextField;
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() {
return css`
.input-group__container > .input-group__input ::slotted(.form-control) {
text-align: right;
}
`;
return [
super.styles,
css`
.input-group__container > .input-group__input ::slotted(.form-control) {
text-align: right;
}
`,
];
}
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.
export class LionInputStepper extends LionInput {
static get styles() {
return css`
.input-group__container > .input-group__input ::slotted(.form-control) {
text-align: center;
}
`;
return [
super.styles,
css`
.input-group__container > .input-group__input ::slotted(.form-control) {
text-align: center;
}
`,
];
}
static get properties() {