From 72be6cc47ebd962cfe24d932415d0f3d41883469 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 6 Jun 2017 00:28:41 -0700 Subject: [PATCH] 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. --- .../toggle_2017-06-06-07-11.json | 11 +++++++++++ .../Button/DefaultButton/DefaultButton.styles.ts | 3 +-- .../src/components/Toggle/Toggle.Props.ts | 7 ++++++- .../src/components/Toggle/Toggle.styles.ts | 3 +-- .../src/components/Toggle/Toggle.test.tsx | 11 +++++++++-- .../src/components/Toggle/Toggle.tsx | 7 ++++++- 6 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 common/changes/office-ui-fabric-react/toggle_2017-06-06-07-11.json 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 new file mode 100644 index 0000000000000..094a12ac55b5d --- /dev/null +++ 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": "dzearing@microsoft.com" +} \ No newline at end of file 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 index 9cbe13fdd2cce..6a005bd8194d5 100644 --- 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 index 66acc45a4a66e..39b3483ff5523 100644 --- 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 { */ 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 index 49faaf10ba73c..368a57431e591 100644 --- 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 index 6ee1c52d5bc2f..25c5697478770 100644 --- 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( + let component; + + ReactTestUtils.renderIntoDocument( 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( 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 index 3c4ee0b7cbca7..ef5afb7c12640 100644 --- 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 implements IToggle { private _id: string; @@ -74,6 +78,7 @@ export class Toggle extends BaseComponent implements let { className, + theme, styles: customStyles, disabled, label, @@ -87,7 +92,7 @@ export class Toggle extends BaseComponent 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