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

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 (44) hide show
  1. package/CHANGELOG.json +232 -1
  2. package/CHANGELOG.md +85 -2
  3. package/MIGRATION.md +59 -0
  4. package/README.md +40 -2
  5. package/Spec.md +11 -74
  6. package/dist/index.d.ts +3 -16
  7. package/lib/components/Badge/Badge.js.map +1 -1
  8. package/lib/components/Badge/renderBadge.js.map +1 -1
  9. package/lib/components/Badge/useBadge.js +0 -1
  10. package/lib/components/Badge/useBadge.js.map +1 -1
  11. package/lib/components/Badge/useBadgeStyles.js +119 -98
  12. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  13. package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
  14. package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
  15. package/lib/components/CounterBadge/useCounterBadgeStyles.js +0 -5
  16. package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  17. package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
  18. package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  19. package/lib/components/PresenceBadge/presenceIcons.js.map +1 -1
  20. package/lib/components/PresenceBadge/usePresenceBadge.js +12 -11
  21. package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  22. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +10 -6
  23. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  24. package/lib/index.js +3 -6
  25. package/lib/index.js.map +1 -1
  26. package/lib-commonjs/components/Badge/Badge.js.map +1 -1
  27. package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
  28. package/lib-commonjs/components/Badge/useBadge.js +0 -1
  29. package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
  30. package/lib-commonjs/components/Badge/useBadgeStyles.js +119 -98
  31. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  32. package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
  33. package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
  34. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +1 -6
  35. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  36. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
  37. package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -1
  38. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +12 -11
  39. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  40. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +11 -7
  41. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  42. package/lib-commonjs/index.js +1 -22
  43. package/lib-commonjs/index.js.map +1 -1
  44. package/package.json +7 -9
