From e46ec38c630c021e0a933a3914eef51eb5ebe5db Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 10:15:31 -0700
Subject: [PATCH 01/19] Updates.

---
 .../src/components/Button/Button.stories.tsx  | 25 ++++++-----
 .../src/components/Button/Button.test.tsx     | 39 ++++++++++++++++
 .../src/components/Button/Button.types.tsx    | 17 ++++++-
 .../src/components/Button/ButtonBase.tsx      |  2 +
 .../components/Button/Converged.stories.tsx   | 45 ++++++++++++++++---
 .../src/components/Button/useButton.ts        | 13 +++++-
 6 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 packages/react-button/src/components/Button/Button.test.tsx

diff --git a/packages/react-button/src/components/Button/Button.stories.tsx b/packages/react-button/src/components/Button/Button.stories.tsx
index 8be213c952be8..49a6cc2e3e1c1 100644
--- a/packages/react-button/src/components/Button/Button.stories.tsx
+++ b/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>
diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
new file mode 100644
index 0000000000000..02c70665242ac
--- /dev/null
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+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;
+    }
+  });
+
+  /**
+   * 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 buttonRef = React.createRef<HTMLButtonElement>();
+    const componentRef = React.createRef<ButtonRef>();
+
+    wrapper = mount(<Button ref={buttonRef} componentRef={componentRef} content="Focus me" />);
+
+    expect(typeof buttonRef.current).toEqual('HTMLButtonElement');
+    expect(document.activeElement).not.toEqual(buttonRef.current);
+
+    componentRef.current?.focus();
+
+    expect(document.activeElement).toEqual(buttonRef.current);
+  });
+});
diff --git a/packages/react-button/src/components/Button/Button.types.tsx b/packages/react-button/src/components/Button/Button.types.tsx
index a9caffffbfa90..fc8e7da14d8dc 100644
--- a/packages/react-button/src/components/Button/Button.types.tsx
+++ b/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. */
diff --git a/packages/react-button/src/components/Button/ButtonBase.tsx b/packages/react-button/src/components/Button/ButtonBase.tsx
index ff2611fb6d4e1..2570a0ab83312 100644
--- a/packages/react-button/src/components/Button/ButtonBase.tsx
+++ b/packages/react-button/src/components/Button/ButtonBase.tsx
@@ -20,6 +20,7 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
   {
     displayName: 'ButtonBase',
     handledProps: [
+      'componentRef',
       'circular',
       'content',
       'disabled',
@@ -31,6 +32,7 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
       'loading',
       'primary',
       'secondary',
+      'tokens',
       'size',
     ],
     slots: {
diff --git a/packages/react-button/src/components/Button/Converged.stories.tsx b/packages/react-button/src/components/Button/Converged.stories.tsx
index d3d206e935b57..2ce65b29d70a0 100644
--- a/packages/react-button/src/components/Button/Converged.stories.tsx
+++ b/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 };
 };
diff --git a/packages/react-button/src/components/Button/useButton.ts b/packages/react-button/src/components/Button/useButton.ts
index d824ff63e94c8..d261b2011bd3b 100644
--- a/packages/react-button/src/components/Button/useButton.ts
+++ b/packages/react-button/src/components/Button/useButton.ts
@@ -1,13 +1,22 @@
 import { tokensToStyleObject } from '@fluentui/react-theme-provider';
 import { ButtonProps, ButtonState } from './Button.types';
+import { ComposePreparedOptions } from '@fluentui/react-compose';
 
 /**
  * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export const useButton = (props: ButtonProps): ButtonState => {
+export const useButton = (
+  props: ButtonProps,
+  ref: React.RefObject<HTMLElement>,
+  options: ComposePreparedOptions,
+): ButtonState => {
+  const rootRef = appendRef;
   return {
     ...props,
-    style: { ...props.style, ...tokensToStyleObject(props.tokens, '--button') },
+    style: {
+      ...props.style,
+      ...tokensToStyleObject(props.tokens, '--button'),
+    },
   };
 };

From cac042b8618b3c987fc4a6b7d8c080075c4c3c1d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 10:14:14 -0700
Subject: [PATCH 02/19] useMergedRefs update to be immutable.

---
 .../react-hooks/src/useMergedRefs.test.tsx    | 31 ++++++++++++++++---
 packages/react-hooks/src/useMergedRefs.ts     | 22 ++++++++-----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/react-hooks/src/useMergedRefs.test.tsx b/packages/react-hooks/src/useMergedRefs.test.tsx
index d0f63d0f8dfcd..537a749944da3 100644
--- a/packages/react-hooks/src/useMergedRefs.test.tsx
+++ b/packages/react-hooks/src/useMergedRefs.test.tsx
@@ -1,8 +1,31 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { useMergedRefs } from './useMergedRefs';
 
 describe('useMergedRefs', () => {
+  let wrapper: ReactWrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = undefined;
+  });
+
+  it('always returns the same ref (refs should be immutable)', () => {
+    let lastMergedRef;
+
+    const TestComponent: React.FunctionComponent = () => {
+      lastMergedRef = useMergedRefs<boolean>(() => ({}));
+      return null;
+    };
+
+    wrapper = mount(<TestComponent />);
+    const ref1 = lastMergedRef;
+    wrapper.setProps({});
+    const ref2 = lastMergedRef;
+
+    expect(ref1).toBe(ref2);
+  });
+
   it('updates all provided refs', () => {
     const refObject: React.RefObject<boolean> = React.createRef<boolean>();
     let refValue: boolean | null = null;
@@ -11,7 +34,7 @@ describe('useMergedRefs', () => {
       mergedRef(true);
       return null;
     };
-    mount(<TestComponent />);
+    wrapper = mount(<TestComponent />);
 
     expect(refObject.current).toBe(true);
     expect(refValue).toBe(true);
@@ -29,7 +52,7 @@ describe('useMergedRefs', () => {
       return null;
     };
 
-    const wrapper = mount(<TestComponent />);
+    wrapper = mount(<TestComponent />);
 
     const firstRefCallback = refCallback;
 
@@ -51,7 +74,7 @@ describe('useMergedRefs', () => {
       return null;
     };
 
-    const wrapper = mount(<TestComponent />);
+    wrapper = mount(<TestComponent />);
 
     let secondRefValue: boolean | null = null;
     refValueFunc = (val: boolean) => (secondRefValue = val);
diff --git a/packages/react-hooks/src/useMergedRefs.ts b/packages/react-hooks/src/useMergedRefs.ts
index 1678491537518..e436775f14618 100644
--- a/packages/react-hooks/src/useMergedRefs.ts
+++ b/packages/react-hooks/src/useMergedRefs.ts
@@ -1,19 +1,27 @@
-import * as React from 'react';
+import { useState, useCallback, Ref, MutableRefObject } from 'react';
 
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
  * @param refs- Refs to collectively update with one ref value.
  */
