MenuButton: Re-introducing MenuButton using the latest version of makeStyles

apps/test-bundles/webpackUtils.js

@@ -119,6 +119,7 @@ function createFluentConvergedFixtures() {
     'Image',
     'Link',
     'Menu',
+    'MenuButton',
     'Portal',
     'ToggleButton',
     'Tooltip',

apps/vr-tests/src/stories/ReactButton.stories.tsx

@@ -1,7 +1,14 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
-import { Button, ButtonProps, CompoundButton, ToggleButton } from '@fluentui/react-button';
+import { ContextualMenu } from '@fluentui/react';
+import {
+  Button,
+  ButtonProps,
+  CompoundButton,
+  ToggleButton,
+  MenuButton,
+} from '@fluentui/react-button';
 
 import { FluentProviderDecorator, FabricDecorator } from '../utilities/index';
 
@@ -162,7 +169,7 @@ storiesOf('react-button CompoundButton', module)
     </CompoundButton>
   ))
   .addStory('Size small', () => (
-    <CompoundButton secondaryContent="This is some secondary text" icon="X" size="large">
+    <CompoundButton secondaryContent="This is some secondary text" icon="X" size="small">
       Hello, world
     </CompoundButton>
   ))
@@ -217,7 +224,7 @@ storiesOf('react-button ToggleButton', module)
     </ToggleButton>
   ))
   .addStory('Size small', () => (
-    <ToggleButton icon="X" size="large">
+    <ToggleButton icon="X" size="small">
       Hello, world
     </ToggleButton>
   ))
@@ -247,3 +254,86 @@ storiesOf('react-button ToggleButton', module)
       Hello, world
     </ToggleButton>
   ));
