From 6f4a453c3fbd28f1ad7c1ad235e7ac328218978c Mon Sep 17 00:00:00 2001
From: John Miller <John Miller>
Date: Tue, 21 Feb 2017 18:15:38 -0800
Subject: [PATCH 1/3] Adding Searchbox css modules

---
 common/npm-shrinkwrap.json                    | 111 +++++------
 .../rush-example-app-base/package.json        |   2 +-
 .../rush-fabric-examples/package.json         |   2 +-
 .../rush-fabric-website/package.json          |   2 +-
 .../temp_modules/rush-ssr-tests/package.json  |   2 +-
 .../temp_modules/rush-todo-app/package.json   |   2 +-
 .../src/components/SearchBox/SearchBox.scss   | 187 +++++++++---------
 .../src/components/SearchBox/SearchBox.tsx    |  23 ++-
 8 files changed, 156 insertions(+), 175 deletions(-)

diff --git a/common/npm-shrinkwrap.json b/common/npm-shrinkwrap.json
index 2164d6a43e978..d05b6b976b067 100644
--- a/common/npm-shrinkwrap.json
+++ b/common/npm-shrinkwrap.json
@@ -57,9 +57,9 @@
       "resolved": "https://registry.npmjs.org/@microsoft/gulp-core-build-webpack/-/gulp-core-build-webpack-1.1.2.tgz",
       "dependencies": {
         "@microsoft/gulp-core-build": {
-          "version": "2.3.1",
+          "version": "2.4.0",
           "from": "@microsoft/gulp-core-build@>=2.1.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/@microsoft/gulp-core-build/-/gulp-core-build-2.3.1.tgz"
+          "resolved": "https://registry.npmjs.org/@microsoft/gulp-core-build/-/gulp-core-build-2.4.0.tgz"
         },
         "es6-promise": {
           "version": "3.1.2",
@@ -89,9 +89,9 @@
       "resolved": "https://registry.npmjs.org/@types/assertion-error/-/assertion-error-1.0.30.tgz"
     },
     "@types/chai": {
-      "version": "3.4.34",
+      "version": "3.4.35",
       "from": "@types/chai@>=3.4.34 <4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-3.4.34.tgz"
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-3.4.35.tgz"
     },
     "@types/chalk": {
       "version": "0.4.31",
@@ -817,21 +817,9 @@
       }
     },
     "connect": {
-      "version": "3.5.1",
+      "version": "3.6.0",
       "from": "connect@>=3.3.5 <4.0.0",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.5.1.tgz",
-      "dependencies": {
-        "debug": {
-          "version": "2.2.0",
-          "from": "debug@>=2.2.0 <2.3.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz"
-        },
-        "ms": {
-          "version": "0.7.1",
-          "from": "ms@0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz"
-        }
-      }
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.0.tgz"
     },
     "connect-livereload": {
       "version": "0.5.4",
@@ -1229,9 +1217,9 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -1495,6 +1483,11 @@
           "from": "debug@>=2.2.0 <2.3.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz"
         },
+        "finalhandler": {
+          "version": "0.5.1",
+          "from": "finalhandler@0.5.1",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.5.1.tgz"
+        },
         "ms": {
           "version": "0.7.1",
           "from": "ms@0.7.1",
@@ -1644,21 +1637,9 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz"
     },
     "finalhandler": {
-      "version": "0.5.1",
-      "from": "finalhandler@0.5.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.5.1.tgz",
-      "dependencies": {
-        "debug": {
-          "version": "2.2.0",
-          "from": "debug@>=2.2.0 <2.3.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz"
-        },
-        "ms": {
-          "version": "0.7.1",
-          "from": "ms@0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz"
-        }
-      }
+      "version": "1.0.0",
+      "from": "finalhandler@1.0.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.0.tgz"
     },
     "find-index": {
       "version": "0.1.1",
@@ -1974,9 +1955,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.4 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         },
         "vinyl": {
           "version": "1.2.0",
@@ -2001,9 +1982,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.1.5 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -2428,9 +2409,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -2548,9 +2529,9 @@
           "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.3.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.4 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         },
         "source-map": {
           "version": "0.5.6",
@@ -2704,9 +2685,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -2948,9 +2929,9 @@
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz"
     },
     "is-regex": {
-      "version": "1.0.3",
+      "version": "1.0.4",
       "from": "is-regex@>=1.0.3 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.3.tgz"
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz"
     },
     "is-regexp": {
       "version": "1.0.0",
@@ -3318,9 +3299,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.5 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -3362,9 +3343,9 @@
       "resolved": "https://registry.npmjs.org/load-themed-styles/-/load-themed-styles-1.1.0.tgz"
     },
     "loader-utils": {
-      "version": "0.2.16",
+      "version": "0.2.17",
       "from": "loader-utils@>=0.0.0 <1.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.16.tgz"
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz"
     },
     "lodash": {
       "version": "1.0.2",
@@ -3767,9 +3748,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -3794,9 +3775,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -4600,9 +4581,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -4689,9 +4670,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.2 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -5312,9 +5293,9 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.1.5 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         }
       }
     },
