Button: Adding various tests and updating component to include componentRef

change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Button: Adding focus method and tests.",
+  "packageName": "@fluentui/react-button",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-06-19T22:32:16.380Z"
+}

packages/react-button/src/components/Button/Button.stories.tsx

@@ -6,10 +6,10 @@ import { Stack, Text } from 'office-ui-fabric-react';
 
 const ButtonVariants = (props: ButtonProps) => (
   <div className={classes.hStack}>
-    <Button {...props} content="Hello, world" icon="X" />
-    <Button {...props} primary content="Hello, world" icon="X" />
-    <Button {...props} disabled content="Hello, world" icon="X" />
-    <Button {...props} primary disabled content="Hello, world" icon="X" />
+    <Button content={'Hello, world'} icon="O" {...props} />
+    <Button primary content="Hello, world" icon="X" {...props} />
+    <Button disabled content="Hello, world" icon="X" {...props} />
+    <Button primary disabled content="Hello, world" icon="X" {...props} />
   </div>
 );
 
@@ -149,7 +149,6 @@ export const ButtonTokens = () => (
           fontFamily: 'Circular, Helvetica, Arial, sans-serif',
           fontSize: '14px',
           fontWeight: '700',
-
           background: 'rgb(29, 185, 84) none repeat scroll 0% 0% / auto padding-box border-box',
           contentColor: 'rgb(255, 255, 255)',
           borderColor: 'rgb(255, 255, 255)',
@@ -187,19 +186,25 @@ export const ButtonTokens = () => (
     </div>
     <Text variant="xLarge">A tokenized button can be customized for any size or padding.</Text>
     <div className={classes.vStack}>
-      <ButtonVariants
+      <Button
+        content="I'm a small button with a large icon"
+        icon="O"
         tokens={{
           height: '24px',
           fontSize: '12px',
-          iconSize: '22px',
+          iconSize: '40px',
           padding: '0 8px',
+          contentGap: '4px',
         }}
       />
-      <ButtonVariants
+      <Button
+        content="I'm a large button with a small icon"
+        icon="O"
         tokens={{
           height: '70px',
-          fontSize: '48px',
-          iconSize: '48px',
+          fontSize: '24px',
+          iconSize: '12px',
+          padding: '0 40px',
         }}
       />
     </div>

packages/react-button/src/components/Button/Button.test.tsx

@@ -1,12 +1,48 @@
+import * as React from 'react';
 import * as path from 'path';
 import { isConformant } from '@fluentui/react-conformance';
 import { Button } from './Button';
+import * as renderer from 'react-test-renderer';
+import { ButtonRef } from './Button.types';
+import { mount, ReactWrapper } from 'enzyme';
 
 describe('Button', () => {
+  let wrapper: ReactWrapper | undefined;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
+  });
+
   isConformant({
     componentPath: path.join(__dirname, 'Button.tsx'),
     Component: Button,
     displayName: 'Button',
     disabledTests: ['has-docblock'],
   });
+
+  /**
+   * Note: see more visual regression tests for Button in /apps/vr-tests.
+   */
+  it('renders a default state', () => {
+    const component = renderer.create(<Button content="Default button" />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('can be focused', () => {
+    const rootRef = React.createRef<HTMLButtonElement>();
+    const componentRef = React.createRef<ButtonRef>();
+
+    wrapper = mount(<Button ref={rootRef} componentRef={componentRef} content="Focus me" />);
+
+    expect(typeof rootRef.current).toEqual('object');
+    expect(document.activeElement).not.toEqual(rootRef.current);
+
+    componentRef.current?.focus();
+
+    expect(document.activeElement).toEqual(rootRef.current);
+  });
 });

packages/react-button/src/components/Button/Button.types.tsx

@@ -5,7 +5,22 @@ import { ColorPlateSet } from '@fluentui/react-theme-provider';
 
 export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
 
+/**
+ * {@docCategory Button}
+ */
+export interface ButtonRef {
+  /**
+   * Sets focus to the button.
+   */
+  focus: () => void;
+}
+
 export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Access the imperative api of the button.
+   */
+  componentRef?: React.RefObject<ButtonRef>;
+
   /**
    * Shorthand icon. A shorthand prop can be a literal, object,
    * JSX, or function which takes render options.
@@ -34,7 +49,7 @@ export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLBu
   /** A button can contain only an icon. */
   iconOnly?: boolean;
 
-  /** An icon button can format its Icon to appear before or after its content. */
+  /** An icon button can format its icon to appear before or after its content. */
   iconPosition?: 'before' | 'after';
 
   /** A button that inherits its background and has a subtle appearance. */
@@ -73,7 +88,9 @@ export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLBu
   tokens?: RecursivePartial<ButtonTokens>;
 }
 
-export interface ButtonState extends ButtonProps {}
+export interface ButtonState extends ButtonProps {
+  buttonRef?: React.RefObject<HTMLButtonElement>;
+}
 
 export interface ButtonSlots {
   icon: React.ElementType;

packages/react-button/src/components/Button/ButtonBase.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 import { ButtonProps } from './Button.types';
 import { compose, mergeProps } from '@fluentui/react-compose';
 import { useButton } from './useButton';
+import { useMergedRefs } from '@uifabric/react-hooks';
 
 export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
   (props, ref, options) => {
     const { state } = options;
     const { slots, slotProps } = mergeProps(state, options);
 
     return (
-      <slots.root ref={ref} {...slotProps.root}>
+      <slots.root ref={useMergedRefs(ref, state.buttonRef)} {...slotProps.root}>
         {props.loading && <slots.loader {...slotProps.loader} />}
         {props.icon && props.iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}
         {!props.iconOnly && props.content && <slots.content {...slotProps.content} />}
@@ -20,6 +21,8 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
   {
     displayName: 'ButtonBase',
     handledProps: [
+      'buttonRef',
+      'componentRef',
       'circular',
       'content',
       'disabled',
@@ -31,8 +34,10 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
       'loading',
       'primary',
       'secondary',
+      'tokens',
       'size',
-    ],
+      // tslint:disable-next-line:no-any
+    ] as any,
     slots: {
       icon: 'span',
       content: 'span',

packages/react-button/src/components/Button/Converged.stories.tsx

@@ -1,16 +1,21 @@
 import * as React from 'react';
 import { Button } from './Button';
-import { mergeThemes, ThemeProvider, Theme } from '@fluentui/react-theme-provider';
+import { mergeThemes, ThemeProvider, Theme, PartialTheme } from '@fluentui/react-theme-provider';
 import { UploadIcon } from '@fluentui/react-icons';
 import { Stack, Text, ColorPicker, IColor } from 'office-ui-fabric-react';
 
 // tslint:disable: jsx-ban-props
+const paletteAccent = 'var(--palette-accent)';
+const paletteSoftest = 'var(--palette-softest)';
+const paletteStrongest = 'var(--palette-strongest)';
 
 const getThemes = (accent: string) => {
   const lightTheme = mergeThemes({
     tokens: {
       palette: {
-        accent,
+        accent: accent,
+        softest: 'white',
+        strongest: 'black',
       },
 
       body: {
@@ -19,7 +24,17 @@ const getThemes = (accent: string) => {
       },
 
       accent: {
-        background: 'var(--palette-accent)',
+        background: paletteAccent,
+        contentColor: paletteSoftest,
+
+        hovered: {
+          background: paletteAccent,
+          contentColor: paletteSoftest,
+        },
+        pressed: {
+          background: paletteAccent,
+          contentColor: paletteSoftest,
+        },
       },
 
       button: {
@@ -31,19 +46,37 @@ const getThemes = (accent: string) => {
 
   const darkTheme = mergeThemes(lightTheme, {
     tokens: {
+      palette: {
+        softest: 'black',
+        strongest: 'white',
+      },
+
       body: {
         background: '#333',
-        contentColor: 'white',
+        contentColor: paletteStrongest,
       },
+
       button: {
         background: 'transparent',
-        contentColor: 'white',
+        contentColor: paletteStrongest,
+
         hovered: {
           background: '#555',
+          contentColor: paletteStrongest,
+        },
+      },
+
+      accent: {
+        background: 'blue',
+        contentColor: paletteStrongest,
+
+        hovered: {
+          background: '#555',
+          contentColor: paletteStrongest,
         },
       },
     },
-  });
+  } as PartialTheme);
 
   return { lightTheme, darkTheme };
 };

packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders a default state 1`] = `
+<button>
+  <span>
+    Default button
+  </span>
+</button>
+`;

packages/react-button/src/components/Button/useButton.ts

@@ -1,13 +1,34 @@
+import { useImperativeHandle, useRef } from 'react';
 import { tokensToStyleObject } from '@fluentui/react-theme-provider';
 import { ButtonProps, ButtonState } from './Button.types';
 
+const getStyle = (props: ButtonProps) => {
+  if (props.style || props.tokens) {
+    return {
+      ...props.style,
+      ...tokensToStyleObject(props.tokens, '--button'),
+    };
+  }
+
+  return undefined;
+};
+
 /**
  * The useButton hook processes the Button component props and returns state.
  * @param props - Button props to derive state from.
  */
 export const useButton = (props: ButtonProps): ButtonState => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useImperativeHandle(props.componentRef, () => ({
+    focus: () => {
+      buttonRef.current?.focus();
+    },
+  }));
+
   return {
     ...props,
-    style: { ...props.style, ...tokensToStyleObject(props.tokens, '--button') },
+    buttonRef,
+    style: getStyle(props),
   };
 };