MenuButton: Removing legacy patterns from converged component (#18498)

* MenuButton: Removing legacy patterns from converged component. * Change files * Calling useButtonStyles at the end of useMenuButtonStyles function.
microsoft · Jun 10, 2021 · 92eecaa · 92eecaa
1 parent 0b25e8d
commit 92eecaa
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 110 deletions.
diff --git a/change/@fluentui-react-button-5d563384-02a5-4c36-aa04-a80bd9d271b8.json b/change/@fluentui-react-button-5d563384-02a5-4c36-aa04-a80bd9d271b8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "MenuButton: Removing legacy patterns from converged component.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
@@ -149,37 +149,23 @@ export type CompoundButtonVariantTokens = Partial<{
 // @public
 export const MenuButton: React_2.FunctionComponent<MenuButtonProps & React_2.RefAttributes<HTMLElement>>;
 
+// @public (undocumented)
+export type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
+
 // @public (undocumented)
 export type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & {
     menuIcon?: ShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
 };
 
-// @public
-export const menuButtonShorthandProps: readonly ["children", "icon", "menuIcon"];
-
-// @public (undocumented)
-export interface MenuButtonState extends Omit<MenuButtonProps, 'children' | 'icon' | 'size'>, Omit<ButtonState, 'iconPosition'> {
-    // (undocumented)
-    menuIcon?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
-}
-
 // @public (undocumented)
-export type MenuButtonStyleSelectors = ButtonStyleSelectors & {};
+export type MenuButtonShorthandProps = ButtonShorthandProps | 'menuIcon';
 
-// @public (undocumented)
-export type MenuButtonTokens = ButtonTokens & {
-    menuIconFontSize?: string;
-    menuIconHeight?: string;
-    menuIconWidth?: string;
-};
-
-// @public (undocumented)
-export type MenuButtonVariants = ButtonVariants;
+// @public
+export const menuButtonShorthandProps: MenuButtonShorthandProps[];
 
 // @public (undocumented)
-export type MenuButtonVariantTokens = Partial<{
-    [variant in MenuButtonVariants]: Partial<MenuButtonTokens>;
-}>;
+export interface MenuButtonState extends Omit<ButtonState, 'iconPosition'>, ComponentState<MenuButtonProps, MenuButtonShorthandProps, MenuButtonDefaultedProps> {
+}
 
 // @public
 const renderButton: (state: ButtonState) => JSX.Element;
@@ -238,7 +224,7 @@ export const useMenuButton: (props: MenuButtonProps, ref: React_2.Ref<HTMLElemen
 export const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;
 
 // @public (undocumented)
-export const useMenuButtonStyles: (state: MenuButtonState, selectors: MenuButtonStyleSelectors) => void;
+export const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
 
 // @public (undocumented)
 export const useToggleButton: (props: ToggleButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;

diff --git a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
@@ -1,5 +1,5 @@
-import { MenuButton } from './MenuButton';
 import { isConformant } from '../../common/isConformant';
+import { MenuButton } from './MenuButton';
 
 describe('MenuButton', () => {
   isConformant({

diff --git a/packages/react-button/src/components/MenuButton/MenuButton.tsx b/packages/react-button/src/components/MenuButton/MenuButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ChevronDownIcon } from './DefaultIcons';
-import { MenuButtonProps, MenuButtonStyleSelectors } from './MenuButton.types';
+import { MenuButtonProps } from './MenuButton.types';
 import { renderMenuButton } from './renderMenuButton';
 import { useMenuButton } from './useMenuButton';
 import { useMenuButtonStyles } from './useMenuButtonStyles';
@@ -17,17 +17,7 @@ export const MenuButton: React.FunctionComponent<MenuButtonProps & React.RefAttr
     menuIcon: { as: ChevronDownIcon },
   });
 
-  const styleSelectors: MenuButtonStyleSelectors = {
-    disabled: state.disabled,
-    // expanded: state.expanded,
-    iconOnly: state.iconOnly,
-    primary: state.primary,
-    size: state.size,
-    subtle: state.subtle,
-    transparent: state.transparent,
-  };
-
-  useMenuButtonStyles(state, styleSelectors);
+  useMenuButtonStyles(state);
 
   return renderMenuButton(state);
 });

diff --git a/packages/react-button/src/components/MenuButton/MenuButton.types.ts b/packages/react-button/src/components/MenuButton/MenuButton.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import { ButtonProps, ButtonState, ButtonStyleSelectors, ButtonTokens, ButtonVariants } from '../Button/Button.types';
+import { ComponentState, ShorthandProps } from '@fluentui/react-utilities';
+import { ButtonDefaultedProps, ButtonProps, ButtonShorthandProps, ButtonState } from '../Button/Button.types';
 
 /**
  * {@docCategory Button}
@@ -45,38 +45,16 @@ export type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & {
 /**
  * {@docCategory Button}
  */
-export interface MenuButtonState
-  extends Omit<MenuButtonProps, 'children' | 'icon' | 'size'>,
-    Omit<ButtonState, 'iconPosition'> {
-  menuIcon?: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
-}
+export type MenuButtonShorthandProps = ButtonShorthandProps | 'menuIcon';
 
 /**
  * {@docCategory Button}
  */
-export type MenuButtonStyleSelectors = ButtonStyleSelectors & {
-  // expanded?: boolean;
-};
+export type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
 
 /**
  * {@docCategory Button}
  */
-export type MenuButtonTokens = ButtonTokens & {
-  menuIconFontSize?: string;
-  menuIconHeight?: string;
-  menuIconWidth?: string;
-};
-
-/**
- * {@docCategory Button}
- */
-export type MenuButtonVariants = ButtonVariants;
-
-/**
- * {@docCategory Button}
- */
-export type MenuButtonVariantTokens = Partial<
-  {
-    [variant in MenuButtonVariants]: Partial<MenuButtonTokens>;
-  }
->;
+export interface MenuButtonState
+  extends Omit<ButtonState, 'iconPosition'>,
+    ComponentState<MenuButtonProps, MenuButtonShorthandProps, MenuButtonDefaultedProps> {}
diff --git a/packages/react-button/src/components/MenuButton/useMenuButton.ts b/packages/react-button/src/components/MenuButton/useMenuButton.ts
@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { makeMergePropsCompat, resolveShorthandProps } from '@fluentui/react-utilities';
-import { MenuButtonProps, MenuButtonState } from './MenuButton.types';
+import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+import { MenuButtonProps, MenuButtonShorthandProps, MenuButtonState } from './MenuButton.types';
 import { useMenuButtonState } from './useMenuButtonState';
 
 /**
  * Consts listing which props are shorthand props.
  */
-export const menuButtonShorthandProps = ['children', 'icon', 'menuIcon'] as const;
+export const menuButtonShorthandProps: MenuButtonShorthandProps[] = ['children', 'icon', 'menuIcon'];
 
-// eslint-disable-next-line deprecation/deprecation
-const mergeProps = makeMergePropsCompat({ deepMerge: menuButtonShorthandProps });
+const mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandProps });
 
 /**
  * Redefine the component factory, reusing button factory.
@@ -21,8 +20,11 @@ export const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement
     {
       ref,
       as: 'button',
+      // Button slots
       icon: { as: 'span' },
+      // MenuButton slots
       menuIcon: { as: 'span' },
+      // Non-slot props
       size: 'medium',
     },
     defaultProps && resolveShorthandProps(defaultProps, menuButtonShorthandProps),

diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonState.ts b/packages/react-button/src/components/MenuButton/useMenuButtonState.ts
@@ -1,5 +1,5 @@
-import { MenuButtonState } from './MenuButton.types';
 import { useButtonState } from '../Button/useButtonState';
+import { MenuButtonState } from './MenuButton.types';
 
 export const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {
   // It behaves like a button.

diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -1,52 +1,31 @@
 import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
-import { Theme } from '@fluentui/react-theme';
 import { useButtonStyles } from '../Button/useButtonStyles';
-import { MenuButtonState, MenuButtonStyleSelectors, MenuButtonVariantTokens } from './MenuButton.types';
+import { MenuButtonState } from './MenuButton.types';
 
-export const makeMenuButtonTokens = (theme: Theme): MenuButtonVariantTokens => ({
-  base: {
-    menuIconFontSize: '20px',
-    menuIconHeight: '20px',
-    menuIconWidth: '20px',
+const useMenuIconStyles = makeStyles({
+  small: {
+    fontSize: '20px',
+    height: '20px',
+    width: '20px',
+  },
+  medium: {
+    fontSize: '20px',
+    height: '20px',
+    width: '20px',
   },
   large: {
-    menuIconFontSize: '24px',
-    menuIconHeight: '24px',
-    menuIconWidth: '24px',
+    fontSize: '24px',
+    height: '24px',
+    width: '24px',
   },
 });
 
-const useStyles = makeStyles({
-  menuIcon: theme => {
-    const menuButtonTokens = makeMenuButtonTokens(theme);
-
-    return {
-      fontSize: menuButtonTokens.base?.menuIconFontSize,
-      height: menuButtonTokens.base?.menuIconHeight,
-      width: menuButtonTokens.base?.menuIconWidth,
-    };
-  },
-  menuIconLarge: theme => {
-    const menuButtonTokens = makeMenuButtonTokens(theme);
+export const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {
+  const menuIconStyles = useMenuIconStyles();
 
-    return {
-      fontSize: menuButtonTokens.large?.menuIconFontSize,
-      height: menuButtonTokens.large?.menuIconHeight,
-      width: menuButtonTokens.large?.menuIconWidth,
-    };
-  },
-});
+  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
 
-export const useMenuButtonStyles = (state: MenuButtonState, selectors: MenuButtonStyleSelectors) => {
   useButtonStyles(state);
 
-  const styles = useStyles();
-
-  if (state.menuIcon) {
-    state.menuIcon.className = mergeClasses(
-      styles.menuIcon,
-      selectors.size === 'large' && styles.menuIconLarge,
-      state.menuIcon.className,
-    );
-  }
+  return state;
 };