🐛 fix disabled="false" by using in-component class

Author: seanwuapps

src/components/sc-button/sc-button.scss

@@ -225,7 +225,7 @@ sc-button {
     }
   }
 
-  &[disabled] {
+  &.disabled {
     a,
     button {
       box-shadow: none;

src/components/sc-button/sc-button.tsx

@@ -157,6 +157,7 @@ export class ScButton {
           'icon-text': iconText,
           flat,
           circle,
+          disabled,
         }}
       >
         {this.rayTracing && <sc-ray-tracer element={this.el}></sc-ray-tracer>}

src/index.html

@@ -43,6 +43,10 @@
         <sc-accordion multiple>
           <sc-accordion-item heading="Dial" active>
            <sc-button disabled>Disabled</sc-button>
+           <sc-button disabled="true">Disabled</sc-button>
+           <sc-button disabled="disabled">Disabled</sc-button>
+           <sc-button disabled="false">Enabled</sc-button>
+           <sc-button>Enabled</sc-button>
             <!-- <sc-dial value="0" step="1" size="300"></sc-dial> -->
             <sc-dial min="0" max="100" value="50" step="1" size="220"></sc-dial>