Misc changes from 6.0 branch

apps/vr-tests/src/stories/Button.stories.tsx

@@ -22,12 +22,16 @@ const commandProps: IButtonProps = {
       {
         key: 'emailMessage',
         name: 'Email message',
-        icon: 'Mail'
+        iconProps: {
+          iconName: 'Mail'
+        }
       },
       {
         key: 'calendarEvent',
         name: 'Calendar event',
-        icon: 'Calendar'
+        iconProps: {
+          iconName: 'Calendar'
+        }
       }
     ]
   }

apps/vr-tests/src/stories/CommandBar.stories.tsx

@@ -9,41 +9,55 @@ const items = [
   {
     key: 'newItem',
     name: 'New',
-    icon: 'Add',
+    iconProps: {
+      iconName: 'Add'
+    },
     subMenuProps: {
       items: [
         {
           key: 'emailMessage',
           name: 'Email message',
-          icon: 'Mail'
+          iconProps: {
+            iconName: 'Mail'
+          }
         },
         {
           key: 'calendarEvent',
           name: 'Calendar event',
-          icon: 'Calendar'
+          iconProps: {
+            iconName: 'Calendar'
+          }
         }
       ],
     },
   },
   {
     key: 'upload',
     name: 'Upload',
-    icon: 'Upload'
+    iconProps: {
+      iconName: 'Upload'
+    }
   },
   {
     key: 'share',
     name: 'Share',
-    icon: 'Share'
+    iconProps: {
+      iconName: 'Share'
+    }
   },
   {
     key: 'download',
     name: 'Download',
-    icon: 'Download'
+    iconProps: {
+      iconName: 'Download'
+    }
   },
   {
     key: 'disabled',
     name: 'Disabled...',
-    icon: 'Cancel',
+    iconProps: {
+      iconName: 'Cancel'
+    },
     disabled: true
   }
 ];
@@ -52,17 +66,23 @@ const farItems = [
   {
     key: 'sort',
     name: 'Sort',
-    icon: 'SortLines'
+    iconProps: {
+      iconName: 'SortLines'
+    }
   },
   {
     key: 'tile',
     name: 'Grid view',
-    icon: 'Tiles'
+    iconProps: {
+      iconName: 'Tiles'
+    }
   },
   {
     key: 'info',
     name: 'Info',
-    icon: 'Info'
+    iconProps: {
+      iconName: 'Info'
+    }
   }
 ];
 
@@ -100,8 +120,8 @@ storiesOf('CommandBar', module)
   .add('Text only', () => (
     <CommandBar
       isSearchBoxVisible={ false }
-      items={ items.map(item => ({ ...item, icon: '' })) }
-      farItems={ farItems.map(item => ({ ...item, icon: '' })) }
+      items={ items.map(item => ({ ...item, iconProps: undefined })) }
+      farItems={ farItems.map(item => ({ ...item, iconProps: undefined })) }
     />
   ))
   .add('Icons only', () => (

common/changes/@uifabric/example-app-base/misc-changes_2018-02-20-17-19.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Tweaking css for example pages.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "dzearing@microsoft.com"
+}

common/changes/@uifabric/merge-styles/misc-changes_2018-02-20-17-19.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Adding test coverage for media queries.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "dzearing@microsoft.com"
+}

common/changes/office-ui-fabric-react/misc-changes_2018-02-20-17-19.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Buttons: moving className lower in the merge list so that it has more precedence than default rules.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

packages/example-app-base/src/components/ComponentPage/ComponentPage.scss

@@ -11,6 +11,7 @@ $dontColor: #A61E22;
 
   .ComponentPage {
     background-color: $ms-color-white;
+    overflow: hidden;
   }
 
   .ComponentPage-header {

packages/example-app-base/src/components/ExampleCard/ExampleCard.scss

@@ -57,7 +57,7 @@
     max-height: 80vh;
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 20px 0;
+    padding: 20px 4px;
     position: relative;
   }
 

packages/example-app-base/src/components/Header/Header.tsx

@@ -125,7 +125,7 @@ export class Header extends React.Component<IHeaderProps, IHeaderState> {
     return [{
       key: 'isRTL',
       name: `Render in ${this._isRTLEnabled ? 'LTR' : 'RTL'}`,
-      icon: 'Settings',
+      iconProps: { iconName: 'Settings' },
       onClick: this._onRTLToggled
     }];
   }

packages/merge-styles/src/mergeStyles.test.ts

@@ -80,4 +80,20 @@ describe('mergeStyles', () => {
     );
   });
 
+  it('can register media queries', () => {
+    mergeStyles({
+      background: 'red',
+      selectors: {
+        '@media screen and (max-width: 100px)': {
+          background: 'green'
+        }
+      }
+    });
+
+    expect(_stylesheet.getRules()).toEqual(
+      '.css-0{background:red;}' +
+      '@media screen and (max-width: 100px){.css-0{background:green;}}'
+    );
+  });
+
 });

packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts

@@ -31,7 +31,6 @@ export const getBaseButtonClassNames = memoizeFunction((
       'ms-Button',
       styles.root,
       variantClassName,
-      className,
       checked && [
         'is-checked',
         styles.rootChecked
@@ -72,7 +71,8 @@ export const getBaseButtonClassNames = memoizeFunction((
           ':hover': styles.rootCheckedHovered,
           ':active': styles.rootCheckedPressed
         }
-      }
+      },
+      className
     ],
     flexContainer: [
       'ms-Button-flexContainer',

packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx

@@ -59,6 +59,7 @@ export class ComponentStatus extends React.Component<IComponentStatusProps, {}>
   private _colorForComponentStateStatus(testCoverageStatus: ChecklistStatus | undefined): string {
     switch (testCoverageStatus) {
       case ChecklistStatus.unknown:
+      case ChecklistStatus.notApplicable:
         return 'lightgrey';
       case ChecklistStatus.fail:
       case ChecklistStatus.none:

packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts

@@ -8,9 +8,10 @@ export interface IComponentStatusProps {
 
 export enum ChecklistStatus {
   unknown = 'Unknown',
+  notApplicable = 'Not applicable',
   pass = 'Pass',
   fail = 'Fail',
-  none = 'No Tests',
+  none = 'No tests',
   poor = 'Poor',
   fair = 'Fair',
   good = 'Good'