@fluentui/react-badge 9.0.0-rc.9 → 9.0.2

package/CHANGELOG.json

@@ -2,7 +2,238 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Mon, 23 May 2022 12:10:27 GMT",
+      "date": "Thu, 14 Jul 2022 17:03:24 GMT",
+      "tag": "@fluentui/react-badge_v9.0.2",
+      "version": "9.0.2",
+      "comments": {
+        "none": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "422636fffd66758c1a6dd617063582d902b61927",
+            "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
+          }
+        ],
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "4cb5696dab3111890c3f50ddeb34450d945f0fa3",
+            "comment": "Fix font sizes, padding, and colors to align with visual design."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
+            "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
+            "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 17:39:47 GMT",
+      "tag": "@fluentui/react-badge_v9.0.1",
+      "version": "9.0.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
+            "comment": "fix: Use caret dependency range for Griffel"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
+            "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 15:14:19 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "none": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "328f900d4308598b83cbf1fde4f83ea74024d620",
+            "comment": "docs: Updated badge descriptions to be specific."
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "1822a0c64a0106f41b2c8e6c3b00804f1c78d72a",
+            "comment": "chore: Change story entry point to index.stories.tsx"
+          }
+        ],
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
+            "comment": "feat: Initial 9.0.0 release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "bd64779b7d68775260b587f10265d64b916f6140",
+            "comment": "README, spec and migration guide cleanup."
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
+            "comment": "Bump Griffel dependencies"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
+            "comment": "Update 9.0.0-rc dependencies to use caret range"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "ba2c12557fea137cf744c65c296c0d50c06ed5ce",
+            "comment": "PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
+            "comment": "chore: Update @fluentui/react-icons to latest version"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 14:25:31 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.13",
+      "version": "9.0.0-rc.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
+            "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 May 2022 21:28:36 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.12",
+      "version": "9.0.0-rc.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 May 2022 21:01:22 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.11",
+      "version": "9.0.0-rc.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "7c773e3f3f4a8991fee6af46277504378dbdf197",
+            "comment": "remove aria-hidden from badge"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:41 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.10",
+      "version": "9.0.0-rc.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
+            "comment": "Removing <componentName>ClassName exports."
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
+            "comment": "BREAKING: update string unions to use spinal-case"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:14:01 GMT",
       "tag": "@fluentui/react-badge_v9.0.0-rc.9",
       "version": "9.0.0-rc.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,95 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Mon, 23 May 2022 12:10:27 GMT and should not be manually modified.
+This log was last generated on Thu, 14 Jul 2022 17:03:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.2)
+
+Thu, 14 Jul 2022 17:03:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.1..@fluentui/react-badge_v9.0.2)
+
+### Patches
+
+- Fix font sizes, padding, and colors to align with visual design. ([PR #23379](https://github.com/microsoft/fluentui/pull/23379) by behowell@microsoft.com)
+- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
+
+## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.1)
+
+Tue, 28 Jun 2022 17:39:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0..@fluentui/react-badge_v9.0.1)
+
+### Patches
+
+- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0)
+
+Tue, 28 Jun 2022 15:14:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.13..@fluentui/react-badge_v9.0.0)
+
+### Patches
+
+- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
+### Changes
+
+- README, spec and migration guide cleanup. ([PR #23424](https://github.com/microsoft/fluentui/pull/23424) by Humberto.Morimoto@microsoft.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples ([PR #23256](https://github.com/microsoft/fluentui/pull/23256) by sarah.higley@microsoft.com)
+- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
+
+## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.13)
+
+Thu, 23 Jun 2022 14:25:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.12..@fluentui/react-badge_v9.0.0-rc.13)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
+
+## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.12)
+
+Tue, 31 May 2022 21:28:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.11..@fluentui/react-badge_v9.0.0-rc.12)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+
+## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.11)
+
+Thu, 26 May 2022 21:01:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.10..@fluentui/react-badge_v9.0.0-rc.11)
+
+### Changes
+
+- remove aria-hidden from badge ([PR #22858](https://github.com/microsoft/fluentui/pull/22858) by mgodbolt@microsoft.com)
+
+## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.10)
+
+Mon, 23 May 2022 18:56:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.9..@fluentui/react-badge_v9.0.0-rc.10)
+
+### Changes
+
+- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
+- BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
+- 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.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.9)
 
-Mon, 23 May 2022 12:10:27 GMT 
+Mon, 23 May 2022 12:14:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.8..@fluentui/react-badge_v9.0.0-rc.9)
 
 ### Changes

package/MIGRATION.md