package/CHANGELOG.json CHANGED
@@ -2,7 +2,238 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 23 May 2022 12:10:27 GMT",
5
+ "date": "Thu, 14 Jul 2022 17:03:24 GMT",
6
+ "tag": "@fluentui/react-badge_v9.0.2",
7
+ "version": "9.0.2",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-badge",
13
+ "commit": "422636fffd66758c1a6dd617063582d902b61927",
14
+ "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
15
+ }
16
+ ],
17
+ "patch": [
18
+ {
19
+ "author": "behowell@microsoft.com",
20
+ "package": "@fluentui/react-badge",
21
+ "commit": "4cb5696dab3111890c3f50ddeb34450d945f0fa3",
22
+ "comment": "Fix font sizes, padding, and colors to align with visual design."
23
+ },
24
+ {
25
+ "author": "ololubek@microsoft.com",
26
+ "package": "@fluentui/react-badge",
27
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
28
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-badge",
33
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
34
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-badge",
39
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
40
+ "commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
41
+ }
42
+ ]
43
+ }
44
+ },
45
+ {
46
+ "date": "Tue, 28 Jun 2022 17:39:47 GMT",
47
+ "tag": "@fluentui/react-badge_v9.0.1",
48
+ "version": "9.0.1",
49
+ "comments": {
50
+ "patch": [
51
+ {
52
+ "author": "lingfangao@hotmail.com",
53
+ "package": "@fluentui/react-badge",
54
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
55
+ "comment": "fix: Use caret dependency range for Griffel"
56
+ },
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-badge",
60
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
61
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
62
+ }
63
+ ]
64
+ }
65
+ },
66
+ {
67
+ "date": "Tue, 28 Jun 2022 15:14:19 GMT",
68
+ "tag": "@fluentui/react-badge_v9.0.0",
69
+ "version": "9.0.0",
70
+ "comments": {
71
+ "none": [
72
+ {
73
+ "author": "gcox@microsoft.com",
74
+ "package": "@fluentui/react-badge",
75
+ "commit": "328f900d4308598b83cbf1fde4f83ea74024d620",
76
+ "comment": "docs: Updated badge descriptions to be specific."
77
+ },
78
+ {
79
+ "author": "mgodbolt@microsoft.com",
80
+ "package": "@fluentui/react-badge",
81
+ "commit": "1822a0c64a0106f41b2c8e6c3b00804f1c78d72a",
82
+ "comment": "chore: Change story entry point to index.stories.tsx"
83
+ }
84
+ ],
85
+ "patch": [
86
+ {
87
+ "author": "lingfangao@hotmail.com",
88
+ "package": "@fluentui/react-badge",
89
+ "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
90
+ "comment": "feat: Initial 9.0.0 release"
91
+ },
92
+ {
93
+ "author": "beachball",
94
+ "package": "@fluentui/react-badge",
95
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
96
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
97
+ },
98
+ {
99
+ "author": "beachball",
100
+ "package": "@fluentui/react-badge",
101
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
102
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
103
+ },
104
+ {
105
+ "author": "beachball",
106
+ "package": "@fluentui/react-badge",
107
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
108
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
109
+ }
110
+ ],
111
+ "prerelease": [
112
+ {
113
+ "author": "Humberto.Morimoto@microsoft.com",
114
+ "package": "@fluentui/react-badge",
115
+ "commit": "bd64779b7d68775260b587f10265d64b916f6140",
116
+ "comment": "README, spec and migration guide cleanup."
117
+ },
118
+ {
119
+ "author": "lingfangao@hotmail.com",
120
+ "package": "@fluentui/react-badge",
121
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
122
+ "comment": "Bump Griffel dependencies"
123
+ },
124
+ {
125
+ "author": "lingfangao@hotmail.com",
126
+ "package": "@fluentui/react-badge",
127
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
128
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
129
+ },
130
+ {
131
+ "author": "sarah.higley@microsoft.com",
132
+ "package": "@fluentui/react-badge",
133
+ "commit": "ba2c12557fea137cf744c65c296c0d50c06ed5ce",
134
+ "comment": "PresenceBadge accessibility: fix placement of aria-label, sort out Avatar usage and examples"
135
+ },
136
+ {
137
+ "author": "olfedias@microsoft.com",
138
+ "package": "@fluentui/react-badge",
139
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
140
+ "comment": "chore: Update @fluentui/react-icons to latest version"
141
+ }
142
+ ]
143
+ }
144
+ },
145
+ {
146
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
147
+ "tag": "@fluentui/react-badge_v9.0.0-rc.13",
148
+ "version": "9.0.0-rc.13",
149
+ "comments": {
150
+ "prerelease": [
151
+ {
152
+ "author": "beachball",
153
+ "package": "@fluentui/react-badge",
154
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
155
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
156
+ }
157
+ ]
158
+ }
159
+ },
160
+ {
161
+ "date": "Tue, 31 May 2022 21:28:36 GMT",
162
+ "tag": "@fluentui/react-badge_v9.0.0-rc.12",
163
+ "version": "9.0.0-rc.12",
164
+ "comments": {
165
+ "prerelease": [
166
+ {
167
+ "author": "olfedias@microsoft.com",
168
+ "package": "@fluentui/react-badge",
169
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
170
+ "comment": "chore: Update Griffel to latest version"
171
+ },
172
+ {
173
+ "author": "beachball",
174
+ "package": "@fluentui/react-badge",
175
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
176
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
177
+ },
178
+ {
179
+ "author": "beachball",
180
+ "package": "@fluentui/react-badge",
181
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
182
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
183
+ }
184
+ ]
185
+ }
186
+ },
187
+ {
188
+ "date": "Thu, 26 May 2022 21:01:22 GMT",
189
+ "tag": "@fluentui/react-badge_v9.0.0-rc.11",
190
+ "version": "9.0.0-rc.11",
191
+ "comments": {
192
+ "prerelease": [
193
+ {
194
+ "author": "mgodbolt@microsoft.com",
195
+ "package": "@fluentui/react-badge",
196
+ "commit": "7c773e3f3f4a8991fee6af46277504378dbdf197",
197
+ "comment": "remove aria-hidden from badge"
198
+ }
199
+ ]
200
+ }
201
+ },
202
+ {
203
+ "date": "Mon, 23 May 2022 18:56:41 GMT",
204
+ "tag": "@fluentui/react-badge_v9.0.0-rc.10",
205
+ "version": "9.0.0-rc.10",
206
+ "comments": {
207
+ "prerelease": [
208
+ {
209
+ "author": "esteban.230@hotmail.com",
210
+ "package": "@fluentui/react-badge",
211
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
212
+ "comment": "Removing <componentName>ClassName exports."
213
+ },
214
+ {
215
+ "author": "seanmonahan@microsoft.com",
216
+ "package": "@fluentui/react-badge",
217
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
218
+ "comment": "BREAKING: update string unions to use spinal-case"
219
+ },
220
+ {
221
+ "author": "beachball",
222
+ "package": "@fluentui/react-badge",
223
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
224
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
225
+ },
226
+ {
227
+ "author": "beachball",
228
+ "package": "@fluentui/react-badge",
229
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
230
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
231
+ }
232
+ ]
233
+ }
234
+ },
235
+ {
236
+ "date": "Mon, 23 May 2022 12:14:01 GMT",
6
237
  "tag": "@fluentui/react-badge_v9.0.0-rc.9",
7
238
  "version": "9.0.0-rc.9",
8
239
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,95 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Mon, 23 May 2022 12:10:27 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 14 Jul 2022 17:03:24 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.2)
8
+
9
+ Thu, 14 Jul 2022 17:03:24 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.1..@fluentui/react-badge_v9.0.2)
11
+
12
+ ### Patches
13
+
14
+ - Fix font sizes, padding, and colors to align with visual design. ([PR #23379](https://github.com/microsoft/fluentui/pull/23379) by behowell@microsoft.com)
15
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
16
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
18
+
19
+ ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.1)
20
+
21
+ Tue, 28 Jun 2022 17:39:47 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0..@fluentui/react-badge_v9.0.1)
23
+
24
+ ### Patches
25
+
26
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
27
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
28
+
29
+ ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0)
30
+
31
+ Tue, 28 Jun 2022 15:14:19 GMT
32
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.13..@fluentui/react-badge_v9.0.0)
33
+
34
+ ### Patches
35
+
36
+ - feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
37
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
38
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
39
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
40
+
41
+ ### Changes
42
+
43
+ - README, spec and migration guide cleanup. ([PR #23424](https://github.com/microsoft/fluentui/pull/23424) by Humberto.Morimoto@microsoft.com)
44
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
45
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
46
+ - 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)
47
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
48
+
49
+ ## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.13)
50
+
51
+ Thu, 23 Jun 2022 14:25:31 GMT
52
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.12..@fluentui/react-badge_v9.0.0-rc.13)
53
+
54
+ ### Changes
55
+
56
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
57
+
58
+ ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.12)
59
+
60
+ Tue, 31 May 2022 21:28:36 GMT
61
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.11..@fluentui/react-badge_v9.0.0-rc.12)
62
+
63
+ ### Changes
64
+
65
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
66
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
67
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
68
+
69
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.11)
70
+
71
+ Thu, 26 May 2022 21:01:22 GMT
72
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.10..@fluentui/react-badge_v9.0.0-rc.11)
73
+
74
+ ### Changes
75
+
76
+ - remove aria-hidden from badge ([PR #22858](https://github.com/microsoft/fluentui/pull/22858) by mgodbolt@microsoft.com)
77
+
78
+ ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.10)
79
+
80
+ Mon, 23 May 2022 18:56:41 GMT
81
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.9..@fluentui/react-badge_v9.0.0-rc.10)
82
+
83
+ ### Changes
84
+
85
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
86
+ - BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
87
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
88
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
89
+
7
90
  ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.9)
