feat(core/drawer): enable shadow dom (#544)

packages/core/component-doc.json

@@ -2072,7 +2072,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon-button"
@@ -2200,7 +2200,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "toggleDrawer(show: boolean) => Promise<void>",
+          "signature": "toggleDrawer(show?: boolean) => Promise<void>",
           "parameters": [],
           "docs": "Toggle or define show state of drawer",
           "docsTags": [

packages/core/src/components.d.ts

@@ -454,7 +454,7 @@ export namespace Components {
           * Toggle or define show state of drawer
           * @param show Overwrite toggle state with boolean
          */
-        "toggleDrawer": (show: boolean) => Promise<void>;
+        "toggleDrawer": (show?: boolean) => Promise<void>;
         /**
           * Width interpreted as REM if not set to 'auto'
          */

packages/core/src/components/drawer/drawer.scss

@@ -6,11 +6,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+@import 'mixins/shadow-dom/component';
 @import 'mixins/shadows';
 @import 'common-variables';
 
-.drawer-container {
+:host {
+  @include ix-component;
+
   top: 0;
   right: 0;
   @include box-shadow(3);
@@ -29,39 +31,38 @@
   border-radius: $default-border-radius;
 
   transition: all $medium-time ease-out;
-}
 
-.toggle {
-  z-index: 100;
-  visibility: visible;
-}
+  .toggle {
+    z-index: 100;
+    visibility: visible;
+  }
 
-.drawer-container.full-height {
-  min-height: 100%;
-}
+  .drawer-container.full-height {
+    min-height: 100%;
+  }
 
-.header {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: flex-end;
-  height: 3.5rem;
-  padding: $small-space $default-space;
-  width: 100%;
-  order: 1;
+  .header {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    width: 100%;
+    order: 1;
 
-  .header-content {
-    flex-grow: 1;
-    margin-right: $default-space;
+    .header-content {
+      flex-grow: 1;
+      margin-right: $default-space;
+    }
   }
-}
 
-.content {
-  position: relative;
-  flex: 1;
-  flex-grow: 1;
-  order: 2;
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
+  .content {
+    position: relative;
+    flex: 1;
+    flex-grow: 1;
+    order: 2;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
 }

packages/core/src/components/drawer/drawer.tsx

@@ -12,6 +12,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Method,
   Prop,
   Watch,
@@ -21,7 +22,7 @@ import anime from 'animejs';
 @Component({
   tag: 'ix-drawer',
   styleUrl: 'drawer.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Drawer {
   /**
@@ -79,7 +80,7 @@ export class Drawer {
    * @param show Overwrite toggle state with boolean
    */
   @Method()
-  async toggleDrawer(show: boolean): Promise<void> {
+  async toggleDrawer(show?: boolean): Promise<void> {
     this.show = show !== undefined ? show : !this.show;
 
     if (show) {
@@ -147,7 +148,7 @@ export class Drawer {
 
   render() {
     return (
-      <div
+      <Host
         class={{
           'drawer-container': true,
           toggle: this.show,
@@ -168,6 +169,7 @@ export class Drawer {
             <slot name="header"></slot>
           </div>
           <ix-icon-button
+            class="close-button"
             icon="close"
             size="24"
             ghost
@@ -178,7 +180,7 @@ export class Drawer {
         <div class="content">
           <slot></slot>
         </div>
-      </div>
+      </Host>
     );
   }
 }

packages/core/src/components/drawer/test/drawer.spec.tsx

@@ -13,38 +13,36 @@ import { Drawer } from '../drawer';
 
 describe('ix-drawer', () => {
   let page: any;
-  let drawer: any;
+  let drawer: HTMLIxDrawerElement;
   let container: HTMLDivElement;
 
   beforeEach(async () => {
     page = await newSpecPage({
       components: [Drawer],
-      html: '<ix-drawer></ix-drawer>',
+      html: '<ix-drawer>Example Content</ix-drawer>',
     });
 
     drawer = document.querySelector('ix-drawer');
     container = document.querySelector('[data-testid="container"]');
   });
 
-  it('renders', () => {
-    expect(page.root).toMatchSnapshot();
-  });
-
   it('opens the drawer', async () => {
     drawer.show = true;
     await page.waitForChanges();
 
     expect(drawer.show).toBeTruthy();
 
     await page.waitForChanges();
-    expect(drawer.innerHTML).toContain('toggle');
+    expect(drawer.innerText).toContain('Example Content');
   });
 
   it('closes the drawer', async () => {
     drawer.show = true;
     await page.waitForChanges();
 
-    const closeButton = page.doc.querySelector('[data-testid="close-button"]');
+    const closeButton = drawer.shadowRoot.querySelector(
+      '[data-testid="close-button"]'
+    );
     fireEvent.click(closeButton);
     await page.waitForChanges();
     expect(drawer.show).toBeFalsy();
@@ -78,7 +76,9 @@ describe('ix-drawer', () => {
     drawer.toggleDrawer();
     await page.waitForChanges();
 
-    const closeButton = page.doc.querySelector('[data-testid="close-button"]');
+    const closeButton = drawer.shadowRoot.querySelector(
+      '[data-testid="close-button"]'
+    );
     fireEvent.click(closeButton);
 
     window.removeEventListener('open', mockCallback);

packages/core/src/tests/drawer/drawer.e2e.ts

@@ -14,7 +14,7 @@ regressionTest.describe('drawer', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('drawer/basic');
     await page.locator('ix-button').click();
-    await page.waitForTimeout(800);
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    await page.waitForTimeout(2000);
+    expect(await page.screenshot()).toMatchSnapshot();
   });
 });