@fluentui/react-badge 0.0.0-nightly-20221021-0420.1 → 0.0.0-nightly-20221025-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.
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 21 Oct 2022 04:25:55 GMT",
6
- "tag": "@fluentui/react-badge_v0.0.0-nightly-20221021-0420.1",
7
- "version": "0.0.0-nightly-20221021-0420.1",
5
+ "date": "Tue, 25 Oct 2022 04:26:09 GMT",
6
+ "tag": "@fluentui/react-badge_v0.0.0-nightly-20221025-0420.1",
7
+ "version": "0.0.0-nightly-20221025-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,20 +16,35 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-badge",
19
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221021-0420.1",
20
- "commit": "63947a2652a1c4460316ca3718be60e30c477eea"
19
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221025-0420.1",
20
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-badge",
25
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221021-0420.1",
26
- "commit": "63947a2652a1c4460316ca3718be60e30c477eea"
25
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221025-0420.1",
26
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-badge",
31
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221021-0420.1",
32
- "commit": "63947a2652a1c4460316ca3718be60e30c477eea"
31
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221025-0420.1",
32
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Tue, 25 Oct 2022 00:35:28 GMT",
39
+ "tag": "@fluentui/react-badge_v9.0.10",
40
+ "version": "9.0.10",
41
+ "comments": {
42
+ "patch": [
43
+ {
44
+ "author": "tristan.watanabe@gmail.com",
45
+ "package": "@fluentui/react-badge",
46
+ "commit": "1420e05c305e7396bc62028ff2563d79fbc1cc70",
47
+ "comment": "chore: Migrate to new package structure."
33
48
  }
34
49
  ]
35
50
  }
package/CHANGELOG.md CHANGED
@@ -1,20 +1,29 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Fri, 21 Oct 2022 04:25:55 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 25 Oct 2022 04:26:09 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221021-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20221021-0420.1)
7
+ ## [0.0.0-nightly-20221025-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20221025-0420.1)
8
8
 
9
- Fri, 21 Oct 2022 04:25:55 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.9..@fluentui/react-badge_v0.0.0-nightly-20221021-0420.1)
9
+ Tue, 25 Oct 2022 04:26:09 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.10..@fluentui/react-badge_v0.0.0-nightly-20221025-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221021-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/63947a2652a1c4460316ca3718be60e30c477eea) by beachball)
16
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221021-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/63947a2652a1c4460316ca3718be60e30c477eea) by beachball)
17
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221021-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/63947a2652a1c4460316ca3718be60e30c477eea) by beachball)
15
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
16
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
18
+
19
+ ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.10)
20
+
21
+ Tue, 25 Oct 2022 00:35:28 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.9..@fluentui/react-badge_v9.0.10)
23
+
24
+ ### Patches
25
+
26
+ - chore: Migrate to new package structure. ([PR #25335](https://github.com/microsoft/fluentui/pull/25335) by tristan.watanabe@gmail.com)
18
27
 
19
28
  ## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.9)
20
29
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "0.0.0-nightly-20221021-0420.1",
3
+ "version": "0.0.0-nightly-20221025-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-20221021-0420.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221025-0420.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.175",
36
36
  "@griffel/react": "^1.4.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20221021-0420.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20221021-0420.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20221025-0420.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20221025-0420.1",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
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).