@fluentui/react-badge 0.0.0-nightly-20220511-0419.1 → 0.0.0-nightly-20220516-0419.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 +18 -12
- package/CHANGELOG.md +9 -8
- package/dist/index.d.ts +35 -38
- package/lib/components/Badge/Badge.types.d.ts +7 -8
- package/lib/components/Badge/Badge.types.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.types.d.ts +23 -22
- package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadge.js +1 -2
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +6 -8
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.types.d.ts +7 -8
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +23 -22
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js +1 -2
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +6 -8
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,34 +2,40 @@
|
|
|
2
2
|
"name": "@fluentui/react-badge",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-badge_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 16 May 2022 04:32:41 GMT",
|
|
6
|
+
"tag": "@fluentui/react-badge_v0.0.0-nightly-20220516-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220516-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
|
-
"author": "
|
|
11
|
+
"author": "sarah.higley@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-badge",
|
|
13
|
+
"commit": "3c97b3754e1f5f77672c3ceb9886de43a462ccb6",
|
|
14
|
+
"comment": "remove commons types from badges"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
12
18
|
"package": "@fluentui/react-badge",
|
|
13
|
-
"commit": "
|
|
14
|
-
"comment": "
|
|
19
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
21
|
},
|
|
16
22
|
{
|
|
17
23
|
"author": "beachball",
|
|
18
24
|
"package": "@fluentui/react-badge",
|
|
19
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220516-0419.1",
|
|
26
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
21
27
|
},
|
|
22
28
|
{
|
|
23
29
|
"author": "beachball",
|
|
24
30
|
"package": "@fluentui/react-badge",
|
|
25
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220516-0419.1",
|
|
32
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
27
33
|
},
|
|
28
34
|
{
|
|
29
35
|
"author": "beachball",
|
|
30
36
|
"package": "@fluentui/react-badge",
|
|
31
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220516-0419.1",
|
|
38
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
33
39
|
}
|
|
34
40
|
]
|
|
35
41
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-badge
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 16 May 2022 04:32:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220516-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220516-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.8..@fluentui/react-badge_v0.0.0-nightly-
|
|
9
|
+
Mon, 16 May 2022 04:32:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.8..@fluentui/react-badge_v0.0.0-nightly-20220516-0419.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
- Bump @fluentui/react-
|
|
17
|
-
- Bump @fluentui/react-
|
|
14
|
+
- remove commons types from badges ([PR #22868](https://github.com/microsoft/fluentui/pull/22868) by sarah.higley@microsoft.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
18
19
|
|
|
19
20
|
## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.8)
|
|
20
21
|
|
package/dist/index.d.ts
CHANGED
|
@@ -17,42 +17,40 @@ export declare const badgeClassName = "fui-Badge";
|
|
|
17
17
|
|
|
18
18
|
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
|
|
19
19
|
|
|
20
|
-
declare type
|
|
20
|
+
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
|
|
21
21
|
/**
|
|
22
22
|
* A Badge can be filled, outline, ghost, inverted
|
|
23
23
|
* @defaultvalue filled
|
|
24
24
|
*/
|
|
25
|
-
appearance
|
|
25
|
+
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
|
|
26
26
|
/**
|
|
27
27
|
* A Badge can be one of preset colors
|
|
28
28
|
* @defaultvalue brand
|
|
29
29
|
*/
|
|
30
|
-
color
|
|
30
|
+
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
|
31
31
|
/**
|
|
32
32
|
* A Badge can position the icon before or after the content.
|
|
33
33
|
* @defaultvalue before
|
|
34
34
|
*/
|
|
35
|
-
iconPosition
|
|
35
|
+
iconPosition?: 'before' | 'after';
|
|
36
36
|
/**
|
|
37
37
|
* A Badge can be square, circular or rounded.
|
|
38
38
|
* @defaultvalue circular
|
|
39
39
|
*/
|
|
40
|
-
shape
|
|
40
|
+
shape?: 'circular' | 'rounded' | 'square';
|
|
41
41
|
/**
|
|
42
42
|
* A Badge can be on of several preset sizes.
|
|
43
43
|
* @defaultvalue medium
|
|
44
44
|
*/
|
|
45
|
-
size
|
|
45
|
+
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
|
|
49
|
-
|
|
50
48
|
export declare type BadgeSlots = {
|
|
51
49
|
root: Slot<'div'>;
|
|
52
50
|
icon?: Slot<'span'>;
|
|
53
51
|
};
|
|
54
52
|
|
|
55
|
-
export declare type BadgeState = ComponentState<BadgeSlots> &
|
|
53
|
+
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
|
|
56
54
|
|
|
57
55
|
/**
|
|
58
56
|
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
|
|
@@ -66,47 +64,48 @@ export declare const counterBadgeClassName = "fui-CounterBadge";
|
|
|
66
64
|
|
|
67
65
|
export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
|
|
68
66
|
|
|
69
|
-
declare type
|
|
67
|
+
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
|
|
70
68
|
/**
|
|
71
|
-
*
|
|
72
|
-
*
|
|
69
|
+
* A Badge can have different appearances that emphasize certain parts of it:
|
|
70
|
+
* - filled: The default appearance if one is not specified.
|
|
71
|
+
* The badge background is filled with color with a contrasting foreground text to match.
|
|
72
|
+
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
|
|
73
|
+
* @default filled
|
|
74
|
+
*/
|
|
75
|
+
appearance?: 'filled' | 'ghost';
|
|
76
|
+
/**
|
|
77
|
+
* Semantic colors for a counter badge
|
|
78
|
+
* @default brand
|
|
73
79
|
*/
|
|
74
|
-
|
|
80
|
+
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
|
75
81
|
/**
|
|
76
82
|
* Value displayed by the Badge
|
|
77
83
|
* @default 0
|
|
78
84
|
*/
|
|
79
|
-
count
|
|
85
|
+
count?: number;
|
|
80
86
|
/**
|
|
81
|
-
* If
|
|
87
|
+
* If a dot should be displayed without the count
|
|
82
88
|
* @default false
|
|
83
89
|
*/
|
|
84
|
-
|
|
90
|
+
dot?: boolean;
|
|
85
91
|
/**
|
|
86
|
-
*
|
|
87
|
-
* @default
|
|
92
|
+
* Max number to be displayed
|
|
93
|
+
* @default 99
|
|
88
94
|
*/
|
|
89
|
-
|
|
95
|
+
overflowCount?: number;
|
|
90
96
|
/**
|
|
91
97
|
* A Badge can be circular or rounded
|
|
92
98
|
* @default circular
|
|
93
99
|
*/
|
|
94
|
-
shape
|
|
95
|
-
/**
|
|
96
|
-
* A Badge can be filled, ghost
|
|
97
|
-
* @default filled
|
|
98
|
-
*/
|
|
99
|
-
appearance: 'filled' | 'ghost';
|
|
100
|
+
shape?: 'circular' | 'rounded';
|
|
100
101
|
/**
|
|
101
|
-
*
|
|
102
|
-
* @default
|
|
102
|
+
* If the badge should be shown when count is 0
|
|
103
|
+
* @default false
|
|
103
104
|
*/
|
|
104
|
-
|
|
105
|
+
showZero?: boolean;
|
|
105
106
|
};
|
|
106
107
|
|
|
107
|
-
export declare type
|
|
108
|
-
|
|
109
|
-
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
|
|
108
|
+
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
|
|
110
109
|
|
|
111
110
|
/**
|
|
112
111
|
* Define a styled Badge, using the `useBadge_unstable` hook.
|
|
@@ -120,23 +119,21 @@ export declare const presenceBadgeClassName = "fui-PresenceBadge";
|
|
|
120
119
|
|
|
121
120
|
export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
|
|
122
121
|
|
|
123
|
-
declare type
|
|
122
|
+
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Pick<BadgeProps, 'size'> & {
|
|
124
123
|
/**
|
|
125
124
|
* Represents several status
|
|
126
125
|
* @default available
|
|
127
126
|
*/
|
|
128
|
-
status
|
|
127
|
+
status?: PresenceBadgeStatus;
|
|
129
128
|
/**
|
|
130
129
|
* Modifies the display to indicate that the user is out of office.
|
|
131
130
|
* This can be combined with any status to display an out-of-office version of that status
|
|
132
131
|
* @default false
|
|
133
132
|
*/
|
|
134
|
-
outOfOffice
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
|
|
133
|
+
outOfOffice?: boolean;
|
|
134
|
+
};
|
|
138
135
|
|
|
139
|
-
export declare type PresenceBadgeState =
|
|
136
|
+
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
|
|
140
137
|
|
|
141
138
|
export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
|
|
142
139
|
|
|
@@ -3,32 +3,31 @@ export declare type BadgeSlots = {
|
|
|
3
3
|
root: Slot<'div'>;
|
|
4
4
|
icon?: Slot<'span'>;
|
|
5
5
|
};
|
|
6
|
-
export declare type
|
|
6
|
+
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
|
|
7
7
|
/**
|
|
8
8
|
* A Badge can be filled, outline, ghost, inverted
|
|
9
9
|
* @defaultvalue filled
|
|
10
10
|
*/
|
|
11
|
-
appearance
|
|
11
|
+
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
|
|
12
12
|
/**
|
|
13
13
|
* A Badge can be one of preset colors
|
|
14
14
|
* @defaultvalue brand
|
|
15
15
|
*/
|
|
16
|
-
color
|
|
16
|
+
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
|
17
17
|
/**
|
|
18
18
|
* A Badge can position the icon before or after the content.
|
|
19
19
|
* @defaultvalue before
|
|
20
20
|
*/
|
|
21
|
-
iconPosition
|
|
21
|
+
iconPosition?: 'before' | 'after';
|
|
22
22
|
/**
|
|
23
23
|
* A Badge can be square, circular or rounded.
|
|
24
24
|
* @defaultvalue circular
|
|
25
25
|
*/
|
|
26
|
-
shape
|
|
26
|
+
shape?: 'circular' | 'rounded' | 'square';
|
|
27
27
|
/**
|
|
28
28
|
* A Badge can be on of several preset sizes.
|
|
29
29
|
* @defaultvalue medium
|
|
30
30
|
*/
|
|
31
|
-
size
|
|
31
|
+
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
32
32
|
};
|
|
33
|
-
export declare type
|
|
34
|
-
export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
|
|
33
|
+
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\nexport type
|
|
1
|
+
{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"]}
|
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
import type { BadgeProps, BadgeState } from '../Badge/index';
|
|
2
|
-
declare type
|
|
2
|
+
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* A Badge can have different appearances that emphasize certain parts of it:
|
|
5
|
+
* - filled: The default appearance if one is not specified.
|
|
6
|
+
* The badge background is filled with color with a contrasting foreground text to match.
|
|
7
|
+
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
|
|
8
|
+
* @default filled
|
|
9
|
+
*/
|
|
10
|
+
appearance?: 'filled' | 'ghost';
|
|
11
|
+
/**
|
|
12
|
+
* Semantic colors for a counter badge
|
|
13
|
+
* @default brand
|
|
6
14
|
*/
|
|
7
|
-
|
|
15
|
+
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
|
8
16
|
/**
|
|
9
17
|
* Value displayed by the Badge
|
|
10
18
|
* @default 0
|
|
11
19
|
*/
|
|
12
|
-
count
|
|
20
|
+
count?: number;
|
|
13
21
|
/**
|
|
14
|
-
* If
|
|
22
|
+
* If a dot should be displayed without the count
|
|
15
23
|
* @default false
|
|
16
24
|
*/
|
|
17
|
-
|
|
25
|
+
dot?: boolean;
|
|
18
26
|
/**
|
|
19
|
-
*
|
|
20
|
-
* @default
|
|
27
|
+
* Max number to be displayed
|
|
28
|
+
* @default 99
|
|
21
29
|
*/
|
|
22
|
-
|
|
30
|
+
overflowCount?: number;
|
|
23
31
|
/**
|
|
24
32
|
* A Badge can be circular or rounded
|
|
25
33
|
* @default circular
|
|
26
34
|
*/
|
|
27
|
-
shape
|
|
28
|
-
/**
|
|
29
|
-
* A Badge can be filled, ghost
|
|
30
|
-
* @default filled
|
|
31
|
-
*/
|
|
32
|
-
appearance: 'filled' | 'ghost';
|
|
35
|
+
shape?: 'circular' | 'rounded';
|
|
33
36
|
/**
|
|
34
|
-
*
|
|
35
|
-
* @default
|
|
37
|
+
* If the badge should be shown when count is 0
|
|
38
|
+
* @default false
|
|
36
39
|
*/
|
|
37
|
-
|
|
40
|
+
showZero?: boolean;
|
|
38
41
|
};
|
|
39
|
-
export declare type
|
|
40
|
-
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
|
|
41
|
-
export {};
|
|
42
|
+
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\
|
|
1
|
+
{"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n /**\n * A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n */\n appearance?: 'filled' | 'ghost';\n\n /**\n * Semantic colors for a counter badge\n * @default brand\n */\n color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n /**\n * Value displayed by the Badge\n * @default 0\n */\n count?: number;\n\n /**\n * If a dot should be displayed without the count\n * @default false\n */\n dot?: boolean;\n\n /**\n * Max number to be displayed\n * @default 99\n */\n overflowCount?: number;\n\n /**\n * A Badge can be circular or rounded\n * @default circular\n */\n shape?: 'circular' | 'rounded';\n\n /**\n * If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"]}
|
|
@@ -16,13 +16,12 @@ export const useCounterBadge_unstable = (props, ref) => {
|
|
|
16
16
|
shape,
|
|
17
17
|
appearance,
|
|
18
18
|
showZero,
|
|
19
|
-
overflowCount,
|
|
20
19
|
count,
|
|
21
20
|
dot
|
|
22
21
|
};
|
|
23
22
|
|
|
24
23
|
if (!state.dot && !state.root.children) {
|
|
25
|
-
state.root.children = state.count >
|
|
24
|
+
state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":"AACA,SAAS,iBAAT,QAAkC,gBAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;AACnH,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,UAAU,GAAG,QAFT;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,aAAa,GAAG,EAJZ;AAKJ,IAAA,KAAK,GAAG,CALJ;AAMJ,IAAA,GAAG,GAAG;AANF,MAOF,KAPJ;AASA,QAAM,KAAK,GAAsB,EAC/B,GAAI,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CADU;AAE/B,IAAA,KAF+B;AAG/B,IAAA,UAH+B;AAI/B,IAAA,QAJ+B;AAK/B,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":"AACA,SAAS,iBAAT,QAAkC,gBAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;AACnH,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,UAAU,GAAG,QAFT;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,aAAa,GAAG,EAJZ;AAKJ,IAAA,KAAK,GAAG,CALJ;AAMJ,IAAA,GAAG,GAAG;AANF,MAOF,KAPJ;AASA,QAAM,KAAK,GAAsB,EAC/B,GAAI,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CADU;AAE/B,IAAA,KAF+B;AAG/B,IAAA,UAH+B;AAI/B,IAAA,QAJ+B;AAK/B,IAAA,KAL+B;AAM/B,IAAA;AAN+B,GAAjC;;AASA,MAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;AACtC,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,aAAd,GAA8B,GAAG,aAAa,GAA9C,GAAoD,GAAG,KAAK,CAAC,KAAK,EAAxF;AACD;;AAED,SAAO,KAAP;AACD,CAxBM","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as CounterBadgeState),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if (!state.dot && !state.root.children) {\n state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
|
|
2
|
-
import type {
|
|
2
|
+
import type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';
|
|
3
3
|
export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
|
|
4
|
-
declare type
|
|
4
|
+
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Pick<BadgeProps, 'size'> & {
|
|
5
5
|
/**
|
|
6
6
|
* Represents several status
|
|
7
7
|
* @default available
|
|
8
8
|
*/
|
|
9
|
-
status
|
|
9
|
+
status?: PresenceBadgeStatus;
|
|
10
10
|
/**
|
|
11
11
|
* Modifies the display to indicate that the user is out of office.
|
|
12
12
|
* This can be combined with any status to display an out-of-office version of that status
|
|
13
13
|
* @default false
|
|
14
14
|
*/
|
|
15
|
-
outOfOffice
|
|
16
|
-
}
|
|
17
|
-
export declare type
|
|
18
|
-
export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
|
|
19
|
-
export {};
|
|
15
|
+
outOfOffice?: boolean;
|
|
16
|
+
};
|
|
17
|
+
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PresenceBadge.types.js","sourceRoot":"../src/","sources":["components/PresenceBadge/PresenceBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"file":"PresenceBadge.types.js","sourceRoot":"../src/","sources":["components/PresenceBadge/PresenceBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'outOfOffice'\n | 'away'\n | 'available'\n | 'offline'\n | 'doNotDisturb'\n | 'unknown';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n"]}
|
|
@@ -3,32 +3,31 @@ export declare type BadgeSlots = {
|
|
|
3
3
|
root: Slot<'div'>;
|
|
4
4
|
icon?: Slot<'span'>;
|
|
5
5
|
};
|
|
6
|
-
export declare type
|
|
6
|
+
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
|
|
7
7
|
/**
|
|
8
8
|
* A Badge can be filled, outline, ghost, inverted
|
|
9
9
|
* @defaultvalue filled
|
|
10
10
|
*/
|
|
11
|
-
appearance
|
|
11
|
+
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
|
|
12
12
|
/**
|
|
13
13
|
* A Badge can be one of preset colors
|
|
14
14
|
* @defaultvalue brand
|
|
15
15
|
*/
|
|
16
|
-
color
|
|
16
|
+
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
|
17
17
|
/**
|
|
18
18
|
* A Badge can position the icon before or after the content.
|
|
19
19
|
* @defaultvalue before
|
|
20
20
|
*/
|
|
21
|
-
iconPosition
|
|
21
|
+
iconPosition?: 'before' | 'after';
|
|
22
22
|
/**
|
|
23
23
|
* A Badge can be square, circular or rounded.
|
|
24
24
|
* @defaultvalue circular
|
|
25
25
|
*/
|
|
26
|
-
shape
|
|
26
|
+
shape?: 'circular' | 'rounded' | 'square';
|
|
27
27
|
/**
|
|
28
28
|
* A Badge can be on of several preset sizes.
|
|
29
29
|
* @defaultvalue medium
|
|
30
30
|
*/
|
|
31
|
-
size
|
|
31
|
+
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
32
32
|
};
|
|
33
|
-
export declare type
|
|
34
|
-
export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
|
|
33
|
+
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
|
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
import type { BadgeProps, BadgeState } from '../Badge/index';
|
|
2
|
-
declare type
|
|
2
|
+
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* A Badge can have different appearances that emphasize certain parts of it:
|
|
5
|
+
* - filled: The default appearance if one is not specified.
|
|
6
|
+
* The badge background is filled with color with a contrasting foreground text to match.
|
|
7
|
+
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
|
|
8
|
+
* @default filled
|
|
9
|
+
*/
|
|
10
|
+
appearance?: 'filled' | 'ghost';
|
|
11
|
+
/**
|
|
12
|
+
* Semantic colors for a counter badge
|
|
13
|
+
* @default brand
|
|
6
14
|
*/
|
|
7
|
-
|
|
15
|
+
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
|
8
16
|
/**
|
|
9
17
|
* Value displayed by the Badge
|
|
10
18
|
* @default 0
|
|
11
19
|
*/
|
|
12
|
-
count
|
|
20
|
+
count?: number;
|
|
13
21
|
/**
|
|
14
|
-
* If
|
|
22
|
+
* If a dot should be displayed without the count
|
|
15
23
|
* @default false
|
|
16
24
|
*/
|
|
17
|
-
|
|
25
|
+
dot?: boolean;
|
|
18
26
|
/**
|
|
19
|
-
*
|
|
20
|
-
* @default
|
|
27
|
+
* Max number to be displayed
|
|
28
|
+
* @default 99
|
|
21
29
|
*/
|
|
22
|
-
|
|
30
|
+
overflowCount?: number;
|
|
23
31
|
/**
|
|
24
32
|
* A Badge can be circular or rounded
|
|
25
33
|
* @default circular
|
|
26
34
|
*/
|
|
27
|
-
shape
|
|
28
|
-
/**
|
|
29
|
-
* A Badge can be filled, ghost
|
|
30
|
-
* @default filled
|
|
31
|
-
*/
|
|
32
|
-
appearance: 'filled' | 'ghost';
|
|
35
|
+
shape?: 'circular' | 'rounded';
|
|
33
36
|
/**
|
|
34
|
-
*
|
|
35
|
-
* @default
|
|
37
|
+
* If the badge should be shown when count is 0
|
|
38
|
+
* @default false
|
|
36
39
|
*/
|
|
37
|
-
|
|
40
|
+
showZero?: boolean;
|
|
38
41
|
};
|
|
39
|
-
export declare type
|
|
40
|
-
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
|
|
41
|
-
export {};
|
|
42
|
+
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
|
|
@@ -24,13 +24,12 @@ const useCounterBadge_unstable = (props, ref) => {
|
|
|
24
24
|
shape,
|
|
25
25
|
appearance,
|
|
26
26
|
showZero,
|
|
27
|
-
overflowCount,
|
|
28
27
|
count,
|
|
29
28
|
dot
|
|
30
29
|
};
|
|
31
30
|
|
|
32
31
|
if (!state.dot && !state.root.children) {
|
|
33
|
-
state.root.children = state.count >
|
|
32
|
+
state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;AACnH,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,UAAU,GAAG,QAFT;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,aAAa,GAAG,EAJZ;AAKJ,IAAA,KAAK,GAAG,CALJ;AAMJ,IAAA,GAAG,GAAG;AANF,MAOF,KAPJ;AASA,QAAM,KAAK,GAAsB,EAC/B,GAAI,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAD2B;AAE/B,IAAA,KAF+B;AAG/B,IAAA,UAH+B;AAI/B,IAAA,QAJ+B;AAK/B,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;AACnH,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,UAAU,GAAG,QAFT;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,aAAa,GAAG,EAJZ;AAKJ,IAAA,KAAK,GAAG,CALJ;AAMJ,IAAA,GAAG,GAAG;AANF,MAOF,KAPJ;AASA,QAAM,KAAK,GAAsB,EAC/B,GAAI,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAD2B;AAE/B,IAAA,KAF+B;AAG/B,IAAA,UAH+B;AAI/B,IAAA,QAJ+B;AAK/B,IAAA,KAL+B;AAM/B,IAAA;AAN+B,GAAjC;;AASA,MAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;AACtC,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,aAAd,GAA8B,GAAG,aAAa,GAA9C,GAAoD,GAAG,KAAK,CAAC,KAAK,EAAxF;AACD;;AAED,SAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as CounterBadgeState),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if (!state.dot && !state.root.children) {\n state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
|
|
2
|
-
import type {
|
|
2
|
+
import type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';
|
|
3
3
|
export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
|
|
4
|
-
declare type
|
|
4
|
+
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Pick<BadgeProps, 'size'> & {
|
|
5
5
|
/**
|
|
6
6
|
* Represents several status
|
|
7
7
|
* @default available
|
|
8
8
|
*/
|
|
9
|
-
status
|
|
9
|
+
status?: PresenceBadgeStatus;
|
|
10
10
|
/**
|
|
11
11
|
* Modifies the display to indicate that the user is out of office.
|
|
12
12
|
* This can be combined with any status to display an out-of-office version of that status
|
|
13
13
|
* @default false
|
|
14
14
|
*/
|
|
15
|
-
outOfOffice
|
|
16
|
-
}
|
|
17
|
-
export declare type
|
|
18
|
-
export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
|
|
19
|
-
export {};
|
|
15
|
+
outOfOffice?: boolean;
|
|
16
|
+
};
|
|
17
|
+
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-badge",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220516-0419.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-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220516-0419.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
-
"@griffel/react": "1.0.
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@griffel/react": "1.0.4",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220516-0419.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220516-0419.1",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|