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