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