From b514fa51d24fa12c5bf25bfa2e5ec76b2c675d4f Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 09:10:20 -0700 Subject: [PATCH 1/6] New animateIcon prop --- .../components/SearchBox/SearchBox.base.tsx | 10 +++++++-- .../components/SearchBox/SearchBox.styles.tsx | 16 ++++++++------ .../components/SearchBox/SearchBox.types.ts | 7 ++++++ .../examples/SearchBox.FullSize.Example.tsx | 22 ++++++++++++++----- 4 files changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index c25b89b947aa8d..4c3cbac4dcef7e 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -22,6 +22,10 @@ export interface ISearchBoxState { @customizable('SearchBox', ['theme']) export class SearchBoxBase extends BaseComponent { + public static defaultProps: ISearchBoxProps = { + animateIcon: true + } + private _rootElement = createRef(); private _inputElement = createRef(); private _latestValue: string; @@ -62,7 +66,8 @@ export class SearchBoxBase extends BaseComponent 0 + hasInput: value!.length > 0, + animateIcon }); return ( diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 11564d48c9c87c..8ceeef3fdfb7d5 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -6,7 +6,7 @@ import { import { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { - const { theme, underlined, disabled, hasFocus, className, hasInput } = props; + const { theme, underlined, disabled, hasFocus, className, hasInput, animateIcon } = props; const { palette, fonts, semanticColors } = theme; return { @@ -88,27 +88,29 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { fontSize: 16, width: 32, textAlign: 'center', - transition: `width ${AnimationVariables.durationValue1}`, color: palette.themePrimary, cursor: 'text' }, hasFocus && { - width: 4, - transition: `width ${AnimationVariables.durationValue1}` + width: 4 }, disabled && { color: palette.neutralTertiary + }, + animateIcon && { + transition: `width ${AnimationVariables.durationValue1}` } ], icon: [ 'ms-SearchBox-icon', { opacity: 1, - transition: `opacity ${AnimationVariables.durationValue1} 0s` }, hasFocus && { - opacity: 0, - transition: `opacity 0 ${AnimationVariables.durationValue1}` + opacity: 0 + }, + animateIcon && { + transition: `opacity ${AnimationVariables.durationValue1} 0s` } ], clearButton: [ diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts index 0140d37b85b2af..65cbd036a8d45f 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts @@ -103,6 +103,12 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes; + + /** + * Whether or not to animate the SearchBox icon on focus. + * @default true + */ + animateIcon?: boolean; } export interface ISearchBoxStyleProps { @@ -112,6 +118,7 @@ export interface ISearchBoxStyleProps { hasFocus?: boolean; underlined?: boolean; hasInput?: boolean; + animateIcon?: boolean; } export interface ISearchBoxStyles { diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx index c429e96a492bfc..63e1034a4d5769 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx @@ -1,17 +1,27 @@ import * as React from 'react'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; +import './SearchBox.Examples.scss'; // tslint:disable:jsx-no-lambda export class SearchBoxFullSizeExample extends React.Component { public render(): JSX.Element { return ( - console.log('onFocus called') } - onBlur={ () => console.log('onBlur called') } - onChange={ () => console.log('onChange called') } - /> +
+ console.log('onFocus called') } + onBlur={ () => console.log('onBlur called') } + onChange={ () => console.log('onChange called') } + /> + console.log('onFocus called') } + onBlur={ () => console.log('onBlur called') } + onChange={ () => console.log('onChange called') } + animateIcon={ false } + /> +
); } From 95bad5dcde8a033c80179b041173264ecbf9a626 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 09:13:25 -0700 Subject: [PATCH 2/6] Added change file --- .../searchbox-anim-prop_2018-05-07-16-13.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/searchbox-anim-prop_2018-05-07-16-13.json diff --git a/common/changes/office-ui-fabric-react/searchbox-anim-prop_2018-05-07-16-13.json b/common/changes/office-ui-fabric-react/searchbox-anim-prop_2018-05-07-16-13.json new file mode 100644 index 00000000000000..50cf3226419f3a --- /dev/null +++ b/common/changes/office-ui-fabric-react/searchbox-anim-prop_2018-05-07-16-13.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: New prop for turning off icon animation.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file From 4169e41e23f1329a205c44bebbfbf54d847d2179 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 09:53:32 -0700 Subject: [PATCH 3/6] Added missing semicolon --- .../src/components/SearchBox/SearchBox.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index 4c3cbac4dcef7e..bb2382ce8a3aaf 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -24,7 +24,7 @@ export interface ISearchBoxState { export class SearchBoxBase extends BaseComponent { public static defaultProps: ISearchBoxProps = { animateIcon: true - } + }; private _rootElement = createRef(); private _inputElement = createRef(); From 6b8a74991fd8747c10fbc5c2c8a172470a17f662 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 09:57:17 -0700 Subject: [PATCH 4/6] New unit test with no animation --- .../components/SearchBox/SearchBox.test.tsx | 6 + .../__snapshots__/SearchBox.test.tsx.snap | 125 ++++++++++++++++++ 2 files changed, 131 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx index e3ceb42150d540..e20c90a720cd75 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx @@ -35,4 +35,10 @@ describe('SearchBox', () => { expect(component.find('input').prop('value')).toEqual(''); }); + + it('renders SearchBox without animation correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); }); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index 50badea70adea4..b8b036aef0a76a 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -126,3 +126,128 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` /> `; + +exports[`SearchBox renders SearchBox without animation correctly 1`] = ` +
+
+ +  + +
+ +
+`; From 7689a4840e118867e3134f57c5ea5ae2bedc1506 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 10:03:49 -0700 Subject: [PATCH 5/6] Changed prop name to disableAnimation --- .../src/components/SearchBox/SearchBox.base.tsx | 6 +++--- .../src/components/SearchBox/SearchBox.styles.tsx | 6 +++--- .../src/components/SearchBox/SearchBox.test.tsx | 2 +- .../src/components/SearchBox/SearchBox.types.ts | 6 +++--- .../SearchBox/examples/SearchBox.FullSize.Example.tsx | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index bb2382ce8a3aaf..2f826465dcfcf2 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -23,7 +23,7 @@ export interface ISearchBoxState { @customizable('SearchBox', ['theme']) export class SearchBoxBase extends BaseComponent { public static defaultProps: ISearchBoxProps = { - animateIcon: true + disableAnimation: false }; private _rootElement = createRef(); @@ -67,7 +67,7 @@ export class SearchBoxBase extends BaseComponent 0, - animateIcon + disableAnimation }); return ( diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 8ceeef3fdfb7d5..f0b67aa48d5b52 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -6,7 +6,7 @@ import { import { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types'; export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { - const { theme, underlined, disabled, hasFocus, className, hasInput, animateIcon } = props; + const { theme, underlined, disabled, hasFocus, className, hasInput, disableAnimation } = props; const { palette, fonts, semanticColors } = theme; return { @@ -97,7 +97,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { disabled && { color: palette.neutralTertiary }, - animateIcon && { + !disableAnimation && { transition: `width ${AnimationVariables.durationValue1}` } ], @@ -109,7 +109,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { hasFocus && { opacity: 0 }, - animateIcon && { + !disableAnimation && { transition: `opacity ${AnimationVariables.durationValue1} 0s` } ], diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx index e20c90a720cd75..f52236a1c0749f 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx @@ -37,7 +37,7 @@ describe('SearchBox', () => { }); it('renders SearchBox without animation correctly', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts index 65cbd036a8d45f..2194f684855fdf 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts @@ -106,9 +106,9 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes { onFocus={ () => console.log('onFocus called') } onBlur={ () => console.log('onBlur called') } onChange={ () => console.log('onChange called') } - animateIcon={ false } + disableAnimation={ true } /> ); From c291f5b5f3f071827bccbf9185e74f95b747702a Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 10:11:07 -0700 Subject: [PATCH 6/6] Removed redundant true from example --- .../SearchBox/examples/SearchBox.FullSize.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx index a9599e035d6075..a08a671c82ddd7 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx @@ -19,7 +19,7 @@ export class SearchBoxFullSizeExample extends React.Component { onFocus={ () => console.log('onFocus called') } onBlur={ () => console.log('onBlur called') } onChange={ () => console.log('onChange called') } - disableAnimation={ true } + disableAnimation /> );