fix(core/button): apply correct disable state (#286)

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

@@ -11,7 +11,7 @@
   display: inline-block;
   height: 2rem;
 
-  &[disabled] {
+  &.button-disabled {
     pointer-events: none;
   }
 }

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

@@ -56,7 +56,11 @@ export class Button {
 
   render() {
     return (
-      <Host>
+      <Host
+        class={{
+          'button-disabled': this.disabled,
+        }}
+      >
         <button
           type={this.type}
           class={getButtonClasses(

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

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { Button } from '../button';
+
+describe('ix-button', () => {
+  let page: SpecPage;
+
+  it('should be disabled without value', async () => {
+    page = await newSpecPage({
+      components: [Button],
+      html: '<ix-button disabled>xxx</ix-button>',
+    });
+
+    await page.waitForChanges();
+
+    expect(page.doc.querySelector('ix-button').className).toContain(
+      'button-disabled'
+    );
+  });
+
+  it('should be disabled with "true"', async () => {
+    page = await newSpecPage({
+      components: [Button],
+      html: '<ix-button disabled="true">xxx</ix-button>',
+    });
+
+    await page.waitForChanges();
+
+    expect(page.doc.querySelector('ix-button').className).toContain(
+      'button-disabled'
+    );
+  });
+
+  it('should NOT disabled with "false"', async () => {
+    page = await newSpecPage({
+      components: [Button],
+      html: '<ix-button disabled="false">xxx</ix-button>',
+    });
+
+    await page.waitForChanges();
+
+    expect(page.doc.querySelector('ix-button').className).not.toContain(
+      'button-disabled'
+    );
+  });
+});