SearchBox: New prop for turning off icon animation

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"
+}

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<ISearchBoxProps, ISearchBoxState> {
+  public static defaultProps: ISearchBoxProps = {
+    disableAnimation: false
+  };
+
   private _rootElement = createRef<HTMLDivElement>();
   private _inputElement = createRef<HTMLInputElement>();
   private _latestValue: string;
@@ -62,7 +66,8 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
       getStyles,
       labelText,
       theme,
-      clearButtonProps
+      clearButtonProps,
+      disableAnimation
     } = this.props;
     const { value, hasFocus, id } = this.state;
     const placeholderValue = labelText === undefined ? placeholder : labelText;
@@ -73,7 +78,8 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
       underlined,
       hasFocus,
       disabled,
-      hasInput: value!.length > 0
+      hasInput: value!.length > 0,
+      disableAnimation
     });
 
     return (

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, disableAnimation } = 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
+      },
+      !disableAnimation && {
+        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
+      },
+      !disableAnimation && {
+        transition: `opacity ${AnimationVariables.durationValue1} 0s`
       }
     ],
     clearButton: [

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(<SearchBox disableAnimation={ true } />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts

@@ -103,6 +103,12 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
    * Call to provide customized styling that will layer on top of the variant rules.
    */
   getStyles?: IStyleFunction<ISearchBoxStyleProps, ISearchBoxStyles>;
+
+  /**
+   * Whether or not to animate the SearchBox icon on focus.
+   * @default false
+   */
+  disableAnimation?: boolean;
 }
 
 export interface ISearchBoxStyleProps {
@@ -112,6 +118,7 @@ export interface ISearchBoxStyleProps {
   hasFocus?: boolean;
   underlined?: boolean;
   hasInput?: boolean;
+  disableAnimation?: boolean;
 }
 
 export interface ISearchBoxStyles {

packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap

@@ -126,3 +126,128 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
   />
 </div>
 `;
+
+exports[`SearchBox renders SearchBox without animation correctly 1`] = `
+<div
+  className=
+      ms-SearchBox
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: stretch;
+        border: 1px solid #a6a6a6;
+        box-shadow: none;
+        box-sizing: border-box;
+        color: #333333;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 32px;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        padding-bottom: 1px;
+        padding-left: 4px;
+        padding-right: 0;
+        padding-top: 1px;
+      }
+      @media screen and (-ms-high-contrast: active){& {
+        border: 1px solid WindowText;
+      }
+      &:hover {
+        border-color: #212121;
+      }
+      @media screen and (-ms-high-contrast: active){&:hover {
+        border-color: Highlight;
+      }
+      &:hover $iconContainer {
+        color: #005a9e;
+      }
+  onFocusCapture={[Function]}
+>
+  <div
+    className=
+        ms-SearchBox-iconContainer
+        {
+          color: #0078d4;
+          cursor: text;
+          display: flex;
+          flex-direction: column;
+          flex-shrink: 0;
+          font-size: 16px;
+          justify-content: center;
+          text-align: center;
+          width: 32px;
+        }
+    onClick={[Function]}
+  >
+    <i
+      aria-hidden={true}
+      className=
+          ms-SearchBox-icon
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            display: inline-block;
+            font-family: "FabricMDL2Icons";
+            font-style: normal;
+            font-weight: normal;
+            opacity: 1;
+            speak: none;
+          }
+      data-icon-name="Search"
+      role="presentation"
+    >
+      
+    </i>
+  </div>
+  <input
+    aria-label={undefined}
+    className=
+        ms-SearchBox-field
+        {
+          background-color: #ffffff;
+          border: none;
+          box-shadow: none;
+          box-sizing: border-box;
+          color: #333333;
+          flex: 1 1 0px;
+          font-family: inherit;
+          font-size: inherit;
+          font-weight: inherit;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          outline: none;
+          overflow: hidden;
+          padding-bottom: 0.5px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          text-overflow: ellipsis;
+        }
+        &::-ms-clear {
+          display: none;
+        }
+        &::placeholder {
+          color: #666666;
+          opacity: 1;
+        }
+        &:-ms-input-placeholder {
+          color: #666666;
+        }
+    disabled={undefined}
+    id="SearchBox5"
+    onChange={[Function]}
+    onInput={[Function]}
+    onKeyDown={[Function]}
+    placeholder={undefined}
+    value=""
+  />
+</div>
+`;

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<any, any> {
   public render(): JSX.Element {
     return (
-      <SearchBox
-        placeholder='Search'
-        onFocus={ () => console.log('onFocus called') }
-        onBlur={ () => console.log('onBlur called') }
-        onChange={ () => console.log('onChange called') }
-      />
+      <div className='ms-SearchBoxExample'>
+        <SearchBox
+          placeholder='Search'
+          onFocus={ () => console.log('onFocus called') }
+          onBlur={ () => console.log('onBlur called') }
+          onChange={ () => console.log('onChange called') }
+        />
+        <SearchBox
+          placeholder='Search with no animation'
+          onFocus={ () => console.log('onFocus called') }
+          onBlur={ () => console.log('onBlur called') }
+          onChange={ () => console.log('onChange called') }
+          disableAnimation
+        />
+      </div>
     );
   }