From dfee4a7808f4e1408d73fbd73db6985fb4c1c51d Mon Sep 17 00:00:00 2001
From: Brian Garland <v-brgarl@microsoft.com>
Date: Thu, 1 Feb 2018 11:13:23 -0800
Subject: [PATCH 1/5] Converted ButtonBasicExample to use mergeStyles instead
 of SCSS.

---
 .../src/components/Button/ButtonPage.tsx      |  1 -
 .../Button/examples/Button.Action.Example.tsx | 11 ++++-
 .../Button/examples/Button.Anchor.Example.tsx | 11 ++++-
 .../Button/examples/Button.Basic.Example.scss | 14 -------
 .../examples/Button.Basic.Example.styles.ts   | 41 +++++++++++++++++++
 .../examples/Button.Compound.Example.tsx      | 11 ++++-
 .../examples/Button.Default.Example.tsx       | 11 ++++-
 .../Button/examples/Button.Icon.Example.tsx   | 11 ++++-
 .../examples/Button.Primary.Example.tsx       | 11 ++++-
 .../examples/Button.ScreenReader.Example.tsx  | 11 ++++-
 .../Button/examples/Button.Split.Example.tsx  | 11 ++++-
 .../Button/examples/Button.Swap.Example.tsx   | 12 +++++-
 12 files changed, 131 insertions(+), 25 deletions(-)
 delete mode 100644 packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
 create mode 100644 packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts

diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
index ee0ef8aa003cf2..0cdcf9100cfc6e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
@@ -20,7 +20,6 @@ import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Link } from '../../Link';
-import './examples/Button.Basic.Example.scss';
 import * as exampleStylesImport from '../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
index e6365cb5769c9d..7dcfd418f4b1f2 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   ActionButton,
   IButtonProps
@@ -12,8 +18,11 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <ActionButton
           data-automation-id='test'
           iconProps={ { iconName: 'AddFriend' } }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
index c2e6e11cbd06aa..5490a3a062eb8d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   IButtonProps,
   DefaultButton
@@ -11,8 +17,11 @@ export class ButtonAnchorExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <DefaultButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
deleted file mode 100644
index 748891141c6c00..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:global {
-  .ms-BasicButtonsExample .ms-Button {
-    margin: 10px 0;
-  }
-  .ms-BasicButtonsTwoUp {
-    display: flex;
-    & > * {
-      flex-grow: 1;
-    }
-    .ms-Label {
-      margin-bottom: 10px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
new file mode 100644
index 00000000000000..594324c02fcf31
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -0,0 +1,41 @@
+import { IStyle } from '../../../Styling';
+
+export interface IButtonBasicExampleStyleProps {
+  /**
+   * 404 No Style Props Found
+   */
+}
+
+export interface IButtonBasicExampleStyles {
+  example?: IStyle;
+  twoup?: IStyle;
+}
+
+export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExampleStyles {
+  return {
+    example: [
+      'ms-BasicButtonsExample',
+      {
+        selectors: {
+          '.ms-Button': {
+            margin: '10px 0'
+          }
+        }
+      }
+    ],
+    twoup: [
+      'ms-BasicButtonsTwoUp',
+      {
+        display: 'flex',
+        selectors: {
+          '& > *': {
+            flexGrow: 1
+          },
+          '.ms-Label': {
+            marginBottom: '10px'
+          }
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
index 1c11cbc0a92d45..92c31dded940ab 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   CompoundButton,
   IButtonProps
@@ -13,8 +19,11 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.example, classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <CompoundButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
index 6d2462494958bf..c1edb4cdf9e5f1 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
index 22149f6c4fe4e1..88fd480f3c5411 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonIconExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <IconButton
           disabled={ disabled }
           checked={ checked }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
index 235e55dcf04d6e..23c09a4f712b23 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
index 03fc8143da301e..8cbef6dc44719e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
@@ -6,8 +12,11 @@ export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}>
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 8e72b37c6bbb61..2c1d498a523b63 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { getCustomSplitButtonStyles } from './Button.Split.Example.styles';
@@ -12,8 +18,11 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
   public render() {
     let { disabled, checked } = this.props;
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 8533e8da7e6ef0..2124d506341f07 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
@@ -65,8 +70,11 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
         </DefaultButton>
       );
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         { button }
       </div>
     );

From 9449d6f89f42671c0dfc315b065af5c8f3cc983c Mon Sep 17 00:00:00 2001
From: Brian Garland <v-brgarl@microsoft.com>
Date: Thu, 1 Feb 2018 11:14:31 -0800
Subject: [PATCH 2/5] rush change

---
 .../ButtonEx-mergestyles_2018-02-01-19-14.json        | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json

diff --git a/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
new file mode 100644
index 00000000000000..98c004ea4b6fda
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}
\ No newline at end of file

From da1309409f5149c19342afd5e8d44588886a118f Mon Sep 17 00:00:00 2001
From: Brian Garland <v-brgarl@microsoft.com>
Date: Thu, 1 Feb 2018 11:16:38 -0800
Subject: [PATCH 3/5] correct rush change

---
 .../ButtonEx-mergestyles_2018-02-01-19-14.json                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
index 98c004ea4b6fda..8b47a90cb51d55 100644
--- a/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
+++ b/common/changes/office-ui-fabric-react/ButtonEx-mergestyles_2018-02-01-19-14.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS.",
+      "comment": "Converted ButtonBasicExample to use mergeStyles instead of SCSS.",
       "type": "patch"
     }
   ],

From 5c51bba2d7e973fe81f4654cfd0147ec15464fef Mon Sep 17 00:00:00 2001
From: Brian Garland <v-brgarl@microsoft.com>
Date: Thu, 1 Feb 2018 11:35:05 -0800
Subject: [PATCH 4/5] syntax error fix

---
 .../Button/examples/Button.Basic.Example.styles.ts          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
index 594324c02fcf31..d742aef2588cf2 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -12,7 +12,7 @@ export interface IButtonBasicExampleStyles {
 }
 
 export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExampleStyles {
-  return {
+  return ({
     example: [
       'ms-BasicButtonsExample',
       {
@@ -37,5 +37,5 @@ export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExa
         }
       }
     ]
-  }
-}
\ No newline at end of file
+  });
+};
\ No newline at end of file

From 2b71acdaecca3cb14e29ed7d8ca1a989aa347d14 Mon Sep 17 00:00:00 2001
From: Brian Garland <v-brgarl@microsoft.com>
Date: Thu, 1 Feb 2018 12:07:35 -0800
Subject: [PATCH 5/5] extra semicolon

---
 .../components/Button/examples/Button.Basic.Example.styles.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
index d742aef2588cf2..dea19c6a76381f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -38,4 +38,4 @@ export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExa
       }
     ]
   });
-};
\ No newline at end of file
+}