@@ -5821,9 +5802,9 @@
           "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.3.0.tgz"
         },
         "readable-stream": {
-          "version": "2.2.2",
+          "version": "2.2.3",
           "from": "readable-stream@>=2.0.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz"
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.3.tgz"
         },
         "supports-color": {
           "version": "3.2.3",
@@ -5862,9 +5843,9 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "1.10.0",
+      "version": "1.10.1",
       "from": "webpack-dev-middleware@>=1.0.11 <2.0.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz"
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz"
     },
     "webpack-split-by-path": {
       "version": "0.0.10",
diff --git a/common/temp_modules/rush-example-app-base/package.json b/common/temp_modules/rush-example-app-base/package.json
index 5603a7476bbb6..c2e5dd9e2463c 100644
--- a/common/temp_modules/rush-example-app-base/package.json
+++ b/common/temp_modules/rush-example-app-base/package.json
@@ -27,6 +27,6 @@
     "highlight.js": "^9.9.0"
   },
   "rushDependencies": {
-    "office-ui-fabric-react": ">=1.9.1 <2.0.0"
+    "office-ui-fabric-react": ">=1.11.0 <2.0.0"
   }
 }
diff --git a/common/temp_modules/rush-fabric-examples/package.json b/common/temp_modules/rush-fabric-examples/package.json
index bcc5510cc90a4..ad5fce371a66a 100644
--- a/common/temp_modules/rush-fabric-examples/package.json
+++ b/common/temp_modules/rush-fabric-examples/package.json
@@ -40,7 +40,7 @@
   },
   "rushDependencies": {
     "@uifabric/example-app-base": ">=1.0.2 <2.0.0",
-    "office-ui-fabric-react": ">=1.9.1 <2.0.0",
+    "office-ui-fabric-react": ">=1.11.0 <2.0.0",
     "@uifabric/utilities": ">=1.0.3 <2.0.0"
   }
 }
diff --git a/common/temp_modules/rush-fabric-website/package.json b/common/temp_modules/rush-fabric-website/package.json
index 9ae235144c873..cb1ead9ca1cf9 100644
--- a/common/temp_modules/rush-fabric-website/package.json
+++ b/common/temp_modules/rush-fabric-website/package.json
@@ -39,7 +39,7 @@
   },
   "rushDependencies": {
     "fabric-examples": ">=1.0.0 <2.0.0",
-    "office-ui-fabric-react": "^1.9.1",
+    "office-ui-fabric-react": "^1.11.0",
     "@uifabric/utilities": ">=1.0.3 <2.0.0"
   }
 }
diff --git a/common/temp_modules/rush-ssr-tests/package.json b/common/temp_modules/rush-ssr-tests/package.json
index 246e7563ae3a4..f8e93e62b644b 100644
--- a/common/temp_modules/rush-ssr-tests/package.json
+++ b/common/temp_modules/rush-ssr-tests/package.json
@@ -12,6 +12,6 @@
   },
   "rushDependencies": {
     "fabric-examples": ">=1.0.0 <2.0.0",
-    "office-ui-fabric-react": ">=1.9.1 <2.0.0"
+    "office-ui-fabric-react": ">=1.11.0 <2.0.0"
   }
 }