@@ -0,0 +1,59 @@
+# Badge Migration
+
+## Migration from v8
+
+v8 does not offer a component equivalent to v9's `Badge`. However, it does offer a `PersonaCoin` component that is similar in concept to v9's `PresenceBadge` component.
+
+Here's how the API of v8's `PersonaCoin` compares to the one from v9's `PresenceBadge` component:
+
+- `className` => `className`
+- `coinProps` => Use native HTML props sent directly to `root` slot instead
+- `coinSize` => `size`
+- `componentRef` => NOT SUPPORTED - use `ref` instead
+- `isOutOfOffice` => `outOfOffice`
+- `onRenderPersonaCoin` => Use slots customization instead
+- `presence` => `status`
+- `presenceTitle` => NOT SUPPORTED
+- `styles` => Use style customization through `className` instead
+
+## Migration from v0
+
+v0 does not offer a component equivalent to v9's `Badge`. However, it does offer an `AvatarStatus` component that is similar in concept to v9's `PresenceBadge` component.
+
+Here's how the API of v0's `AvatarStatus` compares to the one from v9's `PresenceBadge` component:
+
+- `accessibility` => NOT SUPPORTED
+- `as` => `as`
+- `className` => `className`
+- `color` => Use style customization through `className` instead
+- `design` => NOT SUPPORTED
+- `icon` => Use `icon` slot
+- `image` => NOT SUPPORTED
+- `key` => NOT SUPPORTED
+- `ref` => `ref`
+- `size` => `size`
+- `state` => `status`
+- `styles` => Use style customization through `className` instead
+- `variables` => NOT SUPPORTED
+
+## Property Mapping
+
+| v8 `PersonaCoin`      | v0 `AvatarStatus` | v9 `PresenceBadge` |
+| --------------------- | ----------------- | ------------------ |
+|                       | `acessibility`    |                    |
+|                       | `as`              | `as`               |
+| `className`           | `className`       | `className`        |
+| `coinProps`           |                   | `root` slot        |
+| `coinSize`            | `size`            | `size`             |
+|                       | `color`           |                    |
+| `componentRef`        | `ref`             | `ref`              |
+|                       | `design`          |                    |
+|                       | `icon`            | `icon` slot        |
+|                       | `image`           |                    |
+| `isOutOfOffice`       |                   | `outOfOffice`      |
+|                       | `key`             |                    |
+| `onRenderPersonaCoin` |                   | `root` slot        |
+| `presence`            | `state`           | `status`           |
+| `presenceTitle`       |                   |                    |
+| `styles`              | `styles`          |                    |
+|                       | `variables`       |                    |

package/README.md

@@ -1,5 +1,43 @@
 # @fluentui/react-badge
 
