@fluentui/react-badge 0.0.0-nightly-20220603-0421.1 → 0.0.0-nightly-20220608-0420.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.json +15 -3
  2. package/CHANGELOG.md +6 -4
  3. package/MIGRATION.md +59 -0
  4. package/README.md +40 -2
  5. package/Spec.md +11 -74
  6. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,16 +2,28 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 03 Jun 2022 04:30:59 GMT",
6
- "tag": "@fluentui/react-badge_v0.0.0-nightly-20220603-0421.1",
7
- "version": "0.0.0-nightly-20220603-0421.1",
5
+ "date": "Wed, 08 Jun 2022 04:32:02 GMT",
6
+ "tag": "@fluentui/react-badge_v0.0.0-nightly-20220608-0420.1",
7
+ "version": "0.0.0-nightly-20220608-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-badge",
13
+ "commit": "bd64779b7d68775260b587f10265d64b916f6140",
14
+ "comment": "README, spec and migration guide cleanup."
15
+ },
10
16
  {
11
17
  "author": "sarah.higley@microsoft.com",
12
18
  "package": "@fluentui/react-badge",
13
19
  "commit": "ba2c12557fea137cf744c65c296c0d50c06ed5ce",
14
20
  "comment": "PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-badge",
25
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1",
26
+ "commit": "60b10ac54e8953147582e39ccf022ad0044d1733"
15
27
  }
16
28
  ]
17
29
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,19 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Fri, 03 Jun 2022 04:30:59 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 08 Jun 2022 04:32:02 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220603-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220603-0421.1)
7
+ ## [0.0.0-nightly-20220608-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220608-0420.1)
8
8
 
9
- Fri, 03 Jun 2022 04:30:59 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.12..@fluentui/react-badge_v0.0.0-nightly-20220603-0421.1)
9
+ Wed, 08 Jun 2022 04:32:02 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.12..@fluentui/react-badge_v0.0.0-nightly-20220608-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
+ - README, spec and migration guide cleanup. ([PR #23424](https://github.com/microsoft/fluentui/pull/23424) by Humberto.Morimoto@microsoft.com)
14
15
  - 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)
16
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220608-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/60b10ac54e8953147582e39ccf022ad0044d1733) by beachball)
15
17
 
16
18
  ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.12)
17
19
 
package/MIGRATION.md ADDED
@@ -0,0 +1,59 @@
1
+ # Badge Migration
2
+
3
+ ## Migration from v8
4
+
5
+ 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.
6
+
7
+ Here's how the API of v8's `PersonaCoin` compares to the one from v9's `PresenceBadge` component:
8
+
9
+ - `className` => `className`
10
+ - `coinProps` => Use native HTML props sent directly to `root` slot instead
11
+ - `coinSize` => `size`
12
+ - `componentRef` => NOT SUPPORTED - use `ref` instead
13
+ - `isOutOfOffice` => `outOfOffice`
14
+ - `onRenderPersonaCoin` => Use slots customization instead
15
+ - `presence` => `status`
16
+ - `presenceTitle` => NOT SUPPORTED
17
+ - `styles` => Use style customization through `className` instead
18
+
19
+ ## Migration from v0
20
+
21
+ 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.
22
+
23
+ Here's how the API of v0's `AvatarStatus` compares to the one from v9's `PresenceBadge` component:
24
+
25
+ - `accessibility` => NOT SUPPORTED
26
+ - `as` => `as`
27
+ - `className` => `className`
28
+ - `color` => Use style customization through `className` instead
29
+ - `design` => NOT SUPPORTED
30
+ - `icon` => Use `icon` slot
31
+ - `image` => NOT SUPPORTED
32
+ - `key` => NOT SUPPORTED
33
+ - `ref` => `ref`
34
+ - `size` => `size`
35
+ - `state` => `status`
36
+ - `styles` => Use style customization through `className` instead
37
+ - `variables` => NOT SUPPORTED
38
+
39
+ ## Property Mapping
40
+
41
+ | v8 `PersonaCoin` | v0 `AvatarStatus` | v9 `PresenceBadge` |
42
+ | --------------------- | ----------------- | ------------------ |
43
+ | | `acessibility` | |
44
+ | | `as` | `as` |
45
+ | `className` | `className` | `className` |
46
+ | `coinProps` | | `root` slot |
47
+ | `coinSize` | `size` | `size` |
48
+ | | `color` | |
49
+ | `componentRef` | `ref` | `ref` |
50
+ | | `design` | |
51
+ | | `icon` | `icon` slot |
52
+ | | `image` | |
53
+ | `isOutOfOffice` | | `outOfOffice` |
54
+ | | `key` | |
55
+ | `onRenderPersonaCoin` | | `root` slot |
56
+ | `presence` | `state` | `status` |
57
+ | `presenceTitle` | | |
58
+ | `styles` | `styles` | |
59
+ | | `variables` | |
package/README.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @fluentui/react-badge
2
2
 
