From 16bb581c41bc50a285f39791e21da71d1e6c0441 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 17 Nov 2020 13:53:59 -0800 Subject: [PATCH] Cherrypicking react-button changes from 7.0 into master (#15961) * Merging with latest. * updating change file versions. --- ...-2020-10-13-12-47-23-fix-button-hooks.json | 8 +++ ...-2020-10-12-18-23-32-fix-button-hooks.json | 8 +++ ...-2020-10-12-18-23-32-fix-button-hooks.json | 8 +++ .../src/components/Avatar/Avatar.tsx | 5 +- .../src/components/Avatar/index.ts | 3 +- .../src/components/Avatar/renderAvatar.tsx | 15 +++++ .../src/components/Avatar/useAvatar.tsx | 20 ++----- .../src/components/Badge/Badge.tsx | 5 +- .../src/components/Badge/index.ts | 4 +- .../src/components/Badge/renderBadge.tsx | 13 +++++ .../src/components/Badge/useBadge.tsx | 16 +----- .../src/components/Image/index.tsx | 3 +- .../src/components/Image/renderImage.tsx | 8 +++ .../src/components/Image/useImage.tsx | 9 +-- packages/react-button/etc/react-button.api.md | 41 ++++++------- .../src/components/Button/Button.tsx | 5 +- .../src/components/Button/index.ts | 5 +- .../src/components/Button/useButton.ts | 5 +- .../CompoundButton/CompoundButton.tsx | 5 +- .../src/components/CompoundButton/index.ts | 3 +- .../CompoundButton/useCompoundButton.ts | 5 +- .../src/components/MenuButton/MenuButton.tsx | 5 +- .../src/components/MenuButton/index.ts | 3 +- .../MenuButton/renderMenuButton.tsx | 1 - .../components/MenuButton/useMenuButton.ts | 6 +- .../components/SplitButton/SplitButton.tsx | 6 +- .../src/components/SplitButton/index.ts | 3 +- .../SplitButton/renderSplitButton.tsx | 1 - .../components/SplitButton/useSplitButton.ts | 6 +- .../components/ToggleButton/ToggleButton.tsx | 5 +- .../src/components/ToggleButton/index.ts | 5 +- .../ToggleButton/renderToggleButton.tsx | 1 + .../ToggleButton/useToggleButton.tsx | 8 +-- packages/react-compose/src/next/README.md | 57 +++++++++++-------- .../components/splitButton.stories.tsx | 2 +- 35 files changed, 174 insertions(+), 129 deletions(-) create mode 100644 change/@fluentui-react-avatar-2020-10-13-12-47-23-fix-button-hooks.json create mode 100644 change/@fluentui-react-button-2020-10-12-18-23-32-fix-button-hooks.json create mode 100644 change/@fluentui-react-compose-2020-10-12-18-23-32-fix-button-hooks.json create mode 100644 packages/react-avatar/src/components/Avatar/renderAvatar.tsx create mode 100644 packages/react-avatar/src/components/Badge/renderBadge.tsx create mode 100644 packages/react-avatar/src/components/Image/renderImage.tsx create mode 100644 packages/react-button/src/components/ToggleButton/renderToggleButton.tsx diff --git a/change/@fluentui-react-avatar-2020-10-13-12-47-23-fix-button-hooks.json b/change/@fluentui-react-avatar-2020-10-13-12-47-23-fix-button-hooks.json new file mode 100644 index 00000000000000..d09a30a8adfd25 --- /dev/null +++ b/change/@fluentui-react-avatar-2020-10-13-12-47-23-fix-button-hooks.json @@ -0,0 +1,8 @@ +{ + "type": "prerelease", + "comment": "Updating useStatus and useAvatar to return state only, exporting render functions separately.", + "packageName": "@fluentui/react-avatar", + "email": "dzearing@hotmail.com", + "dependentChangeType": "patch", + "date": "2020-10-13T19:47:23.741Z" +} diff --git a/change/@fluentui-react-button-2020-10-12-18-23-32-fix-button-hooks.json b/change/@fluentui-react-button-2020-10-12-18-23-32-fix-button-hooks.json new file mode 100644 index 00000000000000..c51ee51793579a --- /dev/null +++ b/change/@fluentui-react-button-2020-10-12-18-23-32-fix-button-hooks.json @@ -0,0 +1,8 @@ +{ + "type": "prerelease", + "comment": "Updating button hooks to return state only; render function should be imported separately.", + "packageName": "@fluentui/react-button", + "email": "dzearing@hotmail.com", + "dependentChangeType": "patch", + "date": "2020-10-13T01:23:22.018Z" +} diff --git a/change/@fluentui-react-compose-2020-10-12-18-23-32-fix-button-hooks.json b/change/@fluentui-react-compose-2020-10-12-18-23-32-fix-button-hooks.json new file mode 100644 index 00000000000000..425fbf720b3523 --- /dev/null +++ b/change/@fluentui-react-compose-2020-10-12-18-23-32-fix-button-hooks.json @@ -0,0 +1,8 @@ +{ + "type": "prerelease", + "comment": "Updating the README example in compose/next.", + "packageName": "@fluentui/react-compose", + "email": "dzearing@hotmail.com", + "dependentChangeType": "patch", + "date": "2020-10-13T01:23:32.010Z" +} diff --git a/packages/react-avatar/src/components/Avatar/Avatar.tsx b/packages/react-avatar/src/components/Avatar/Avatar.tsx index 3378f972293dcb..e9f626606dce90 100644 --- a/packages/react-avatar/src/components/Avatar/Avatar.tsx +++ b/packages/react-avatar/src/components/Avatar/Avatar.tsx @@ -6,11 +6,12 @@ import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useFocusRects, nullRender } from '@fluentui/utilities'; import * as classes from './Avatar.scss'; import { Badge } from '../Badge/Badge'; +import { renderAvatar } from './renderAvatar'; const useAvatarClasses = makeClasses(classes); export const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref) => { - const { state, render } = useAvatar(props, ref, { + const state = useAvatar(props, ref, { badge: { as: props.badge ? Badge : nullRender }, }); @@ -19,7 +20,7 @@ export const Avatar = React.forwardRef((props: AvatarProps, ref: React.Ref { + const { slots, slotProps } = getSlots(state, avatarShorthandProps); + return ( + + + + + + ); +}; diff --git a/packages/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-avatar/src/components/Avatar/useAvatar.tsx index 4ba0667e25e456..9b210a0691a65e 100644 --- a/packages/react-avatar/src/components/Avatar/useAvatar.tsx +++ b/packages/react-avatar/src/components/Avatar/useAvatar.tsx @@ -1,25 +1,13 @@ import * as React from 'react'; -import { makeMergeProps, getSlots, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { AvatarProps, AvatarState, defaultAvatarSize } from './Avatar.types'; +import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index'; +import { AvatarProps, defaultAvatarSize } from './Avatar.types'; import { calcAvatarStyleProps } from './calcAvatarStyleProps'; import { useMergedRefs } from '@fluentui/react-hooks'; import { getInitials as defaultGetInitials, nullRender } from '@fluentui/utilities'; import { Image } from '../Image/index'; import { ContactIcon as DefaultAvatarIcon } from '@fluentui/react-icons-mdl2'; -const avatarShorthandProps: (keyof AvatarProps)[] = ['label', 'image', 'badge']; - -export const renderAvatar = (state: AvatarState) => { - const { slots, slotProps } = getSlots(state, avatarShorthandProps); - - return ( - - - - - - ); -}; +export const avatarShorthandProps: (keyof AvatarProps)[] = ['label', 'image', 'badge']; const mergeProps = makeMergeProps({ deepMerge: avatarShorthandProps }); @@ -63,5 +51,5 @@ export const useAvatar = (props: AvatarProps, ref: React.Ref, defau state.image = { as: nullRender }; } - return { state, render: renderAvatar }; + return state; }; diff --git a/packages/react-avatar/src/components/Badge/Badge.tsx b/packages/react-avatar/src/components/Badge/Badge.tsx index ca6d5bf1b11c9e..32a0c06ad30988 100644 --- a/packages/react-avatar/src/components/Badge/Badge.tsx +++ b/packages/react-avatar/src/components/Badge/Badge.tsx @@ -4,17 +4,18 @@ import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useBadge } from './useBadge'; import { BadgeProps } from './Badge.types'; import * as classes from './Badge.scss'; +import { renderBadge } from './renderBadge'; // Create a hook to resolve classnames. export const useBadgeClasses = makeClasses(classes); export const Badge = React.forwardRef((props: BadgeProps, ref: React.Ref) => { - const { render, state } = useBadge(props, ref); + const state = useBadge(props, ref); useBadgeClasses(state); useInlineTokens(state, '--badge'); - return render(state); + return renderBadge(state); }); Badge.displayName = 'Badge'; diff --git a/packages/react-avatar/src/components/Badge/index.ts b/packages/react-avatar/src/components/Badge/index.ts index 74aea6650f39fb..860075a5970206 100644 --- a/packages/react-avatar/src/components/Badge/index.ts +++ b/packages/react-avatar/src/components/Badge/index.ts @@ -1,3 +1,5 @@ export * from './Badge.types'; -export * from './useBadge'; export * from './Badge'; +export * from './renderBadge'; +export * from './useBadge'; +export * from './useBadge'; diff --git a/packages/react-avatar/src/components/Badge/renderBadge.tsx b/packages/react-avatar/src/components/Badge/renderBadge.tsx new file mode 100644 index 00000000000000..531e82da9893d5 --- /dev/null +++ b/packages/react-avatar/src/components/Badge/renderBadge.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { BadgeState } from './Badge.types'; +import { getSlots } from '@fluentui/react-compose/lib/next/index'; +import { badgeShorthandProps } from './useBadge'; + +export const renderBadge = (state: BadgeState) => { + const { slots, slotProps } = getSlots(state, badgeShorthandProps); + return ( + + + + ); +}; diff --git a/packages/react-avatar/src/components/Badge/useBadge.tsx b/packages/react-avatar/src/components/Badge/useBadge.tsx index 069e4e657e22f5..0c5c9d54d75bda 100644 --- a/packages/react-avatar/src/components/Badge/useBadge.tsx +++ b/packages/react-avatar/src/components/Badge/useBadge.tsx @@ -1,20 +1,10 @@ import * as React from 'react'; -import { BadgeProps, BadgeState } from './Badge.types'; -import { getSlots, resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index'; +import { BadgeProps } from './Badge.types'; +import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index'; import { useMergedRefs } from '@fluentui/react-hooks'; export const badgeShorthandProps: (keyof BadgeProps)[] = ['icon']; -export const renderBadge = (state: BadgeState) => { - const { slots, slotProps } = getSlots(state, badgeShorthandProps); - - return ( - - - - ); -}; - const mergeProps = makeMergeProps({ deepMerge: badgeShorthandProps }); export const useBadge = (props: BadgeProps, ref: React.Ref, defaultProps?: BadgeProps) => { @@ -32,5 +22,5 @@ export const useBadge = (props: BadgeProps, ref: React.Ref, default }, ); - return { state, render: renderBadge }; + return state; }; diff --git a/packages/react-avatar/src/components/Image/index.tsx b/packages/react-avatar/src/components/Image/index.tsx index a9ab5d4ed0dcac..ef794d7e46b9b7 100644 --- a/packages/react-avatar/src/components/Image/index.tsx +++ b/packages/react-avatar/src/components/Image/index.tsx @@ -1,3 +1,4 @@ export * from './Image.types'; -export * from './useImage'; export * from './Image'; +export * from './renderImage'; +export * from './useImage'; diff --git a/packages/react-avatar/src/components/Image/renderImage.tsx b/packages/react-avatar/src/components/Image/renderImage.tsx new file mode 100644 index 00000000000000..daf344756db111 --- /dev/null +++ b/packages/react-avatar/src/components/Image/renderImage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ImageState } from './Image.types'; +import { getSlots } from '@fluentui/react-compose/lib/next/index'; + +export const renderImage = (state: ImageState) => { + const { slots, slotProps } = getSlots(state); + return ; +}; diff --git a/packages/react-avatar/src/components/Image/useImage.tsx b/packages/react-avatar/src/components/Image/useImage.tsx index 9e93d3ae0c7a0f..0740b9932bff10 100644 --- a/packages/react-avatar/src/components/Image/useImage.tsx +++ b/packages/react-avatar/src/components/Image/useImage.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import { ImageProps, ImageState } from './Image.types'; -import { getSlots, makeMergeProps } from '@fluentui/react-compose/lib/next/index'; - -export const renderImage = (state: ImageState) => { - const { slots, slotProps } = getSlots(state); - - return ; -}; +import { makeMergeProps } from '@fluentui/react-compose/lib/next/index'; +import { renderImage } from './renderImage'; const mergeProps = makeMergeProps(); diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md index bfab1ddc50e9b7..7a9a33b5815b60 100644 --- a/packages/react-button/etc/react-button.api.md +++ b/packages/react-button/etc/react-button.api.md @@ -212,6 +212,22 @@ export type MenuButtonTokens = ButtonTokens & { // @public (undocumented) export type MenuButtonVariants = ButtonVariants; +// @public +const renderButton: (state: ButtonState) => JSX.Element; + +export { renderButton } + +export { renderButton as renderToggleButton } + +// @public +export const renderCompoundButton: (state: CompoundButtonState) => JSX.Element; + +// @public +export const renderMenuButton: (state: MenuButtonState) => JSX.Element; + +// @public +export const renderSplitButton: (state: SplitButtonState) => JSX.Element; + // @public export const SplitButton: React.ForwardRefExoticComponent & React.RefAttributes>; @@ -260,10 +276,7 @@ export type ToggleButtonTokens = ButtonTokens; export type ToggleButtonVariants = ButtonVariants; // @public -export const useButton: (props: ButtonProps, ref: React.Ref, defaultProps?: ButtonProps | undefined) => { - state: Record; - render: (state: import("./Button.types").ButtonState) => JSX.Element; -}; +export const useButton: (props: ButtonProps, ref: React.Ref, defaultProps?: ButtonProps | undefined) => ButtonState; // @public (undocumented) export const useButtonClasses: (state: ButtonState, options?: import("@fluentui/react-theme-provider").UseStylesOptions | undefined) => void; @@ -275,10 +288,7 @@ export const useButtonState: (draftState: ButtonState) => void; export const useChecked: (draftState: TDraftState) => void; // @public -export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref, defaultProps?: CompoundButtonProps | undefined) => { - state: Record; - render: (state: import("./CompoundButton.types").CompoundButtonState) => JSX.Element; -}; +export const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState; // @public (undocumented) export const useCompoundButtonClasses: (state: CompoundButtonState) => void; @@ -287,10 +297,7 @@ export const useCompoundButtonClasses: (state: CompoundButtonState) => void; export const useExpanded: (draftState: TDraftState) => void; // @public -export const useMenuButton: (props: MenuButtonProps, ref: React.Ref, defaultProps?: MenuButtonProps | undefined) => { - state: MenuButtonState; - render: (state: MenuButtonState) => JSX.Element; -}; +export const useMenuButton: (props: MenuButtonProps, ref: React.Ref, defaultProps?: MenuButtonProps | undefined) => MenuButtonState; // @public (undocumented) export const useMenuButtonClasses: (state: MenuButtonState) => void; @@ -299,19 +306,13 @@ export const useMenuButtonClasses: (state: MenuButtonState) => void; export const useMenuButtonState: (state: MenuButtonState) => void; // @public -export const useSplitButton: (props: SplitButtonProps, ref: React.Ref, defaultProps?: SplitButtonProps | undefined) => { - state: SplitButtonState; - render: (state: SplitButtonState) => JSX.Element; -}; +export const useSplitButton: (props: SplitButtonProps, ref: React.Ref, defaultProps?: SplitButtonProps | undefined) => SplitButtonState; // @public (undocumented) export const useSplitButtonClasses: (state: SplitButtonState, options?: import("@fluentui/react-theme-provider").UseStylesOptions | undefined) => void; // @public (undocumented) -export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref, defaultProps?: ToggleButtonProps | undefined) => { - state: Record; - render: (state: import("../Button").ButtonState) => JSX.Element; -}; +export const useToggleButton: (props: ToggleButtonProps, ref: React.Ref, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState; // @public (undocumented) export const useToggleButtonClasses: (state: ToggleButtonState) => void; diff --git a/packages/react-button/src/components/Button/Button.tsx b/packages/react-button/src/components/Button/Button.tsx index ef8c3ffc9fcde2..d1e9111b8a60c6 100644 --- a/packages/react-button/src/components/Button/Button.tsx +++ b/packages/react-button/src/components/Button/Button.tsx @@ -3,18 +3,19 @@ import { useButton } from './useButton'; import { ButtonProps } from './Button.types'; import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useButtonClasses } from './useButtonClasses'; +import { renderButton } from './renderButton'; /** * Define a styled Button, using the `useButton` hook. * {@docCategory Button} */ export const Button = React.forwardRef((props, ref) => { - const { render, state } = useButton(props, ref); + const state = useButton(props, ref); useButtonClasses(state); useInlineTokens(state, '--button'); - return render(state); + return renderButton(state); }); Button.displayName = 'Button'; diff --git a/packages/react-button/src/components/Button/index.ts b/packages/react-button/src/components/Button/index.ts index 4de25d9d4b6458..41c6ca90924de6 100644 --- a/packages/react-button/src/components/Button/index.ts +++ b/packages/react-button/src/components/Button/index.ts @@ -1,5 +1,6 @@ export * from './Button.types'; -export * from './useButtonClasses'; +export * from './Button'; +export * from './renderButton'; export * from './useButton'; +export * from './useButtonClasses'; export * from './useButtonState'; -export * from './Button'; diff --git a/packages/react-button/src/components/Button/useButton.ts b/packages/react-button/src/components/Button/useButton.ts index 2e4fe982cef57c..bf816ebc2a7c79 100644 --- a/packages/react-button/src/components/Button/useButton.ts +++ b/packages/react-button/src/components/Button/useButton.ts @@ -1,8 +1,7 @@ import * as React from 'react'; import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { ButtonProps } from './Button.types'; +import { ButtonProps, ButtonState } from './Button.types'; import { useButtonState } from './useButtonState'; -import { renderButton } from './renderButton'; /** * Consts listing which props are shorthand props. @@ -33,5 +32,5 @@ export const useButton = (props: ButtonProps, ref: React.Ref, defau useButtonState(state); - return { state, render: renderButton }; + return state as ButtonState; }; diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.tsx index fac46c3740e525..4b141320e6e4ba 100644 --- a/packages/react-button/src/components/CompoundButton/CompoundButton.tsx +++ b/packages/react-button/src/components/CompoundButton/CompoundButton.tsx @@ -3,18 +3,19 @@ import { useInlineTokens } from '@fluentui/react-theme-provider'; import { CompoundButtonProps } from './CompoundButton.types'; import { useCompoundButton } from './useCompoundButton'; import { useCompoundButtonClasses } from './useCompoundButtonClasses'; +import { renderCompoundButton } from './renderCompoundButton'; /** * Define a styled CompoundButton, using the `useCompoundButton` hook. * {@docCategory Button} */ export const CompoundButton = React.forwardRef((props, ref) => { - const { render, state } = useCompoundButton(props, ref); + const state = useCompoundButton(props, ref); useCompoundButtonClasses(state); useInlineTokens(state, '--button'); - return render(state); + return renderCompoundButton(state); }); CompoundButton.displayName = 'CompoundButton'; diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts index 46ba3e94e73c18..ca9310fa815ede 100644 --- a/packages/react-button/src/components/CompoundButton/index.ts +++ b/packages/react-button/src/components/CompoundButton/index.ts @@ -1,4 +1,5 @@ -export * from './CompoundButton'; export * from './CompoundButton.types'; +export * from './CompoundButton'; +export * from './renderCompoundButton'; export * from './useCompoundButton'; export * from './useCompoundButtonClasses'; diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButton.ts b/packages/react-button/src/components/CompoundButton/useCompoundButton.ts index 91aeb7eefb824f..c75b57a122efb9 100644 --- a/packages/react-button/src/components/CompoundButton/useCompoundButton.ts +++ b/packages/react-button/src/components/CompoundButton/useCompoundButton.ts @@ -1,8 +1,7 @@ import * as React from 'react'; import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index'; -import { CompoundButtonProps } from './CompoundButton.types'; +import { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types'; import { useButtonState } from '../Button/useButtonState'; -import { renderCompoundButton } from './renderCompoundButton'; /** * Consts listing which props are shorthand props. @@ -41,5 +40,5 @@ export const useCompoundButton = ( useButtonState(state); - return { state, render: renderCompoundButton }; + return state as CompoundButtonState; }; diff --git a/packages/react-button/src/components/MenuButton/MenuButton.tsx b/packages/react-button/src/components/MenuButton/MenuButton.tsx index 4ec9a5d18c82ce..90bfa0c3f3b2a3 100644 --- a/packages/react-button/src/components/MenuButton/MenuButton.tsx +++ b/packages/react-button/src/components/MenuButton/MenuButton.tsx @@ -4,13 +4,14 @@ import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useMenuButton } from './useMenuButton'; import { MenuButtonProps } from './MenuButton.types'; import { useMenuButtonClasses } from './useMenuButtonClasses'; +import { renderMenuButton } from './renderMenuButton'; /** * Define a styled MenuButton, using the `useMenuButton` hook. * {@docCategory Button} */ export const MenuButton = React.forwardRef((props, ref) => { - const { state, render } = useMenuButton(props, ref, { + const state = useMenuButton(props, ref, { menuIcon: { as: ChevronDownIcon }, }); @@ -25,7 +26,7 @@ export const MenuButton = React.forwardRef((props, // eslint-disable-next-line @typescript-eslint/no-explicit-any useInlineTokens(state as any, '--button'); - return render(state); + return renderMenuButton(state); }); MenuButton.displayName = 'MenuButton'; diff --git a/packages/react-button/src/components/MenuButton/index.ts b/packages/react-button/src/components/MenuButton/index.ts index 39433a53bb4219..4581fcdb03139e 100644 --- a/packages/react-button/src/components/MenuButton/index.ts +++ b/packages/react-button/src/components/MenuButton/index.ts @@ -1,6 +1,7 @@ export * from './MenuButton.types'; export * from './MenuButton'; +export * from './renderMenuButton'; export * from './useExpanded'; export * from './useMenuButton'; -export * from './useMenuButtonState'; export * from './useMenuButtonClasses'; +export * from './useMenuButtonState'; diff --git a/packages/react-button/src/components/MenuButton/renderMenuButton.tsx b/packages/react-button/src/components/MenuButton/renderMenuButton.tsx index 7b016a8971de4e..4bb1cc770bf9f7 100644 --- a/packages/react-button/src/components/MenuButton/renderMenuButton.tsx +++ b/packages/react-button/src/components/MenuButton/renderMenuButton.tsx @@ -6,7 +6,6 @@ import { menuButtonShorthandProps } from './useMenuButton'; /** * Redefine the render function to add slots. Reuse the button structure but add * slots to children. - * @param state */ export const renderMenuButton = (state: MenuButtonState) => { const { slots, slotProps } = getSlots(state, menuButtonShorthandProps); diff --git a/packages/react-button/src/components/MenuButton/useMenuButton.ts b/packages/react-button/src/components/MenuButton/useMenuButton.ts index d6a51800bc1de7..0934ae93f40ec6 100644 --- a/packages/react-button/src/components/MenuButton/useMenuButton.ts +++ b/packages/react-button/src/components/MenuButton/useMenuButton.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index'; import { MenuButtonProps, MenuButtonState } from './MenuButton.types'; import { useMenuButtonState } from './useMenuButtonState'; -import { renderMenuButton } from './renderMenuButton'; export const menuButtonShorthandProps = ['icon', 'content', 'menuIcon', 'menu']; @@ -29,8 +28,5 @@ export const useMenuButton = (props: MenuButtonProps, ref: React.Ref((props, ref) => { - const { state, render } = useSplitButton(props, ref, { + const state = useSplitButton(props, ref, { button: { as: Button }, menuButton: { as: MenuButton, iconOnly: true, icon: }, }); useSplitButtonClasses(state); - // TODO remove any /** * Type 'SplitButtonState' has no properties in common with type '{ * style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; } @@ -28,7 +28,7 @@ export const SplitButton = React.forwardRef((prop // eslint-disable-next-line @typescript-eslint/no-explicit-any useInlineTokens(state as any, '--button'); - return render(state); + return renderSplitButton(state); }); SplitButton.displayName = 'SplitButton'; diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts index 3263a13538d632..55b80318798cf8 100644 --- a/packages/react-button/src/components/SplitButton/index.ts +++ b/packages/react-button/src/components/SplitButton/index.ts @@ -1,4 +1,5 @@ -export * from './SplitButton.types'; export * from './SplitButton'; +export * from './SplitButton.types'; +export * from './renderSplitButton'; export * from './useSplitButton'; export * from './useSplitButtonClasses'; diff --git a/packages/react-button/src/components/SplitButton/renderSplitButton.tsx b/packages/react-button/src/components/SplitButton/renderSplitButton.tsx index 02864caa576a81..70b2222c36e9a3 100644 --- a/packages/react-button/src/components/SplitButton/renderSplitButton.tsx +++ b/packages/react-button/src/components/SplitButton/renderSplitButton.tsx @@ -6,7 +6,6 @@ import { splitButtonShorthandProps } from './useSplitButton'; /** * Redefine the render function to add slots. Reuse the button structure but add * slots to children. - * @param state */ export const renderSplitButton = (state: SplitButtonState) => { const { slots, slotProps } = getSlots(state, splitButtonShorthandProps); diff --git a/packages/react-button/src/components/SplitButton/useSplitButton.ts b/packages/react-button/src/components/SplitButton/useSplitButton.ts index 9cc28df0526ad3..d7effaebfc28ae 100644 --- a/packages/react-button/src/components/SplitButton/useSplitButton.ts +++ b/packages/react-button/src/components/SplitButton/useSplitButton.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index'; import { SplitButtonProps, SplitButtonState } from './SplitButton.types'; -import { renderSplitButton } from './renderSplitButton'; import { useMergedRefs } from '@fluentui/react-hooks'; export const splitButtonShorthandProps = ['icon', 'button', 'divider', 'menuButton']; @@ -80,8 +79,5 @@ export const useSplitButton = ( defaultProps, ) as SplitButtonState; - return { - state, - render: renderSplitButton, - }; + return state as SplitButtonState; }; diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.tsx index 46a33d282c8e2f..30b37c737d76a0 100644 --- a/packages/react-button/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/react-button/src/components/ToggleButton/ToggleButton.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { ToggleButtonProps } from './ToggleButton.types'; import { useToggleButton } from './useToggleButton'; +import { renderToggleButton } from './renderToggleButton'; import { useInlineTokens } from '@fluentui/react-theme-provider'; import { useToggleButtonClasses } from './useToggleButtonClasses'; @@ -9,12 +10,12 @@ import { useToggleButtonClasses } from './useToggleButtonClasses'; * {@docCategory Button} */ export const ToggleButton = React.forwardRef((props, ref) => { - const { render, state } = useToggleButton(props, ref); + const state = useToggleButton(props, ref); useToggleButtonClasses(state); useInlineTokens(state, '--button'); - return render(state); + return renderToggleButton(state); }); ToggleButton.displayName = 'ToggleButton'; diff --git a/packages/react-button/src/components/ToggleButton/index.ts b/packages/react-button/src/components/ToggleButton/index.ts index 320bb392bf324f..1c7143fe66fbd0 100644 --- a/packages/react-button/src/components/ToggleButton/index.ts +++ b/packages/react-button/src/components/ToggleButton/index.ts @@ -1,5 +1,6 @@ +export * from './ToggleButton'; export * from './ToggleButton.types'; +export * from './renderToggleButton'; +export * from './useChecked'; export * from './useToggleButton'; export * from './useToggleButtonClasses'; -export * from './ToggleButton'; -export * from './useChecked'; diff --git a/packages/react-button/src/components/ToggleButton/renderToggleButton.tsx b/packages/react-button/src/components/ToggleButton/renderToggleButton.tsx new file mode 100644 index 00000000000000..9ea35355f2f72e --- /dev/null +++ b/packages/react-button/src/components/ToggleButton/renderToggleButton.tsx @@ -0,0 +1 @@ +export { renderButton as renderToggleButton } from '../Button/renderButton'; diff --git a/packages/react-button/src/components/ToggleButton/useToggleButton.tsx b/packages/react-button/src/components/ToggleButton/useToggleButton.tsx index 15c59d54a21638..fdb654d21946e2 100644 --- a/packages/react-button/src/components/ToggleButton/useToggleButton.tsx +++ b/packages/react-button/src/components/ToggleButton/useToggleButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useButton } from '../Button/useButton'; -import { ToggleButtonProps } from './ToggleButton.types'; +import { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'; import { useChecked } from './useChecked'; export const useToggleButton = ( @@ -8,9 +8,9 @@ export const useToggleButton = ( ref: React.Ref, defaultProps?: ToggleButtonProps, ) => { - const buttonDefinition = useButton(props, ref, defaultProps); + const state = useButton(props, ref, defaultProps); - useChecked(buttonDefinition.state as ToggleButtonProps); + useChecked(state as ToggleButtonProps); - return buttonDefinition; + return state as ToggleButtonState; }; diff --git a/packages/react-compose/src/next/README.md b/packages/react-compose/src/next/README.md index e35496225159c1..a225f2f8d9cfad 100644 --- a/packages/react-compose/src/next/README.md +++ b/packages/react-compose/src/next/README.md @@ -4,7 +4,8 @@ ## A basic component walkthrough -Building a recomposable component requires that we build legos; we put them together, but we can reconfigure and add to parts as needed. +Building a re-composable component requires that we create building blocks; we put them together, but we can reconfigure +and add to parts as needed. Here's what's needed: @@ -16,21 +17,13 @@ With these building blocks, you can compose or recompose the component in numero ### Simple example -A render function: +A hook which can produce mutable state of the component (defining accessibility and behaviors): ```jsx -const renderButton = state => { - return