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

fix: add display:none for hidden (#692)

Browse source
This commit is contained in:
Davide 2020-04-22 11:20:32 +02:00 committed by Thomas Allmer
parent bcce2a2293
commit 9731771c23
26 changed files with 177 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -119,6 +119,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
pointer-events: none;
}
:host([hidden]) {
display: none;
}
:host([disabled]) .btn {
/* if you extend, please overwrite */
background: lightgray;

5
packages/button/test/lion-button.test.js
View file

@ -49,6 +49,11 @@ describe('lion-button', () => {
expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(`<lion-button hidden>foo</lion-button>`);
expect(el).not.to.be.displayed;
});
it('can be disabled imperatively', async () => {
const el = await fixture(`<lion-button disabled>foo</lion-button>`);
expect(el.getAttribute('tabindex')).to.equal('-1');

4
packages/calendar/src/calendarStyle.js
View file

@ -5,6 +5,10 @@ export const calendarStyle = css`
display: block;
}
:host([hidden]) {
display: none;
}
.calendar {
display: block;
}

9
packages/calendar/test/lion-calendar.test.js
View file

@ -1276,5 +1276,14 @@ describe('<lion-calendar>', () => {
);
await expect(el).to.be.accessible();
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-calendar hidden></lion-calendar>
`,
);
expect(el).not.to.be.displayed;
});
});
});

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

@ -94,6 +94,10 @@ export const ChoiceInputMixin = superclass =>
display: flex;
}
:host([hidden]) {
display: none;
}
.choice-field__graphic-container {
display: none;
}

7
packages/choice-input/test/ChoiceInputMixin.test.js
View file

