fix(button): use class instead of reflect

fixes #15623
ionic-team · Oct 8, 2018 · e189cc6 · e189cc6
1 parent e2ea08b
commit e189cc6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 38 deletions.
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -62,7 +62,7 @@
   font-kerning: none;
 }
 
-:host([disabled]) {
+:host(.button-disabled) {
   pointer-events: none;
 }
 

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
 
-import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
+import { Color, Mode, RouterDirection } from '../../interface';
 import { hasShadowDom } from '../../utils/helpers';
 import { createColorClasses, openURL } from '../../utils/theme';
 
@@ -146,19 +146,21 @@ export class Button implements ComponentInterface {
   }
 
   hostData() {
-    const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
+    const { buttonType, keyFocus, disabled, color, expand, fill, shape, size, strong } = this;
 
     return {
       'ion-activatable': true,
       class: {
         ...createColorClasses(color),
-        ...getButtonClassMap(buttonType, mode),
-        ...getButtonTypeClassMap(buttonType, expand, mode),
-        ...getButtonTypeClassMap(buttonType, size, mode),
-        ...getButtonTypeClassMap(buttonType, shape, mode),
-        ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
-        ...getButtonTypeClassMap(buttonType, fill, mode),
-        'focused': this.keyFocus,
+        [buttonType]: true,
+        [`${buttonType}-${expand}`]: !!expand,
+        [`${buttonType}-${size}`]: !!size,
+        [`${buttonType}-${shape}`]: !!shape,
+        [`${buttonType}-${fill}`]: !!fill,
+        [`${buttonType}-strong`]: strong,
+
+        'focused': keyFocus,
+        'button-disabled': disabled
       }
     };
   }
@@ -191,31 +193,3 @@ export class Button implements ComponentInterface {
     );
   }
 }
-
-/**
- * Get the classes based on the button type
- * e.g. alert-button, action-sheet-button
- */
-function getButtonClassMap(buttonType: string | undefined, mode: Mode): CssClassMap {
-  if (buttonType === undefined) {
-    return {};
-  }
-  return {
-    [buttonType]: true,
-    [`${buttonType}-${mode}`]: true
-  };
-}
-
-/**
- * Get the classes based on the type
- * e.g. block, full, round, large
- */
-function getButtonTypeClassMap(buttonType: string, type: string | undefined, mode: Mode): CssClassMap {
-  if (type === undefined) {
-    return {};
-  }
-  return {
-    [`${buttonType}-${type}`]: true,
-    [`${buttonType}-${type}-${mode}`]: true
-  };
-}