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

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;

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(`<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');

packages/calendar/src/calendarStyle.js

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

packages/calendar/test/lion-calendar.test.js

@@ -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;
+    });
   });
 });

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;
           }

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`
+      <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>

packages/field/src/FormControlMixin.js

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

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>
+    <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}>

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;
         }

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`<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>

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;
         }

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -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;
+    });
   });
 });

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;

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;
         }

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`
+          <lion-option .choiceValue=${10} hidden></lion-option>
+        `,
+      );
+      expect(el).not.to.be.displayed;
+    });
   });
 
   describe('Accessibility', () => {

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`
+        <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`

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;
         }

packages/steps/src/LionSteps.js

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

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`
+        <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>

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`
+        <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>

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;
         }

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%;

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;

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`
+        <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>

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;
       }

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`
+      <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