@fluentui/react-button 9.0.0-rc.7 → 9.0.0

package/README.md

@@ -1,36 +1,98 @@
 # @fluentui/react-button
 
-**Button components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**Button components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
 
-The Button component enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
-
-## STATUS: WIP 🚧
-
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+- Buttons enable users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+- CompoundButtons are buttons that can have secondary content that adds extra information to the user.
+- MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close menus.
+- SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary action, while interacting with the second one opens a menu with secondary actions.
+- ToggleButtons are buttons that toggle between two defined states when triggered.
 
 ## Usage
 
 To import Button:
 
 ```js
-import { Button } from '@fluentui/react-button';
+import { Button, CompoundButton, MenuButton, SplitButton, ToggleButton } from '@fluentui/react-components';
 ```
 
-Once the Button component graduates to a production release, the component will be available at:
+### Examples
 
-```js
-import { Button } from '@fluentui/react-components';
+### Button
+
+```jsx
+<Button>Submit</Button>
+<Button icon={<SVGIcon />} />
+<Button icon={<SVGIcon />}>Submit</Button>
+<Button icon={<SVGIcon />} iconPosition="after">Submit</Button>
+<Button appearance="primary">Submit</Button>
+<Button disabled>Submit</Button>
+<Button size="small">Submit</Button>
+<Button size="large">Submit</Button>
 ```
 
-### Examples
+### CompoundButton
 
 ```jsx