@ -16,6 +16,13 @@ describe('ChoiceInputMixin', () => {
customElements.define('choice-input', ChoiceInput);
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<choice-input hidden></choice-input>
`);
expect(el).not.to.be.displayed;
});
it('has choiceValue', async () => {
const el = await fixture(html`
<choice-input .choiceValue=${'foo'}></choice-input>

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

@ -504,6 +504,10 @@ export const FormControlMixin = dedupeMixin(
display: block;
}
:host([hidden]) {
display: none;
}
:host([disabled]) {
pointer-events: none;
}

9
packages/field/test/FormControlMixin.test.js
View file

@ -46,6 +46,15 @@ describe('FormControlMixin', () => {
expect(elElem.label).to.equal('Email address', 'as an element');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<${tag} hidden>
<label slot="label">Email <span>address</span></label>
${inputSlot}
</${tag}>`);
expect(el).not.to.be.displayed;
});
it('has a label that supports inner html', async () => {
const el = await fixture(html`
<${tag}>

4
packages/icon/src/LionIcon.js
View file

@ -69,6 +69,10 @@ export class LionIcon extends LitElement {
height: 1em;
}
:host([hidden]) {
display: none;
}
:host:first-child {
margin-left: 0;
}

10
packages/icon/test/lion-icon.test.js
View file

@ -17,6 +17,16 @@ describe('lion-icon', () => {
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
});
it('is hidden when attribute hidden is true', async () => {
const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
const el = await fixture(
html`
<lion-icon .svg=${iconFunction} hidden></lion-icon>
`,
);
expect(el).not.to.be.displayed;
});
it('supports svg icon as a lit-html template', async () => {
const icon = html`
<svg data-test-id="svg"></svg>

4
packages/input-datepicker/src/LionCalendarOverlayFrame.js
View file

@ -11,6 +11,10 @@ export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
position: relative;
}
:host([hidden]) {
display: none;
}
.calendar-overlay__header {
display: flex;
}

13
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -513,5 +513,18 @@ describe('<lion-input-datepicker>', () => {
await elObj.openCalendar();
expect(submitSpy.callCount).to.equal(0);
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
await el.updateComplete;
const myElObj = new DatepickerInputObject(el);
await myElObj.openCalendar();
myElObj.overlayEl.hidden = true;
await el.updateComplete;
expect(myElObj.overlayEl).not.to.be.displayed;
});
});
});

4
packages/select-rich/src/LionOption.js
View file

@ -32,6 +32,10 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
padding: 4px;
}
:host([hidden]) {
display: none;
}
:host([active]),
:host(:hover) {
background-color: #ddd;

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

@ -100,6 +100,10 @@ export class LionSelectRich extends ScopedElementsMixin(
display: block;
}
:host([hidden]) {
display: none;
}
:host([disabled]) {
color: #adadad;
}

9
packages/select-rich/test/lion-option.test.js
View file

@ -18,6 +18,15 @@ describe('lion-option', () => {
`);
expect(el.modelValue).to.deep.equal({ value: 10, checked: true });
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-option .choiceValue=${10} hidden></lion-option>
`,
);
expect(el).not.to.be.displayed;
});
});
describe('Accessibility', () => {

11
packages/select-rich/test/lion-select-rich.test.js
View file

@ -104,6 +104,17 @@ describe('lion-select-rich', () => {
expect(el.formElements[2].checked).to.be.true;
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-select-rich label="foo" hidden
><lion-options slot="input"></lion-options
></lion-select-rich>
`,
);
expect(el).not.to.be.displayed;
});
it(`has a fieldName based on the label`, async () => {
const el1 = await fixture(
html`

4
packages/steps/src/LionStep.js
View file

@ -84,6 +84,10 @@ export class LionStep extends LitElement {
display: none;
}
:host([hidden]) {
display: none;
}
:host([status='entered']) {
display: block;
}

4
packages/steps/src/LionSteps.js
View file

@ -54,6 +54,10 @@ export class LionSteps extends LitElement {
:host {
display: block;
}
:host([hidden]) {
display: none;
}
`,
];
}

11
packages/steps/test/lion-step.test.js
View file

@ -44,6 +44,17 @@ describe('lion-step', () => {
expect(el.children[0].status).to.equal('untouched');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<fake-lion-steps>
<lion-step hidden>Step 1</lion-step>
</fake-lion-steps>
`,
);
expect(el.children[0]).not.to.be.displayed;
});
it('communicates with a parent steps controller to handles actions', async () => {
const el = await fixture(html`
<fake-lion-steps>

9
packages/steps/test/lion-steps.test.js
View file

@ -34,6 +34,15 @@ describe('lion-steps', () => {
expect(el).to.be.a('HTMLElement');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-steps hidden> </lion-steps>
`,
);
expect(el).not.to.be.displayed;
});
it('has "steps" getter that returns default slot elements', async () => {
const el = await fixture(html`
<lion-steps>

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

@ -8,6 +8,10 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
return [
super.styles,
css`
:host([hidden]) {
display: none;
}
:host([disabled]) {
color: #adadad;
}

4
packages/switch/src/LionSwitchButton.js
View file

@ -25,6 +25,10 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
outline: 0;
}
:host([hidden]) {
display: none;
}
.btn {
position: relative;
height: 100%;

6
packages/switch/test/lion-switch-button.test.js
View file

@ -25,6 +25,12 @@ describe('lion-switch-button', () => {
expect(el.hasAttribute('checked')).to.be.false;
});
it('is hidden when attribute hidden is true', async () => {
el.hidden = true;
await el.updateComplete;
expect(el).not.to.be.displayed;
});
it('should toggle the value of "checked" on click', async () => {
expect(el.checked).to.be.false;
expect(el.hasAttribute('checked')).to.be.false;

9
packages/switch/test/lion-switch.test.js
View file

@ -22,6 +22,15 @@ describe('lion-switch', () => {
expect(el._inputNode.hasAttribute('disabled')).to.be.false;
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-switch hidden></lion-switch>
`,
);
expect(el).not.to.be.displayed;
});
it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html`
<lion-switch></lion-switch>

4
packages/tooltip/src/LionTooltipArrow.js
View file

@ -17,6 +17,10 @@ export class LionTooltipArrow extends LitElement {
height: var(--tooltip-arrow-height);
}
:host([hidden]) {
display: none;
}
:host svg {
display: block;
}

17
packages/tooltip/test/lion-tooltip-arrow.test.js
View file

@ -41,6 +41,23 @@ describe('lion-tooltip-arrow', () => {
expect(arrowElement.getAttribute('placement')).to.equal('bottom');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<lion-tooltip .config="${{}}">
<div slot="content">
Hey there
</div>
<button slot="invoker">Tooltip button</button>
<lion-tooltip-arrow slot="arrow" hidden></lion-tooltip-arrow>
</lion-tooltip>
`);
const arrowElement = el.querySelector('lion-tooltip-arrow');
el.opened = true;
await el.repositionComplete;
expect(arrowElement).not.to.be.displayed;
});
it('makes sure positioning of the arrow is correct', async () => {
const el = await fixture(html`
<lion-tooltip