feat(core/button): enable shadowDOM (#534)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

packages/core/component-doc.json

@@ -535,7 +535,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-date-picker",
         "ix-datetime-picker",
@@ -4076,7 +4076,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-category-filter",
         "ix-date-picker",

packages/core/scss/components/_buttons.scss

@@ -26,9 +26,6 @@
 
   .glyph {
     margin-right: $tiny-space;
-  }
-
-  .glyph {
     font-weight: $font-weight-normal;
   }
 
@@ -42,9 +39,7 @@ $button-categories: (primary, secondary);
 
 @mixin btn($name, $enable-border: true) {
   .btn-#{$name} {
-    & {
-      border-radius: var(--theme-btn--border-radius);
-    }
+    border-radius: var(--theme-btn--border-radius);
 
     @if $enable-border == false {
       --bs-btn-border-width: 0px;
@@ -61,6 +56,8 @@ $button-categories: (primary, secondary);
         border-width: var(--theme-btn--border-thickness);
         border-color: var(--theme-btn-#{$name}--border-color);
         border-style: solid;
+      } @else {
+        border-color: transparent;
       }
     }
 

packages/core/src/components/button/button.scss

@@ -7,10 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import 'common-variables';
+@import './components/buttons';
+
 :host {
   display: inline-block;
   width: auto;
   height: 2rem;
+  vertical-align: middle;
 
   &.disabled {
     pointer-events: none;
@@ -20,4 +24,8 @@
     width: 100%;
     height: 100%;
   }
+
+  button:not(:disabled) {
+    cursor: pointer;
+  }
 }

packages/core/src/components/button/button.tsx

@@ -14,7 +14,7 @@ export type ButtonVariant = 'Primary' | 'Secondary';
 
 @Component({
   tag: 'ix-button',
-  scoped: true,
+  shadow: true,
   styleUrl: './button.scss',
 })
 export class Button {

packages/core/src/components/icon-button/icon-button.scss

@@ -6,7 +6,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+@import 'common-variables';
+@import './components/buttons';
+
 :host {
+  display: inline-block;
+  vertical-align: middle;
+
   &.disabled {
     pointer-events: none;
   }
@@ -15,4 +22,8 @@
     padding: 0;
     overflow: hidden;
   }
+
+  button:not(:disabled) {
+    cursor: pointer;
+  }
 }

packages/core/src/components/icon-button/icon-button.tsx

@@ -16,7 +16,7 @@ export type IconButtonVariant = ButtonVariant;
 @Component({
   tag: 'ix-icon-button',
   styleUrl: 'icon-button.scss',
-  scoped: true,
+  shadow: true,
 })
 export class IconButton implements Button {
   /**
@@ -76,6 +76,14 @@ export class IconButton implements Button {
    */
   @Prop() type: 'button' | 'submit' = 'button';
 
+  private getIconSizeClass() {
+    return {
+      'btn-icon-12': this.size === '12',
+      'btn-icon-16': this.size === '16',
+      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,
+    };
+  }
+
   private getIconButtonClasses() {
     return {
       ...getButtonClasses(
@@ -88,15 +96,13 @@ export class IconButton implements Button {
         this.disabled
       ),
       'icon-button': true,
-      'btn-icon-12': this.size === '12',
-      'btn-icon-16': this.size === '16',
-      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,
+      ...this.getIconSizeClass(),
     };
   }
 
   render() {
     return (
-      <Host class={{ disabled: this.disabled }}>
+      <Host class={{ ...this.getIconSizeClass(), disabled: this.disabled }}>
         <button class={this.getIconButtonClasses()} type={this.type}>
           <ix-icon size={this.size} name={this.icon} color={this.color} />
           <div style={{ display: 'none' }}>

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

@@ -22,7 +22,11 @@ regressionTest.describe('button: basic', () => {
     const bodyElement = await page.waitForSelector('body');
 
     await page.evaluate((body) => {
-      body.querySelectorAll('button').forEach((b) => b.classList.add('hover'));
+      body
+        .querySelectorAll('ix-button')
+        .forEach((b) =>
+          b.shadowRoot.querySelector('button').classList.add('hover')
+        );
     }, bodyElement);
 
     await page.waitForSelector('ix-button > button.hover');
@@ -38,9 +42,15 @@ regressionTest.describe('button: basic', () => {
     const bodyElement = await page.waitForSelector('body');
 
     await page.evaluate((body) => {
-      body.querySelectorAll('button').forEach((b) => b.classList.add('active'));
+      body
+        .querySelectorAll('ix-button')
+        .forEach((b) =>
+          b.shadowRoot.querySelector('button').classList.add('active')
+        );
     }, bodyElement);
 
+    await page.waitForSelector('ix-button > button.active');
+
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 });