refactor: toggling visibility (#1421)

* refactor: toggling visibility by modern hidden attribute

* refactor: toggling visibility by modern hidden attribute

Author: mfranzke

packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js

@@ -104,15 +104,14 @@ class Drawer extends LitElement {
           : 300
         : 0;
 
-    const coverStyles = { display: this.isMouseDown ? 'block' : 'none' };
     const drawerStyles = {
       height: `${renderedHeight}px`,
       transitionDuration: this.isMouseDown ? '0ms' : '300ms',
     };
 
     return html`
       <div>
-        <div class="pl-c-drawer__cover" style="${styleMap(coverStyles)}"></div>
+        <div class="pl-c-drawer__cover" ?hidden="${!this.isMouseDown}"></div>
         <div style="${styleMap(drawerStyles)}" class="pl-c-drawer__wrapper">
           <div class="pl-c-drawer__resizer" @mousedown="${this.onMouseDown}">
             <svg

packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss

@@ -144,7 +144,6 @@ pl-drawer {
   height: 100%;
   top: 0;
   left: 0;
-  display: none;
   position: fixed;
   z-index: 20;
   cursor: move;

packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js

@@ -405,7 +405,7 @@ class IFrame extends BaseLitComponent {
 
     return html`
       <div class="pl-c-viewport pl-js-viewport">
-        <div class="pl-c-viewport__cover pl-js-viewport-cover"></div>
+        <div class="pl-c-viewport__cover pl-js-viewport-cover" hidden></div>
         <div
           class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container"
           style="width: ${initialWidth}"
@@ -450,7 +450,7 @@ class IFrame extends BaseLitComponent {
     this.fullMode = false;
 
     // show the cover
-    this.iframeCover.style.display = 'block';
+    this.iframeCover.hidden = false;
 
     function handleIframeCoverResize(e) {
       const viewportWidth = origViewportWidth + 2 * (e.clientX - origClientX);
@@ -476,7 +476,7 @@ class IFrame extends BaseLitComponent {
           'mousemove',
           handleIframeCoverResize
         );
-        self.iframeCover.style.display = 'none';
+        self.iframeCover.hidden = true;
         self
           .querySelector('.pl-js-resize-handle')
           .classList.remove('is-resizing');

packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss

@@ -57,7 +57,6 @@ pl-iframe {
 .pl-c-viewport__cover {
   width: 100%;
   height: 100%;
-  display: none;
   position: fixed;
   top: 0;
   left: 0;