From 9731771c23a5ed8661558e62cb5e34b62cc2b8b7 Mon Sep 17 00:00:00 2001
From: Davide <63789961+davidoff31@users.noreply.github.com>
Date: Wed, 22 Apr 2020 11:20:32 +0200
Subject: [PATCH] fix: add display:none for hidden (#692)
---
packages/button/src/LionButton.js | 4 ++++
packages/button/test/lion-button.test.js | 5 +++++
packages/calendar/src/calendarStyle.js | 4 ++++
packages/calendar/test/lion-calendar.test.js | 9 +++++++++
packages/choice-input/src/ChoiceInputMixin.js | 4 ++++
.../choice-input/test/ChoiceInputMixin.test.js | 7 +++++++
packages/field/src/FormControlMixin.js | 4 ++++
packages/field/test/FormControlMixin.test.js | 9 +++++++++
packages/icon/src/LionIcon.js | 4 ++++
packages/icon/test/lion-icon.test.js | 10 ++++++++++
.../src/LionCalendarOverlayFrame.js | 4 ++++
.../test/lion-input-datepicker.test.js | 13 +++++++++++++
packages/select-rich/src/LionOption.js | 4 ++++
packages/select-rich/src/LionSelectRich.js | 4 ++++
packages/select-rich/test/lion-option.test.js | 9 +++++++++
.../select-rich/test/lion-select-rich.test.js | 11 +++++++++++
packages/steps/src/LionStep.js | 4 ++++
packages/steps/src/LionSteps.js | 4 ++++
packages/steps/test/lion-step.test.js | 11 +++++++++++
packages/steps/test/lion-steps.test.js | 9 +++++++++
packages/switch/src/LionSwitch.js | 4 ++++
packages/switch/src/LionSwitchButton.js | 4 ++++
packages/switch/test/lion-switch-button.test.js | 6 ++++++
packages/switch/test/lion-switch.test.js | 9 +++++++++
packages/tooltip/src/LionTooltipArrow.js | 4 ++++
.../tooltip/test/lion-tooltip-arrow.test.js | 17 +++++++++++++++++
26 files changed, 177 insertions(+)
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 13826a3c6..66919f3f2 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -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;
diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js
index b95c7cf96..0c4d09571 100644
--- a/packages/button/test/lion-button.test.js
+++ b/packages/button/test/lion-button.test.js
@@ -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(`foo`);
+ expect(el).not.to.be.displayed;
+ });
+
it('can be disabled imperatively', async () => {
const el = await fixture(`foo`);
expect(el.getAttribute('tabindex')).to.equal('-1');
diff --git a/packages/calendar/src/calendarStyle.js b/packages/calendar/src/calendarStyle.js
index e6cd64110..d809581e0 100644
--- a/packages/calendar/src/calendarStyle.js
+++ b/packages/calendar/src/calendarStyle.js
@@ -5,6 +5,10 @@ export const calendarStyle = css`
display: block;
}
+ :host([hidden]) {
+ display: none;
+ }
+
.calendar {
display: block;
}
diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js
index 0f2381c29..438edddb2 100644
--- a/packages/calendar/test/lion-calendar.test.js
+++ b/packages/calendar/test/lion-calendar.test.js
@@ -1276,5 +1276,14 @@ describe('', () => {
);
await expect(el).to.be.accessible();
});
+
+ it('is hidden when attribute hidden is true', async () => {
+ const el = await fixture(
+ html`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
});
});
diff --git a/packages/choice-input/src/ChoiceInputMixin.js b/packages/choice-input/src/ChoiceInputMixin.js
index 44415fc41..ec34ec85e 100644
--- a/packages/choice-input/src/ChoiceInputMixin.js
+++ b/packages/choice-input/src/ChoiceInputMixin.js
@@ -94,6 +94,10 @@ export const ChoiceInputMixin = superclass =>
display: flex;
}
+ :host([hidden]) {
+ display: none;
+ }
+
.choice-field__graphic-container {
display: none;
}
diff --git a/packages/choice-input/test/ChoiceInputMixin.test.js b/packages/choice-input/test/ChoiceInputMixin.test.js
index b7e42bdc8..099fe04fe 100644
--- a/packages/choice-input/test/ChoiceInputMixin.test.js
+++ b/packages/choice-input/test/ChoiceInputMixin.test.js
@@ -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`
+
+ `);
+ expect(el).not.to.be.displayed;
+ });
+
it('has choiceValue', async () => {
const el = await fixture(html`
diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index 045298016..24b179416 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/packages/field/src/FormControlMixin.js
@@ -504,6 +504,10 @@ export const FormControlMixin = dedupeMixin(
display: block;
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host([disabled]) {
pointer-events: none;
}
diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js
index 41817c71b..7a15a01e5 100644
--- a/packages/field/test/FormControlMixin.test.js
+++ b/packages/field/test/FormControlMixin.test.js
@@ -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>
+
+ ${inputSlot}
+ `);
+ expect(el).not.to.be.displayed;
+ });
+
it('has a label that supports inner html', async () => {
const el = await fixture(html`
<${tag}>
diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js
index 10e528bcf..546d9c0b0 100644
--- a/packages/icon/src/LionIcon.js
+++ b/packages/icon/src/LionIcon.js
@@ -69,6 +69,10 @@ export class LionIcon extends LitElement {
height: 1em;
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host:first-child {
margin-left: 0;
}
diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js
index 04dbf647e..bc2d5d0d9 100644
--- a/packages/icon/test/lion-icon.test.js
+++ b/packages/icon/test/lion-icon.test.js
@@ -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``;
+ const el = await fixture(
+ html`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
+
it('supports svg icon as a lit-html template', async () => {
const icon = html`
diff --git a/packages/input-datepicker/src/LionCalendarOverlayFrame.js b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
index d744ec4c3..e5369e43f 100644
--- a/packages/input-datepicker/src/LionCalendarOverlayFrame.js
+++ b/packages/input-datepicker/src/LionCalendarOverlayFrame.js
@@ -11,6 +11,10 @@ export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
position: relative;
}
+ :host([hidden]) {
+ display: none;
+ }
+
.calendar-overlay__header {
display: flex;
}
diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js
index 8e8626195..c2034ae91 100644
--- a/packages/input-datepicker/test/lion-input-datepicker.test.js
+++ b/packages/input-datepicker/test/lion-input-datepicker.test.js
@@ -513,5 +513,18 @@ describe('', () => {
await elObj.openCalendar();
expect(submitSpy.callCount).to.equal(0);
});
+
+ it('is hidden when attribute hidden is true', async () => {
+ const el = await fixture(html`
+
+ `);
+
+ 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;
+ });
});
});
diff --git a/packages/select-rich/src/LionOption.js b/packages/select-rich/src/LionOption.js
index ab84dc105..572d1221d 100644
--- a/packages/select-rich/src/LionOption.js
+++ b/packages/select-rich/src/LionOption.js
@@ -32,6 +32,10 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
padding: 4px;
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host([active]),
:host(:hover) {
background-color: #ddd;
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index b6bf62456..cfc60262f 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -100,6 +100,10 @@ export class LionSelectRich extends ScopedElementsMixin(
display: block;
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host([disabled]) {
color: #adadad;
}
diff --git a/packages/select-rich/test/lion-option.test.js b/packages/select-rich/test/lion-option.test.js
index 964a484b9..b9c3539e7 100644
--- a/packages/select-rich/test/lion-option.test.js
+++ b/packages/select-rich/test/lion-option.test.js
@@ -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`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
});
describe('Accessibility', () => {
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index b6e14a2b9..27d3a2d56 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -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`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
+
it(`has a fieldName based on the label`, async () => {
const el1 = await fixture(
html`
diff --git a/packages/steps/src/LionStep.js b/packages/steps/src/LionStep.js
index 3db30564d..9982d361e 100644
--- a/packages/steps/src/LionStep.js
+++ b/packages/steps/src/LionStep.js
@@ -84,6 +84,10 @@ export class LionStep extends LitElement {
display: none;
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host([status='entered']) {
display: block;
}
diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js
index 69a529a32..c50802e88 100644
--- a/packages/steps/src/LionSteps.js
+++ b/packages/steps/src/LionSteps.js
@@ -54,6 +54,10 @@ export class LionSteps extends LitElement {
:host {
display: block;
}
+
+ :host([hidden]) {
+ display: none;
+ }
`,
];
}
diff --git a/packages/steps/test/lion-step.test.js b/packages/steps/test/lion-step.test.js
index 53a4a8b8e..ab3dfc82c 100644
--- a/packages/steps/test/lion-step.test.js
+++ b/packages/steps/test/lion-step.test.js
@@ -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`
+
+ Step 1
+
+ `,
+ );
+ expect(el.children[0]).not.to.be.displayed;
+ });
+
it('communicates with a parent steps controller to handles actions', async () => {
const el = await fixture(html`
diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js
index e1289fa50..cd3aef18f 100644
--- a/packages/steps/test/lion-steps.test.js
+++ b/packages/steps/test/lion-steps.test.js
@@ -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`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
+
it('has "steps" getter that returns default slot elements', async () => {
const el = await fixture(html`
diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js
index 6d64c535b..b5f388cf5 100644
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@@ -8,6 +8,10 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
return [
super.styles,
css`
+ :host([hidden]) {
+ display: none;
+ }
+
:host([disabled]) {
color: #adadad;
}
diff --git a/packages/switch/src/LionSwitchButton.js b/packages/switch/src/LionSwitchButton.js
index 17a82e5ff..877907147 100644
--- a/packages/switch/src/LionSwitchButton.js
+++ b/packages/switch/src/LionSwitchButton.js
@@ -25,6 +25,10 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
outline: 0;
}
+ :host([hidden]) {
+ display: none;
+ }
+
.btn {
position: relative;
height: 100%;
diff --git a/packages/switch/test/lion-switch-button.test.js b/packages/switch/test/lion-switch-button.test.js
index 9ccdc9317..cfdd43af4 100644
--- a/packages/switch/test/lion-switch-button.test.js
+++ b/packages/switch/test/lion-switch-button.test.js
@@ -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;
diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js
index 9077c7c29..62e2e95a4 100644
--- a/packages/switch/test/lion-switch.test.js
+++ b/packages/switch/test/lion-switch.test.js
@@ -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`
+
+ `,
+ );
+ expect(el).not.to.be.displayed;
+ });
+
it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html`
diff --git a/packages/tooltip/src/LionTooltipArrow.js b/packages/tooltip/src/LionTooltipArrow.js
index 0bcf8f975..0cef9a7ef 100644
--- a/packages/tooltip/src/LionTooltipArrow.js
+++ b/packages/tooltip/src/LionTooltipArrow.js
@@ -17,6 +17,10 @@ export class LionTooltipArrow extends LitElement {
height: var(--tooltip-arrow-height);
}
+ :host([hidden]) {
+ display: none;
+ }
+
:host svg {
display: block;
}
diff --git a/packages/tooltip/test/lion-tooltip-arrow.test.js b/packages/tooltip/test/lion-tooltip-arrow.test.js
index f7d31b5ef..9f70f9c0b 100644
--- a/packages/tooltip/test/lion-tooltip-arrow.test.js
+++ b/packages/tooltip/test/lion-tooltip-arrow.test.js
@@ -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`
+
+
+ Hey there
+
+
+
+
+ `);
+ 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`