-export function useMergedRefs<T>(...refs: React.Ref<T>[]): (instance: T) => void {
-  return React.useCallback((value: T) => {
-    refs.forEach(ref => {
+export function useMergedRefs<T>(...refObjects: React.Ref<T>[]): (instance: T) => void {
+  const [state] = useState<{ refs: (Ref<T> | undefined)[] }>({ refs: [] });
+
+  // Cache refs in immutatable state object.
+  state.refs = refObjects;
+
+  // Return cached callback which refers to mutable refs array within the immutable state.
+  return useCallback((value: T) => {
+    const { refs } = state;
+
+    for (const ref of refs) {
       if (typeof ref === 'function') {
         ref(value);
       } else if (ref) {
         // work around the immutability of the React.Ref type
-        ((ref as unknown) as React.MutableRefObject<T>).current = value;
+        ((ref as unknown) as MutableRefObject<T>).current = value;
       }
-    });
-  }, refs);
+    }
+  }, []);
 }

From 5a7bb14f2acbf568c0edf1f8e99e8bf8c590b6e2 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 10:35:22 -0700
Subject: [PATCH 03/19] adding comment.

---
 packages/react-hooks/src/useMergedRefs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-hooks/src/useMergedRefs.ts b/packages/react-hooks/src/useMergedRefs.ts
index e436775f14618..2854b0550fd6a 100644
--- a/packages/react-hooks/src/useMergedRefs.ts
+++ b/packages/react-hooks/src/useMergedRefs.ts
@@ -8,7 +8,7 @@ import { useState, useCallback, Ref, MutableRefObject } from 'react';
 export function useMergedRefs<T>(...refObjects: React.Ref<T>[]): (instance: T) => void {
   const [state] = useState<{ refs: (Ref<T> | undefined)[] }>({ refs: [] });
 
-  // Cache refs in immutatable state object.
+  // Update refs list in immutatable state object.
   state.refs = refObjects;
 
   // Return cached callback which refers to mutable refs array within the immutable state.

From b76e98643a5af5d5e16d8725bf4d73612efa89f0 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 12:26:25 -0700
Subject: [PATCH 04/19] Change files

---
 ...-react-hooks-2020-06-19-12-26-25-fix-button-fixes.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@uifabric-react-hooks-2020-06-19-12-26-25-fix-button-fixes.json

diff --git a/change/@uifabric-react-hooks-2020-06-19-12-26-25-fix-button-fixes.json b/change/@uifabric-react-hooks-2020-06-19-12-26-25-fix-button-fixes.json
new file mode 100644
index 0000000000000..a9d006891c35b
--- /dev/null
+++ b/change/@uifabric-react-hooks-2020-06-19-12-26-25-fix-button-fixes.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "useMergedRefs: Merging refs should produce an immutable ref object.",
+  "packageName": "@uifabric/react-hooks",
+  "email": "dzearing@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-06-19T19:26:25.030Z"
+}

From b035448ac62491ea58db18f334df8f62595ec223 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 12:27:03 -0700
Subject: [PATCH 05/19] more updates.

---
 packages/react-button/config/tests.js         | 18 ++++++++++++++++++
 packages/react-button/jest.config.js          | 12 ++++++++++++
 packages/react-button/package.json            |  1 +
 .../src/components/Button/Button.test.tsx     |  2 +-
 .../src/components/Button/Button.types.tsx    |  4 +++-
 .../src/components/Button/ButtonBase.tsx      |  3 ++-
 .../src/components/Button/useButton.ts        | 19 +++++++++++--------
 7 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-button/config/tests.js
 create mode 100644 packages/react-button/jest.config.js

diff --git a/packages/react-button/config/tests.js b/packages/react-button/config/tests.js
new file mode 100644
index 0000000000000..685c38aa80b6a
--- /dev/null
+++ b/packages/react-button/config/tests.js
@@ -0,0 +1,18 @@
+/** Jest test setup file. */
+
+const { configure } = require('enzyme');
+const { initializeIcons } = require('@uifabric/icons');
+const Adapter = require('enzyme-adapter-react-16');
+const { resetIds } = require('@fluentui/react-next');
+
+// Initialize icons.
+initializeIcons('');
+
+global.requestAnimationFrame = callback => {
+  setTimeout(callback, 0);
+};
+
+// Configure enzyme.
+configure({ adapter: new Adapter() });
+
+resetIds();
diff --git a/packages/react-button/jest.config.js b/packages/react-button/jest.config.js
new file mode 100644
index 0000000000000..aea5b85a217cc
--- /dev/null
+++ b/packages/react-button/jest.config.js
@@ -0,0 +1,12 @@
+let { createConfig } = require('@uifabric/build/jest/jest-resources');
+let path = require('path');
+
+const config = createConfig({
+  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
+
+  moduleNameMapper: {
+    '@uifabric/utilities/lib/(.*)$': '@uifabric/utilities/lib-commonjs/$1',
+  },
+});
+
+module.exports = config;
diff --git a/packages/react-button/package.json b/packages/react-button/package.json
index 5ba0419888ad0..d40b149173b3c 100644
--- a/packages/react-button/package.json
+++ b/packages/react-button/package.json
@@ -45,6 +45,7 @@
   "dependencies": {
     "@fluentui/react-compose": "^0.11.2",
     "@fluentui/react-icons": "^0.1.28",
+    "@fluentui/react-hooks": "^7.4.6",
     "@fluentui/react-theme-provider": "^0.2.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@uifabric/react-hooks": "^7.4.6",
diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index 02c70665242ac..e30dfb746a61b 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -15,7 +15,7 @@ describe('Button', () => {
   });
 
   /**
-   * Note: see more visual regression tests for Button in /apps/vr-tests
+   * 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" />);
diff --git a/packages/react-button/src/components/Button/Button.types.tsx b/packages/react-button/src/components/Button/Button.types.tsx
index fc8e7da14d8dc..0a969b2bd9f07 100644
--- a/packages/react-button/src/components/Button/Button.types.tsx
+++ b/packages/react-button/src/components/Button/Button.types.tsx
@@ -88,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;
diff --git a/packages/react-button/src/components/Button/ButtonBase.tsx b/packages/react-button/src/components/Button/ButtonBase.tsx
index 2570a0ab83312..e2bedd4dd6c3a 100644
--- a/packages/react-button/src/components/Button/ButtonBase.tsx
+++ b/packages/react-button/src/components/Button/ButtonBase.tsx
@@ -2,6 +2,7 @@ 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) => {
@@ -9,7 +10,7 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
     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} />}
diff --git a/packages/react-button/src/components/Button/useButton.ts b/packages/react-button/src/components/Button/useButton.ts
index d261b2011bd3b..c34dbf642c9e3 100644
--- a/packages/react-button/src/components/Button/useButton.ts
+++ b/packages/react-button/src/components/Button/useButton.ts
@@ -1,19 +1,22 @@
+import { useImperativeHandle, useRef } from 'react';
 import { tokensToStyleObject } from '@fluentui/react-theme-provider';
 import { ButtonProps, ButtonState } from './Button.types';
-import { ComposePreparedOptions } from '@fluentui/react-compose';
-
 /**
  * The useButton hook processes the Button component props and returns state.
  * @param props
  */
-export const useButton = (
-  props: ButtonProps,
-  ref: React.RefObject<HTMLElement>,
-  options: ComposePreparedOptions,
-): ButtonState => {
-  const rootRef = appendRef;
+export const useButton = (props: ButtonProps): ButtonState => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useImperativeHandle(props.componentRef, () => ({
+    focus: () => {
+      buttonRef.current?.focus();
+    },
+  }));
+
   return {
     ...props,
+    buttonRef,
     style: {
       ...props.style,
       ...tokensToStyleObject(props.tokens, '--button'),

From c9a2778b0eab4b534d653fbf9a3c785ef738c577 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 13:15:45 -0700
Subject: [PATCH 06/19] updates

---
 .../src/components/Button/Button.test.tsx        | 10 +++++-----
 .../Button/__snapshots__/Button.test.tsx.snap    | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap

diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index e30dfb746a61b..5ed4ca77bbcf7 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -24,16 +24,16 @@ describe('Button', () => {
   });
 
   it('can be focused', () => {
-    const buttonRef = React.createRef<HTMLButtonElement>();
+    const rootRef = React.createRef<HTMLButtonElement>();
     const componentRef = React.createRef<ButtonRef>();
 
-    wrapper = mount(<Button ref={buttonRef} componentRef={componentRef} content="Focus me" />);
+    wrapper = mount(<Button ref={rootRef} componentRef={componentRef} content="Focus me" />);
 
-    expect(typeof buttonRef.current).toEqual('HTMLButtonElement');
-    expect(document.activeElement).not.toEqual(buttonRef.current);
+    expect(typeof rootRef.current).toEqual('HTMLButtonElement');
+    expect(document.activeElement).not.toEqual(rootRef.current);
 
     componentRef.current?.focus();
 
-    expect(document.activeElement).toEqual(buttonRef.current);
+    expect(document.activeElement).toEqual(rootRef.current);
   });
 });
diff --git a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
new file mode 100644
index 0000000000000..5e6a39ca8820d
--- /dev/null
+++ b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders a default state 1`] = `
+<button
+  buttonRef={
+    Object {
+      "current": null,
+    }
+  }
+  style={Object {}}
+>
+  <span>
+    Default button
+  </span>
+</button>
+`;

From 2017cf718a24d1b1d451c3fd2462564dee90ce15 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 13:24:33 -0700
Subject: [PATCH 07/19] better.

---
 packages/react-button/src/components/Button/Button.test.tsx  | 2 +-
 packages/react-button/src/components/Button/ButtonBase.tsx   | 4 +++-
 .../src/components/Button/__snapshots__/Button.test.tsx.snap | 5 -----
 packages/react-compose/src/types.ts                          | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index 5ed4ca77bbcf7..93bdf8c3622f0 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -29,7 +29,7 @@ describe('Button', () => {
 
     wrapper = mount(<Button ref={rootRef} componentRef={componentRef} content="Focus me" />);
 
-    expect(typeof rootRef.current).toEqual('HTMLButtonElement');
+    expect(typeof rootRef.current).toEqual('object');
     expect(document.activeElement).not.toEqual(rootRef.current);
 
     componentRef.current?.focus();
diff --git a/packages/react-button/src/components/Button/ButtonBase.tsx b/packages/react-button/src/components/Button/ButtonBase.tsx
index e2bedd4dd6c3a..82d5e946a4404 100644
--- a/packages/react-button/src/components/Button/ButtonBase.tsx
+++ b/packages/react-button/src/components/Button/ButtonBase.tsx
@@ -21,6 +21,7 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
   {
     displayName: 'ButtonBase',
     handledProps: [
+      'buttonRef',
       'componentRef',
       'circular',
       'content',
@@ -35,7 +36,8 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
       'secondary',
       'tokens',
       'size',
-    ],
+      // tslint:disable-next-line:no-any
+    ] as any,
     slots: {
       icon: 'span',
       content: 'span',
diff --git a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
index 5e6a39ca8820d..4c9e503a5a9f4 100644
--- a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -2,11 +2,6 @@
 
 exports[`Button renders a default state 1`] = `
 <button
-  buttonRef={
-    Object {
-      "current": null,
-    }
-  }
   style={Object {}}
 >
   <span>
diff --git a/packages/react-compose/src/types.ts b/packages/react-compose/src/types.ts
index 207e8261024e0..c3cd9bd83af6f 100644
--- a/packages/react-compose/src/types.ts
+++ b/packages/react-compose/src/types.ts
@@ -69,7 +69,7 @@ export type ComposeOptions<
 
   mapPropsToStylesProps?: (props: TParentStylesProps & TInputProps) => TInputStylesProps;
 
-  handledProps?: (keyof TInputProps | 'as')[];
+  handledProps?: (keyof TInputProps | keyof TState | 'as')[];
 
   overrideStyles?: boolean;
 

From bc73216f4d97521e3a5e9c2f09a90a21d0153ae8 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 14:29:11 -0700
Subject: [PATCH 08/19] Fixing unneeded style prop in button.

---
 .../src/components/Button/Button.scss           |  1 +
 .../Button/__snapshots__/Button.test.tsx.snap   |  4 +---
 .../src/components/Button/useButton.ts          | 17 +++++++++++++----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/react-button/src/components/Button/Button.scss b/packages/react-button/src/components/Button/Button.scss
index 3dc2e8a194688..ce20cba50533a 100644
--- a/packages/react-button/src/components/Button/Button.scss
+++ b/packages/react-button/src/components/Button/Button.scss
@@ -273,6 +273,7 @@
   right: -1px;
   bottom: -1px;
   content: '';
+  pointer-events: none;
   box-sizing: border-box;
   border-radius: var(--button-borderRadius);
   border: var(--button-focus-width, 2px) solid var(--button-focusColor);
diff --git a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
index 4c9e503a5a9f4..be3821f2bcba9 100644
--- a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button renders a default state 1`] = `
-<button
-  style={Object {}}
->
+<button>
   <span>
     Default button
   </span>
diff --git a/packages/react-button/src/components/Button/useButton.ts b/packages/react-button/src/components/Button/useButton.ts
index c34dbf642c9e3..87ca742874f76 100644
--- a/packages/react-button/src/components/Button/useButton.ts
+++ b/packages/react-button/src/components/Button/useButton.ts
@@ -1,6 +1,18 @@
 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
@@ -17,9 +29,6 @@ export const useButton = (props: ButtonProps): ButtonState => {
   return {
     ...props,
     buttonRef,
-    style: {
-      ...props.style,
-      ...tokensToStyleObject(props.tokens, '--button'),
-    },
+    style: getStyle(props),
   };
 };

From adf85fb5859c2f74abf36204cdb655bf6e4849cc Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 14:30:38 -0700
Subject: [PATCH 09/19] undo

---
 packages/react-compose/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-compose/src/types.ts b/packages/react-compose/src/types.ts
index c3cd9bd83af6f..207e8261024e0 100644
--- a/packages/react-compose/src/types.ts
+++ b/packages/react-compose/src/types.ts
@@ -69,7 +69,7 @@ export type ComposeOptions<
 
   mapPropsToStylesProps?: (props: TParentStylesProps & TInputProps) => TInputStylesProps;
 
-  handledProps?: (keyof TInputProps | keyof TState | 'as')[];
+  handledProps?: (keyof TInputProps | 'as')[];
 
   overrideStyles?: boolean;
 

From 8ef4d6d2236511fe1b63f01f2d8e2e6045c2fbea Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 15:32:16 -0700
Subject: [PATCH 10/19] Change files

---
 ...react-button-2020-06-19-15-32-16-fix-button-fixes.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json

diff --git a/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json b/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json
new file mode 100644
index 0000000000000..441d383777222
--- /dev/null
+++ b/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"
+}

From b50816ad5488c6671b99fa22ce9928fe39aca526 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 15:33:19 -0700
Subject: [PATCH 11/19] update.

---
 packages/react-button/src/components/Button/Button.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-button/src/components/Button/Button.scss b/packages/react-button/src/components/Button/Button.scss
index 6b8b6b7ffb72b..a414a0133199e 100644
--- a/packages/react-button/src/components/Button/Button.scss
+++ b/packages/react-button/src/components/Button/Button.scss
@@ -273,7 +273,6 @@
   right: -1px;
   bottom: -1px;
   content: '';
-  pointer-events: none;
   box-sizing: border-box;
   border-radius: var(--button-borderRadius);
   border: var(--button-focus-width, 2px) solid var(--button-focusColor);

From 3bcf995e437344b2249154945d2653b8a80ff07a Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 15:47:33 -0700
Subject: [PATCH 12/19] cleanup.

---
 .../react-button/src/components/Button/Button.stories.tsx     | 2 +-
 packages/react-button/src/components/Button/useButton.ts      | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-button/src/components/Button/Button.stories.tsx b/packages/react-button/src/components/Button/Button.stories.tsx
index 49a6cc2e3e1c1..2c3d350b1f4c3 100644
--- a/packages/react-button/src/components/Button/Button.stories.tsx
+++ b/packages/react-button/src/components/Button/Button.stories.tsx
@@ -6,7 +6,7 @@ import { Stack, Text } from 'office-ui-fabric-react';
 
 const ButtonVariants = (props: ButtonProps) => (
   <div className={classes.hStack}>
-    <Button content={'Hello, world'} icon="O" {...props} />
+    <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} />
diff --git a/packages/react-button/src/components/Button/useButton.ts b/packages/react-button/src/components/Button/useButton.ts
index fda6cd23bdac0..7a9c0c9d5d527 100644
--- a/packages/react-button/src/components/Button/useButton.ts
+++ b/packages/react-button/src/components/Button/useButton.ts
@@ -21,9 +21,7 @@ export const useButton = (props: ButtonProps): ButtonState => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   useImperativeHandle(props.componentRef, () => ({
-    focus: () => {
-      buttonRef.current?.focus();
-    },
+    focus: () => buttonRef.current?.focus(),
   }));
 
   return {

From 01b92e9576895fda2bf194b3b5c200a48c8c6b71 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 16:18:36 -0700
Subject: [PATCH 13/19] Removing oufr dependency from button, updating api

---
 packages/react-button/etc/react-button.api.md | 284 +++++++++---------
 packages/react-button/package.json            |   1 -
 .../src/components/Button/Button.stories.scss |  11 +-
 .../src/components/Button/Button.stories.tsx  |  60 ++--
 4 files changed, 191 insertions(+), 165 deletions(-)

diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 06797d63d3a6a..81f099988eaba 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -1,138 +1,146 @@
-## API Report File for "@fluentui/react-button"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ColorPlateSet } from '@fluentui/react-theme-provider';
-import { ComposeOptions } from '@fluentui/react-compose';
-import * as React from 'react';
-
-// @public (undocumented)
-export const Button: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>;
-
-// @public (undocumented)
-export const ButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>;
-
-// Warning: (ae-forgotten-export) The symbol "ComposeStandardStatics" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface ButtonOptions extends ComposeOptions<ButtonProps, ButtonSlots, ButtonSlotProps, ComposeStandardStatics> {
-}
-
-// Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> {
-    circular?: boolean;
-    content?: ShorthandValue<{}>;
-    disabled?: boolean;
-    fluid?: boolean;
-    // Warning: (ae-forgotten-export) The symbol "ShorthandValue" needs to be exported by the entry point index.d.ts
-    icon?: ShorthandValue<{}>;
-    iconOnly?: boolean;
-    iconPosition?: 'before' | 'after';
-    inverted?: boolean;
-    loader?: ShorthandValue<{}>;
-    loading?: boolean;
-    primary?: boolean;
-    secondary?: boolean;
-    size?: SizeValue;
-    // Warning: (ae-forgotten-export) The symbol "RecursivePartial" needs to be exported by the entry point index.d.ts
-    tokens?: RecursivePartial<ButtonTokens>;
-}
-
-// @public (undocumented)
-export type ButtonSlotProps = {
-    [key in keyof ButtonSlots]: ButtonProps[key];
-};
-
-// @public (undocumented)
-export interface ButtonSlots {
-    // (undocumented)
-    content: React.ElementType;
-    // (undocumented)
-    icon: React.ElementType;
-    // (undocumented)
-    loader: React.ElementType;
-}
-
-// @public (undocumented)
-export interface ButtonState extends ButtonProps {
-}
-
-// @public (undocumented)
-export type ButtonTokens = ColorPlateSet & {
-    padding: string;
-    margin: string;
-    height: string;
-    minWidth: string;
-    maxWidth: string;
-    contentGap: string;
-    iconSize: string;
-    borderRadius: string;
-    borderWidth: string;
-    size: {
-        smallest: string;
-        smaller: string;
-        small: string;
-        regular: string;
-        large: string;
-        larger: string;
-        largest: string;
-    };
-    transform: string;
-    transition: string;
-    fontFamily: string;
-    fontSize: string;
-    fontWeight: string;
-    pressed: {
-        transform: string;
-    };
-};
-
-// @public (undocumented)
-export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
-
-// @public (undocumented)
-export const ToggleButton: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps>;
-
-// @public (undocumented)
-export const ToggleButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps & ButtonProps>;
-
-// @public (undocumented)
-export interface ToggleButtonOptions extends ComposeOptions<ToggleButtonProps, ToggleButtonSlots, ToggleButtonSlotProps, ComposeStandardStatics> {
-}
-
-// @public (undocumented)
-export interface ToggleButtonProps extends ButtonProps {
-    checked?: boolean;
-    defaultChecked?: boolean;
-}
-
-// @public (undocumented)
-export type ToggleButtonSlotProps = {
-    [key in keyof ToggleButtonSlots]: ToggleButtonProps[key];
-};
-
-// @public (undocumented)
-export interface ToggleButtonSlots extends ButtonSlots {
-}
-
-// @public (undocumented)
-export interface ToggleButtonState extends ToggleButtonProps {
-}
-
-// @public
-export const useButton: (props: ButtonProps) => ButtonState;
-
-// Warning: (ae-forgotten-export) The symbol "ToggleProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "ToggleState" needs to be exported by the entry point index.d.ts
-//
-// @public
-export const useToggle: <TProps, TState extends TProps = TProps>(props: TProps & ToggleProps) => TState & ToggleState;
-
-
-// (No @packageDocumentation comment for this package)
-
-```
+## API Report File for "@fluentui/react-button"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ColorPlateSet } from '@fluentui/react-theme-provider';
+import { ComposeOptions } from '@fluentui/react-compose';
+import * as React from 'react';
+
+// @public (undocumented)
+export const Button: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>;
+
+// @public (undocumented)
+export const ButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>;
+
+// Warning: (ae-forgotten-export) The symbol "ComposeStandardStatics" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface ButtonOptions extends ComposeOptions<ButtonProps, ButtonSlots, ButtonSlotProps, ComposeStandardStatics> {
+}
+
+// Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> {
+    circular?: boolean;
+    componentRef?: React.RefObject<ButtonRef>;
+    content?: ShorthandValue<{}>;
+    disabled?: boolean;
+    fluid?: boolean;
+    // Warning: (ae-forgotten-export) The symbol "ShorthandValue" needs to be exported by the entry point index.d.ts
+    icon?: ShorthandValue<{}>;
+    iconOnly?: boolean;
+    iconPosition?: 'before' | 'after';
+    inverted?: boolean;
+    loader?: ShorthandValue<{}>;
+    loading?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    size?: SizeValue;
+    // Warning: (ae-forgotten-export) The symbol "RecursivePartial" needs to be exported by the entry point index.d.ts
+    tokens?: RecursivePartial<ButtonTokens>;
+}
+
+// @public (undocumented)
+export interface ButtonRef {
+    focus: () => void;
+}
+
+// @public (undocumented)
+export type ButtonSlotProps = {
+    [key in keyof ButtonSlots]: ButtonProps[key];
+};
+
+// @public (undocumented)
+export interface ButtonSlots {
+    // (undocumented)
+    content: React.ElementType;
+    // (undocumented)
+    icon: React.ElementType;
+    // (undocumented)
+    loader: React.ElementType;
+}
+
+// @public (undocumented)
+export interface ButtonState extends ButtonProps {
+    // (undocumented)
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+}
+
+// @public (undocumented)
+export type ButtonTokens = ColorPlateSet & {
+    padding: string;
+    margin: string;
+    height: string;
+    minWidth: string;
+    maxWidth: string;
+    contentGap: string;
+    iconSize: string;
+    borderRadius: string;
+    borderWidth: string;
+    size: {
+        smallest: string;
+        smaller: string;
+        small: string;
+        regular: string;
+        large: string;
+        larger: string;
+        largest: string;
+    };
+    transform: string;
+    transition: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    pressed: {
+        transform: string;
+    };
+};
+
+// @public (undocumented)
+export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
+
+// @public (undocumented)
+export const ToggleButton: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps>;
+
+// @public (undocumented)
+export const ToggleButtonBase: import("@fluentui/react-compose").ComponentWithAs<"button", ToggleButtonProps & ButtonProps>;
+
+// @public (undocumented)
+export interface ToggleButtonOptions extends ComposeOptions<ToggleButtonProps, ToggleButtonSlots, ToggleButtonSlotProps, ComposeStandardStatics> {
+}
+
+// @public (undocumented)
+export interface ToggleButtonProps extends ButtonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+}
+
+// @public (undocumented)
+export type ToggleButtonSlotProps = {
+    [key in keyof ToggleButtonSlots]: ToggleButtonProps[key];
+};
+
+// @public (undocumented)
+export interface ToggleButtonSlots extends ButtonSlots {
+}
+
+// @public (undocumented)
+export interface ToggleButtonState extends ToggleButtonProps {
+}
+
+// @public
+export const useButton: (props: ButtonProps) => ButtonState;
+
+// Warning: (ae-forgotten-export) The symbol "ToggleProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "ToggleState" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const useToggle: <TProps, TState extends TProps = TProps>(props: TProps & ToggleProps) => TState & ToggleState;
+
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/react-button/package.json b/packages/react-button/package.json
index fa2cfaf83a270..3e1e131efd078 100644
--- a/packages/react-button/package.json
+++ b/packages/react-button/package.json
@@ -51,7 +51,6 @@
     "@uifabric/react-hooks": "^7.4.6",
     "@uifabric/set-version": "^7.0.13",
     "@uifabric/utilities": "^7.21.0",
-    "office-ui-fabric-react": "^7.121.1",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/react-button/src/components/Button/Button.stories.scss b/packages/react-button/src/components/Button/Button.stories.scss
index eced278ce8908..a0d35136a7dfa 100644
--- a/packages/react-button/src/components/Button/Button.stories.scss
+++ b/packages/react-button/src/components/Button/Button.stories.scss
@@ -14,6 +14,15 @@
   flex-direction: column;
   align-items: flex-start;
   > *:not(:first-child) {
-    margin-top: var(--gap, 8px);
+    margin-top: var(--gap, 20px);
   }
 }
+
+.text {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
+    'Helvetica Neue', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+}
diff --git a/packages/react-button/src/components/Button/Button.stories.tsx b/packages/react-button/src/components/Button/Button.stories.tsx
index 2c3d350b1f4c3..7d0fcbe683175 100644
--- a/packages/react-button/src/components/Button/Button.stories.tsx
+++ b/packages/react-button/src/components/Button/Button.stories.tsx
@@ -2,64 +2,74 @@ import * as React from 'react';
 import { Button } from './Button';
 import { ButtonProps } from './Button.types';
 import * as classes from './Button.stories.scss';
-import { Stack, Text } from 'office-ui-fabric-react';
+
+/**
+ * Temporary Stack until there's one in its own package.
+ */
+const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => {
+  const { horizontal, ...rest } = props;
+
+  return <div {...rest} className={horizontal ? classes.hStack : classes.vStack} />;
+};
+
+const Text = (props: React.PropsWithChildren<{}>) => <h2 {...props} className={classes.text} />;
 
 const ButtonVariants = (props: ButtonProps) => (
-  <div className={classes.hStack}>
+  <Stack horizontal>
     <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>
+  </Stack>
 );
 
 export const ButtonCss = () => (
-  <Stack gap={20}>
-    <Text variant="xLarge">A button comes in default and `primary` flavors.</Text>
+  <Stack>
+    <Text>A button comes in default and `primary` flavors.</Text>
     <ButtonVariants />
 
-    <Text variant="xLarge">A button can appear round using the `circular` prop.</Text>
+    <Text>A button can appear round using the `circular` prop.</Text>
     <ButtonVariants circular />
 
-    <Text variant="xLarge">A button can fill the width of its container using the `fluid` prop.</Text>
-    <div className={classes.vStack}>
+    <Text>A button can fill the width of its container using the `fluid` prop.</Text>
+    <Stack horizontal>
       <Button fluid content="Hello, world" icon="X" />
       <Button fluid primary content="Hello, world" icon="X" />
       <Button fluid disabled content="Hello, world" icon="X" />
       <Button fluid primary disabled content="Hello, world" icon="X" />
-    </div>
+    </Stack>
 
-    <Text variant="xLarge">A button can contain only an icon using the `iconOnly` prop.</Text>
+    <Text>A button can contain only an icon using the `iconOnly` prop.</Text>
     <ButtonVariants iconOnly />
 
-    <Text variant="xLarge">A button can be both `circular` and `iconOnly`.</Text>
+    <Text>A button can be both `circular` and `iconOnly`.</Text>
     <ButtonVariants circular iconOnly />
 
-    <Text variant="xLarge">An icon button can format its Icon to appear before or after its content.</Text>
-    <div className={classes.vStack}>
+    <Text>An icon button can format its Icon to appear before or after its content.</Text>
+    <Stack>
       <ButtonVariants iconPosition="before" />
       <ButtonVariants iconPosition="after" />
-    </div>
+    </Stack>
 
-    <Text variant="xLarge">A button can show a loading indicator using the `loading` prop.</Text>
+    <Text>A button can show a loading indicator using the `loading` prop.</Text>
     <ButtonVariants loading />
 
-    <Text variant="xLarge">A button can be sized.</Text>
-    <div className={classes.vStack}>
+    <Text>A button can be sized.</Text>
+    <Stack>
       <ButtonVariants size="smallest" />
       <ButtonVariants size="smaller" />
       <ButtonVariants size="small" />
       <ButtonVariants size="large" />
       <ButtonVariants size="larger" />
       <ButtonVariants size="largest" />
-    </div>
+    </Stack>
   </Stack>
 );
 
 export const ButtonTokens = () => (
-  <Stack gap={20}>
-    <Text variant="xLarge">A button can be colored using inline tokens.</Text>
-    <div className={classes.vStack}>
+  <Stack>
+    <Text>A button can be colored using inline tokens.</Text>
+    <Stack>
       <Button
         icon="O"
         tokens={{
@@ -183,9 +193,9 @@ export const ButtonTokens = () => (
         }}
         content="Spotify: LEARN MORE"
       />
-    </div>
-    <Text variant="xLarge">A tokenized button can be customized for any size or padding.</Text>
-    <div className={classes.vStack}>
+    </Stack>
+    <Text>A tokenized button can be customized for any size or padding.</Text>
+    <Stack horizontal>
       <Button
         content="I'm a small button with a large icon"
         icon="O"
@@ -207,6 +217,6 @@ export const ButtonTokens = () => (
           padding: '0 40px',
         }}
       />
-    </div>
+    </Stack>
   </Stack>
 );

From dac33188c64db5c71e69b6a92a710c4d0171f43b Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 16:58:26 -0700
Subject: [PATCH 14/19] Update
 change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
---
 ...entui-react-button-2020-06-19-15-32-16-fix-button-fixes.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json b/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json
index 441d383777222..86f3dfd6b8a0e 100644
--- a/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json
+++ b/change/@fluentui-react-button-2020-06-19-15-32-16-fix-button-fixes.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "Button: Adding focus method and tests.",
+  "comment": "Button: Adding componentRef, focus method and tests.",
   "packageName": "@fluentui/react-button",
   "email": "dzearing@microsoft.com",
   "dependentChangeType": "patch",

From e62f1a6949dca76a6604a70920465d35f4a9fbb0 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Fri, 19 Jun 2020 16:59:03 -0700
Subject: [PATCH 15/19] Update
 packages/react-button/src/components/Button/Button.types.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
---
 packages/react-button/src/components/Button/Button.types.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/Button/Button.types.tsx b/packages/react-button/src/components/Button/Button.types.tsx
index 0a969b2bd9f07..b36c889ef2277 100644
--- a/packages/react-button/src/components/Button/Button.types.tsx
+++ b/packages/react-button/src/components/Button/Button.types.tsx
@@ -17,7 +17,7 @@ export interface ButtonRef {
 
 export interface ButtonProps extends ComponentProps, React.HTMLAttributes<HTMLButtonElement> {
   /**
-   * Access the imperative api of the button.
+   * Access the imperative API of the Button.
    */
   componentRef?: React.RefObject<ButtonRef>;
 

From 34a25c03eba401928332b4957b3e9d0abb0de5e4 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 29 Jun 2020 08:14:57 -0700
Subject: [PATCH 16/19] updates.

---
 packages/react-button/etc/react-button.api.md      | 14 +++++++-------
 .../src/components/Button/ButtonBase.tsx           |  3 ++-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 7ee48166647d0..a4d939ffa7500 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -4,10 +4,12 @@
 
 ```ts
 
+import { BaseSlots } from '@fluentui/react-compose';
 import { ColorPlateSet } from '@fluentui/react-theme-provider';
 import { ComposeOptions } from '@fluentui/react-compose';
 import { ComposePreparedOptions } from '@fluentui/react-compose';
 import * as React from 'react';
+import { SlotProps } from '@fluentui/react-compose';
 
 // @public (undocumented)
 export const Button: import("@fluentui/react-compose").ComponentWithAs<"button", ButtonProps>;
@@ -50,12 +52,10 @@ export interface ButtonRef {
 }
 
 // @public (undocumented)
-export type ButtonSlotProps = {
-    [key in keyof ButtonSlots]: ButtonProps[key];
-};
+export type ButtonSlotProps = SlotProps<ButtonSlots, ButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>;
 
 // @public (undocumented)
-export interface ButtonSlots {
+export interface ButtonSlots extends BaseSlots {
     // (undocumented)
     content: React.ElementType;
     // (undocumented)
@@ -81,6 +81,8 @@ export type ButtonTokens = ColorPlateSet & {
     iconSize: string;
     borderRadius: string;
     borderWidth: string;
+    boxShadow: string;
+    width: string;
     size: {
         smallest: string;
         smaller: string;
@@ -120,9 +122,7 @@ export interface ToggleButtonProps extends ButtonProps {
 }
 
 // @public (undocumented)
-export type ToggleButtonSlotProps = {
-    [key in keyof ToggleButtonSlots]: ToggleButtonProps[key];
-};
+export type ToggleButtonSlotProps = SlotProps<ToggleButtonSlots, ToggleButtonProps, React.ButtonHTMLAttributes<HTMLButtonElement>>;
 
 // @public (undocumented)
 export interface ToggleButtonSlots extends ButtonSlots {
diff --git a/packages/react-button/src/components/Button/ButtonBase.tsx b/packages/react-button/src/components/Button/ButtonBase.tsx
index e3b56e27befde..83c02feddccd8 100644
--- a/packages/react-button/src/components/Button/ButtonBase.tsx
+++ b/packages/react-button/src/components/Button/ButtonBase.tsx
@@ -35,7 +35,8 @@ export const ButtonBase = compose<'button', ButtonProps, ButtonProps, {}, {}>(
       'secondary',
       'size',
       'tokens',
-    ],
+      // tslint:disable-next-line: no-any
+    ] as any,
     slots: {
       icon: 'span',
       content: 'span',

From 6737aa7ebce8f91ea8a336eba022fe74a972d026 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 29 Jun 2020 08:31:07 -0700
Subject: [PATCH 17/19] This is wrong - styles should not be injected without
 being necessary.

---
 .../src/components/Button/__snapshots__/Button.test.tsx.snap  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
index be3821f2bcba9..4c9e503a5a9f4 100644
--- a/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/react-button/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button renders a default state 1`] = `
-<button>
+<button
+  style={Object {}}
+>
   <span>
     Default button
   </span>

From cc9ad5d80390e2de291d7411d8be16b89886bf2d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 29 Jun 2020 13:19:57 -0700
Subject: [PATCH 18/19] undo!

---
 packages/utilities/src/properties.ts | 102 ++++++++++-----------------
 1 file changed, 38 insertions(+), 64 deletions(-)

diff --git a/packages/utilities/src/properties.ts b/packages/utilities/src/properties.ts
index 6fe68ecd4ac1c..742be0de578fd 100644
--- a/packages/utilities/src/properties.ts
+++ b/packages/utilities/src/properties.ts
@@ -1,23 +1,11 @@
-const toObjectMap = (...items: (string[] | Record<string, number>)[]) => {
-  const result: Record<string, number> = {};
-
-  for (const item of items) {
-    const keys = Array.isArray(item) ? item : Object.keys(item);
-
-    for (const key of keys) {
-      result[key] = 1;
-    }
-  }
-
-  return result;
-};
+import { filteredAssign } from './object';
 
 /**
  * An array of events that are allowed on every html element type.
  *
  * @public
  */
-export const baseElementEvents = toObjectMap([
+export const baseElementEvents = [
   'onCopy',
   'onCut',
   'onPaste',
@@ -97,14 +85,14 @@ export const baseElementEvents = toObjectMap([
   'onPointerUp',
   'onGotPointerCapture',
   'onLostPointerCapture',
-]);
+];
 
 /**
  * An array of element attributes which are allowed on every html element type.
  *
  * @public
  */
-export const baseElementProperties = toObjectMap([
+export const baseElementProperties = [
   'accessKey', // global
   'children', // global
   'className', // global
@@ -122,30 +110,30 @@ export const baseElementProperties = toObjectMap([
   'translate', // global
   'spellCheck', // global
   'name', // global
-]);
+];
 
 /**
  * An array of HTML element properties and events.
  *
  * @public
  */
-export const htmlElementProperties = toObjectMap(baseElementProperties, baseElementEvents);
+export const htmlElementProperties = baseElementProperties.concat(baseElementEvents);
 
 /**
  * An array of LABEL tag properties and events.
  *
  * @public
  */
-export const labelProperties = toObjectMap(htmlElementProperties, [
+export const labelProperties = htmlElementProperties.concat([
   'form', // button, fieldset, input, label, meter, object, output, select, textarea
 ]);
 
 /**
  * An array of AUDIO tag properties and events.
-
+ *
  * @public
  */
-export const audioProperties = toObjectMap(htmlElementProperties, [
+export const audioProperties = htmlElementProperties.concat([
   'height', // canvas, embed, iframe, img, input, object, video
   'loop', // audio, video
   'muted', // audio, video
@@ -159,7 +147,7 @@ export const audioProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const videoProperties = toObjectMap(audioProperties, [
+export const videoProperties = audioProperties.concat([
   'poster', // video
 ]);
 
@@ -168,7 +156,7 @@ export const videoProperties = toObjectMap(audioProperties, [
  *
  * @public
  */
-export const olProperties = toObjectMap(htmlElementProperties, [
+export const olProperties = htmlElementProperties.concat([
   'start', // ol
 ]);
 
@@ -177,7 +165,7 @@ export const olProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const liProperties = toObjectMap(htmlElementProperties, [
+export const liProperties = htmlElementProperties.concat([
   'value', // button, input, li, option, meter, progress, param
 ]);
 
@@ -186,7 +174,7 @@ export const liProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const anchorProperties = toObjectMap(htmlElementProperties, [
+export const anchorProperties = htmlElementProperties.concat([
   'download', // a, area
   'href', // a, area, base, link
   'hrefLang', // a, area, link
@@ -201,7 +189,7 @@ export const anchorProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const buttonProperties = toObjectMap(htmlElementProperties, [
+export const buttonProperties = htmlElementProperties.concat([
   'autoFocus', // button, input, select, textarea
   'disabled', // button, fieldset, input, optgroup, option, select, textarea
   'form', // button, fieldset, input, label, meter, object, output, select, textarea
@@ -219,7 +207,7 @@ export const buttonProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const inputProperties = toObjectMap(buttonProperties, [
+export const inputProperties = buttonProperties.concat([
   'accept', // input
   'alt', // area, img, input
   'autoCapitalize', // input, textarea
@@ -251,7 +239,7 @@ export const inputProperties = toObjectMap(buttonProperties, [
  *
  * @public
  */
-export const textAreaProperties = toObjectMap(buttonProperties, [
+export const textAreaProperties = buttonProperties.concat([
   'autoCapitalize', // input, textarea
   'cols', // textarea
   'dirname', // input, textarea
@@ -269,13 +257,13 @@ export const textAreaProperties = toObjectMap(buttonProperties, [
  *
  * @public
  */
-export const selectProperties = toObjectMap(buttonProperties, [
+export const selectProperties = buttonProperties.concat([
   'form', // button, fieldset, input, label, meter, object, output, select, textarea
   'multiple', // input, select
   'required', // input, select, textarea
 ]);
 
-export const optionProperties = toObjectMap(htmlElementProperties, [
+export const optionProperties = htmlElementProperties.concat([
   'selected', // option
   'value', // button, input, li, option, meter, progress, param
 ]);
@@ -285,7 +273,7 @@ export const optionProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const tableProperties = toObjectMap(htmlElementProperties, [
+export const tableProperties = htmlElementProperties.concat([
   'cellPadding', // table
   'cellSpacing', // table
 ]);
@@ -302,7 +290,7 @@ export const trProperties = htmlElementProperties;
  *
  * @public
  */
-export const thProperties = toObjectMap(htmlElementProperties, [
+export const thProperties = htmlElementProperties.concat([
   'rowSpan', // td, th
   'scope', // th
 ]);
@@ -312,18 +300,18 @@ export const thProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const tdProperties = toObjectMap(htmlElementProperties, [
+export const tdProperties = htmlElementProperties.concat([
   'colSpan', // td
   'headers', // td
   'rowSpan', // td, th
   'scope', // th
 ]);
 
-export const colGroupProperties = toObjectMap(htmlElementProperties, [
+export const colGroupProperties = htmlElementProperties.concat([
   'span', // col, colgroup
 ]);
 
-export const colProperties = toObjectMap(htmlElementProperties, [
+export const colProperties = htmlElementProperties.concat([
   'span', // col, colgroup
 ]);
 
@@ -332,7 +320,7 @@ export const colProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const formProperties = toObjectMap(htmlElementProperties, [
+export const formProperties = htmlElementProperties.concat([
   'acceptCharset', // form
   'action', // form
   'encType', // form
@@ -347,7 +335,7 @@ export const formProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const iframeProperties = toObjectMap(htmlElementProperties, [
+export const iframeProperties = htmlElementProperties.concat([
   'allow', // iframe
   'allowFullScreen', // iframe
   'allowPaymentRequest', // iframe
@@ -367,7 +355,7 @@ export const iframeProperties = toObjectMap(htmlElementProperties, [
  *
  * @public
  */
-export const imgProperties = toObjectMap(htmlElementProperties, [
+export const imgProperties = htmlElementProperties.concat([
   'alt', // area, img, input
   'crossOrigin', // img
   'height', // canvas, embed, iframe, img, input, object, video
@@ -400,37 +388,23 @@ export const divProperties = htmlElementProperties;
  *
  * @public
  * @param props - The unfiltered input props
- * @param allowedPropsNames - The array or record of allowed prop names.
+ * @param allowedPropsNames-  The array of allowed propnames.
  * @returns The filtered props
  */
-// tslint:disable-next-line: no-any
-export function getNativeProps<T extends Record<string, any>>(
-  // tslint:disable-next-line:no-any
-  props: Record<string, any>,
-  allowedPropNames: string[] | Record<string, number>,
-  excludedPropNames?: string[],
-): T {
+export function getNativeProps<T>(props: {}, allowedPropNames: string[], excludedPropNames?: string[]): T {
   // It'd be great to properly type this while allowing 'aria-` and 'data-' attributes like TypeScript does for
   // JSX attributes, but that ability is hardcoded into the TS compiler with no analog in TypeScript typings.
   // Then we'd be able to enforce props extends native props (including aria- and data- attributes), and then
   // return native props.
   // We should be able to do this once this PR is merged: https://github.com/microsoft/TypeScript/pull/26797
-
-  const isArray = Array.isArray(allowedPropNames);
-  // tslint:disable-next-line:no-any
-  const result: Record<string, any> = {};
-  const keys = Object.keys(props);
-
-  for (const key of keys) {
-    const isNativeProp =
-      (!isArray && (allowedPropNames as Record<string, number>)[key]) ||
-      (isArray && (allowedPropNames as string[]).indexOf(key) >= 0);
-
-    if (isNativeProp && (!excludedPropNames || excludedPropNames?.indexOf(key) === -1)) {
-      // tslint:disable-next-line:no-any
-      result[key] = props![key] as any;
-    }
-  }
-
-  return result as T;
+  return filteredAssign(
+    (propName: string) => {
+      return (
+        (!excludedPropNames || excludedPropNames.indexOf(propName) < 0) &&
+        (propName.indexOf('data-') === 0 || propName.indexOf('aria-') === 0 || allowedPropNames.indexOf(propName) >= 0)
+      );
+    },
+    {},
+    props,
+  ) as T;
 }

From 04bce6d4da4f257d85264a7b1f3be49cd6b59209 Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Mon, 29 Jun 2020 14:36:39 -0700
Subject: [PATCH 19/19] no message

---
 .../src/components/Button/Button.stories.tsx  | 106 +-----------------
 1 file changed, 3 insertions(+), 103 deletions(-)

diff --git a/packages/react-button/src/components/Button/Button.stories.tsx b/packages/react-button/src/components/Button/Button.stories.tsx
index 7f2dcb997c935..a7c7284b76697 100644
--- a/packages/react-button/src/components/Button/Button.stories.tsx
+++ b/packages/react-button/src/components/Button/Button.stories.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Button } from './Button';
 import { ButtonProps } from './Button.types';
 import * as classes from './Button.stories.scss';
-import { mergeThemes, ThemeProvider, Theme } from '@fluentui/react-theme-provider';
 
 /**
  * Temporary Stack until there's one in its own package.
@@ -13,6 +12,9 @@ const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => {
   return <div {...rest} className={horizontal ? classes.hStack : classes.vStack} />;
 };
 
+/**
+ * Temporary Text until there's one in its own package.
+ */
 const Text = (props: React.PropsWithChildren<{}>) => <h2 {...props} className={classes.text} />;
 
 const ButtonVariants = (props: ButtonProps) => (
@@ -221,105 +223,3 @@ export const ButtonTokens = () => (
     </Stack>
   </Stack>
 );
-
-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,
-        softest: 'white',
-        strongest: 'black',
-      },
-
-      body: {
-        background: 'white',
-        contentColor: 'black',
-      },
-
-      accent: {
-        background: paletteAccent,
-        contentColor: paletteSoftest,
-
-        hovered: {
-          background: paletteAccent,
-          contentColor: paletteSoftest,
-        },
-        pressed: {
-          background: paletteAccent,
-          contentColor: paletteSoftest,
-        },
-      },
-
-      button: {
-        background: '#ddd',
-      },
-    },
-    stylesheets: [],
-  });
-
-  const darkTheme = mergeThemes(lightTheme, {
-    tokens: {
-      palette: {
-        softest: 'black',
-        strongest: 'white',
-      },
-
-      body: {
-        background: '#333',
-        contentColor: paletteStrongest,
-      },
-
-      button: {
-        background: 'transparent',
-        contentColor: paletteStrongest,
-
-        hovered: {
-          background: '#555',
-          contentColor: paletteStrongest,
-        },
-      },
-
-      accent: {
-        background: 'blue',
-        contentColor: paletteStrongest,
-
-        hovered: {
-          background: '#555',
-          contentColor: paletteStrongest,
-        },
-      },
-    },
-  } as PartialTheme);
-
-  return { lightTheme, darkTheme };
-};
-
-const ExampleBox = ({ title, theme }: { title: string; theme: Theme }) => (
-  <ThemeProvider theme={theme} style={{ padding: 20 }}>
-    <Stack>
-      <Text variant="xLarge">{title}</Text>
-      <Button icon={<UploadIcon />} content="I am a button" />
-      <Button primary content="I am a primary button" />
-    </Stack>
-  </ThemeProvider>
-);
-
-export const ThemeExample = () => {
-  const [color, setColor] = React.useState<string>('#f00');
-  const { lightTheme, darkTheme } = getThemes(color);
-  const onColorChange = React.useCallback((ev: never, newColor: IColor) => setColor(newColor.str), []);
-
-  return (
-    <Stack gap={16}>
-      <Text variant="xLarge">Accent color</Text>
-      <ColorPicker color={color} onChange={onColorChange} />
-
-      <ExampleBox title="Light" theme={lightTheme} />
-      <ExampleBox title="Dark" theme={darkTheme} />
-    </Stack>
-  );
-};