diff --git a/common/temp_modules/rush-todo-app/package.json b/common/temp_modules/rush-todo-app/package.json
index 96187492b160b..9a5f6bd2d78ba 100644
--- a/common/temp_modules/rush-todo-app/package.json
+++ b/common/temp_modules/rush-todo-app/package.json
@@ -22,6 +22,6 @@
     "typescript": "^2.0.6"
   },
   "rushDependencies": {
-    "office-ui-fabric-react": ">=1.9.1 <2.0.0"
+    "office-ui-fabric-react": ">=1.11.0 <2.0.0"
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
index 4acddfb5356e9..e592e967471a9 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
@@ -11,121 +11,116 @@
 $SearchBox-field-padding-left: 10px;
 $SearchBox-height: 36px;
 
-:global {
-
-  .ms-SearchBox {
-    @include ms-font-m;
-    @include ms-u-normalize;
-    color: $ms-color-neutralPrimary;
-    position: relative;
-    margin-bottom: 10px;
-    border: 1px solid $ms-color-themeTertiary;
-
-    &.is-active {
-      border-color: $ms-color-themeDarker;
-
-      .ms-SearchBox-field {
-        @include padding-left(8px);
-      }
-
-      .ms-SearchBox-icon {
-        display: none;
-      }
-    }
+.root {
+  @include ms-font-m;
+  @include ms-u-normalize;
+  color: $ms-color-neutralPrimary;
+  position: relative;
+  margin-bottom: 10px;
+  border: 1px solid $ms-color-themeTertiary;
+}
 
-    // State: Disabled searchbox
-    &.is-disabled {
-      border-color: $ms-color-neutralLighter;
+.root:hover {
+  .field {
+    border-color: $ms-color-themeDarker;
+  }
 
-      .ms-SearchBox-icon {
-        color: $ms-color-neutralTertiaryAlt;
-      }
+  .label {
+    color: $ms-color-black;
 
-      .ms-SearchBox-field {
-        background-color: $ms-color-neutralLighter;
-        pointer-events: none;
-        cursor: default;
-      }
+    .icon {
+      color:$ms-color-themeDarker;
     }
+  }
+}
 
-    // State: Active searchbox
-    &.can-clear .ms-SearchBox-clearButton {
-      display: block;
-    }
+// State: Active searchbox
+.root.isActive {
+  border-color: $ms-color-themeDarker;
 
-    &:hover {
+  .field {
+    @include padding-left(8px);
+  }
 
-      .ms-SearchBox-field {
-        border-color: $ms-color-themeDarker;
-      }
+  .icon {
+    display: none;
+  }
+}
 
-      .ms-SearchBox-label {
-        color: $ms-color-black;
+ // State: Disabled searchbox
+.root.isDisabled {
+  border-color: $ms-color-neutralLighter;
 
-        .ms-SearchBox-icon {
-          color:$ms-color-themeDarker;
-        }
-      }
-    }
+  .icon {
+    color: $ms-color-neutralTertiaryAlt;
   }
 
-  input.ms-SearchBox-field {
-    position: relative;
-    @include ms-u-normalize;
-    border: none;
-    outline: transparent 1px solid;
-    font-weight: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    color: $ms-color-black;
-    height: $SearchBox-height - 2;
-    @include padding(6px, 38px, 7px, 31px);
-    width: 100%;
-    background-color: transparent;
-    transition: padding-left $ms-duration1;
-
-    &:focus {
-      @include padding-right(32px);
-    }
+  .field {
+    background-color: $ms-color-neutralLighter;
+    pointer-events: none;
+    cursor: default;
+  }
+}
 
-    &::-ms-clear {
-      display: none;
-    }
+.root.canClear .clearButton {
+  display: block;
+}
+
+input.field {
+  position: relative;
+  @include ms-u-normalize;
+  border: none;
+  outline: transparent 1px solid;
+  font-weight: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  color: $ms-color-black;
+  height: $SearchBox-height - 2;
+  @include padding(6px, 38px, 7px, 31px);
+  width: 100%;
+  background-color: transparent;
+  transition: padding-left $ms-duration1;
+
+  &:focus {
+    @include padding-right(32px);
   }
 
-  .ms-SearchBox-clearButton {
+  &::-ms-clear {
     display: none;
-    border: none;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    @include right(0);
+  }
+}
 
-    width: 40px;
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
+.clearButton {
+  display: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  @include right(0);
 
-    vertical-align: top;
+  width: 40px;
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
 
-    color: $ms-color-themePrimary;
+  vertical-align: top;
 
-    text-align: center;
-    font-size: 16px;
-  }
+  color: $ms-color-themePrimary;
 
-  .ms-SearchBox-icon {
-    font-size: $ms-font-size-l;
-    color: $ms-color-neutralSecondaryAlt;
-    position: absolute;
-    @include left(8px);
-    top: 0;
-    height: $SearchBox-height;
-    line-height: $SearchBox-height;
-    vertical-align: top;
-    font-size: 16px;
-    width: 16px;
-    color: #0078d7;
-    @include margin-right(6px);
-  }
+  text-align: center;
+  font-size: 16px;
+}
 
+.icon {
+  font-size: $ms-font-size-l;
+  color: $ms-color-neutralSecondaryAlt;
+  position: absolute;
+  @include left(8px);
+  top: 0;
+  height: $SearchBox-height;
+  line-height: $SearchBox-height;
+  vertical-align: top;
+  font-size: 16px;
+  width: 16px;
+  color: #0078d7;
+  @include margin-right(6px);
 }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index 925d26cb39d15..4f98990f814c2 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -10,6 +10,7 @@ import {
   KeyCodes
 } from '../../Utilities';
 import './SearchBox.scss';
+import styles from './SearchBox.scss';
 
 export interface ISearchBoxState {
   value?: string;
@@ -51,31 +52,35 @@ export class SearchBox extends BaseComponent<ISearchBoxProps, ISearchBoxState> {
   public render() {
     let { labelText, className } = this.props;
     let { value, hasFocus, id } = this.state;
+    const isActive = styles.isActive;
+    const canClear = styles.canClear;
 
     return (
       <div
         ref={ this._resolveRef('_rootElement') }
-        className={ css('ms-SearchBox', className, {
+        className={ css('ms-SearchBox', className, styles.root, {
           'is-active': hasFocus,
-          'can-clear': value.length > 0
+          'can-clear': value.length > 0,
+          [isActive]: hasFocus,
+          [canClear]: value.length > 0
         }) }
         { ...{ onFocusCapture: this._onFocusCapture } }
-        >
-        <i className='ms-SearchBox-icon ms-Icon ms-Icon--Search'></i>
+      >
+        <i className={ css('ms-SearchBox-icon', 'ms-Icon', 'ms-Icon--Search', styles.icon) }></i>
         <input
           id={ id }
-          className='ms-SearchBox-field'
+          className={ css('ms-SearchBox-field', styles.field) }
           placeholder={ labelText }
           onChange={ this._onInputChange }
           onKeyDown={ this._onKeyDown }
           value={ value }
           ref={ this._resolveRef('_inputElement') }
-          />
+        />
         <div
-          className='ms-SearchBox-clearButton'
+          className={ css('ms-SearchBox-clearButton', styles.clearButton) }
           onClick={ this._onClearClick }
-          >
-          <i className='ms-Icon ms-Icon--Clear' />
+        >
+          <i className={ css('ms-Icon', 'ms-Icon--Clear') } />
         </div>
       </div>
     );

From 6c5d4ddf0f4be04ebfbd5f28460362531e30ae59 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 24 Feb 2017 13:25:53 -0800
Subject: [PATCH 2/3] Fixing PR Comments

---
 common/npm-shrinkwrap.json                    | 33 +++++++++++--------
 .../src/components/SearchBox/SearchBox.scss   |  8 ++---
 .../src/components/SearchBox/SearchBox.tsx    |  9 ++---
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/common/npm-shrinkwrap.json b/common/npm-shrinkwrap.json
index d05b6b976b067..ec79f449d6c13 100644
--- a/common/npm-shrinkwrap.json
+++ b/common/npm-shrinkwrap.json
@@ -104,9 +104,9 @@
       "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.17.31.tgz"
     },
     "@types/enzyme": {
-      "version": "2.7.4",
+      "version": "2.7.5",
       "from": "@types/enzyme@>=2.7.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-2.7.4.tgz"
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-2.7.5.tgz"
     },
     "@types/es6-promise": {
       "version": "0.0.32",
@@ -604,9 +604,9 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz"
     },
     "caniuse-db": {
-      "version": "1.0.30000624",
+      "version": "1.0.30000626",
       "from": "caniuse-db@>=1.0.30000488 <2.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000624.tgz"
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000626.tgz"
     },
     "cardinal": {
       "version": "1.0.0",
@@ -661,9 +661,9 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.6.1.tgz"
     },
     "clean-css": {
-      "version": "3.4.24",
+      "version": "3.4.25",
       "from": "clean-css@>=3.4.20 <4.0.0",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.24.tgz",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.25.tgz",
       "dependencies": {
         "commander": {
           "version": "2.8.1",
@@ -1627,9 +1627,9 @@
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.0.tgz"
     },
     "filesize": {
-      "version": "3.5.4",
+      "version": "3.5.5",
       "from": "filesize@>=3.5.4 <4.0.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.4.tgz"
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.5.tgz"
     },
     "fill-range": {
       "version": "2.2.3",
@@ -2732,9 +2732,9 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz"
     },
     "immutability-helper": {
-      "version": "2.1.1",
+      "version": "2.1.2",
       "from": "immutability-helper@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.1.1.tgz"
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.1.2.tgz"
     },
     "in-publish": {
       "version": "2.0.0",
@@ -4294,6 +4294,11 @@
       "from": "path-is-inside@>=1.0.1 <2.0.0",
       "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz"
     },
+    "path-parse": {
+      "version": "1.0.5",
+      "from": "path-parse@>=1.0.5 <2.0.0",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz"
+    },
     "path-root": {
       "version": "0.1.1",
       "from": "path-root@>=0.1.1 <0.2.0",
@@ -4387,9 +4392,9 @@
       "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz"
     },
     "postcss": {
-      "version": "5.2.14",
+      "version": "5.2.15",
       "from": "postcss@>=5.0.21 <6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.15.tgz",
       "dependencies": {
         "source-map": {
           "version": "0.5.6",
@@ -4702,9 +4707,9 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
     },
     "resolve": {
-      "version": "1.2.0",
+      "version": "1.3.1",
       "from": "resolve@>=1.1.7 <2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.2.0.tgz"
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.3.1.tgz"
     },
     "resolve-dir": {
       "version": "0.1.1",
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
index e592e967471a9..78ee8780decab 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.scss
@@ -35,7 +35,7 @@ $SearchBox-height: 36px;
 }
 
 // State: Active searchbox
-.root.isActive {
+.rootIsActive {
   border-color: $ms-color-themeDarker;
 
   .field {
@@ -48,7 +48,7 @@ $SearchBox-height: 36px;
 }
 
  // State: Disabled searchbox
-.root.isDisabled {
+.rootIsDisabled {
   border-color: $ms-color-neutralLighter;
 
   .icon {
@@ -62,11 +62,11 @@ $SearchBox-height: 36px;
   }
 }
 
-.root.canClear .clearButton {
+.rootCanClear .clearButton {
   display: block;
 }
 
-input.field {
+.field {
   position: relative;
   @include ms-u-normalize;
   border: none;
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index 4f98990f814c2..b94b09f09238c 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -52,17 +52,12 @@ export class SearchBox extends BaseComponent<ISearchBoxProps, ISearchBoxState> {
   public render() {
     let { labelText, className } = this.props;
     let { value, hasFocus, id } = this.state;
-    const isActive = styles.isActive;
-    const canClear = styles.canClear;
-
     return (
       <div
         ref={ this._resolveRef('_rootElement') }
         className={ css('ms-SearchBox', className, styles.root, {
-          'is-active': hasFocus,
-          'can-clear': value.length > 0,
-          [isActive]: hasFocus,
-          [canClear]: value.length > 0
+          ['is-active ' + styles.rootIsActive]: hasFocus,
+          ['can-clear ' + styles.rootCanClear]: value.length > 0,
         }) }
         { ...{ onFocusCapture: this._onFocusCapture } }
       >

From 0478332b280ae922d8c23837def4d2e9b13e5426 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 24 Feb 2017 13:50:16 -0800
Subject: [PATCH 3/3] Fixing a bug on Fabric Website

---
 apps/fabric-website/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/fabric-website/index.html b/apps/fabric-website/index.html
index e15f6214315a0..55d3f6ea3550f 100644
--- a/apps/fabric-website/index.html
+++ b/apps/fabric-website/index.html
@@ -37,6 +37,7 @@
 
   <script type="text/javascript">
     var isProduction = false;
+    var today = new Date();
     var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
     switch (true) {
       case location.hostname === 'dev.office.com':