Migration to module css!

apps/fabric-examples/src/pages/ButtonPage/examples/Button.Default.Example.tsx

@@ -14,7 +14,7 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
             disabled={ disabled }
             icon='Add'
             description='I am a description'
-            label='Create account'
+            text='Create account'
           />
         </div>
       </div>

apps/fabric-examples/src/pages/ButtonPage/examples/Button.Primary.Example.tsx

@@ -16,8 +16,9 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps, {}> {
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
-        >Create account</PrimaryButton>
+          text='Create account'
+        />
       </div>
     );
   }
-}
+}

apps/fabric-examples/src/pages/DropdownPage/examples/Dropdown.Basic.Example.tsx

@@ -20,7 +20,6 @@ export class DropdownBasicExample extends React.Component<any, any> {
           label='Basic uncontrolled example:'
           id='Basicdrop1'
           ariaLabel='Basic dropdown example'
-          onChanged={ (item) => this.setState({ selectedItem: item }) }
           options={
             [
               { key: 'A', text: 'Option a' },

apps/fabric-examples/src/pages/PickersPage/examples/Picker.CustomResult.Example.tsx

@@ -18,7 +18,7 @@ import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
 import {
   IBasePickerProps,
-  BasePicker,
+  BasePickerListBelow,
   BaseAutoFill,
   IPickerItemProps
 } from 'office-ui-fabric-react/lib/Pickers';
@@ -338,42 +338,5 @@ export class PickerCustomResultExample extends React.Component<any, IPeoplePicke
   }
 }
 
-export class DocumentPicker extends BasePicker<IFullDocumentCardProps, IDocumentPickerProps> {
-  public render() {
-    let { suggestedDisplayValue } = this.state;
-
-    return (
-      <div>
-        <div ref={ this._resolveRef('root') } className='ms-BasePicker' onKeyDown={ this.onKeyDown }>
-          <SelectionZone selection={ this.selection }>
-            <div className='ms-BasePicker-text'>
-              <BaseAutoFill
-                { ...this.props.inputProps }
-                className='ms-BasePicker-input'
-                ref={ this._resolveRef('input') }
-                onFocus={ this.onInputFocus }
-                onInputValueChange={ this.onInputChange }
-                suggestedDisplayValue={ suggestedDisplayValue }
-                aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }
-                aria-owns='suggestion-list'
-                aria-expanded='true'
-                aria-haspopup='true'
-                autoCapitalize='off'
-                autoComplete='off'
-                role='combobox'
-              />
-            </div>
-          </SelectionZone>
-        </div>
-        <FocusZone ref={ this._resolveRef('focusZone') }>
-          { this.renderItems() }
-        </FocusZone>
-        { this.renderSuggestions() }
-      </div>
-    );
-  }
-
-  protected _onBackspace(ev: React.KeyboardEvent<HTMLElement>) {
-    // override the existing backspace method to not do anything because the list items appear below.
-  }
+export class DocumentPicker extends BasePickerListBelow<IFullDocumentCardProps, IDocumentPickerProps> {
 }

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':

common/changes/791_CommandBarHCShift_2017-03-01-22-42.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "adds pseudo:after class to highContrastBorder mixin, renders border on hover",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "v-algemb@microsoft.com"
+}

common/changes/791_CommandBarHCShift_2017-03-02-18-40.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "CommandBar: Improves accessibility by making borders visible in high contrast mode",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "v-algemb@microsoft.com"
+}

common/changes/component-css-breadcrumb_2017-02-18-23-01.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Breadcrumb: styles moved to css modules to allow Breadcrumbs to live side by side other versions without classname conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no class names were removed.)",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

common/changes/component-css-button_2017-02-18-02-10.json

@@ -0,0 +1,15 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button variants: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name. This allows 2 different versions of any Button variant to live on the same page without having rules collide. The style rules for the variants were also tweaked. Content is now aligned using flexbox, which means more consistent centering when injecting inline, inline-block, or block elements. Second, all line-heights were removed and content now correctly centers within buttons, so if you change the height of the container (e.g. you make CommandButtons render in 36px instead of 40px) things will center correctly.",
+      "type": "minor"
+    },
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Link: the styles are now scoped within css modules. All class names that were previously on buttons still remain unchanged, but the styles have moved into a type safe hashed class name.",
+      "type": "minor"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

common/changes/component-css-calendar_2017-02-19-00-36.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Calendar and PeoplePicker: styles moved to css modules to allow instances of Calendar and PeoplePicker to live on the same page containing newer/older versions without classname conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no class names were removed.",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

common/changes/component-details-list_2017-02-20-18-22.json

@@ -0,0 +1,15 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList and GroupedList: styles moved to css modules to allow components to live side by side other versions without class name conflicts. This should change no styling rules (no rules were modified) or impact existing customizations (no existing class names were removed.)",
+      "type": "patch"
+    },
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: header sizing now works correctly in Safari. Resizing also now correctly captures mouse movement and soaks events during the resize.)",
+      "type": "patch"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

