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

Merge pull request #613 from ing-bank/fix/reducePublicProps

Browse source 
Fix/reduce public props
This commit is contained in:
Thijs Louisse 2020-03-02 09:06:01 +01:00 committed by GitHub
commit 2e064b4b91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 104 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/button/src/LionButton.js
View file

@ -31,7 +31,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
render() { render() {
return html` return html`
<div class="btn"> <div class="btn">
${this._renderBefore()} ${this._beforeTemplate()}
${browserDetection.isIE11 ${browserDetection.isIE11
? html` ? html`
<div id="${this._buttonId}"><slot></slot></div> <div id="${this._buttonId}"><slot></slot></div>
@ -39,7 +39,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
: html` : html`
<slot></slot> <slot></slot>
`} `}
${this._renderAfter()} ${this._afterTemplate()}
<slot name="_button"></slot> <slot name="_button"></slot>
<div class="click-area"></div> <div class="click-area"></div>
</div> </div>
@ -47,12 +47,12 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
_renderBefore() { _beforeTemplate() {
return html``; return html``;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
_renderAfter() { _afterTemplate() {
return html``; return html``;
} }

4
packages/choice-input/src/ChoiceInputMixin.js
View file

@ -109,7 +109,7 @@ export const ChoiceInputMixin = superclass =>
return html` return html`
<slot name="input"></slot> <slot name="input"></slot>
<div class="choice-field__graphic-container"> <div class="choice-field__graphic-container">
${this.choiceGraphicTemplate()} ${this._choiceGraphicTemplate()}
</div> </div>
<div class="choice-field__label"> <div class="choice-field__label">
<slot name="label"></slot> <slot name="label"></slot>
@ -117,7 +117,7 @@ export const ChoiceInputMixin = superclass =>
`; `;
} }
choiceGraphicTemplate() { _choiceGraphicTemplate() {
return nothing; return nothing;
} }

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

@ -276,28 +276,28 @@ export const FormControlMixin = dedupeMixin(
render() { render() {
return html` return html`
<div class="form-field__group-one"> <div class="form-field__group-one">
${this.groupOneTemplate()} ${this._groupOneTemplate()}
</div> </div>
<div class="form-field__group-two"> <div class="form-field__group-two">
${this.groupTwoTemplate()} ${this._groupTwoTemplate()}
</div> </div>
`; `;
} }
groupOneTemplate() { _groupOneTemplate() {
return html` return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this._labelTemplate()} ${this._helpTextTemplate()}
`; `;
} }
groupTwoTemplate() { _groupTwoTemplate() {
return html` return html`
${this.inputGroupTemplate()} ${this.feedbackTemplate()} ${this._inputGroupTemplate()} ${this._feedbackTemplate()}
`; `;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
labelTemplate() { _labelTemplate() {
return html` return html`
<div class="form-field__label"> <div class="form-field__label">
<slot name="label"></slot> <slot name="label"></slot>
@ -306,7 +306,7 @@ export const FormControlMixin = dedupeMixin(
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
helpTextTemplate() { _helpTextTemplate() {
return html` return html`
<small class="form-field__help-text"> <small class="form-field__help-text">
<slot name="help-text"></slot> <slot name="help-text"></slot>
@ -314,21 +314,21 @@ export const FormControlMixin = dedupeMixin(
`; `;
} }
inputGroupTemplate() { _inputGroupTemplate() {
return html` return html`
<div class="input-group"> <div class="input-group">
${this.inputGroupBeforeTemplate()} ${this._inputGroupBeforeTemplate()}
<div class="input-group__container"> <div class="input-group__container">
${this.inputGroupPrefixTemplate()} ${this.inputGroupInputTemplate()} ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
${this.inputGroupSuffixTemplate()} ${this._inputGroupSuffixTemplate()}
</div> </div>
${this.inputGroupAfterTemplate()} ${this._inputGroupAfterTemplate()}
</div> </div>
`; `;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
inputGroupBeforeTemplate() { _inputGroupBeforeTemplate() {
return html` return html`
<div class="input-group__before"> <div class="input-group__before">
<slot name="before"></slot> <slot name="before"></slot>
@ -336,7 +336,7 @@ export const FormControlMixin = dedupeMixin(
`; `;
} }
inputGroupPrefixTemplate() { _inputGroupPrefixTemplate() {
return !Array.from(this.children).find(child => child.slot === 'prefix') return !Array.from(this.children).find(child => child.slot === 'prefix')
? nothing ? nothing
: html` : html`
@ -347,7 +347,7 @@ export const FormControlMixin = dedupeMixin(
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
inputGroupInputTemplate() { _inputGroupInputTemplate() {
return html` return html`
<div class="input-group__input"> <div class="input-group__input">
<slot name="input"></slot> <slot name="input"></slot>
@ -355,7 +355,7 @@ export const FormControlMixin = dedupeMixin(
`; `;
} }
inputGroupSuffixTemplate() { _inputGroupSuffixTemplate() {
return !Array.from(this.children).find(child => child.slot === 'suffix') return !Array.from(this.children).find(child => child.slot === 'suffix')
? nothing ? nothing
: html` : html`
@ -366,7 +366,7 @@ export const FormControlMixin = dedupeMixin(
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
inputGroupAfterTemplate() { _inputGroupAfterTemplate() {
return html` return html`
<div class="input-group__after"> <div class="input-group__after">
<slot name="after"></slot> <slot name="after"></slot>
@ -375,7 +375,7 @@ export const FormControlMixin = dedupeMixin(
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
feedbackTemplate() { _feedbackTemplate() {
return html` return html`
<div class="form-field__feedback"> <div class="form-field__feedback">
<slot name="feedback"></slot> <slot name="feedback"></slot>

2
packages/fieldset/src/FormGroupMixin.js
View file

@ -194,7 +194,7 @@ export const FormGroupMixin = dedupeMixin(
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
inputGroupTemplate() { _inputGroupTemplate() {
return html` return html`
<div class="input-group"> <div class="input-group">
<slot></slot> <slot></slot>

22
packages/form/src/LionForm.js
View file

@ -13,6 +13,9 @@ export class LionForm extends LionFieldset {
super.connectedCallback(); super.connectedCallback();
} }
this.__registerEventsForLionForm(); this.__registerEventsForLionForm();
// @override LionFieldset: makes sure a11y is handled by ._formNode
this.removeAttribute('role');
} }
disconnectedCallback() { disconnectedCallback() {
@ -22,23 +25,18 @@ export class LionForm extends LionFieldset {
this.__teardownEventsForLionForm(); this.__teardownEventsForLionForm();
} }
get formElement() { get _formNode() {
return this.querySelector('form'); return this.querySelector('form');
} }
submit() { submit() {
this.formElement.submit(); this._formNode.submit();
} }
reset() { reset() {
this.formElement.reset(); this._formNode.reset();
} }
/**
* As we use a native form there is no need for a role
*/
_setRole() {} // eslint-disable-line class-methods-use-this
__registerEventsForLionForm() { __registerEventsForLionForm() {
this._submit = ev => { this._submit = ev => {
ev.preventDefault(); ev.preventDefault();
@ -46,7 +44,7 @@ export class LionForm extends LionFieldset {
this.submitGroup(); this.submitGroup();
this.dispatchEvent(new Event('submit', { bubbles: true })); this.dispatchEvent(new Event('submit', { bubbles: true }));
}; };
this.formElement.addEventListener('submit', this._submit); this._formNode.addEventListener('submit', this._submit);
this._reset = ev => { this._reset = ev => {
ev.preventDefault(); ev.preventDefault();
@ -54,11 +52,11 @@ export class LionForm extends LionFieldset {
this.resetGroup(); this.resetGroup();
this.dispatchEvent(new Event('reset', { bubbles: true })); this.dispatchEvent(new Event('reset', { bubbles: true }));
}; };
this.formElement.addEventListener('reset', this._reset); this._formNode.addEventListener('reset', this._reset);
} }
__teardownEventsForLionForm() { __teardownEventsForLionForm() {
this.formElement.removeEventListener('submit', this._submit); this._formNode.removeEventListener('submit', this._submit);
this.formElement.removeEventListener('rest', this._reset); this._formNode.removeEventListener('rest', this._reset);
} }
} }

22
packages/form/test/lion-form.test.js
View file

@ -9,8 +9,10 @@ import {
} from '@open-wc/testing'; } from '@open-wc/testing';
import { spy } from 'sinon'; import { spy } from 'sinon';
import { LionField } from '@lion/field'; import { LionField } from '@lion/field';
import { LionFieldset } from '@lion/fieldset';
import '@lion/field/lion-field.js'; import '@lion/field/lion-field.js';
import '@lion/fieldset/lion-fieldset.js'; import '@lion/fieldset/lion-fieldset.js';
import '../lion-form.js'; import '../lion-form.js';
const childTagString = defineCE( const childTagString = defineCE(
@ -27,6 +29,26 @@ const formTagString = 'lion-form';
const formTag = unsafeStatic(formTagString); const formTag = unsafeStatic(formTagString);
describe('<lion-form>', () => { describe('<lion-form>', () => {
it('is an instance of LionFieldSet', async () => {
const el = await fixture(html`
<${formTag}>
<form>
</form>
</${formTag}>
`);
expect(el).to.be.instanceOf(LionFieldset);
});
it('relies on the native form for its accessible role', async () => {
const el = await fixture(html`
<${formTag}>
<form>
</form>
</${formTag}>
`);
expect(el.getAttribute('role')).to.be.null;
});
it('has a custom reset that gets triggered by native reset', async () => { it('has a custom reset that gets triggered by native reset', async () => {
const withDefaults = await fixture(html` const withDefaults = await fixture(html`
<${formTag}> <${formTag}>

22
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -136,11 +136,11 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
]; ];
} }
get _invokerElement() { get _invokerNode() {
return this.querySelector(`#${this.__invokerId}`); return this.querySelector(`#${this.__invokerId}`);
} }
get _calendarElement() { get _calendarNode() {
return this._overlayCtrl.contentNode.querySelector('#calendar'); return this._overlayCtrl.contentNode.querySelector('#calendar');
} }
@ -173,8 +173,8 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
} }
__toggleInvokerDisabled() { __toggleInvokerDisabled() {
if (this._invokerElement) { if (this._invokerNode) {
this._invokerElement.disabled = this.disabled || this.readOnly; this._invokerNode.disabled = this.disabled || this.readOnly;
} }
} }
@ -217,8 +217,8 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
render() { render() {
return html` return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.inputGroupTemplate()} ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._inputGroupTemplate()}
${this.feedbackTemplate()} ${this._overlayTemplate()} ${this._feedbackTemplate()} ${this._overlayTemplate()}
`; `;
} }
@ -276,7 +276,7 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
this._overlayCtrl.show(); this._overlayCtrl.show();
await Promise.all([ await Promise.all([
this._overlayCtrl.contentNode.updateComplete, this._overlayCtrl.contentNode.updateComplete,
this._calendarElement.updateComplete, this._calendarNode.updateComplete,
]); ]);
this._onCalendarOverlayOpened(); this._onCalendarOverlayOpened();
} }
@ -286,10 +286,10 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
*/ */
_onCalendarOverlayOpened() { _onCalendarOverlayOpened() {
if (this._focusCentralDateOnCalendarOpen) { if (this._focusCentralDateOnCalendarOpen) {
if (this._calendarElement.selectedDate) { if (this._calendarNode.selectedDate) {
this._calendarElement.focusSelectedDate(); this._calendarNode.focusSelectedDate();
} else { } else {
this._calendarElement.focusCentralDate(); this._calendarNode.focusCentralDate();
} }
} }
} }
@ -339,7 +339,7 @@ export class LionInputDatepicker extends OverlayMixin(LionInputDate) {
* @override Configures OverlayMixin * @override Configures OverlayMixin
*/ */
get _overlayInvokerNode() { get _overlayInvokerNode() {
return this._invokerElement; return this._invokerNode;
} }
/** /**

2
packages/input-datepicker/test-helpers/DatepickerInputObject.js
View file

@ -39,7 +39,7 @@ export class DatepickerInputObject {
*/ */
get invokerEl() { get invokerEl() {
return this.el._invokerElement; return this.el._invokerNode;
} }
get overlayEl() { get overlayEl() {

12
packages/input-range/src/LionInputRange.js
View file

@ -83,24 +83,24 @@ export class LionInputRange extends LocalizeMixin(LionInput) {
} }
} }
inputGroupTemplate() { _inputGroupTemplate() {
return html` return html`
<div> <div>
<span class="input-range__value">${formatNumber(this.formattedValue)}</span> <span class="input-range__value">${formatNumber(this.formattedValue)}</span>
<span class="input-range__unit">${this.unit}</span> <span class="input-range__unit">${this.unit}</span>
</div> </div>
<div class="input-group"> <div class="input-group">
${this.inputGroupBeforeTemplate()} ${this._inputGroupBeforeTemplate()}
<div class="input-group__container"> <div class="input-group__container">
${this.inputGroupPrefixTemplate()} ${this.inputGroupInputTemplate()} ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
${this.inputGroupSuffixTemplate()} ${this._inputGroupSuffixTemplate()}
</div> </div>
${this.inputGroupAfterTemplate()} ${this._inputGroupAfterTemplate()}
</div> </div>
`; `;
} }
inputGroupInputTemplate() { _inputGroupInputTemplate() {
return html` return html`
<div class="input-group__input"> <div class="input-group__input">
<slot name="input"></slot> <slot name="input"></slot>

13
packages/select-rich/src/LionSelectInvoker.js
View file

@ -10,9 +10,16 @@ import { html } from '@lion/core';
export class LionSelectInvoker extends LionButton { export class LionSelectInvoker extends LionButton {
static get properties() { static get properties() {
return { return {
/**
* @desc the option Element that is currently selected
*/
selectedElement: { selectedElement: {
type: Object, type: Object,
}, },
/**
* @desc When the connected LionSelectRich insteance is readOnly,
* this should be reflected in the invoker as well
*/
readOnly: { readOnly: {
type: Boolean, type: Boolean,
reflect: true, reflect: true,
@ -32,7 +39,7 @@ export class LionSelectInvoker extends LionButton {
}; };
} }
get contentWrapper() { get _contentWrapperNode() {
return this.shadowRoot.getElementById('content-wrapper'); return this.shadowRoot.getElementById('content-wrapper');
} }
@ -53,7 +60,7 @@ export class LionSelectInvoker extends LionButton {
return ``; return ``;
} }
_renderBefore() { _beforeTemplate() {
return html` return html`
<div id="content-wrapper"> <div id="content-wrapper">
${this._contentTemplate()} ${this._contentTemplate()}
@ -62,7 +69,7 @@ export class LionSelectInvoker extends LionButton {
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
_renderAfter() { _afterTemplate() {
return html` return html`
<slot name="after"></slot> <slot name="after"></slot>
`; `;

16
packages/select-rich/src/LionSelectRich.js
View file

@ -157,8 +157,8 @@ export class LionSelectRich extends ChoiceGroupMixin(
return this.formElements.findIndex(el => el.active === true); return this.formElements.findIndex(el => el.active === true);
} }
get scrollTarget() { get _scrollTargetNode() {
return this._overlayContentNode.scrollTarget || this._overlayContentNode; return this._overlayContentNode._scrollTargetNode || this._overlayContentNode;
} }
set activeIndex(index) { set activeIndex(index) {
@ -166,7 +166,7 @@ export class LionSelectRich extends ChoiceGroupMixin(
const el = this.formElements[index]; const el = this.formElements[index];
el.active = true; el.active = true;
if (!isInView(this.scrollTarget, el)) { if (!isInView(this._scrollTargetNode, el)) {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} }
} }
@ -239,8 +239,8 @@ export class LionSelectRich extends ChoiceGroupMixin(
render() { render() {
return html` return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.inputGroupTemplate()} ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._inputGroupTemplate()}
${this.feedbackTemplate()} ${this._feedbackTemplate()}
<slot name="_overlay-shadow-outlet"></slot> <slot name="_overlay-shadow-outlet"></slot>
`; `;
} }
@ -288,7 +288,7 @@ export class LionSelectRich extends ChoiceGroupMixin(
* @override * @override
*/ */
// eslint-disable-next-line // eslint-disable-next-line
inputGroupInputTemplate() { _inputGroupInputTemplate() {
return html` return html`
<div class="input-group__input"> <div class="input-group__input">
<slot name="invoker"></slot> <slot name="invoker"></slot>
@ -614,13 +614,13 @@ export class LionSelectRich extends ChoiceGroupMixin(
this._overlayCtrl.addEventListener('hide', this.__overlayOnHide); this._overlayCtrl.addEventListener('hide', this.__overlayOnHide);
this.__preventScrollingWithArrowKeys = this.__preventScrollingWithArrowKeys.bind(this); this.__preventScrollingWithArrowKeys = this.__preventScrollingWithArrowKeys.bind(this);
this.scrollTarget.addEventListener('keydown', this.__preventScrollingWithArrowKeys); this._scrollTargetNode.addEventListener('keydown', this.__preventScrollingWithArrowKeys);
} }
__teardownOverlay() { __teardownOverlay() {
this._overlayCtrl.removeEventListener('show', this.__overlayOnShow); this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide); this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
this.scrollTarget.removeEventListener('keydown', this.__overlayOnHide); this._scrollTargetNode.removeEventListener('keydown', this.__overlayOnHide);
} }
__preventScrollingWithArrowKeys(ev) { __preventScrollingWithArrowKeys(ev) {

8
packages/select-rich/test/lion-select-invoker.test.js
View file

@ -19,7 +19,7 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`<div class="option"><h2>I am</h2><p>2 lines</p></div>`); el.selectedElement = await fixture(`<div class="option"><h2>I am</h2><p>2 lines</p></div>`);
await el.updateComplete; await el.updateComplete;
expect(el.contentWrapper).lightDom.to.equal( expect(el._contentWrapperNode).lightDom.to.equal(
` `
<h2>I am</h2> <h2>I am</h2>
<p>2 lines</p> <p>2 lines</p>
@ -37,7 +37,7 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`<div class="option">just textContent</div>`); el.selectedElement = await fixture(`<div class="option">just textContent</div>`);
await el.updateComplete; await el.updateComplete;
expect(el.contentWrapper).lightDom.to.equal('just textContent'); expect(el._contentWrapperNode).lightDom.to.equal('just textContent');
}); });
it('has tabindex="0"', async () => { it('has tabindex="0"', async () => {
@ -66,11 +66,11 @@ describe('lion-select-invoker', () => {
el.selectedElement = await fixture(`<div class="option">cat</div>`); el.selectedElement = await fixture(`<div class="option">cat</div>`);
await el.updateComplete; await el.updateComplete;
expect(el.contentWrapper).lightDom.to.equal('cat selected'); expect(el._contentWrapperNode).lightDom.to.equal('cat selected');
el.selectedElement = await fixture(`<div class="option">dog</div>`); el.selectedElement = await fixture(`<div class="option">dog</div>`);
await el.updateComplete; await el.updateComplete;
expect(el.contentWrapper).lightDom.to.equal('no valid selection'); expect(el._contentWrapperNode).lightDom.to.equal('no valid selection');
}); });
}); });
}); });

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

@ -30,23 +30,23 @@ export class LionSwitch extends ChoiceInputMixin(LionField) {
render() { render() {
return html` return html`
<div class="form-field__group-one"> <div class="form-field__group-one">
${this.groupOneTemplate()} ${this._groupOneTemplate()}
</div> </div>
<div class="form-field__group-two"> <div class="form-field__group-two">
${this.groupTwoTemplate()} ${this._groupTwoTemplate()}
</div> </div>
`; `;
} }
groupOneTemplate() { _groupOneTemplate() {
return html` return html`
${this.labelTemplate()} ${this.helpTextTemplate()} ${this.feedbackTemplate()} ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}
`; `;
} }
groupTwoTemplate() { _groupTwoTemplate() {
return html` return html`
${this.inputGroupTemplate()} ${this._inputGroupTemplate()}
`; `;
} }