From 0110e7207fb936f981107a24c0db3a482f60e0c0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 8 Apr 2019 14:49:57 -0700
Subject: [PATCH 1/3] Button: Creating ActionButton variant and cleaning
 styling.

---
 .../src/components/Button/ActionButton.tsx    | 49 +++++++++++++++++++
 .../src/components/Button/Button.styles.ts    |  7 ++-
 .../src/components/Button/Button.types.tsx    |  1 +
 .../src/components/Button/ButtonPage.tsx      |  6 +++
 .../components/Button/ButtonVariants.types.ts |  2 +
 .../src/components/Button/DefaultButton.tsx   |  4 +-
 .../src/components/Button/PrimaryButton.tsx   |  4 +-
 .../Button/SplitButton/SplitButton.styles.ts  |  7 ++-
 .../__snapshots__/Button.view.test.tsx.snap   |  4 +-
 .../examples/Button.Variants.Example.tsx      | 44 +++++++++++++++++
 .../src/components/Button/index.ts            |  1 +
 11 files changed, 117 insertions(+), 12 deletions(-)
 create mode 100644 packages/experiments/src/components/Button/ActionButton.tsx
 create mode 100644 packages/experiments/src/components/Button/examples/Button.Variants.Example.tsx

diff --git a/packages/experiments/src/components/Button/ActionButton.tsx b/packages/experiments/src/components/Button/ActionButton.tsx
new file mode 100644
index 0000000000000..3ce42f03c1c29
--- /dev/null
+++ b/packages/experiments/src/components/Button/ActionButton.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Button } from './Button';
+import { IButtonComponent, IButtonTokenReturnType } from './Button.types';
+import { ButtonVariantsType } from './ButtonVariants.types';
+import { FontWeights } from '../../Styling';
+
+const baseTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => {
+  const { palette } = theme;
+
+  return {
+    backgroundColor: 'transparent',
+    backgroundColorHovered: 'transparent',
+    backgroundColorPressed: 'transparent',
+    borderColor: 'transparent',
+    color: palette.neutralPrimary,
+    colorHovered: palette.themePrimary,
+    colorPressed: palette.black,
+    contentPadding: '0px 4px',
+    height: '40px',
+    iconColor: palette.neutralPrimary,
+    iconColorHovered: palette.themePrimary,
+    iconColorPressed: palette.black,
+    textWeight: FontWeights.regular
+  };
+};
+
+const disabledTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => {
+  const { palette } = theme;
+
+  return {
+    color: palette.neutralTertiary,
+    colorHovered: palette.neutralTertiary,
+    colorPressed: palette.neutralTertiary,
+    iconColor: palette.neutralTertiary,
+    iconColorHovered: palette.neutralTertiary,
+    iconColorPressed: palette.neutralTertiary
+  };
+};
+
+export const ActionButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
+  baseTokens,
+  props.disabled && disabledTokens
+];
+
+export const ActionButton: ButtonVariantsType = props => {
+  const { text, iconProps, ...rest } = props;
+
+  return <Button stack={{ horizontalAlign: 'start' }} content={text} icon={iconProps} tokens={ActionButtonTokens} {...rest} />;
+};
diff --git a/packages/experiments/src/components/Button/Button.styles.ts b/packages/experiments/src/components/Button/Button.styles.ts
index 730ef9f488ca6..40d84d0ffee87 100644
--- a/packages/experiments/src/components/Button/Button.styles.ts
+++ b/packages/experiments/src/components/Button/Button.styles.ts
@@ -5,6 +5,7 @@ import { IsFocusVisibleClassName } from '../../Utilities';
 const baseTokens: IButtonComponent['tokens'] = {
   borderRadius: 0,
   borderWidth: 1,
+  cursor: 'pointer',
   minWidth: 100,
   minHeight: 32,
   lineHeight: 1,
@@ -96,7 +97,9 @@ const disabledTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenR
 
     highContrastBorderColor: 'GrayText',
     highContrastBorderColorHovered: 'GrayText',
-    highContrastBorderColorPressed: 'GrayText'
+    highContrastBorderColorPressed: 'GrayText',
+
+    cursor: 'default'
   };
 };
 
@@ -165,7 +168,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
         borderWidth: tokens.borderWidth,
         boxSizing: 'border-box',
         color: tokens.color,
-        cursor: 'default',
+        cursor: tokens.cursor,
         display: 'inline-block',
         fontSize: tokens.textSize,
         fontWeight: tokens.textWeight,