+
+const menuProps = {
+  items: [
+    {
+      key: 'a',
+      name: 'Item a',
+    },
+    {
+      key: 'b',
+      name: 'Item b',
+    },
+  ],
+};
+
+storiesOf('react-button MenuButton', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(FluentProviderDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .hover('button')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .mouseDown('button')
+        .snapshot('pressed', { cropTo: '.testWrapper' })
+        .mouseUp('button')
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Default', () => <MenuButton>Hello, world</MenuButton>)
+  .addStory('Primary', () => <MenuButton primary>Hello, world</MenuButton>)
+  .addStory('Subtle', () => <MenuButton subtle>Hello, world</MenuButton>)
+  .addStory('Transparent', () => <MenuButton transparent>Hello, world</MenuButton>)
+  .addStory('Disabled', () => <MenuButton disabled>Hello, world</MenuButton>)
+  .addStory('Primary Disabled', () => (
+    <MenuButton primary disabled>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Subtle Disabled', () => (
+    <MenuButton subtle disabled>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Transparent Disabled', () => (
+    <MenuButton transparent disabled>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('With icon', () => <MenuButton icon="X">Hello, world</MenuButton>)
+  .addStory('Size small', () => (
+    <MenuButton icon="X" size="small">
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Size large', () => (
+    <MenuButton icon="X" size="large">
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Icon only', () => <MenuButton icon="X" />)
+  .addStory('Expanded', () => (
+    <MenuButton icon="X" expanded menu={<ContextualMenu {...menuProps} />}>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Primary Expanded', () => (
+    <MenuButton icon="X" primary expanded menu={<ContextualMenu {...menuProps} />}>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Subtle Expanded', () => (
+    <MenuButton icon="X" subtle expanded menu={<ContextualMenu {...menuProps} />}>
+      Hello, world
+    </MenuButton>
+  ))
+  .addStory('Transparent Expanded', () => (
+    <MenuButton icon="X" transparent expanded menu={<ContextualMenu {...menuProps} />}>
+      Hello, world
+    </MenuButton>
+  ));

change/@fluentui-react-button-d64192ce-5313-4c00-bbaa-0dfa2f80fd7d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "MenuButton: Re-introducing MenuButton using the latest version of makeStyles.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-ba379fbe-3151-4479-a3e8-bfc0ec6a4221.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Bumping wrong version of dependency.",
+  "packageName": "@fluentui/react-components",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-a9a763fc-e566-4eb0-8c94-68bfc3ccf9b0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Adding MenuButton stories.",
+  "packageName": "@fluentui/react-examples",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-6626299c-5cf8-43f9-ba7f-4081c0a07d2b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Prettier update.",
+  "packageName": "@fluentui/react-menu",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-98d33e29-533c-4ce3-8a47-f03fd468c794.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Modifying MinimalMenuProps target prop to only be React.Ref<HTMLElement> instead of React.Ref<HTMLElement | undefined>.",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-button/etc/react-button.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { ComponentProps } from '@fluentui/react-utilities';
+import { MinimalMenuProps } from '@fluentui/react-shared-contexts';
 import { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import { ShorthandProps } from '@fluentui/react-utilities';
@@ -16,7 +17,6 @@ export const Button: React_2.FunctionComponent<ButtonProps & React_2.RefAttribut
 export type ButtonProps = ComponentProps & React_2.ButtonHTMLAttributes<HTMLElement> & {
     icon?: ShorthandProps<React_2.HTMLAttributes<HTMLSpanElement>>;
     disabled?: boolean;
-    iconOnly?: boolean;
     iconPosition?: 'before' | 'after';
     primary?: boolean;
     size?: 'small' | 'medium' | 'large';
@@ -25,14 +25,15 @@ export type ButtonProps = ComponentProps & React_2.ButtonHTMLAttributes<HTMLElem
 };
 
 // @public
-export const buttonShorthandProps: readonly ["icon", "children"];
+export const buttonShorthandProps: readonly ["children", "icon"];
 
 // @public (undocumented)
 export interface ButtonState extends ButtonProps {
     // (undocumented)
     children?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLSpanElement>>;
     // (undocumented)
     icon?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLSpanElement>>;
+    iconOnly?: boolean;
     // (undocumented)
     ref: React_2.Ref<HTMLElement>;
 }
@@ -115,7 +116,7 @@ export interface CompoundButtonProps extends ButtonProps {
 }
 
 // @public
-export const compoundButtonShorthandProps: readonly ["icon", "children", "contentContainer", "secondaryContent"];
+export const compoundButtonShorthandProps: readonly ["children", "contentContainer", "icon", "secondaryContent"];
 
 // @public (undocumented)
 export interface CompoundButtonState extends Omit<CompoundButtonProps, 'children' | 'icon'>, ButtonState {
@@ -144,6 +145,63 @@ export type CompoundButtonVariantTokens = Partial<{
     [variant in CompoundButtonVariants]: Partial<CompoundButtonTokens>;
 }>;
 
+// @public (undocumented)
+export type ExpandedState = {
+    menu?: MenuButtonState['menu'];
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onClick?: MenuButtonState['onClick'];
+    onKeyDown?: MenuButtonState['onKeyDown'];
+    onMenuDismiss?: MenuButtonState['onMenuDismiss'];
+    ref?: React_2.Ref<unknown>;
+    'aria-expanded'?: MenuButtonState['aria-expanded'];
+    'aria-haspopup'?: MenuButtonState['aria-haspopup'];
+};
+
+// @public
+export const MenuButton: React_2.FunctionComponent<MenuButtonProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & {
+    menu?: ShorthandProps<MinimalMenuProps & ComponentProps>;
+    menuIcon?: ShorthandProps<React_2.HTMLAttributes<HTMLSpanElement>>;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    persistMenu?: boolean;
+    onMenuDismiss?: (ev?: Event | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>) => void;
+};
+
+// @public
+export const menuButtonShorthandProps: readonly ["children", "icon", "menu", "menuIcon"];
+
+// @public (undocumented)
+export interface MenuButtonState extends Omit<MenuButtonProps, 'children' | 'icon' | 'menu'>, Omit<ButtonState, 'iconPosition'> {
+    // (undocumented)
+    menu?: ObjectShorthandProps<MinimalMenuProps & ComponentProps>;
+    // (undocumented)
+    menuIcon?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLSpanElement>>;
+}
+
+// @public (undocumented)
+export type MenuButtonStyleSelectors = ButtonStyleSelectors & {
+    expanded?: boolean;
+};
+
+// @public (undocumented)
+export type MenuButtonTokens = ButtonTokens & {
+    menuIconFontSize?: string;
+    menuIconHeight?: string;
+    menuIconWidth?: string;
+};
+
+// @public (undocumented)
+export type MenuButtonVariants = ButtonVariants;
+
+// @public (undocumented)
+export type MenuButtonVariantTokens = Partial<{
+    [variant in MenuButtonVariants]: Partial<MenuButtonTokens>;
+}>;
+
 // @public
 const renderButton: (state: ButtonState) => JSX.Element;
 
@@ -154,6 +212,9 @@ export { renderButton as renderToggleButton }
 // @public
 export const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;
 
+// @public
+export const renderMenuButton: (state: MenuButtonState) => JSX.Element;
+
 // @public
 export const ToggleButton: React_2.ForwardRefExoticComponent<ToggleButtonProps & React_2.RefAttributes<HTMLElement>>;
 
@@ -201,6 +262,18 @@ export const useCompoundButton: (props: CompoundButtonProps, ref: React_2.Ref<HT
 // @public (undocumented)
 export const useCompoundButtonStyles: (state: CompoundButtonState, selectors: CompoundButtonStyleSelectors) => void;
 
+// @public (undocumented)
+export const useExpanded: <TState extends ExpandedState>(state: TState) => TState;
+
+// @public
+export const useMenuButton: (props: MenuButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;
+
+// @public (undocumented)
+export const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;
+
+// @public (undocumented)
+export const useMenuButtonStyles: (state: MenuButtonState, selectors: MenuButtonStyleSelectors) => void;
+
 // @public (undocumented)
 export const useToggleButton: (props: ToggleButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;
 

packages/react-button/package.json

@@ -42,7 +42,9 @@
   },
   "dependencies": {
     "@fluentui/keyboard-key": "^0.3.1",
+    "@fluentui/react-icons-mdl2": "^1.1.1",
     "@fluentui/react-make-styles": "^9.0.0-alpha.37",
+    "@fluentui/react-shared-contexts": "^9.0.0-alpha.12",
     "@fluentui/react-theme": "^9.0.0-alpha.13",
     "@fluentui/react-utilities": "^9.0.0-alpha.24",
     "tslib": "^2.1.0"

packages/react-button/src/MenuButton.ts

@@ -0,0 +1 @@
+export * from './components/MenuButton/index';

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

@@ -14,12 +14,9 @@ export const Button: React.FunctionComponent<ButtonProps & React.RefAttributes<H
 >((props, ref) => {
   const state = useButton(props, ref);
 
-  const receivedChildren = !!state.children?.children;
-  const receivedIcon = !!state.icon?.children;
-
   const styleSelectors: ButtonStyleSelectors = {
     disabled: state.disabled,
-    iconOnly: receivedIcon && !receivedChildren,
+    iconOnly: state.iconOnly,
     primary: state.primary,
     size: state.size,
     subtle: state.subtle,

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

@@ -44,12 +44,6 @@ export type ButtonProps = ComponentProps &
     //  */
     // disabledFocusable?: boolean;
 
-    /**
-     * A button can contain only an icon.
-     * @default false
-     */
-    iconOnly?: boolean;
-
     /**
      * A button can format its icon to appear before or after its content.
      * @default 'before'
@@ -104,6 +98,12 @@ export type ButtonProps = ComponentProps &
  * {@docCategory Button}
  */
 export interface ButtonState extends ButtonProps {
+  /**
+   * A button can contain only an icon.
+   * @default false
+   */
+  iconOnly?: boolean;
+
   ref: React.Ref<HTMLElement>;
 
   icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;

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

@@ -6,7 +6,7 @@ import { useButtonState } from './useButtonState';
 /**
  * Consts listing which props are shorthand props.
  */
-export const buttonShorthandProps = ['icon', 'children'] as const;
+export const buttonShorthandProps = ['children', 'icon'] as const;
 
 // eslint-disable-next-line deprecation/deprecation
 const mergeProps = makeMergePropsCompat<ButtonState>({ deepMerge: buttonShorthandProps });
@@ -24,7 +24,6 @@ export const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defau
       ref: resolvedRef,
       as: 'button',
       icon: { as: 'span' },
-      loader: { as: 'span' },
     },
     defaultProps,
     resolveShorthandProps(props, buttonShorthandProps),

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

@@ -7,7 +7,11 @@ import { ButtonState } from './Button.types';
  * @param state - Button draft state to mutate.
  */
 export const useButtonState = (state: ButtonState): ButtonState => {
-  const { as, disabled, /*disabledFocusable,*/ onClick, onKeyDown: onKeyDownCallback } = state;
+  const { as, children, disabled, /*disabledFocusable,*/ icon, onClick, onKeyDown: onKeyDownCallback } = state;
+
+  const receivedChildren = !!children?.children;
+  const receivedIcon = !!icon?.children;
+  state.iconOnly = receivedIcon && !receivedChildren;
 
   const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {
     onKeyDownCallback?.(ev);

packages/react-button/src/components/CompoundButton/CompoundButton.tsx

@@ -11,12 +11,9 @@ import { useCompoundButtonStyles } from './useCompoundButtonStyles';
 export const CompoundButton = React.forwardRef<HTMLElement, CompoundButtonProps>((props, ref) => {
   const state = useCompoundButton(props, ref);
 
-  const receivedChildren = !!state.children?.children;
-  const receivedIcon = !!state.icon?.children;
-
   const styleSelectors: CompoundButtonStyleSelectors = {
     disabled: state.disabled,
-    iconOnly: receivedIcon && !receivedChildren,
+    iconOnly: state.iconOnly,
     primary: state.primary,
     size: state.size,
     subtle: state.subtle,