-**React Badge components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**Badge components for [Fluent UI](https://react.fluentui.dev/)**
 
-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.
+A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
+
+## Usage
+
+To import Badge:
+
+```js
+import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+<Badge>999+</Badge>
+<Badge appearance="filled">999+</Badge>
+<Badge shape="rounded" />
+<Badge size="medium" icon={<PasteIcon />} />
+<CounterBadge count={5} appearance="ghost" />
+<CounterBadge count={0} dot />
+<CounterBadge count={5} size="extra-large" />
+<PresenceBadge status="available" />
+<PresenceBadge status="away" />
+<PresenceBadge outOfOffice status="do-not-disturb" />
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-badge` from the list.
+
+### Specification
+
+See [SPEC.md](./SPEC.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Badge component implementations.

package/Spec.md

@@ -25,44 +25,13 @@ A badge is an additional visual descriptor for UI elements. It can be used to de
 
 - Appearance: `default`, `rounded` and `circular`
 - Size: `tiny`, `extra-small`, `small`, `medium`, `large`, `extra-large`.
-- Styles: `filled`, `outline`, `ghost`, `tint`, `inverted filled`
+- Styles: `filled`, `outline`, `ghost`, `tint`
 
-## PROPS
+## API
 
-```typescript
-type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
+### Props
 
-type BadgeShape = 'rounded' | 'square' | 'circular';
-
-type BadgeSize = 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
-
-type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * A Badge can be sized.
-   */
-  size?: BadgeSize;
-
-  /**
-   * A Badge can be square, circular or rounded
-   */
-  shape?: BadgeShape;
-
-  /**
-   * A Badge can be filled, outline, ghost, inverted
-   */
-  appearance?: BadgeAppearance;
-
-  /**
-   * Icon slot
-   */
-  icon?: ShorthandProps<HTMLElement>;
-
-  /**
-   * Position for Icon to be rendered
-   */
-  iconPosition?: 'before' | 'after';
-}
-```
+See API at [Badge.types.ts](./src/components/Badge/Badge.types.ts).
 
 ## Structure
 
@@ -86,13 +55,7 @@ type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
 
 ## Migration
 
-- _Migration from v8_
-
-`Badge` can be passed to `Avatar`'s `badge` slot. The `PresenceBadge` will be the best replacement for `Persona` presence mapping status, icon and colors.
-
-- _Migration from v0_
-
-`Badge` can be passed to `Avatar`'s `badge` slot.
+See [MIGRATION.md](./MIGRATION.md).
 
 ## Behaviors
 
@@ -118,40 +81,14 @@ type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
 
 A Presence Badge represents someone's availbility or status
 
-```typescript
-export type PresenceBadgeStatus = 'busy' | 'oof' | 'away' | 'available' | 'offline';
-
-export type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
-  /**
-   * A PresenceBadge can represent several status
-   * @defaultvalue available
-   */
-  status?: PresenceBadgeStatus;
-  /**
-   * A PresenceBadge can represent status of someone out of the office
-   * @defaultvalue true
-   */
-  inOffice?: boolean;
-};
-
-export type PresenceBadgeState = BadgeState & {
-  /**
-   * A PresenceBadge can represent several status
-   * @defaultvalue available
-   */
-  status: PresenceBadgeStatus;
-  /**
-   * A PresenceBadge can represent status of someone out of the office
-   * @defaultvalue true
-   */
-  inOffice: boolean;
-};
-```
+#### Props
+
+See API at [PresenceBadge.types.ts](./src/components/PresenceBadge/PresenceBadge.types.ts).
 
 ### Counter Badge
 
 A Counter Badge is a visual indicator for numeric values such as tallies and scores.
 
-```typescript
-export type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
-```
+#### Props
+
+See API at [CounterBadge.types.ts](./src/components/CounterBadge/CounterBadge.types.ts).

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -10,11 +12,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Badge: ForwardRefComponent<BadgeProps>;
 
-/**
- * @deprecated Use `badgeClassNames.root` instead.
- */
-export declare const badgeClassName = "fui-Badge";
-
 export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
 
 export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
@@ -57,11 +54,6 @@ export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<Badg
  */
 export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
-/**
- * @deprecated Use `counterBadgeClassNames.root` instead.
- */
-export declare const counterBadgeClassName = "fui-CounterBadge";
-
 export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
 
 export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
@@ -112,11 +104,6 @@ export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color'
  */
 export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
-/**
- * @deprecated Use `presenceBadgeClassNames.root` instead.
- */
-export declare const presenceBadgeClassName = "fui-PresenceBadge";
-
 export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
 
 export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> & Pick<BadgeProps, 'size'> & {
@@ -135,7 +122,7 @@ export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'r
 
 export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
 
-export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
+export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown';
 
 export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
 

package/lib/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":"../src/"}

package/lib/components/Badge/renderBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAHnD,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAHnD,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Badge/useBadge.js

@@ -23,7 +23,6 @@ export const useBadge_unstable = (props, ref) => {
     },
     root: getNativeElementProps('div', {
       ref,
-      'aria-hidden': true,
       ...props
     }),
     icon: resolveShorthand(props.icon)

package/lib/components/Badge/useBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,IAAI,GAAG,QAFH;AAGJ,IAAA,YAAY,GAAG,QAHX;AAIJ,IAAA,UAAU,GAAG,QAJT;AAKJ,IAAA,KAAK,GAAG;AALJ,MAMF,KANJ;AAQA,QAAM,KAAK,GAAe;AACxB,IAAA,KADwB;AAExB,IAAA,IAFwB;AAGxB,IAAA,YAHwB;AAIxB,IAAA,UAJwB;AAKxB,IAAA,KALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KANY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,qBAAe,IAFkB;AAGjC,SAAG;AAH8B,KAAR,CAVH;AAexB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAfE,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      'aria-hidden': true,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,IAAI,GAAG,QAFH;IAGJ,YAAY,GAAG,QAHX;IAIJ,UAAU,GAAG,QAJT;IAKJ,KAAK,GAAG;EALJ,IAMF,KANJ;EAQA,MAAM,KAAK,GAAe;IACxB,KADwB;IAExB,IAFwB;IAGxB,YAHwB;IAIxB,UAJwB;IAKxB,KALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CANY;IAUxB,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAVH;IAcxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;EAdE,CAA1B;EAiBA,OAAO,KAAP;AACD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}