diff --git a/packages/experiments/src/components/Button/Button.types.tsx b/packages/experiments/src/components/Button/Button.types.tsx
index 6c7b219ada4bc..15a24d4618278 100644
--- a/packages/experiments/src/components/Button/Button.types.tsx
+++ b/packages/experiments/src/components/Button/Button.types.tsx
@@ -111,6 +111,7 @@ export interface IButtonTokens {
   borderWidth?: number | string;
   contentPadding?: number | string;
   contentPaddingFocused?: number | string;
+  cursor?: string | undefined;
   textFamily?: string;
   textSize?: number | string;
   textWeight?: IFontWeight;
diff --git a/packages/experiments/src/components/Button/ButtonPage.tsx b/packages/experiments/src/components/Button/ButtonPage.tsx
index ef84b0914f0ba..ade10a70fb7b9 100644
--- a/packages/experiments/src/components/Button/ButtonPage.tsx
+++ b/packages/experiments/src/components/Button/ButtonPage.tsx
@@ -6,12 +6,14 @@ import { MenuButtonExample } from './MenuButton/examples/MenuButton.Example';
 import { SplitButtonExample } from './SplitButton/examples/SplitButton.Example';
 import { ButtonStylesExample } from './examples/Button.Styles.Example';
 import { ButtonTokensExample } from './examples/Button.Tokens.Example';
+import { ButtonVariantsExample } from './examples/Button.Variants.Example';
 
 const ButtonExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/examples/Button.Example.tsx') as string;
 const MenuButtonExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx') as string;
 const SplitButtonExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/SplitButton/examples/SplitButton.Example.tsx') as string;
 const ButtonStylesExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/examples/Button.Styles.Example.tsx') as string;
 const ButtonTokensExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/examples/Button.Tokens.Example.tsx') as string;
+const ButtonVariantsExampleCode = require('!raw-loader!@uifabric/experiments/src/components/Button/examples/Button.Tokens.Example.tsx') as string;
 
 export class ButtonPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -30,6 +32,9 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title="Split Button with two focus stops" code={SplitButtonExampleCode}>
               <SplitButtonExample />
             </ExampleCard>
+            <ExampleCard title="Button Variants Examples" code={ButtonVariantsExampleCode}>
+              <ButtonVariantsExample />
+            </ExampleCard>
             <ExampleCard title="Button Styles" code={ButtonStylesExampleCode}>
               <ButtonStylesExample />
             </ExampleCard>
@@ -42,6 +47,7 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, {}> {
           <PropertiesTableSet
             sources={[
               require<string>('!raw-loader!@uifabric/experiments/src/components/Button/Button.types.tsx'),
+              require<string>('!raw-loader!@uifabric/experiments/src/components/Button/ButtonVariants.types.ts'),
               require<string>('!raw-loader!@uifabric/experiments/src/components/Button/MenuButton/MenuButton.types.tsx'),
               require<string>('!raw-loader!@uifabric/experiments/src/components/Button/SplitButton/SplitButton.types.tsx')
             ]}
diff --git a/packages/experiments/src/components/Button/ButtonVariants.types.ts b/packages/experiments/src/components/Button/ButtonVariants.types.ts
index d90cf63c91908..aadd926f2c7dd 100644
--- a/packages/experiments/src/components/Button/ButtonVariants.types.ts
+++ b/packages/experiments/src/components/Button/ButtonVariants.types.ts
@@ -1,6 +1,8 @@
 import { IButtonProps } from './Button.types';
+import { IIconProps } from 'office-ui-fabric-react';
 
 export interface IButtonVariantProps extends IButtonProps {
+  iconProps?: IIconProps;
   text?: string;
 }
 
diff --git a/packages/experiments/src/components/Button/DefaultButton.tsx b/packages/experiments/src/components/Button/DefaultButton.tsx
index 5e82a3719a387..31c86d2ef7fc9 100644
--- a/packages/experiments/src/components/Button/DefaultButton.tsx
+++ b/packages/experiments/src/components/Button/DefaultButton.tsx
@@ -3,7 +3,7 @@ import { Button } from './Button';
 import { ButtonVariantsType } from './ButtonVariants.types';
 
 export const DefaultButton: ButtonVariantsType = props => {
-  const { text, ...rest } = props;
+  const { text, iconProps, ...rest } = props;
 
-  return <Button content={text} {...rest} />;
+  return <Button content={text} icon={iconProps} {...rest} />;
 };
diff --git a/packages/experiments/src/components/Button/PrimaryButton.tsx b/packages/experiments/src/components/Button/PrimaryButton.tsx
index 79f3cfa59cbaf..77010d190e9c2 100644
--- a/packages/experiments/src/components/Button/PrimaryButton.tsx
+++ b/packages/experiments/src/components/Button/PrimaryButton.tsx
@@ -3,7 +3,7 @@ import { Button } from './Button';
 import { ButtonVariantsType } from './ButtonVariants.types';
 
 export const PrimaryButton: ButtonVariantsType = props => {
-  const { text, ...rest } = props;
+  const { text, iconProps, ...rest } = props;
 
-  return <Button primary content={text} {...rest} />;
+  return <Button primary content={text} icon={iconProps} {...rest} />;
 };
diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts
index 9ffc30911216c..b125c3cef95b8 100644
--- a/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts
+++ b/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts
@@ -50,11 +50,10 @@ export const SplitButtonStyles: ISplitButtonComponent['styles'] = (props, theme,
       }
     },
     splitDivider: {
-      borderRight: '1px solid',
-      borderColor: tokens.color,
+      backgroundColor: tokens.color,
       boxSizing: 'border-box',
-      height: 'calc(100% - 16px)',
-      margin: '8px 0px',
+      height: 'calc(100% - 14px)',
+      margin: '7px 0px',
       width: 1,
 
       selectors: {
diff --git a/packages/experiments/src/components/Button/__snapshots__/Button.view.test.tsx.snap b/packages/experiments/src/components/Button/__snapshots__/Button.view.test.tsx.snap
index 9fadf148a8188..f39eb765a2244 100644
--- a/packages/experiments/src/components/Button/__snapshots__/Button.view.test.tsx.snap
+++ b/packages/experiments/src/components/Button/__snapshots__/Button.view.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Button view renders a default Button with content correctly 1`] = `
         border-width: 1px;
         box-sizing: border-box;
         color: #333333;
-        cursor: default;
+        cursor: pointer;
         display: inline-block;
         font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
@@ -293,7 +293,7 @@ exports[`Button view renders a primary Button with content correctly 1`] = `
         border-width: 1px;
         box-sizing: border-box;
         color: #ffffff;
-        cursor: default;
+        cursor: pointer;
         display: inline-block;
         font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
diff --git a/packages/experiments/src/components/Button/examples/Button.Variants.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Variants.Example.tsx
new file mode 100644
index 0000000000000..1935bf3f172d3
--- /dev/null
+++ b/packages/experiments/src/components/Button/examples/Button.Variants.Example.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ActionButton, DefaultButton, PrimaryButton } from '../index';
+import { Stack } from 'office-ui-fabric-react';
+
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
+
+const alertClicked = (): void => {
+  alert('Clicked');
+};
+
+const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
+    {props.children}
+  </Stack>
+);
+
+// tslint:disable:jsx-no-lambda
+export class ButtonVariantsExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    return (
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.buttonStack}>
+          <ButtonStack>
+            <DefaultButton text="Default button" onClick={alertClicked} />
+            <DefaultButton disabled text="Disabled default button" onClick={alertClicked} />
+            <PrimaryButton text="Primary button" onClick={alertClicked} />
+            <PrimaryButton disabled text="Disabled primary button" onClick={alertClicked} />
+          </ButtonStack>
+          <ButtonStack>
+            <ActionButton text="Action button" onClick={alertClicked} />
+            <ActionButton disabled text="Disabled action button" onClick={alertClicked} />
+          </ButtonStack>
+        </Stack>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Button/index.ts b/packages/experiments/src/components/Button/index.ts
index 87b22aaf838ff..6112f99172a1f 100644
--- a/packages/experiments/src/components/Button/index.ts
+++ b/packages/experiments/src/components/Button/index.ts
@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './Button.types';
 export * from './ButtonVariants.types';
+export * from './ActionButton';
 export * from './DefaultButton';
 export * from './PrimaryButton';

From 19a0e176b9a25586176f598c1f1fe4f692049d19 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Mon, 8 Apr 2019 14:50:45 -0700
Subject: [PATCH 2/3] Adding change file.

---
 .../experiments/actionButton_2019-04-08-21-50.json    | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@uifabric/experiments/actionButton_2019-04-08-21-50.json

diff --git a/common/changes/@uifabric/experiments/actionButton_2019-04-08-21-50.json b/common/changes/@uifabric/experiments/actionButton_2019-04-08-21-50.json
new file mode 100644
index 0000000000000..a54a6b125d702
--- /dev/null
+++ b/common/changes/@uifabric/experiments/actionButton_2019-04-08-21-50.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Button: Creating ActionButton variant and cleaning styling.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file

From b6e57de9028c0a9054463b21ed5216680d5bee33 Mon Sep 17 00:00:00 2001
From: "REDMOND\\humorimo" <Humberto.Morimoto@microsoft.com>
Date: Tue, 9 Apr 2019 09:53:08 -0700
Subject: [PATCH 3/3] Fixing padding.

---
 packages/experiments/src/components/Button/ActionButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments/src/components/Button/ActionButton.tsx b/packages/experiments/src/components/Button/ActionButton.tsx
index 3ce42f03c1c29..53852fa7a7776 100644
--- a/packages/experiments/src/components/Button/ActionButton.tsx
+++ b/packages/experiments/src/components/Button/ActionButton.tsx
@@ -15,7 +15,7 @@ const baseTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenRetur
     color: palette.neutralPrimary,
     colorHovered: palette.themePrimary,
     colorPressed: palette.black,
-    contentPadding: '0px 4px',
+    contentPadding: '0px 8px',
     height: '40px',
     iconColor: palette.neutralPrimary,
     iconColorHovered: palette.themePrimary,