@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.
- package/CHANGELOG.json +232 -1
- package/CHANGELOG.md +85 -2
- package/MIGRATION.md +59 -0
- package/README.md +40 -2
- package/Spec.md +11 -74
- package/dist/index.d.ts +3 -16
- package/lib/components/Badge/Badge.js.map +1 -1
- package/lib/components/Badge/renderBadge.js.map +1 -1
- package/lib/components/Badge/useBadge.js +0 -1
- package/lib/components/Badge/useBadge.js.map +1 -1
- package/lib/components/Badge/useBadgeStyles.js +119 -98
- package/lib/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +0 -5
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib/components/PresenceBadge/presenceIcons.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadge.js +12 -11
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +10 -6
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib/index.js +3 -6
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.js.map +1 -1
- package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadge.js +0 -1
- package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js +119 -98
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +1 -6
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +12 -11
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +11 -7
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -22
- package/lib-commonjs/index.js.map +1 -1
- 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": "
|
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
|
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:
|
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
|
-
**
|
3
|
+
**Badge components for [Fluent UI](https://react.fluentui.dev/)**
|
4
4
|
|
5
|
-
|
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
|
28
|
+
- Styles: `filled`, `outline`, `ghost`, `tint`
|
29
29
|
|
30
|
-
##
|
30
|
+
## API
|
31
31
|
|
32
|
-
|
33
|
-
type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
|
32
|
+
### Props
|
34
33
|
|
35
|
-
|
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
|
-
|
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
|
-
|
122
|
-
|
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
|
-
|
156
|
-
|
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' | '
|
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;
|
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;
|
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/"}
|
@@ -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;
|
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/"}
|