From 5f8120a1f88ece53ed340b723a37378f35ceda98 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 20 May 2019 16:48:06 -0700
Subject: [PATCH 1/3] Button: Adding vr tests.

---
 .../src/stories/NewButton.stories.tsx         | 293 ++++++++++++++++++
 .../src/components/Button/Button.styles.ts    |  15 +-
 .../src/components/Button/Button.test.tsx     |   2 +-
 .../components/Button/ButtonVariants.test.tsx |   2 +-
 .../Button/MenuButton/MenuButton.styles.ts    |  10 +-
 .../Button/MenuButton/MenuButton.test.tsx     |   2 +-
 .../Button/SplitButton/SplitButton.test.tsx   |   2 +-
 .../Button/__snapshots__/Button.test.tsx.snap |  36 +--
 .../ButtonVariants.test.tsx.snap              | 216 ++++++-------
 9 files changed, 440 insertions(+), 138 deletions(-)
 create mode 100644 apps/vr-tests/src/stories/NewButton.stories.tsx

diff --git a/apps/vr-tests/src/stories/NewButton.stories.tsx b/apps/vr-tests/src/stories/NewButton.stories.tsx
new file mode 100644
index 00000000000000..ce5e5173367f30
--- /dev/null
+++ b/apps/vr-tests/src/stories/NewButton.stories.tsx
@@ -0,0 +1,293 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { FabricDecorator } from '../utilities';
+import {
+  Button,
+  IButtonProps,
+  MenuButton,
+  IMenuButtonProps,
+  SplitButton,
+  DefaultButton,
+  PrimaryButton,
+  ActionButton,
+  BaseButton,
+  CommandBarButton,
+  CompoundButton,
+  IconButton,
+  MessageBarButton
+} from '@uifabric/experiments';
+import { Stack, Text } from 'office-ui-fabric-react';
+
+const baseProps: IButtonProps = {
+  icon: 'AddFriend',
+  content: 'Button'
+};
+
+const menuProps: IMenuButtonProps = {
+  content: 'Button',
+  menu: {
+    items: [
+      {
+        key: 'a',
+        name: 'Item a'
+      },
+      {
+        key: 'b',
+        name: 'Item b'
+      }
+    ]
+  }
+};
+
+storiesOf('Button', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <Button {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <Button disabled {...baseProps} />)
+  .addStory('Primary', () => <Button primary {...baseProps} />, { rtl: true })
+  .addStory('Primary Disabled', () => <Button primary disabled {...baseProps} />)
+  .addStory(
+    'Multiline',
+    () => (
+      <Button icon="Share">
+        <Stack as="span" horizontalAlign="start" tokens={{ padding: '8px 0px' }}>
+          <Text>Compound multiline button</Text>
+          <Text variant="small">Caption</Text>
+        </Stack>
+      </Button>
+    ),
+    { rtl: true }
+  );
+
+storiesOf('Button - Circular', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <Button circular icon="AddFriend" />)
+  .addStory('Disabled', () => <Button circular disabled icon="AddFriend" />)
+  .addStory('Primary', () => <Button circular primary icon="AddFriend" />)
+  .addStory('Primary Disabled', () => <Button circular primary disabled icon="AddFriend" />);
+
+storiesOf('MenuButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-MenuButton')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-MenuButton')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <MenuButton {...menuProps} />, { rtl: true })
+  .addStory('Disabled', () => <MenuButton disabled {...menuProps} />)
+  .addStory('Primary', () => <MenuButton primary {...menuProps} />, { rtl: true })
+  .addStory('Primary Disabled', () => <MenuButton primary disabled {...menuProps} />);
+
+storiesOf('SplitButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('button hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('button pressed', { cropTo: '.testWrapper' })
+        .mouseUp('.ms-Button')
+        .hover('.ms-MenuButton')
+        .snapshot('menu button hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-MenuButton')
+        .snapshot('menu button pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <SplitButton {...menuProps} />, { rtl: true })
+  .addStory('Disabled', () => <SplitButton disabled {...menuProps} />)
+  .addStory('Primary', () => <SplitButton primary {...menuProps} />, { rtl: true })
+  .addStory('Primary Disabled', () => <SplitButton primary disabled {...menuProps} />);
+
+storiesOf('DefaultButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <DefaultButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <DefaultButton disabled {...baseProps} />);
+
+storiesOf('PrimaryButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <PrimaryButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <PrimaryButton disabled {...baseProps} />);
+
+storiesOf('ActionButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <ActionButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <ActionButton disabled {...baseProps} />);
+
+storiesOf('BaseButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <BaseButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <BaseButton disabled {...baseProps} />);
+
+storiesOf('CommandBarButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <CommandBarButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <CommandBarButton disabled {...baseProps} />);
+
+storiesOf('CompoundButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <CompoundButton text="Button" secondaryText="Caption" />, {
+    rtl: true
+  })
+  .addStory('Disabled', () => <CompoundButton disabled text="Button" secondaryText="Caption" />)
+  .addStory('Primary', () => <CompoundButton primary text="Button" secondaryText="Caption" />, {
+    rtl: true
+  })
+  .addStory('Primary Disabled', () => (
+    <CompoundButton primary disabled text="Button" secondaryText="Caption" />
+  ));
+
+storiesOf('IconButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <IconButton icon="Emoji2" />, { rtl: true })
+  .addStory('Disabled', () => <IconButton disabled icon="Emoji2" />);
+
+storiesOf('MessageBarButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('.ms-Button')
+        .snapshot('hovered', { cropTo: '.testWrapper' })
+        .mouseDown('.ms-Button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <MessageBarButton {...baseProps} />, { rtl: true })
+  .addStory('Disabled', () => <MessageBarButton disabled {...baseProps} />)
+  .addStory('Primary', () => <MessageBarButton primary {...baseProps} />, { rtl: true })
+  .addStory('Primary Disabled', () => <MessageBarButton primary disabled {...baseProps} />);
diff --git a/packages/experiments/src/components/Button/Button.styles.ts b/packages/experiments/src/components/Button/Button.styles.ts
index 76eacdb63578e9..60cabfc622018f 100644
--- a/packages/experiments/src/components/Button/Button.styles.ts
+++ b/packages/experiments/src/components/Button/Button.styles.ts
@@ -204,14 +204,15 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
 
   const globalClassNames = getGlobalClassNames(
     {
-      icon: 'ms-Icon'
+      msButton: 'ms-Button',
+      msButtonIcon: 'ms-Button-Icon'
     },
-    theme,
-    true
+    theme
   );
 
   return {
     root: [
+      globalClassNames.msButton,
       !circular && getFocusStyle(theme, { inset: 1, outlineColor: tokens.outlineColor }),
       circular && {
         selectors: {
@@ -281,7 +282,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
               }
             }
           },
-          [`:hover .${globalClassNames.icon}`]: {
+          [`:hover .${globalClassNames.msButtonIcon}`]: {
             color: tokens.iconColorHovered,
 
             selectors: {
@@ -290,7 +291,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
               }
             }
           },
-          [`:active .${globalClassNames.icon}`]: {
+          [`:active .${globalClassNames.msButtonIcon}`]: {
             color: tokens.iconColorPressed,
 
             selectors: {
@@ -319,6 +320,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
       height: '100%'
     },
     icon: [
+      globalClassNames.msButtonIcon,
       {
         display: 'flex',
         fontSize: tokens.iconSize,
@@ -332,8 +334,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
             color: tokens.highContrastIconColor
           }
         }
-      },
-      globalClassNames.icon
+      }
     ],
     content: {
       overflow: 'visible',
diff --git a/packages/experiments/src/components/Button/Button.test.tsx b/packages/experiments/src/components/Button/Button.test.tsx
index 7d6ebba49af6e7..8c1f58e683533e 100644
--- a/packages/experiments/src/components/Button/Button.test.tsx
+++ b/packages/experiments/src/components/Button/Button.test.tsx
@@ -4,7 +4,7 @@ import * as renderer from 'react-test-renderer';
 import { CommandBar, Icon, Text } from 'office-ui-fabric-react';
 import { Button } from './Button';
 
-describe('Button view', () => {
+describe('Button', () => {
   it('renders a default Button with content correctly', () => {
     const component = renderer.create(<Button content="Default button" />);
     const tree = component.toJSON();
diff --git a/packages/experiments/src/components/Button/ButtonVariants.test.tsx b/packages/experiments/src/components/Button/ButtonVariants.test.tsx
index ea558341dbd6b7..a651366cd6cbf3 100644
--- a/packages/experiments/src/components/Button/ButtonVariants.test.tsx
+++ b/packages/experiments/src/components/Button/ButtonVariants.test.tsx
@@ -3,7 +3,7 @@ import * as renderer from 'react-test-renderer';
 
 import { ActionButton, CommandBarButton, CompoundButton, DefaultButton, IconButton, MessageBarButton, PrimaryButton } from './index';
 
-describe('Button view', () => {
+describe('Button Variants', () => {
   it('renders a DefaultButton correctly', () => {
     const component = renderer.create(<DefaultButton content="Button" />);
     const tree = component.toJSON();
diff --git a/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts b/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts
index 83d0b46e1111ec..8e9a19b10ed78a 100644
--- a/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts
+++ b/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts
@@ -1,5 +1,5 @@
 import { IMenuButtonComponent, IMenuButtonStylesReturnType, IMenuButtonTokenReturnType } from './MenuButton.types';
-import { HighContrastSelector } from '../../../Styling';
+import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const baseTokens: IMenuButtonComponent['tokens'] = (props, theme): IMenuButtonTokenReturnType => {
   return {
@@ -63,8 +63,16 @@ export const MenuButtonTokens: IMenuButtonComponent['tokens'] = (props, theme):
 export const MenuButtonStyles: IMenuButtonComponent['styles'] = (props, theme, tokens): IMenuButtonStylesReturnType => {
   const { className } = props;
 
+  const globalClassNames = getGlobalClassNames(
+    {
+      msMenuButton: 'ms-MenuButton'
+    },
+    theme
+  );
+
   return {
     button: [
+      globalClassNames.msMenuButton,
       {
         backgroundColor: props.expanded ? tokens.backgroundColorExpanded : tokens.backgroundColor,
         borderColor: tokens.borderColor,
diff --git a/packages/experiments/src/components/Button/MenuButton/MenuButton.test.tsx b/packages/experiments/src/components/Button/MenuButton/MenuButton.test.tsx
index 503e9183ac6a07..d6204373e9853a 100644
--- a/packages/experiments/src/components/Button/MenuButton/MenuButton.test.tsx
+++ b/packages/experiments/src/components/Button/MenuButton/MenuButton.test.tsx
@@ -18,7 +18,7 @@ const menuProps: IMenuButtonProps['menu'] = {
   ]
 };
 
-describe('MenuButton view', () => {
+describe('MenuButton', () => {
   it('renders a MenuButton correctly', () => {
     const component = renderer.create(<MenuButton content="Menu button" menu={menuProps} />);
     const tree = component.toJSON();
diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.test.tsx b/packages/experiments/src/components/Button/SplitButton/SplitButton.test.tsx
index 747dd3e7485baf..d0bb9702e142c7 100644
--- a/packages/experiments/src/components/Button/SplitButton/SplitButton.test.tsx
+++ b/packages/experiments/src/components/Button/SplitButton/SplitButton.test.tsx
@@ -17,7 +17,7 @@ const menuProps: ISplitButtonProps['menu'] = {
   ]
 };
 
-describe('SplitButton view', () => {
+describe('SplitButton', () => {
   it('renders a SplitButton correctly', () => {
     const component = renderer.create(<SplitButton icon="Add" content="Default button" menu={menuProps} />);
     const tree = component.toJSON();
diff --git a/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
index 25313249a0169b..fafb34f4cddc0c 100644
--- a/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button view renders a default Button with content correctly 1`] = `
+exports[`Button renders a default Button with content correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -73,16 +73,16 @@ exports[`Button view renders a default Button with content correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Icon-47 {
+      &:hover .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-47 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-47 {
+      &:active .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-47 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -142,11 +142,11 @@ exports[`Button view renders a default Button with content correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a disabled primary Button with content correctly 1`] = `
+exports[`Button renders a disabled primary Button with content correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -223,16 +223,16 @@ exports[`Button view renders a disabled primary Button with content correctly 1`
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-60 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-60 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-60 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-60 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -293,10 +293,10 @@ exports[`Button view renders a disabled primary Button with content correctly 1`
 </button>
 `;
 
-exports[`Button view renders a primary Button with content correctly 1`] = `
+exports[`Button renders a primary Button with content correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -372,16 +372,16 @@ exports[`Button view renders a primary Button with content correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Icon-57 {
+      &:hover .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-57 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Window;
       }
-      &:active .ms-Icon-57 {
+      &:active .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-57 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
diff --git a/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap b/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
index 4201078c82f3c3..0913e965494185 100644
--- a/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
+++ b/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button view renders a CommandBarButton correctly 1`] = `
+exports[`Button Variants renders a CommandBarButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -74,16 +74,16 @@ exports[`Button view renders a CommandBarButton correctly 1`] = `
         border-color: transparent;
         color: Highlight;
       }
-      &:hover .ms-Icon-70 {
+      &:hover .ms-Button-Icon {
         color: #106ebe;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-70 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-70 {
+      &:active .ms-Button-Icon {
         color: #005a9e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-70 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -143,10 +143,10 @@ exports[`Button view renders a CommandBarButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a DefaultButton correctly 1`] = `
+exports[`Button Variants renders a DefaultButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -216,16 +216,16 @@ exports[`Button view renders a DefaultButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Icon-47 {
+      &:hover .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-47 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-47 {
+      &:active .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-47 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -285,10 +285,10 @@ exports[`Button view renders a DefaultButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a PrimaryButton correctly 1`] = `
+exports[`Button Variants renders a PrimaryButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -364,16 +364,16 @@ exports[`Button view renders a PrimaryButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Icon-57 {
+      &:hover .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-57 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Window;
       }
-      &:active .ms-Icon-57 {
+      &:active .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-57 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -434,10 +434,10 @@ exports[`Button view renders a PrimaryButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a default CompoundButton correctly 1`] = `
+exports[`Button Variants renders a default CompoundButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -508,16 +508,16 @@ exports[`Button view renders a default CompoundButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Icon-78 {
+      &:hover .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-78 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-78 {
+      &:active .ms-Button-Icon {
         color: inherit;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-78 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -583,10 +583,10 @@ exports[`Button view renders a default CompoundButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a default MessageBarButton correctly 1`] = `
+exports[`Button Variants renders a default MessageBarButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -658,16 +658,16 @@ exports[`Button view renders a default MessageBarButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Icon-102 {
+      &:hover .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-102 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-102 {
+      &:active .ms-Button-Icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-102 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -727,11 +727,11 @@ exports[`Button view renders a default MessageBarButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a default disabled CompoundButton correctly 1`] = `
+exports[`Button Variants renders a default disabled CompoundButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -807,16 +807,16 @@ exports[`Button view renders a default disabled CompoundButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-85 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-85 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-85 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-85 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -885,11 +885,11 @@ exports[`Button view renders a default disabled CompoundButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a default disabled MessageBarButton correctly 1`] = `
+exports[`Button Variants renders a default disabled MessageBarButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -966,16 +966,16 @@ exports[`Button view renders a default disabled MessageBarButton correctly 1`] =
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-106 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-106 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-106 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-106 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1035,11 +1035,11 @@ exports[`Button view renders a default disabled MessageBarButton correctly 1`] =
 </button>
 `;
 
-exports[`Button view renders a disabled ActionButton correctly 1`] = `
+exports[`Button Variants renders a disabled ActionButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1115,16 +1115,16 @@ exports[`Button view renders a disabled ActionButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-68 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-68 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-68 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-68 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1184,11 +1184,11 @@ exports[`Button view renders a disabled ActionButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a disabled CommandBarButton correctly 1`] = `
+exports[`Button Variants renders a disabled CommandBarButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1263,16 +1263,16 @@ exports[`Button view renders a disabled CommandBarButton correctly 1`] = `
         border-color: transparent;
         color: GrayText;
       }
-      &:hover .ms-Icon-75 {
+      &:hover .ms-Button-Icon {
         color: #c8c6c4;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-75 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-75 {
+      &:active .ms-Button-Icon {
         color: #c8c6c4;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-75 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1332,11 +1332,11 @@ exports[`Button view renders a disabled CommandBarButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a disabled DefaultButton correctly 1`] = `
+exports[`Button Variants renders a disabled DefaultButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1411,16 +1411,16 @@ exports[`Button view renders a disabled DefaultButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-54 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-54 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-54 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-54 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1480,11 +1480,11 @@ exports[`Button view renders a disabled DefaultButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a disabled IconButton correctly 1`] = `
+exports[`Button Variants renders a disabled IconButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1555,16 +1555,16 @@ exports[`Button view renders a disabled IconButton correctly 1`] = `
         border-color: transparent;
         color: GrayText;
       }
-      &:hover .ms-Icon-100 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-100 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-100 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-100 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
   disabled={true}
@@ -1621,11 +1621,11 @@ exports[`Button view renders a disabled IconButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a disabled PrimaryButton correctly 1`] = `
+exports[`Button Variants renders a disabled PrimaryButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1702,16 +1702,16 @@ exports[`Button view renders a disabled PrimaryButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-60 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-60 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-60 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-60 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1772,10 +1772,10 @@ exports[`Button view renders a disabled PrimaryButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a primary CompoundButton correctly 1`] = `
+exports[`Button Variants renders a primary CompoundButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -1852,16 +1852,16 @@ exports[`Button view renders a primary CompoundButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Icon-89 {
+      &:hover .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-89 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Window;
       }
-      &:active .ms-Icon-89 {
+      &:active .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-89 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1931,10 +1931,10 @@ exports[`Button view renders a primary CompoundButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a primary MessageBarButton correctly 1`] = `
+exports[`Button Variants renders a primary MessageBarButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -2012,16 +2012,16 @@ exports[`Button view renders a primary MessageBarButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Icon-108 {
+      &:hover .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-108 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Window;
       }
-      &:active .ms-Icon-108 {
+      &:active .ms-Button-Icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-108 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2082,11 +2082,11 @@ exports[`Button view renders a primary MessageBarButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a primary disabled CompoundButton correctly 1`] = `
+exports[`Button Variants renders a primary disabled CompoundButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -2164,16 +2164,16 @@ exports[`Button view renders a primary disabled CompoundButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-93 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-93 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-93 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-93 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2243,11 +2243,11 @@ exports[`Button view renders a primary disabled CompoundButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders a primary disabled MessageBarButton correctly 1`] = `
+exports[`Button Variants renders a primary disabled MessageBarButton correctly 1`] = `
 <button
   aria-disabled={true}
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -2326,16 +2326,16 @@ exports[`Button view renders a primary disabled MessageBarButton correctly 1`] =
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Icon-110 {
+      &:hover .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-110 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: GrayText;
       }
-      &:active .ms-Icon-110 {
+      &:active .ms-Button-Icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-110 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2396,10 +2396,10 @@ exports[`Button view renders a primary disabled MessageBarButton correctly 1`] =
 </button>
 `;
 
-exports[`Button view renders an ActionButton correctly 1`] = `
+exports[`Button Variants renders an ActionButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -2470,16 +2470,16 @@ exports[`Button view renders an ActionButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Icon-62 {
+      &:hover .ms-Button-Icon {
         color: #0078d4;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-62 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-62 {
+      &:active .ms-Button-Icon {
         color: #000000;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-62 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2539,10 +2539,10 @@ exports[`Button view renders an ActionButton correctly 1`] = `
 </button>
 `;
 
-exports[`Button view renders an IconButton correctly 1`] = `
+exports[`Button Variants renders an IconButton correctly 1`] = `
 <button
   className=
-
+      ms-Button
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -2609,16 +2609,16 @@ exports[`Button view renders an IconButton correctly 1`] = `
         border-color: transparent;
         color: Highlight;
       }
-      &:hover .ms-Icon-95 {
+      &:hover .ms-Button-Icon {
         color: #106ebe;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Icon-95 {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
         color: Highlight;
       }
-      &:active .ms-Icon-95 {
+      &:active .ms-Button-Icon {
         color: #005a9e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Icon-95 {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
         color: Highlight;
       }
   onClick={[Function]}

From f8698312eee4211434cd0e550b3bb2e0e9dfbb71 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 20 May 2019 16:50:12 -0700
Subject: [PATCH 2/3] Adding change file.

---
 .../experiments/buttonVRTests_2019-05-20-23-49.json   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@uifabric/experiments/buttonVRTests_2019-05-20-23-49.json

diff --git a/common/changes/@uifabric/experiments/buttonVRTests_2019-05-20-23-49.json b/common/changes/@uifabric/experiments/buttonVRTests_2019-05-20-23-49.json
new file mode 100644
index 00000000000000..8c5523fc9252c1
--- /dev/null
+++ b/common/changes/@uifabric/experiments/buttonVRTests_2019-05-20-23-49.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Button: Adding VR tests and fixing some className assignments in styling.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file

From 8f2009aa23039997a0a4266eafba728e42fdb3bb Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 20 May 2019 17:08:30 -0700
Subject: [PATCH 3/3] Fixing BEM style inconsistency.

---
 .../src/components/Button/Button.styles.ts    |   2 +-
 .../Button/__snapshots__/Button.test.tsx.snap |  24 +--
 .../ButtonVariants.test.tsx.snap              | 144 +++++++++---------
 3 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/packages/experiments/src/components/Button/Button.styles.ts b/packages/experiments/src/components/Button/Button.styles.ts
index 60cabfc622018f..144458ebbf5078 100644
--- a/packages/experiments/src/components/Button/Button.styles.ts
+++ b/packages/experiments/src/components/Button/Button.styles.ts
@@ -205,7 +205,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
   const globalClassNames = getGlobalClassNames(
     {
       msButton: 'ms-Button',
-      msButtonIcon: 'ms-Button-Icon'
+      msButtonIcon: 'ms-Button-icon'
     },
     theme
   );
diff --git a/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
index fafb34f4cddc0c..fd06bace17182a 100644
--- a/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/experiments/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -73,16 +73,16 @@ exports[`Button renders a default Button with content correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -223,16 +223,16 @@ exports[`Button renders a disabled primary Button with content correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -372,16 +372,16 @@ exports[`Button renders a primary Button with content correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Window;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
diff --git a/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap b/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
index 0913e965494185..28916e661c57f9 100644
--- a/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
+++ b/packages/experiments/src/components/Button/__snapshots__/ButtonVariants.test.tsx.snap
@@ -74,16 +74,16 @@ exports[`Button Variants renders a CommandBarButton correctly 1`] = `
         border-color: transparent;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #106ebe;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #005a9e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -216,16 +216,16 @@ exports[`Button Variants renders a DefaultButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -364,16 +364,16 @@ exports[`Button Variants renders a PrimaryButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Window;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -508,16 +508,16 @@ exports[`Button Variants renders a default CompoundButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: inherit;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -658,16 +658,16 @@ exports[`Button Variants renders a default MessageBarButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #201f1e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -807,16 +807,16 @@ exports[`Button Variants renders a default disabled CompoundButton correctly 1`]
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -966,16 +966,16 @@ exports[`Button Variants renders a default disabled MessageBarButton correctly 1
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1115,16 +1115,16 @@ exports[`Button Variants renders a disabled ActionButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1263,16 +1263,16 @@ exports[`Button Variants renders a disabled CommandBarButton correctly 1`] = `
         border-color: transparent;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #c8c6c4;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #c8c6c4;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1411,16 +1411,16 @@ exports[`Button Variants renders a disabled DefaultButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1555,16 +1555,16 @@ exports[`Button Variants renders a disabled IconButton correctly 1`] = `
         border-color: transparent;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
   disabled={true}
@@ -1702,16 +1702,16 @@ exports[`Button Variants renders a disabled PrimaryButton correctly 1`] = `
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -1852,16 +1852,16 @@ exports[`Button Variants renders a primary CompoundButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Window;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2012,16 +2012,16 @@ exports[`Button Variants renders a primary MessageBarButton correctly 1`] = `
         border-color: Highlight;
         color: Window;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Window;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #ffffff;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Window;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2164,16 +2164,16 @@ exports[`Button Variants renders a primary disabled CompoundButton correctly 1`]
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2326,16 +2326,16 @@ exports[`Button Variants renders a primary disabled MessageBarButton correctly 1
         border-color: GrayText;
         color: GrayText;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: GrayText;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #a19f9d;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: GrayText;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2470,16 +2470,16 @@ exports[`Button Variants renders an ActionButton correctly 1`] = `
         border-color: Highlight;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #0078d4;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #000000;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
       .ms-Fabric--isFocusVisible &:focus {
@@ -2609,16 +2609,16 @@ exports[`Button Variants renders an IconButton correctly 1`] = `
         border-color: transparent;
         color: Highlight;
       }
-      &:hover .ms-Button-Icon {
+      &:hover .ms-Button-icon {
         color: #106ebe;
       }
-      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:hover .ms-Button-icon {
         color: Highlight;
       }
-      &:active .ms-Button-Icon {
+      &:active .ms-Button-icon {
         color: #005a9e;
       }
-      @media screen and (-ms-high-contrast: active){&:active .ms-Button-Icon {
+      @media screen and (-ms-high-contrast: active){&:active .ms-Button-icon {
         color: Highlight;
       }
   onClick={[Function]}