@fluentui/react-button 0.0.0-nightly-20220519-0420.1 → 0.0.0-nightly-20220525-0423.1

package/CHANGELOG.json

@@ -2,17 +2,103 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 19 May 2022 04:30:59 GMT",
-      "tag": "@fluentui/react-button_v0.0.0-nightly-20220519-0420.1",
-      "version": "0.0.0-nightly-20220519-0420.1",
+      "date": "Wed, 25 May 2022 04:35:47 GMT",
+      "tag": "@fluentui/react-button_v0.0.0-nightly-20220525-0423.1",
+      "version": "0.0.0-nightly-20220525-0423.1",
       "comments": {
         "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "cc2a9d0f9b722f68a54da026ab320e3be22c21dd",
+            "comment": "ToggleButton: Differentiating hover and checked styles."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "2c84c4f1ad43819325ee0aafa57d42a1f8239113",
+            "comment": "ToggleButton: Apply thicker border width to checked outline toggle buttons."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:41 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-rc.11",
+      "version": "9.0.0-rc.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
+            "comment": "Removing <componentName>ClassName exports."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
+            "comment": "Removing deprecated block prop from all button components."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ],
+        "none": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "aa1f446e037786d74a3c14f0bee09dbcf403a929",
+            "comment": "Improving README and updating spec and migration guide."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:14:03 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-rc.10",
+      "version": "9.0.0-rc.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "6cb084a7afe7d662dc2d9d65b91474f132566390",
+            "comment": "Using spacing tokens for button components."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "29f73d77cfdc20a123cb64115fb1a926300d216e",
+            "comment": "Removing flex gap from button components and fixing spacing to better align with design spec."
+          },
           {
             "author": "olfedias@microsoft.com",
             "package": "@fluentui/react-button",
             "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
             "comment": "chore: Update Griffel to latest version"
           },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
+            "comment": "chore: Update Griffel to latest version"
+          },
           {
             "author": "humberto_makoto@hotmail.com",
             "package": "@fluentui/react-button",
@@ -28,32 +114,32 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220519-0420.1",
-            "commit": "54a7d23bd4e12f3341618cd1bcac4c4367ed6168"
+            "comment": "Bump @fluentui/react-aria to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220519-0420.1",
-            "commit": "54a7d23bd4e12f3341618cd1bcac4c4367ed6168"
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220519-0420.1",
-            "commit": "54a7d23bd4e12f3341618cd1bcac4c4367ed6168"
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220519-0420.1",
-            "commit": "54a7d23bd4e12f3341618cd1bcac4c4367ed6168"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-button",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220519-0420.1",
-            "commit": "54a7d23bd4e12f3341618cd1bcac4c4367ed6168"
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,24 +1,50 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Thu, 19 May 2022 04:30:59 GMT and should not be manually modified.
+This log was last generated on Wed, 25 May 2022 04:35:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220519-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220519-0420.1)
+## [0.0.0-nightly-20220525-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220525-0423.1)
 
-Thu, 19 May 2022 04:30:59 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.9..@fluentui/react-button_v0.0.0-nightly-20220519-0420.1)
+Wed, 25 May 2022 04:35:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.11..@fluentui/react-button_v0.0.0-nightly-20220525-0423.1)
 
 ### Changes
 
+- ToggleButton: Differentiating hover and checked styles. ([PR #23209](https://github.com/microsoft/fluentui/pull/23209) by Humberto.Morimoto@microsoft.com)
+- ToggleButton: Apply thicker border width to checked outline toggle buttons. ([PR #23207](https://github.com/microsoft/fluentui/pull/23207) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.11)
+
+Mon, 23 May 2022 18:56:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.10..@fluentui/react-button_v9.0.0-rc.11)
+
+### Changes
+
+- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
+- Removing deprecated block prop from all button components. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.10)
+
+Mon, 23 May 2022 12:14:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.9..@fluentui/react-button_v9.0.0-rc.10)
+
+### Changes
+
+- Using spacing tokens for button components. ([PR #23076](https://github.com/microsoft/fluentui/pull/23076) by Humberto.Morimoto@microsoft.com)
+- Removing flex gap from button components and fixing spacing to better align with design spec. ([PR #23091](https://github.com/microsoft/fluentui/pull/23091) by Humberto.Morimoto@microsoft.com)
 - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
 - Removing Common types from all button components. ([PR #22904](https://github.com/microsoft/fluentui/pull/22904) by humberto_makoto@hotmail.com)
 - Removing ToggleButtonCommons type in @fluentui/react-button. ([PR #23067](https://github.com/microsoft/fluentui/pull/23067) by Humberto.Morimoto@microsoft.com)
-- Bump @fluentui/react-aria to v0.0.0-nightly-20220519-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/54a7d23bd4e12f3341618cd1bcac4c4367ed6168) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220519-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/54a7d23bd4e12f3341618cd1bcac4c4367ed6168) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220519-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/54a7d23bd4e12f3341618cd1bcac4c4367ed6168) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220519-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/54a7d23bd4e12f3341618cd1bcac4c4367ed6168) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220519-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/54a7d23bd4e12f3341618cd1bcac4c4367ed6168) by beachball)
+- Bump @fluentui/react-aria to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
 
 ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.9)
 

package/README.md

@@ -2,35 +2,97 @@
 
 **Button components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-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/index.d.ts

@@ -11,11 +11,6 @@ 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>;
 
 export declare type ButtonProps = ComponentProps<ButtonSlots> & {
@@ -30,13 +25,6 @@ export declare type ButtonProps = ComponentProps<ButtonSlots> & {
      * @default 'secondary'
      */
     appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
-    /**
-     * A button can fill the width of its container.
-     * @default false
-     *
-     * @deprecated - Use style overrides instead.
-     */
-    block?: boolean;
     /**
      * 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
@@ -82,7 +70,7 @@ export declare type ButtonSlots = {
     icon?: Slot<'span'>;
 };
 
-export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
+export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
     /**
      * A button can contain only an icon.
      *
@@ -96,14 +84,9 @@ export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<Bu
  */
 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>> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
+export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
 
 export declare type CompoundButtonSlots = ButtonSlots & {
     /**
@@ -119,18 +102,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> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
+export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
 
 export declare type MenuButtonSlots = ButtonSlots & {
     /**
@@ -164,16 +143,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'>;
@@ -200,11 +174,6 @@ 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>;
 
 export declare type ToggleButtonProps = ButtonProps & {

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 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   * 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   *\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<\n    Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>\n  > & {\n    /**\n     * A button can contain only an icon.\n     *\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/useButton.js

@@ -10,8 +10,6 @@ export const useButton_unstable = (props, ref) => {
   const {
     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;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;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 { 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    // 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;AACf,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;AAEJ,IAAA,EAFI;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,iBAAiB,GAAG,KAJhB;AAKJ,IAAA,IALI;AAMJ,IAAA,YAAY,GAAG,QANX;AAOJ,IAAA,KAAK,GAAG,SAPJ;AAQJ,IAAA,IAAI,GAAG;AARH,MASF,KATJ;AAUA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,QAHK;AAIL,IAAA,iBAJK;AAKL,IAAA,YALK;AAML,IAAA,KANK;AAOL,IAAA,IAPK;AASL;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,CAVZ;AAYL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAbP;AAkBL,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,CAlBtB;AA6BL,IAAA,IAAI,EAAE;AA7BD,GAAP;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/"}