common/changes/contextual-menu-item-styles_2017-03-03-22-07.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Contextual Menu: allow developers to specify inline styles for menu items",
+      "type": "minor"
+    }
+  ],
+  "email": "miclo@microsoft.com"
+}

common/changes/css-modules.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "IMPORTANT: \n\nThis pull request converts ALL components over to use module css. What does this mean?\n\n* All classnames, such as ms-Button, will now be obfuscated to be unique.\n* Pages that host multiple versions of the same component will not stomp on each other and will be safe.\n* All existing class names are left intact, so current customizations should not break.\n\nGoing forward, we will adhere to using local scoped module rules specifically to avoid breaking ourselves when multiple versions. Additionally we are evaluating a much more robust and contractual way of defining our styles.\n\nProblems that still exist:\n\n1. You must rely on class names to customize, and if those class names change, your customizations are broken.\n2. Specificity of our rules is an implicit contract that is easy to break. It is often unclear and partners usually give up early fighting the specificity war and use `!important` to stomp on it, which is not ideal. If a partner does use \"more specific\" rules today, tomorrow they many not be specific enough.\n3. RTL rules in particular are very specific. When something that was once not RTL specific is changed to RTL, it becomes implicitly more specific, and thus breaks specificity contract.\n4. The bundles themselves have a lot of duplicate css. Because we generate rtl rules and theme tokens at build time rather than at runtime, we must download extra code, which bulks up the download size.\n5. Fabric core rules, which we implicitly rely on, are a hard thing to chase. If your page depends on core 6, and you're also using react components, you will find bugs. We'd like to eliminate this dependency so that it is reliable and contractual to use components. If you use a `ContextualMenu`, it should animate without depending on fabric-core css to be loaded.\n\nWe are planning to address these and evaluating library options. Issue being tracked here: #983 \n",
+      "type": "major"
+    }
+  ],
+  "email": "dzearing@microsoft.com"
+}

common/changes/luh-module-css-people-picker-items_2017-02-22-03-05.json

@@ -0,0 +1,8 @@
+{
+  "changes": [{
+    "packageName": "office-ui-fabric-react",
+    "comment": "Update People Picker with module css.",
+    "type": "patch"
+  }],
+  "email": "luh@microsoft.com"
+}

common/changes/master_2017-02-22-02-05.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "pivot css module",
+      "type": "minor"
+    }
+  ],
+  "email": "xingwa@microsoft.com"
+}

common/changes/pickers-css-modularize_2017-02-22-01-33.json

@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Pickers: css modularized all the components",
+      "type": "minor"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "joschect@microsoft.com"
+}

common/temp_modules/rush-example-app-base/package.json

@@ -29,4 +29,4 @@
   "rushDependencies": {
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}

common/temp_modules/rush-fabric-examples/package.json

@@ -43,4 +43,4 @@
     "office-ui-fabric-react": ">=1.14.1 <2.0.0",
     "@uifabric/utilities": ">=1.1.0 <2.0.0"
   }
-}
+}

common/temp_modules/rush-fabric-website/package.json

@@ -42,4 +42,4 @@
     "office-ui-fabric-react": "^1.14.1",
     "@uifabric/utilities": ">=1.1.0 <2.0.0"
   }
-}
+}

common/temp_modules/rush-ssr-tests/package.json

@@ -14,4 +14,4 @@
     "fabric-examples": ">=1.0.0 <2.0.0",
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}

common/temp_modules/rush-todo-app/package.json

@@ -24,4 +24,4 @@
   "rushDependencies": {
     "office-ui-fabric-react": ">=1.14.1 <2.0.0"
   }
-}
+}

packages/office-ui-fabric-react/gulpfile.js

@@ -22,6 +22,9 @@ build.typescript.setConfig({ typescript: require('typescript') });
 // Use css modules.
 build.sass.setConfig({ useCSSModules: true });
 
+// Use Karma Tests - Disable during develoment if prefered
+build.karma.isEnabled = () => true;
+
 // Disable unnecessary subtasks.
 build.preCopy.isEnabled = () => false;
 build.postCopy.isEnabled = () => isProduction;
@@ -62,4 +65,4 @@ build.task('tslint', build.tslint);
 build.task('ts', build.typescript);
 
 // initialize tasks.
-build.initialize(gulp);
+build.initialize(gulp);

packages/office-ui-fabric-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "1.14.3",
+  "version": "2.0.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

packages/office-ui-fabric-react/src/common/_focusBorder.scss

@@ -14,7 +14,7 @@
     position: relative;
   }
 
-  :global .ms-Fabric.is-focusVisible &:focus:after {
+  :global(.ms-Fabric.is-focusVisible) &:focus:after {
     // Wrap the parent element with $padding pixels.
     content: '';
     position: absolute;
@@ -33,7 +33,7 @@
 
 // When focus is set using the keyboard, apply an outline.
 @mixin focus-outline {
-  :global .ms-Fabric.is-focusVisible &:focus {
+  :global(.ms-Fabric.is-focusVisible) &:focus {
     outline: 1px solid $focusedBorderColor;
   }
 }