feat(radio): added disabled state

positive-js · May 4, 2018 · 43e0bf5 · 43e0bf5
1 parent 8df2b1d
commit 43e0bf5
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/src/lib-dev/radio/module.ts b/src/lib-dev/radio/module.ts
@@ -17,6 +17,8 @@ import {ThemePickerModule} from '../theme-picker';
 export class DemoComponent {
     favoriteFruit: string;
 
+    isDisabled: boolean = true;
+
     fruits = [
         'Apple',
         'Banana',

diff --git a/src/lib-dev/radio/template.html b/src/lib-dev/radio/template.html
@@ -8,5 +8,17 @@
     </mc-radio-button>
 </mc-radio-group>
 
-<br/><br/>
+<br/>
 <div class="example-selected-value">Your favorite fruit is: {{favoriteFruit}}</div>
+
+<br/>
+<b>Disabled buttons:</b>
+<br/>
+<mc-radio-group
+    class="example-radio-group"
+    name="my_options"
+    [disabled]="isDisabled">
+    <mc-radio-button class="example-radio-button" value="option_1">Option 1</mc-radio-button>
+    <mc-radio-button class="example-radio-button" value="option_2">Option 2</mc-radio-button>
+    <mc-radio-button class="example-radio-button" value="option_3">Option 3</mc-radio-button>
+</mc-radio-group>
diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
@@ -6,6 +6,7 @@ $white-87-opacity: rgba(white, 0.87);
 $white-12-opacity: rgba(white, 0.12);
 $white-6-opacity:  rgba(white, 0.06);
 
+$dark-disabled-text: rgba(black, 0.5);
 
 $mc-blue: (
     40: #f6fbfd,
@@ -124,7 +125,7 @@ $mc-grey: (
 // Foreground palette for light themes.
 $mc-light-theme-foreground: (
     base:              black,
-    disabled:          rgba(black, 0.38),
+    disabled:          $dark-disabled-text,
     disabled-button:   rgba(black, 0.26),
     disabled-text:     rgba(black, 0.3),
     hint-text:         rgba(black, 0.38),

diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
@@ -14,6 +14,42 @@
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
     $warn: map-get($theme, warn);
+    $foreground: map-get($theme, foreground);
+
+    .mc-radio-label {
+
+        &:hover {
+
+            .mc-radio-inner-circle {
+                background-color: rgba(0, 0, 0, 0.06);
+            }
+        }
+    }
+
+    .mc-radio-disabled {
+
+        .mc-radio-inner-circle {
+            background-color: mc-color($second, 40);
+        }
+
+        .mc-radio-outer-circle {
+            border-color: mc-color($second, 100);
+        }
+
+        .mc-radio-label-content {
+            color: mc-color($foreground, disabled);
+        }
+    }
+
+    .mc-radio-disabled .mc-radio-label {
+
+        &:hover {
+
+            .mc-radio-inner-circle {
+                background-color: mc-color($second, 40);
+            }
+        }
+    }
 
     .mc-radio-button {
 
@@ -35,7 +71,6 @@
                     background-color: white;
                 }
             }
-
         }
 
         &.mc-warn {

diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
@@ -14,12 +14,6 @@ $mc-toggle-padding: 8px !default;
     align-items: center;
     white-space: nowrap;
     vertical-align: middle;
-
-    &:hover {
-        .mc-radio-outer-circle {
-            background-color: rgba(0, 0, 0, 0.06);
-        }
-    }
 }
 
 // Container for radio circles and ripple.