Adding tinted prop to Button (#17324)

* adding tinted props
microsoft · Mar 11, 2021 · 74be7e3 · 74be7e3
1 parent a2fea79
commit 74be7e3
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 0 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -46,6 +46,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Prevent scrollable parent element or viewport scroll when an item is seleted in `Dropdown` @yuanboxue-amber ([#17222](https://github.com/microsoft/fluentui/pull/17222))
 - Prevent menu to be dismissed when scroll happens inside `Menu` boundaries @assuncaocharles ([#17294](https://github.com/microsoft/fluentui/pull/17294))
 - Fix double rendering of `ChatMessage` component @layershifter ([#17276](https://github.com/microsoft/fluentui/pull/17276))
+- Adding `tinted` prop from `Button` @notandrew ([#17324](https://github.com/microsoft/fluentui/pull/17324))
 - Update the `OpenOutsideIcon` icon @notandrew ([#17361](https://github.com/microsoft/fluentui/pull/17361))
 - Fix `Popup` to make sure `updatePosition` is always defined in `renderContent` @yuanboxue-amber ([#17377](https://github.com/microsoft/fluentui/pull/17377))
 

diff --git a/...es/fluentui/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx b/...es/fluentui/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
@@ -5,6 +5,7 @@ const ButtonExampleEmphasis = () => (
   <Flex gap="gap.smaller">
     <Button content="Primary" primary />
     <Button content="Secondary" secondary />
+    <Button content="Tinted" tinted />
   </Flex>
 );
 

diff --git a/packages/fluentui/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx b/packages/fluentui/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
@@ -9,6 +9,9 @@ const ButtonExampleEmphasis = () => (
     <Button secondary>
       <Button.Content>Secondary</Button.Content>
     </Button>
+    <Button tinted>
+      <Button.Content>Tinted</Button.Content>
+    </Button>
   </Flex>
 );
 

diff --git a/packages/fluentui/react-northstar/src/components/Button/Button.tsx b/packages/fluentui/react-northstar/src/components/Button/Button.tsx
@@ -91,6 +91,9 @@ export interface ButtonProps
   /** A button can emphasize that it represents an alternative action. */
   secondary?: boolean;
 
+  /** A button can emphasize that it represents the tinted style. */
+  tinted?: boolean;
+
   /** A button can be sized. */
   size?: 'small' | 'medium';
 }
@@ -99,6 +102,7 @@ export type ButtonStylesProps = Pick<
   ButtonProps,
   | 'text'
   | 'primary'
+  | 'tinted'
   | 'disabled'
   | 'disabledFocusable'
   | 'circular'
@@ -148,6 +152,7 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
       circular,
       className,
       styles,
+      tinted,
       variables,
       design,
     } = props;
@@ -176,6 +181,7 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
         text,
         primary,
         disabled,
+        tinted,
         disabledFocusable,
         circular,
         size,
@@ -299,6 +305,7 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
       'content',
       'design',
       'disabled',
+      'tinted',
       'disabledFocusable',
       'fluid',
       'icon',
@@ -346,6 +353,7 @@ Button.propTypes = {
   loading: PropTypes.bool,
   onClick: PropTypes.func,
   onFocus: PropTypes.func,
+  tinted: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
   primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
   text: PropTypes.bool,
   secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts
@@ -183,6 +183,27 @@ export const buttonStyles: ComponentSlotStylesPrepared<ButtonStylesProps, Button
         },
       }),
 
+      ...(p.tinted && {
+        backgroundColor: v.tintedBackgroundColor,
+        borderColor: v.tintedBorderColor,
+        color: v.tintedColor,
+
+        ...(!p.disabledFocusable && {
+          ':active': {
+            transition: ultraFast,
+            backgroundColor: v.tintedBackgroundColorActive,
+          },
+        }),
+
+        ':hover': {
+          backgroundColor: v.tintedBackgroundColorHover,
+        },
+
+        ':focus': {
+          boxShadow: 'none',
+        },
+      }),
+
       // Overrides for "disabled" buttons
       ...(p.disabled && {
         // pointer events intentionally not disabled for focusable disabled buttons

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts
@@ -42,6 +42,14 @@ export interface ButtonVariables {
   primaryBackgroundColorDisabled: string;
   primaryBorderColor: string;
 
+  tintedColor: string;
+  tintedColorHover: string;
+  tintedBackgroundColor: string;
+  tintedBackgroundColorActive: string;
+  tintedBackgroundColorHover: string;
+  tintedBorderColor: string;
+  tintedBorderColorHover: string;
+
   circularBorderRadius: string;
 
   textColor: string;
@@ -109,6 +117,14 @@ export const buttonVariables = (siteVars: any): ButtonVariables => ({
   primaryBackgroundColorFocus: undefined,
   primaryBorderColor: 'transparent',
 
+  tintedColor: siteVars.colorScheme.brand.foreground,
+  tintedColorHover: siteVars.colorScheme.brand.foreground,
+  tintedBackgroundColor: siteVars.colorScheme.default.background,
+  tintedBackgroundColorActive: siteVars.colorScheme.brand.backgroundHover1,
+  tintedBackgroundColorHover: siteVars.colorScheme.brand.backgroundHover1,
+  tintedBorderColor: siteVars.colorScheme.brand.border1,
+  tintedBorderColorHover: siteVars.colorScheme.brand.borderHover,
+
   circularBorderRadius: pxToRem(999),
 
   textColor: siteVars.colorScheme.default.foreground1,