feat(react-button): creates ButtonContext

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -20,14 +20,23 @@ export const Button: ForwardRefComponent<ButtonProps>;
 // @public (undocumented)
 export const buttonClassNames: SlotClassNames<ButtonSlots>;
 
+// @internal
+export const ButtonContextProvider: React_2.Provider<ButtonContextValue | undefined>;
+
+// @internal
+export interface ButtonContextValue {
+    // (undocumented)
+    size?: ButtonSize;
+}
+
 // @public (undocumented)
 export type ButtonProps = ComponentProps<ButtonSlots> & {
     appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
     disabledFocusable?: boolean;
     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<Pick<ToggleButtonProps, '
 // @public
 export const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
 
+// @internal
+export const useButtonContext: () => ButtonContextValue;
+
 // @public (undocumented)
 export const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
 

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<ButtonSlots> & {
   /**
    * A button can have its content and borders styled for greater emphasis or to be subtle.
@@ -61,7 +66,7 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
    *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSize;
 };
 
 export type ButtonState = ComponentState<ButtonSlots> &

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { useButtonContext } from '../../contexts/ButtonContext';
 import type { ButtonProps, ButtonState } from './Button.types';
 
 /**
@@ -12,6 +13,7 @@ export const useButton_unstable = (
   props: ButtonProps,
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): 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);
 

packages/react-components/react-button/src/contexts/ButtonContext.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ButtonSize } from '../components/Button/Button.types';
+
+const buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);
+
+/**
+ * @internal
+ * Internal context value used to update default values between internal components
+ */
+export interface ButtonContextValue {
+  size?: ButtonSize;
+}
+
+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;

packages/react-components/react-button/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './ButtonContext';

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';