-<Button>Text</Button>
-<Button icon={<SVGIcon />} />
-<Button icon={<SVGIcon />}>Text</Button>
-<Button icon={<SVGIcon />} iconPosition="after">Text</Button>
-<Button primary>Text</Button>
-<Button disabled>Text</Button>
-<Button size="small">Text</Button>
-<Button size="large">Text</Button>
+<CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
+  Example
+</CompoundButton>
+```
+
+### MenuButton
+
+```jsx
+<Menu>
+  <MenuTrigger>
+    <MenuButton>Example</MenuButton>
+  </MenuTrigger>
+
+  <MenuPopover>
+    <MenuList>
+      <MenuItem>Item a</MenuItem>
+      <MenuItem>Item b</MenuItem>
+    </MenuList>
+  </MenuPopover>
+</Menu>
+```
+
+### SplitButton
+
+```jsx
+<Menu positioning="below-end">
+  <MenuTrigger>
+    {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
+  </MenuTrigger>
+
+  <MenuPopover>
+    <MenuList>
+      <MenuItem>Item a</MenuItem>
+      <MenuItem>Item b</MenuItem>
+    </MenuList>
+  </MenuPopover>
+</Menu>
+```
+
+### ToggleButton
+
+```jsx
+<ToggleButton>Toggle volume</ToggleButton>
+<ToggleButton defaultChecked={true}>Toggle volume</ToggleButton>
+<ToggleButton checked={true}>Toggle volume</ToggleButton>
+<ToggleButton checked={false}>Toggle volume</ToggleButton>
 ```
+
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-button` from the list.
+
+### Specification
+
+See [SPEC.md](./src/components/Button/SPEC.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./src/components/Button/MIGRATION.md) for guidance on updating to the latest component implementations.

package/dist/{react-button.d.ts → index.d.ts}

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
@@ -11,60 +13,54 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Button: ForwardRefComponent<ButtonProps>;
 
-/**
- * @deprecated Use `buttonClassNames.root` instead.
- */
-export declare const buttonClassName: string;
-
 export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
 
-declare type ButtonCommons = {
+export declare type ButtonProps = ComponentProps<ButtonSlots> & {
     /**
      * A button can have its content and borders styled for greater emphasis or to be subtle.
+     * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.
      * - 'primary': Emphasizes the button as a primary action.
      * - 'outline': Removes background styling.
      * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
      * - 'transparent': Removes background and border styling.
-     */
-    appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';
-    /**
-     * A button can fill the width of its container.
-     * @default false
      *
-     * @deprecated - Use style overrides instead.
+     * @default 'secondary'
      */
-    block: boolean;
+    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
     /**
      * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
      * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this
      * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.
+     *
      * @default false
      */
-    disabledFocusable: boolean;
+    disabledFocusable?: boolean;
     /**
      * A button can show that it cannot be interacted with.
+     *
      * @default false
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * A button can format its icon to appear before or after its content.
+     *
      * @default 'before'
      */
     iconPosition?: 'before' | 'after';
     /**
      * A button can be rounded, circular, or square.
+     *
      * @default 'rounded'
      */
-    shape: 'rounded' | 'circular' | 'square';
+    shape?: 'rounded' | 'circular' | 'square';
     /**
      * A button supports different sizes.
+     *
      * @default 'medium'
      */
-    size: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
 };
 
-export declare type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;
-
 export declare type ButtonSlots = {
     /**
      * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
@@ -76,9 +72,10 @@ export declare type ButtonSlots = {
     icon?: Slot<'span'>;
 };
 
-export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
+export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
     /**
      * A button can contain only an icon.
+     *
      * @default false
      */
     iconOnly: boolean;
@@ -89,14 +86,9 @@ export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons &
  */
 export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-/**
- * @deprecated Use `compoundButtonClassName.root` instead.
- */
-export declare const compoundButtonClassName: string;
-
 export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
 
-export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
+export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
 
 export declare type CompoundButtonSlots = ButtonSlots & {
     /**
@@ -112,18 +104,14 @@ export declare type CompoundButtonSlots = ButtonSlots & {
 export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
 
 /**
- * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
+ * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
+ * menus.
  */
 export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-/**
- * @deprecated Use `menuButtonClassName.root` instead.
- */
-export declare const menuButtonClassName: string;
-
 export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
 
-export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
+export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
 
 export declare type MenuButtonSlots = ButtonSlots & {
     /**
@@ -157,16 +145,11 @@ export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.
 export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
 
 /**
- * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
  * action, while interacting with the second one opens a menu with secondary actions.
  */
 export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-/**
- * @deprecated Use `splitButtonClassName.root` instead.
- */
-export declare const splitButtonClassName: string;
-
 export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
 export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
@@ -193,33 +176,27 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
  */
 export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-/**
- * @deprecated Use `toggleButtonClassName.root` instead.
- */
-export declare const toggleButtonClassName: string;
-
 export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
 
-declare type ToggleButtonCommons = {
+export declare type ToggleButtonProps = ButtonProps & {
+    /**
+     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
     /**
      * Defines the controlled checked state of the `ToggleButton`.
      * If passed, `ToggleButton` ignores the `defaultChecked` property.
      * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
      * correct value based on handling `onClick` events and re-rendering.
+     *
      * @default false
      */
-    checked: boolean;
-};
-
-export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommons> & {
-    /**
-     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
-     * @default false
-     */
-    defaultChecked?: boolean;
+    checked?: boolean;
 };
 
-export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
+export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;
 
 /**
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"],"sourceRoot":"../src/"}

package/lib/components/Button/Button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\nexport type ButtonCommons = {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   */\n  appearance?: 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * A button can fill the width of its container.\n   * @default false\n   *\n   * @deprecated - Use style overrides instead.\n   */\n  block: boolean;\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   * @default false\n   */\n  disabledFocusable: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   * @default false\n   */\n  disabled: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   * @default 'rounded'\n   */\n  shape: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   * @default 'medium'\n   */\n  size: 'small' | 'medium' | 'large';\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & Partial<ButtonCommons>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  ButtonCommons & {\n    /**\n     * A button can contain only an icon.\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n"]}
+{"version":3,"file":"Button.types.js","sourceRoot":"../src/","sources":["components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n"]}

package/lib/components/Button/index.js

@@ -1,7 +1,5 @@
 export * from './Button';
 export * from './renderButton';
 export * from './useButton';
-export {
-/* eslint-disable-next-line deprecation/deprecation */
-buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
+export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AAGA,cAAc,gBAAd;AACA,cAAc,aAAd;AACA;AACE;AACA,eAFF,EAGE,gBAHF,EAIE,wBAJF,QAKO,mBALP","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport {\n  /* eslint-disable-next-line deprecation/deprecation */\n  buttonClassName,\n  buttonClassNames,\n  useButtonStyles_unstable,\n} from './useButtonStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"]}

package/lib/components/Button/renderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA6B,KAAnC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAH7C,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Button/useButton.js

@@ -8,10 +8,8 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
 
 export const useButton_unstable = (props, ref) => {
   const {
-    appearance,
+    appearance = 'secondary',
     as,
-    // eslint-disable-next-line deprecation/deprecation
-    block = false,
     disabled = false,
     disabledFocusable = false,
     icon,
@@ -23,7 +21,6 @@ export const useButton_unstable = (props, ref) => {
   return {
     // Props passed at the top-level
     appearance,
-    block,
     disabled,
     disabledFocusable,
     iconPosition,

package/lib/components/Button/useButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ;AACA,IAAA,KAAK,GAAG,KAJJ;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,KAAK,GAAG,SATJ;AAUJ,IAAA,IAAI,GAAG;AAVH,MAWF,KAXJ;AAYA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAlDM","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const {\n    appearance,\n    as,\n    // eslint-disable-next-line deprecation/deprecation\n    block = false,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    block,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as || 'button',\n      useARIAButton<ARIAButtonSlotProps>(props, {\n        required: true,\n        defaultProps: {\n          // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n          ref: ref as React.Ref<HTMLButtonElement>,\n          type: 'button', // This is added because the default for type is 'submit'\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;EACf,MAAM;IACJ,UAAU,GAAG,WADT;IAEJ,EAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,iBAAiB,GAAG,KAJhB;IAKJ,IALI;IAMJ,YAAY,GAAG,QANX;IAOJ,KAAK,GAAG,SAPJ;IAQJ,IAAI,GAAG;EARH,IASF,KATJ;EAUA,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;EAEA,OAAO;IACL;IACA,UAFK;IAGL,QAHK;IAIL,iBAJK;IAKL,YALK;IAML,KANK;IAOL,IAPK;IASL;IACA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAVZ;IAYL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,QADI;MAEV,IAAI,EAAE;IAFI,CAbP;IAkBL,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;MACxC,QAAQ,EAAE,IAD8B;MAExC,YAAY,EAAE;QACZ;QACA,GAAG,EAAE,GAFO;QAGZ,IAAI,EAAE,QAHM,CAGI;;MAHJ;IAF0B,CAA7B,CAFY,CAlBtB;IA6BL,IAAI,EAAE;EA7BD,CAAP;AA+BD,CA/CM","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const {\n    appearance = 'secondary',\n    as,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as || 'button',\n      useARIAButton<ARIAButtonSlotProps>(props, {\n        required: true,\n        defaultProps: {\n          // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n          ref: ref as React.Ref<HTMLButtonElement>,\n          type: 'button', // This is added because the default for type is 'submit'\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}