feat(Checkbox): themeDark support

rmwc · Dec 18, 2017 · 61f485d · 61f485d
1 parent 951391e
commit 61f485d
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
@@ -7,7 +7,13 @@ import { simpleTag, withMDCToggle } from '../Base';
 
 export const CheckboxRoot = simpleTag({
   displayName: 'CheckboxRoot',
-  classNames: 'mdc-checkbox'
+  classNames: props => [
+    'mdc-checkbox',
+    {
+      'mdc-checkbox--theme-dark': props.themeDark
+    }
+  ],
+  consumeProps: ['themeDark']
 });
 
 export const CheckboxNativeControl = simpleTag({
@@ -65,7 +71,9 @@ type CheckboxPropsT = {
   /** Make the control indeterminate */
   indeterminate?: boolean,
   /** A label for the control. */
-  label?: string
+  label?: string,
+  /** Use the dark theme. */
+  themeDark?: boolean
 };
 
 /**
@@ -87,14 +95,19 @@ export const Checkbox = withMDCToggle({
         indeterminate,
         mdcElementRef,
         generatedId,
+        themeDark,
         ...rest
       } = this.props;
       const labelId = id || generatedId;
       const checkedProp = checked !== undefined ? { checked } : {};
       const classes = classNames({ 'mdc-checkbox--disabled': rest.disabled });
 
       const checkbox = (
-        <CheckboxRoot elementRef={mdcElementRef} className={classes}>
+        <CheckboxRoot
+          elementRef={mdcElementRef}
+          className={classes}
+          themeDark={themeDark}
+        >
           <CheckboxNativeControl id={labelId} {...checkedProp} {...rest} />
           <CheckboxBackground>
             <CheckboxCheckmark>