8
91
 
9
- Mon, 23 May 2022 12:10:27 GMT
92
+ Mon, 23 May 2022 12:14:01 GMT
10
93
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.8..@fluentui/react-badge_v9.0.0-rc.9)
11
94
 
12
95
  ### Changes
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://react.fluentui.dev/)**
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://react.fluentui.dev/) 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/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import type { ComponentProps } from '@fluentui/react-utilities';
2
4
  import type { ComponentState } from '@fluentui/react-utilities';
3
5
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -10,11 +12,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
10
12
  */
11
13
  export declare const Badge: ForwardRefComponent<BadgeProps>;
12
14
 
13
- /**
14
- * @deprecated Use `badgeClassNames.root` instead.
15
- */
16
- export declare const badgeClassName = "fui-Badge";
17
-
18
15
  export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
19
16
 
20
17
  export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
@@ -57,11 +54,6 @@ export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<Badg
57
54
  */
58
55
  export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
59
56
 
60
- /**
61
- * @deprecated Use `counterBadgeClassNames.root` instead.
62
- */
63
- export declare const counterBadgeClassName = "fui-CounterBadge";
64
-
65
57
  export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
66
58
 
67
59
  export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
@@ -112,11 +104,6 @@ export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color'
112
104
  */
113
105
  export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
114
106
 
115
- /**
116
- * @deprecated Use `presenceBadgeClassNames.root` instead.
117
- */
118
- export declare const presenceBadgeClassName = "fui-PresenceBadge";
119
-
120
107
  export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
121
108
 
122
109
  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
135
122
 
136
123
  export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
137
124
 
138
- export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
125
+ export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown';
139
126
 
140
127
  export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
141
128
 
@@ -1 +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/"}
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;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/"}
@@ -1 +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/"}
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;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/"}
@@ -23,7 +23,6 @@ export const useBadge_unstable = (props, ref) => {
23
23
  },
24
24
  root: getNativeElementProps('div', {
25
25
  ref,
26
- 'aria-hidden': true,
27
26
  ...props
28
27
  }),
29
28
  icon: resolveShorthand(props.icon)
@@ -1 +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/"}
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;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/"}