From b176f264a645abe45d982c4533aa6df9cccee77d Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Tue, 24 Jan 2023 13:22:25 +0000 Subject: [PATCH 1/3] feat(react-button): creates ButtonContext --- ...-f3600003-d5e8-4448-b335-4a0ff4c76dfd.json | 7 ++++++ .../react-button/etc/react-button.api.md | 14 ++++++++++- .../src/components/Button/Button.types.ts | 7 +++++- .../src/components/Button/useButton.ts | 4 +++- .../src/contexts/ButtonContext.ts | 23 +++++++++++++++++++ .../react-button/src/contexts/index.ts | 1 + .../react-button/src/index.ts | 3 +++ 7 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 change/@fluentui-react-button-f3600003-d5e8-4448-b335-4a0ff4c76dfd.json create mode 100644 packages/react-components/react-button/src/contexts/ButtonContext.ts create mode 100644 packages/react-components/react-button/src/contexts/index.ts diff --git a/change/@fluentui-react-button-f3600003-d5e8-4448-b335-4a0ff4c76dfd.json b/change/@fluentui-react-button-f3600003-d5e8-4448-b335-4a0ff4c76dfd.json new file mode 100644 index 0000000000000..1f9a830153250 --- /dev/null +++ b/change/@fluentui-react-button-f3600003-d5e8-4448-b335-4a0ff4c76dfd.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feature: creates ButtonContext", + "packageName": "@fluentui/react-button", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md index 232ffc013e579..a15eb9a0fa7c9 100644 --- a/packages/react-components/react-button/etc/react-button.api.md +++ b/packages/react-components/react-button/etc/react-button.api.md @@ -20,6 +20,15 @@ export const Button: ForwardRefComponent; // @public (undocumented) export const buttonClassNames: SlotClassNames; +// @internal (undocumented) +export const ButtonContextProvider: React_2.Provider; + +// @internal (undocumented) +export interface ButtonContextValue { + // (undocumented) + size?: ButtonSize; +} + // @public (undocumented) export type ButtonProps = ComponentProps & { appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'; @@ -27,7 +36,7 @@ export type ButtonProps = ComponentProps & { disabled?: boolean; iconPosition?: 'before' | 'after'; shape?: 'rounded' | 'circular' | 'square'; - size?: 'small' | 'medium' | 'large'; + size?: ButtonSize; }; // @public (undocumented) @@ -127,6 +136,9 @@ export type ToggleButtonState = ButtonState & Required) => ButtonState; +// @internal (undocumented) +export const useButtonContext: () => ButtonContextValue; + // @public (undocumented) export const useButtonStyles_unstable: (state: ButtonState) => ButtonState; diff --git a/packages/react-components/react-button/src/components/Button/Button.types.ts b/packages/react-components/react-button/src/components/Button/Button.types.ts index 27bc93579ce18..201f264913be0 100644 --- a/packages/react-components/react-button/src/components/Button/Button.types.ts +++ b/packages/react-components/react-button/src/components/Button/Button.types.ts @@ -13,6 +13,11 @@ export type ButtonSlots = { icon?: Slot<'span'>; }; +/** + * A button supports different sizes. + */ +export type ButtonSize = 'small' | 'medium' | 'large'; + export type ButtonProps = ComponentProps & { /** * A button can have its content and borders styled for greater emphasis or to be subtle. @@ -61,7 +66,7 @@ export type ButtonProps = ComponentProps & { * * @default 'medium' */ - size?: 'small' | 'medium' | 'large'; + size?: ButtonSize; }; export type ButtonState = ComponentState & diff --git a/packages/react-components/react-button/src/components/Button/useButton.ts b/packages/react-components/react-button/src/components/Button/useButton.ts index b5988a1bad823..b4aa97f0ae2fb 100644 --- a/packages/react-components/react-button/src/components/Button/useButton.ts +++ b/packages/react-components/react-button/src/components/Button/useButton.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import type { ButtonProps, ButtonState } from './Button.types'; +import { useButtonContext } from '../../contexts/ButtonContext'; /** * Given user props, defines default props for the Button, calls useButtonState, and returns processed state. @@ -12,6 +13,7 @@ export const useButton_unstable = ( props: ButtonProps, ref: React.Ref, ): ButtonState => { + const { size: contextSize } = useButtonContext(); const { appearance = 'secondary', as = 'button', @@ -20,7 +22,7 @@ export const useButton_unstable = ( icon, iconPosition = 'before', shape = 'rounded', - size = 'medium', + size = contextSize ?? 'medium', } = props; const iconShorthand = resolveShorthand(icon); diff --git a/packages/react-components/react-button/src/contexts/ButtonContext.ts b/packages/react-components/react-button/src/contexts/ButtonContext.ts new file mode 100644 index 0000000000000..da45df43ae94a --- /dev/null +++ b/packages/react-components/react-button/src/contexts/ButtonContext.ts @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { ButtonSize } from '../components/Button/Button.types'; + +const buttonContext = React.createContext(undefined); + +/** + * @internal + */ +export interface ButtonContextValue { + size?: ButtonSize; +} + +const buttonContextDefaultValue: ButtonContextValue = {}; + +/** + * @internal + */ +export const ButtonContextProvider = buttonContext.Provider; + +/** + * @internal + */ +export const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue; diff --git a/packages/react-components/react-button/src/contexts/index.ts b/packages/react-components/react-button/src/contexts/index.ts new file mode 100644 index 0000000000000..e0b0457ba97a2 --- /dev/null +++ b/packages/react-components/react-button/src/contexts/index.ts @@ -0,0 +1 @@ +export * from './ButtonContext'; diff --git a/packages/react-components/react-button/src/index.ts b/packages/react-components/react-button/src/index.ts index 75ce388e1dfe9..baff4e44af77d 100644 --- a/packages/react-components/react-button/src/index.ts +++ b/packages/react-components/react-button/src/index.ts @@ -40,3 +40,6 @@ export { export type { ToggleButtonProps, ToggleButtonState } from './ToggleButton'; export { useToggleState } from './utils/index'; + +export { ButtonContextProvider, useButtonContext } from './contexts/index'; +export type { ButtonContextValue } from './contexts/index'; From 09063949a5c16a88a27a9e5a5f547d77c92326fd Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Tue, 24 Jan 2023 13:49:01 +0000 Subject: [PATCH 2/3] chore: add comments to the API --- .../react-components/react-button/etc/react-button.api.md | 6 +++--- .../react-button/src/contexts/ButtonContext.ts | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md index a15eb9a0fa7c9..02c480a808bdc 100644 --- a/packages/react-components/react-button/etc/react-button.api.md +++ b/packages/react-components/react-button/etc/react-button.api.md @@ -20,10 +20,10 @@ export const Button: ForwardRefComponent; // @public (undocumented) export const buttonClassNames: SlotClassNames; -// @internal (undocumented) +// @internal export const ButtonContextProvider: React_2.Provider; -// @internal (undocumented) +// @internal export interface ButtonContextValue { // (undocumented) size?: ButtonSize; @@ -136,7 +136,7 @@ export type ToggleButtonState = ButtonState & Required) => ButtonState; -// @internal (undocumented) +// @internal export const useButtonContext: () => ButtonContextValue; // @public (undocumented) diff --git a/packages/react-components/react-button/src/contexts/ButtonContext.ts b/packages/react-components/react-button/src/contexts/ButtonContext.ts index da45df43ae94a..fd237b36ca2bf 100644 --- a/packages/react-components/react-button/src/contexts/ButtonContext.ts +++ b/packages/react-components/react-button/src/contexts/ButtonContext.ts @@ -5,6 +5,7 @@ const buttonContext = React.createContext(undefi /** * @internal + * Internal context value used to update default values between internal components */ export interface ButtonContextValue { size?: ButtonSize; @@ -14,10 +15,12 @@ const buttonContextDefaultValue: ButtonContextValue = {}; /** * @internal + * Internal context provider used to update default values between internal components */ export const ButtonContextProvider = buttonContext.Provider; /** * @internal + * Internal context hook used to update default values between internal components */ export const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue; From 3e14ad3a4704c933bb88eff2454e400beb9aaa20 Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Tue, 24 Jan 2023 19:16:23 -0300 Subject: [PATCH 3/3] Update packages/react-components/react-button/src/components/Button/useButton.ts Co-authored-by: Makoto Morimoto --- .../react-button/src/components/Button/useButton.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-button/src/components/Button/useButton.ts b/packages/react-components/react-button/src/components/Button/useButton.ts index b4aa97f0ae2fb..eb1899903c483 100644 --- a/packages/react-components/react-button/src/components/Button/useButton.ts +++ b/packages/react-components/react-button/src/components/Button/useButton.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import type { ButtonProps, ButtonState } from './Button.types'; import { useButtonContext } from '../../contexts/ButtonContext'; +import type { ButtonProps, ButtonState } from './Button.types'; /** * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.