3
- **React Badge components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
3
+ **Badge components for [Fluent UI](https://aka.ms/fluentui-storybook)**
4
4
 
5
- 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.
5
+ A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
6
+
7
+ ## Usage
8
+
9
+ To import Badge:
10
+
11
+ ```js
12
+ import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';
13
+ ```
14
+
15
+ ### Examples
16
+
17
+ ```jsx
18
+ <Badge>999+</Badge>
19
+ <Badge appearance="filled">999+</Badge>
20
+ <Badge shape="rounded" />
21
+ <Badge size="medium" icon={<PasteIcon />} />
22
+ <CounterBadge count={5} appearance="ghost" />
23
+ <CounterBadge count={0} dot />
24
+ <CounterBadge count={5} size="extra-large" />
25
+ <PresenceBadge status="available" />
26
+ <PresenceBadge status="away" />
27
+ <PresenceBadge outOfOffice status="do-not-disturb" />
28
+ ```
29
+
30
+ See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
31
+
32
+ Alternatively, run Storybook locally with:
33
+
34
+ 1. `yarn start`
35
+ 2. Select `react-badge` from the list.
36
+
37
+ ### Specification
38
+
39
+ See [SPEC.md](./SPEC.md).
40
+
41
+ ### Migration Guide
42
+
43
+ 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 CHANGED
@@ -25,44 +25,13 @@ A badge is an additional visual descriptor for UI elements. It can be used to de
25
25
 
26
26
  - Appearance: `default`, `rounded` and `circular`
27
27
  - Size: `tiny`, `extra-small`, `small`, `medium`, `large`, `extra-large`.
28
- - Styles: `filled`, `outline`, `ghost`, `tint`, `inverted filled`
28
+ - Styles: `filled`, `outline`, `ghost`, `tint`
29
29
 
30
- ## PROPS
30
+ ## API
31
31
 
32
- ```typescript
33
- type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
32
+ ### Props
34
33
 
35
- type BadgeShape = 'rounded' | 'square' | 'circular';
36
-
37
- type BadgeSize = 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
38
-
39
- type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
40
- /**
41
- * A Badge can be sized.
42
- */
43
- size?: BadgeSize;
44
-
45
- /**
46
- * A Badge can be square, circular or rounded
47
- */
48
- shape?: BadgeShape;
49
-
50
- /**
51
- * A Badge can be filled, outline, ghost, inverted
52
- */
53
- appearance?: BadgeAppearance;
54
-
55
- /**
56
- * Icon slot
57
- */
58
- icon?: ShorthandProps<HTMLElement>;
59
-
60
- /**
61
- * Position for Icon to be rendered
62
- */
63
- iconPosition?: 'before' | 'after';
64
- }
65
- ```
34
+ See API at [Badge.types.ts](./src/components/Badge/Badge.types.ts).
66
35
 
67
36
  ## Structure
68
37
 
@@ -86,13 +55,7 @@ type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
86
55
 
87
56
  ## Migration
88
57
 
89
- - _Migration from v8_
90
-
91
- `Badge` can be passed to `Avatar`'s `badge` slot. The `PresenceBadge` will be the best replacement for `Persona` presence mapping status, icon and colors.
92
-
93
- - _Migration from v0_
94
-
95
- `Badge` can be passed to `Avatar`'s `badge` slot.
58
+ See [MIGRATION.md](./MIGRATION.md).
96
59
 
97
60
  ## Behaviors
98
61
 
@@ -118,40 +81,14 @@ type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
118
81
 
119
82
  A Presence Badge represents someone's availbility or status
120
83
 
121
- ```typescript
122
- export type PresenceBadgeStatus = 'busy' | 'oof' | 'away' | 'available' | 'offline';
123
-
124
- export type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
125
- /**
126
- * A PresenceBadge can represent several status
127
- * @defaultvalue available
128
- */
129
- status?: PresenceBadgeStatus;
130
- /**
131
- * A PresenceBadge can represent status of someone out of the office
132
- * @defaultvalue true
133
- */
134
- inOffice?: boolean;
135
- };
136
-
137
- export type PresenceBadgeState = BadgeState & {
138
- /**
139
- * A PresenceBadge can represent several status
140
- * @defaultvalue available
141
- */
142
- status: PresenceBadgeStatus;
143
- /**
144
- * A PresenceBadge can represent status of someone out of the office
145
- * @defaultvalue true
146
- */
147
- inOffice: boolean;
148
- };
149
- ```
84
+ #### Props
85
+
86
+ See API at [PresenceBadge.types.ts](./src/components/PresenceBadge/PresenceBadge.types.ts).
150
87
 
151
88
  ### Counter Badge
152
89
 
153
90
  A Counter Badge is a visual indicator for numeric values such as tallies and scores.
154
91
 
155
- ```typescript
156
- export type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
157
- ```
92
+ #### Props
93
+
94
+ See API at [CounterBadge.types.ts](./src/components/CounterBadge/CounterBadge.types.ts).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "0.0.0-nightly-20220603-0421.1",
3
+ "version": "0.0.0-nightly-20220608-0420.1",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220603-0421.0",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220608-0420.0",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.166-rc.3",
36
36
  "@griffel/react": "1.1.0",
37
- "@fluentui/react-theme": "0.0.0-nightly-20220603-0421.0",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20220603-0421.0",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20220608-0420.0",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20220608-0420.1",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {