Toggle: theme is now injectable. (#1943)

* Updating toggle to have a customizable theme. * Adding changefile. * Removing getTheme initializer which doesn't work in a memoized function.
microsoft · Jun 6, 2017 · 72be6cc · 72be6cc
1 parent fca3c2f
commit 72be6cc
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/common/changes/office-ui-fabric-react/toggle_2017-06-06-07-11.json b/common/changes/office-ui-fabric-react/toggle_2017-06-06-07-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Toggle: theme now injectable through Customizer.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts
@@ -1,7 +1,6 @@
 import { IButtonStyles } from '../Button.Props';
 import {
   ITheme,
-  getTheme,
   mergeStyleSets
 } from '../../../Styling';
 import { memoizeFunction } from '../../../Utilities';
@@ -14,7 +13,7 @@ const DEFAULT_BUTTON_MINWIDTH = '80px';
 const DEFAULT_PADDING = '0 16px';
 
 export const getStyles = memoizeFunction((
-  theme: ITheme = getTheme(),
+  theme: ITheme,
   customStyles?: IButtonStyles,
   focusInset?: string,
   focusColor?: string

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.Props.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.Props.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Toggle } from './Toggle';
-import { IStyle } from '../../Styling';
+import { IStyle, ITheme } from '../../Styling';
 
 export interface IToggle {
   focus: () => void;
@@ -61,6 +61,11 @@ export interface IToggleProps extends React.HTMLProps<HTMLElement | Toggle> {
    */
   onChanged?: (checked: boolean) => void;
 
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
   /**
    * Custom styles for this component
    */

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.styles.ts
@@ -1,14 +1,13 @@
 import { IToggleStyles } from './Toggle.Props';
 import {
   ITheme,
-  getTheme,
   mergeStyleSets,
   getFocusStyle
 } from '../../Styling';
 import { memoizeFunction } from '../../Utilities';
 
 export const getStyles = memoizeFunction((
-  theme: ITheme = getTheme(),
+  theme: ITheme,
   customStyles?: IToggleStyles
 ): IToggleStyles => {
   const { semanticColors } = theme;

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx
@@ -28,8 +28,11 @@ describe('Toggle', () => {
     let callback = (isToggled) => {
       isToggledValue = isToggled;
     };
-    let component = ReactTestUtils.renderIntoDocument<React.ReactInstance>(
+    let component;
+
+    ReactTestUtils.renderIntoDocument<React.ReactInstance>(
       <Toggle
+        componentRef={ ref => component = ref }
         label='Label'
         onChanged={ callback }
       />
@@ -43,8 +46,11 @@ describe('Toggle', () => {
   });
 
   it(`doesn't update the state if the user provides checked`, () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    let component;
+
+    ReactTestUtils.renderIntoDocument(
       <Toggle
+        componentRef={ ref => component = ref }
         label='Label'
         checked={ false }
       />
@@ -66,6 +72,7 @@ describe('Toggle', () => {
     let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
     let label = renderedDOM.querySelector('label');
 
+    // tslint:disable-next-line:no-unused-expression
     expect(label).is.null;
   });
 

diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
@@ -13,6 +13,9 @@ import {
   IToggleStyles
 } from './Toggle.Props';
 import { Label } from '../../Label';
+import {
+  customizable
+} from '../../Utilities';
 import {
   mergeStyles
 } from '../../Styling';
@@ -32,6 +35,7 @@ interface IToggleClassNames {
   text: string;
 }
 
+@customizable(['theme'])
 export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements IToggle {
 
   private _id: string;
@@ -74,6 +78,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
 
     let {
       className,
+      theme,
       styles: customStyles,
       disabled,
       label,
@@ -87,7 +92,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
     const ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
     const toggleNativeProps = getNativeProps(this.props, inputProperties, ['defaultChecked']);
     const classNames = this._getClassNames(
-      getStyles(undefined, customStyles),
+      getStyles(theme, customStyles),
       className,
       disabled,
       isChecked