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

feat(field): add wrappers to allow label left of input

Browse source
This commit is contained in:
Thomas Allmer 2019-12-11 15:52:07 +01:00 committed by Thomas Allmer
parent d4f99f1b92
commit 5413ad130f
2 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/field/src/FormControlMixin.js
View file

@ -209,14 +209,16 @@ export const FormControlMixin = dedupeMixin(
}
/**
*
* Default Render Result:
* <div class="form-field__group-one">
* <div class="form-field__label">
* <slot name="label"></slot>
* </div>
* <small class="form-field__help-text">
* <slot name="help-text"></slot>
* </small>
* </div>
* <div class="form-field__group-two">
* <div class="input-group">
* <div class="input-group__before">
* <slot name="before"></slot>
@ -239,11 +241,28 @@ export const FormControlMixin = dedupeMixin(
* <div class="form-field__feedback">
* <slot name="feedback"></slot>
* </div>
* </div>
*/
render() {
return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.inputGroupTemplate()}
${this.feedbackTemplate()}
<div class="form-field__group-one">
${this.groupOneTemplate()}
</div>
<div class="form-field__group-two">
${this.groupTwoTemplate()}
</div>
`;
}
groupOneTemplate() {
return html`
${this.labelTemplate()} ${this.helpTextTemplate()}
`;
}
groupTwoTemplate() {
return html`
${this.inputGroupTemplate()} ${this.feedbackTemplate()}
`;
}

22
packages/switch/src/LionSwitch.js
View file

@ -23,11 +23,29 @@ export class LionSwitch extends ChoiceInputMixin(LionField) {
};
}
/**
* Restore original render function from FormControlMixin.js
* As it gets overwritten in ChoiceInputMixin
*/
render() {
return html`
<div class="input-switch__container">
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()}
<div class="form-field__group-one">
${this.groupOneTemplate()}
</div>
<div class="form-field__group-two">
${this.groupTwoTemplate()}
</div>
`;
}
groupOneTemplate() {
return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()}
`;
}
groupTwoTemplate() {
return html`
${this.inputGroupTemplate()}
`;
}