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 00000000000000..a54a6b125d7028
--- /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
diff --git a/packages/experiments/src/components/Button/ActionButton.tsx b/packages/experiments/src/components/Button/ActionButton.tsx
new file mode 100644
index 00000000000000..53852fa7a77764
--- /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 8px',
+ 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 ;
+};
diff --git a/packages/experiments/src/components/Button/Button.styles.ts b/packages/experiments/src/components/Button/Button.styles.ts
index 730ef9f488ca6b..40d84d0ffee87c 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 6c7b219ada4bc8..15a24d4618278f 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 ef84b0914f0bab..ade10a70fb7b91 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 {
public render(): JSX.Element {
@@ -30,6 +32,9 @@ export class ButtonPage extends React.Component {
+
+
+
@@ -42,6 +47,7 @@ export class ButtonPage extends React.Component {
('!raw-loader!@uifabric/experiments/src/components/Button/Button.types.tsx'),
+ require('!raw-loader!@uifabric/experiments/src/components/Button/ButtonVariants.types.ts'),
require('!raw-loader!@uifabric/experiments/src/components/Button/MenuButton/MenuButton.types.tsx'),
require('!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 d90cf63c919082..aadd926f2c7dd0 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 5e82a3719a3879..31c86d2ef7fc99 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 ;
+ return ;
};
diff --git a/packages/experiments/src/components/Button/PrimaryButton.tsx b/packages/experiments/src/components/Button/PrimaryButton.tsx
index 79f3cfa59cbaf6..77010d190e9c2e 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 ;
+ return ;
};
diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts
index 9ffc30911216c2..b125c3cef95b89 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 9fadf148a8188d..f39eb765a2244f 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 00000000000000..1935bf3f172d32
--- /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 }) => (
+
+ {props.children}
+
+);
+
+// tslint:disable:jsx-no-lambda
+export class ButtonVariantsExample extends React.Component<{}, {}> {
+ public render(): JSX.Element {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/packages/experiments/src/components/Button/index.ts b/packages/experiments/src/components/Button/index.ts
index 87b22aaf838ff1..6112f99172a1f9 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';