@fluentui/react-badge 9.0.9 → 9.0.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/CHANGELOG.json +19 -4
  2. package/CHANGELOG.md +14 -5
  3. package/package.json +1 -1
  4. package/MIGRATION.md +0 -59
  5. package/Spec.md +0 -94
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 20 Oct 2022 08:35:03 GMT",
5
+ "date": "Tue, 25 Oct 2022 00:34:06 GMT",
6
+ "tag": "@fluentui/react-badge_v9.0.10",
7
+ "version": "9.0.10",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-badge",
13
+ "commit": "1420e05c305e7396bc62028ff2563d79fbc1cc70",
14
+ "comment": "chore: Migrate to new package structure."
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 20 Oct 2022 08:39:27 GMT",
6
21
  "tag": "@fluentui/react-badge_v9.0.9",
7
22
  "version": "9.0.9",
8
23
  "comments": {
@@ -23,19 +38,19 @@
23
38
  "author": "beachball",
24
39
  "package": "@fluentui/react-badge",
25
40
  "comment": "Bump @fluentui/react-theme to v9.1.1",
26
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
41
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
27
42
  },
28
43
  {
29
44
  "author": "beachball",
30
45
  "package": "@fluentui/react-badge",
31
46
  "comment": "Bump @fluentui/react-utilities to v9.1.2",
32
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
47
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
33
48
  },
34
49
  {
35
50
  "author": "beachball",
36
51
  "package": "@fluentui/react-badge",
37
52
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
38
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
53
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
39
54
  }
40
55
  ]
41
56
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,30 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Thu, 20 Oct 2022 08:35:03 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 25 Oct 2022 00:34:06 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.10)
8
+
9
+ Tue, 25 Oct 2022 00:34:06 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.9..@fluentui/react-badge_v9.0.10)
11
+
12
+ ### Patches
13
+
14
+ - chore: Migrate to new package structure. ([PR #25335](https://github.com/microsoft/fluentui/pull/25335) by tristan.watanabe@gmail.com)
15
+
7
16
  ## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.9)
8
17
 
9
- Thu, 20 Oct 2022 08:35:03 GMT
18
+ Thu, 20 Oct 2022 08:39:27 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.8..@fluentui/react-badge_v9.0.9)
11
20
 
12
21
  ### Patches
13
22
 
14
23
  - chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
15
24
  - chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
16
- - Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
17
- - Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
18
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
25
+ - Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
27
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
19
28
 
20
29
  ## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.8)
21
30
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "9.0.9",
3
+ "version": "9.0.10",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
package/MIGRATION.md DELETED
@@ -1,59 +0,0 @@
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/Spec.md DELETED
@@ -1,94 +0,0 @@
1
- # [Badge](https://github.com/microsoft/fluentui/issues/16925)
2
-
3
- ## Background
4
-
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
- ## Prior Art
8
-
9
- - [OpenUI Research](https://open-ui.org/components/badge.research)
10
-
11
- ## Sample Code
12
-
13
- ```jsx
14
- <Badge>
15
- My Custom Badge
16
- </Badge>
17
- <Badge
18
- style={{ position: 'absolute', top: -4, right: -4 }}
19
- />
20
- ```
21
-
22
- ## Variants
23
-
24
- `Badge` can have several variations.
25
-
26
- - Appearance: `default`, `rounded` and `circular`
27
- - Size: `tiny`, `extra-small`, `small`, `medium`, `large`, `extra-large`.
28
- - Styles: `filled`, `outline`, `ghost`, `tint`
29
-
30
- ## API
31
-
32
- ### Props
33
-
34
- See API at [Badge.types.ts](./src/components/Badge/Badge.types.ts).
35
-
36
- ## Structure
37
-
38
- - _**Public**_
39
-
40
- ```jsx
41
- <Badge />
42
- ```
43
-
44
- - _**Internal**_
45
-
46
- ```jsx
47
- <ElementType>{children}</ElementType>
48
- ```
49
-
50
- - _**DOM**_
51
-
52
- ```html
53
- <span class="ui-badge"> ... </span>
54
- ```
55
-
56
- ## Migration
57
-
58
- See [MIGRATION.md](./MIGRATION.md).
59
-
60
- ## Behaviors
61
-
62
- - Badges don't receive focus
63
-
64
- - Badge information would be surfaced as part of the control that it is associated with, badges themselves do not receive focus meaning they are not directly accessible by screenreaders.
65
- If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
66
-
67
- - Screen Readers
68
-
69
- - Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar.
70
- General guidance is that the badge icon is marked as “aria-hidden” by default.
71
-
72
- - Badge shouldn't rely only on color information
73
-
74
- - Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby
75
-
76
- ## Variants
77
-
78
- `Badge` is base component that can be used to create custom `Badge` such as `PresenceBadge` or `CounterBadge` with specific behaviors.
79
-
80
- ### Presence Badge
81
-
82
- A Presence Badge represents someone's availbility or status
83
-
84
- #### Props
85
-
86
- See API at [PresenceBadge.types.ts](./src/components/PresenceBadge/PresenceBadge.types.ts).
87
-
88
- ### Counter Badge
89
-
90
- A Counter Badge is a visual indicator for numeric values such as tallies and scores.
91
-
92
- #### Props
93
-
94
- See API at [CounterBadge.types.ts](./src/components/CounterBadge/CounterBadge.types.ts).