@fluentui/react-badge 9.0.0-rc.9 → 9.0.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `badgeClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const badgeClassName = 'fui-Badge';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
8
3
|
export const badgeClassNames = {
|
|
9
4
|
root: 'fui-Badge',
|
|
10
5
|
icon: 'fui-Badge__icon'
|
|
11
|
-
};
|
|
6
|
+
}; // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
|
|
7
|
+
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
|
|
8
|
+
|
|
9
|
+
const textPadding = tokens.spacingHorizontalXXS;
|
|
12
10
|
|
|
13
11
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
14
12
|
"base": {
|
|
@@ -16,77 +14,68 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
16
14
|
"B7ck84d": "f1ewtqcl",
|
|
17
15
|
"Bt984gj": "f122n59",
|
|
18
16
|
"Brf1p80": "f4d9j23",
|
|
17
|
+
"qhf8xq": "f10pi13n",
|
|
18
|
+
"Bahqtrf": "fk6fouc",
|
|
19
|
+
"Be2twd7": "fy9rknc",
|
|
19
20
|
"Bhrd7zp": "fl43uef",
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
24
|
-
"icvyot": "fzkkow9",
|
|
25
|
-
"vrafjx": ["fcdblym", "fjik90z"],
|
|
26
|
-
"oivjwe": "fg706s2",
|
|
27
|
-
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
21
|
+
"Bg96gwp": "fwrc4pm"
|
|
22
|
+
},
|
|
23
|
+
"fontSmallToTiny": {
|
|
28
24
|
"Bahqtrf": "fk6fouc",
|
|
29
|
-
"
|
|
25
|
+
"Be2twd7": "f13mqy1h",
|
|
26
|
+
"Bhrd7zp": "fl43uef",
|
|
27
|
+
"Bg96gwp": "fcpl73t"
|
|
30
28
|
},
|
|
31
29
|
"tiny": {
|
|
32
30
|
"a9b677": "f16dn6v3",
|
|
33
31
|
"Bqenvij": "f3mu39s",
|
|
34
|
-
"Be2twd7": "f130uwy9"
|
|
32
|
+
"Be2twd7": "f130uwy9",
|
|
33
|
+
"Bg96gwp": "fod1mrr"
|
|
35
34
|
},
|
|
36
35
|
"extra-small": {
|
|
37
36
|
"a9b677": "fpd43o0",
|
|
38
37
|
"Bqenvij": "f30q22z",
|
|
39
|
-
"Be2twd7": "f1tccstq"
|
|
38
|
+
"Be2twd7": "f1tccstq",
|
|
39
|
+
"Bg96gwp": "f1y3arg5"
|
|
40
40
|
},
|
|
41
41
|
"small": {
|
|
42
42
|
"Bf4jedk": "fq2vo04",
|
|
43
43
|
"Bqenvij": "fd461yt",
|
|
44
|
-
"z8tnut": "
|
|
45
|
-
"z189sj": ["
|
|
46
|
-
"Byoj8tv": "
|
|
47
|
-
"uwmqm3": ["
|
|
48
|
-
"i8kkvl": "f1q8lukm",
|
|
49
|
-
"Belr9w4": "f1ma2n7n",
|
|
50
|
-
"Be2twd7": "f1n0apg3"
|
|
44
|
+
"z8tnut": "f1g0x7ka",
|
|
45
|
+
"z189sj": ["fps1v9c", "f17ae1jz"],
|
|
46
|
+
"Byoj8tv": "f1qch9an",
|
|
47
|
+
"uwmqm3": ["f17ae1jz", "fps1v9c"]
|
|
51
48
|
},
|
|
52
49
|
"medium": {
|
|
53
50
|
"Bqenvij": "fjamq6b",
|
|
54
51
|
"Bf4jedk": "f11u7vat",
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"Byoj8tv": "f1y2xyjm",
|
|
60
|
-
"uwmqm3": ["fycuoez", "f8wuabp"],
|
|
61
|
-
"Be2twd7": "fnmn6fi"
|
|
52
|
+
"z8tnut": "f1g0x7ka",
|
|
53
|
+
"z189sj": ["f17a92cs", "f1pe0i86"],
|
|
54
|
+
"Byoj8tv": "f1qch9an",
|
|
55
|
+
"uwmqm3": ["f1pe0i86", "f17a92cs"]
|
|
62
56
|
},
|
|
63
57
|
"large": {
|
|
64
58
|
"Bf4jedk": "f17fgpbq",
|
|
65
59
|
"Bqenvij": "frvgh55",
|
|
66
|
-
"z8tnut": "
|
|
67
|
-
"z189sj": ["
|
|
68
|
-
"Byoj8tv": "
|
|
69
|
-
"uwmqm3": ["
|
|
70
|
-
"Be2twd7": "f1ugzwwg",
|
|
71
|
-
"i8kkvl": "f1q8lukm",
|
|
72
|
-
"Belr9w4": "f1ma2n7n"
|
|
60
|
+
"z8tnut": "f1g0x7ka",
|
|
61
|
+
"z189sj": ["f17a92cs", "f1pe0i86"],
|
|
62
|
+
"Byoj8tv": "f1qch9an",
|
|
63
|
+
"uwmqm3": ["f1pe0i86", "f17a92cs"]
|
|
73
64
|
},
|
|
74
65
|
"extra-large": {
|
|
75
66
|
"Bf4jedk": "fwbmr0d",
|
|
76
67
|
"Bqenvij": "f1d2rq10",
|
|
77
|
-
"z8tnut": "
|
|
78
|
-
"z189sj": ["
|
|
79
|
-
"Byoj8tv": "
|
|
80
|
-
"uwmqm3": ["
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
"
|
|
84
|
-
"
|
|
85
|
-
"
|
|
86
|
-
"
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
"square": {},
|
|
68
|
+
"z8tnut": "f1g0x7ka",
|
|
69
|
+
"z189sj": ["fqznh8f", "f1xile11"],
|
|
70
|
+
"Byoj8tv": "f1qch9an",
|
|
71
|
+
"uwmqm3": ["f1xile11", "fqznh8f"]
|
|
72
|
+
},
|
|
73
|
+
"square": {
|
|
74
|
+
"Bbmb7ep": ["fzi6hpg", "fyowgf4"],
|
|
75
|
+
"Beyfa6y": ["fyowgf4", "fzi6hpg"],
|
|
76
|
+
"B7oj6ja": ["f3fg2lr", "f13av6d4"],
|
|
77
|
+
"Btl43ni": ["f13av6d4", "f3fg2lr"]
|
|
78
|
+
},
|
|
90
79
|
"rounded": {
|
|
91
80
|
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
92
81
|
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
@@ -100,10 +89,34 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
100
89
|
"Btl43ni": ["f1s4nn1u", "f1rstyi9"]
|
|
101
90
|
},
|
|
102
91
|
"circular": {
|
|
103
|
-
"Bbmb7ep": ["
|
|
104
|
-
"Beyfa6y": ["
|
|
105
|
-
"B7oj6ja": ["
|
|
106
|
-
"Btl43ni": ["
|
|
92
|
+
"Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
|
|
93
|
+
"Beyfa6y": ["f1nfllo7", "f8fbkgy"],
|
|
94
|
+
"B7oj6ja": ["f1djnp8u", "f1s8kh49"],
|
|
95
|
+
"Btl43ni": ["f1s8kh49", "f1djnp8u"]
|
|
96
|
+
},
|
|
97
|
+
"border": {
|
|
98
|
+
"Bsft5z2": "f13zj6fq",
|
|
99
|
+
"E3zdtr": "f1mdlcz9",
|
|
100
|
+
"bn5sak": "frwkxtg",
|
|
101
|
+
"Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
|
|
102
|
+
"By385i5": "fo72kxq",
|
|
103
|
+
"B1piin3": ["f15yvnhg", "f1n6gb5g"],
|
|
104
|
+
"Bm2nyyq": "f8rth92",
|
|
105
|
+
"Barhvk9": ["flthirb", "ftkbnf5"],
|
|
106
|
+
"Bw17bha": "f1lh990p",
|
|
107
|
+
"vfts7": ["ftkbnf5", "flthirb"],
|
|
108
|
+
"xrcqlc": "f6czdpx",
|
|
109
|
+
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
|
110
|
+
"Bcgy8vk": "f1i1u9k0",
|
|
111
|
+
"Bhxzhr1": ["f1en4csx", "f13hvwk3"],
|
|
112
|
+
"B0n5ga8": "fhtl3ys",
|
|
113
|
+
"s924m2": ["f140b627", "f1wihoeh"],
|
|
114
|
+
"B1q35kw": "fplas78",
|
|
115
|
+
"Gp14am": ["f1wihoeh", "f140b627"],
|
|
116
|
+
"B3778ie": ["f1lf1ovl", "f1ydfmkj"],
|
|
117
|
+
"d9w3h3": ["f1ydfmkj", "f1lf1ovl"],
|
|
118
|
+
"Bl18szs": ["feq0ynf", "f1ss7ivt"],
|
|
119
|
+
"B4j8arr": ["f1ss7ivt", "feq0ynf"]
|
|
107
120
|
},
|
|
108
121
|
"filled": {
|
|
109
122
|
"g2u3we": "fghlq4f",
|
|
@@ -113,19 +126,11 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
113
126
|
},
|
|
114
127
|
"filled-brand": {
|
|
115
128
|
"De3pzq": "ffp7eso",
|
|
116
|
-
"sj55zd": "f1phragk"
|
|
117
|
-
"g2u3we": "f1vp46cd",
|
|
118
|
-
"h3c5rm": ["f1lxz1cr", "ff8nh0i"],
|
|
119
|
-
"B9xav0g": "fe9j8it",
|
|
120
|
-
"zhjwy3": ["ff8nh0i", "f1lxz1cr"]
|
|
129
|
+
"sj55zd": "f1phragk"
|
|
121
130
|
},
|
|
122
131
|
"filled-danger": {
|
|
123
132
|
"De3pzq": "fdl5y0r",
|
|
124
|
-
"sj55zd": "f1phragk"
|
|
125
|
-
"g2u3we": "f11ttmz8",
|
|
126
|
-
"h3c5rm": ["f1ratw88", "f459ikj"],
|
|
127
|
-
"B9xav0g": "fvovscg",
|
|
128
|
-
"zhjwy3": ["f459ikj", "f1ratw88"]
|
|
133
|
+
"sj55zd": "f1phragk"
|
|
129
134
|
},
|
|
130
135
|
"filled-important": {
|
|
131
136
|
"De3pzq": "f1c73kur",
|
|
@@ -149,20 +154,11 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
149
154
|
},
|
|
150
155
|
"filled-warning": {
|
|
151
156
|
"De3pzq": "ffq97bm",
|
|
152
|
-
"sj55zd": "
|
|
153
|
-
"g2u3we": "f1gyeiz5",
|
|
154
|
-
"h3c5rm": ["f1jnj1iq", "fd1epeu"],
|
|
155
|
-
"B9xav0g": "f102bkgo",
|
|
156
|
-
"zhjwy3": ["fd1epeu", "f1jnj1iq"]
|
|
157
|
-
},
|
|
158
|
-
"ghost": {
|
|
159
|
-
"icvyot": "f1ern45e",
|
|
160
|
-
"vrafjx": ["f1n71otn", "f1deefiw"],
|
|
161
|
-
"oivjwe": "f1h8hb77",
|
|
162
|
-
"wvpqe5": ["f1deefiw", "f1n71otn"]
|
|
157
|
+
"sj55zd": "ff5vbop"
|
|
163
158
|
},
|
|
159
|
+
"ghost": {},
|
|
164
160
|
"ghost-brand": {
|
|
165
|
-
"sj55zd": "
|
|
161
|
+
"sj55zd": "f16muhyy"
|
|
166
162
|
},
|
|
167
163
|
"ghost-danger": {
|
|
168
164
|
"sj55zd": "f1whyuy6"
|
|
@@ -192,7 +188,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
192
188
|
"zhjwy3": ["f1p1bl80", "f1gkuv52"]
|
|
193
189
|
},
|
|
194
190
|
"outline-brand": {
|
|
195
|
-
"sj55zd": "
|
|
191
|
+
"sj55zd": "f16muhyy"
|
|
196
192
|
},
|
|
197
193
|
"outline-danger": {
|
|
198
194
|
"sj55zd": "f1whyuy6"
|
|
@@ -259,10 +255,10 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
259
255
|
"tint-severe": {
|
|
260
256
|
"De3pzq": "f1xzsg4",
|
|
261
257
|
"sj55zd": "f1k5f75o",
|
|
262
|
-
"g2u3we": "
|
|
263
|
-
"h3c5rm": ["
|
|
264
|
-
"B9xav0g": "
|
|
265
|
-
"zhjwy3": ["
|
|
258
|
+
"g2u3we": "fxy9dsj",
|
|
259
|
+
"h3c5rm": ["f54u6j2", "fcm23ze"],
|
|
260
|
+
"B9xav0g": "f4vf0uq",
|
|
261
|
+
"zhjwy3": ["fcm23ze", "f54u6j2"]
|
|
266
262
|
},
|
|
267
263
|
"tint-subtle": {
|
|
268
264
|
"De3pzq": "fxugw4r",
|
|
@@ -275,29 +271,43 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
275
271
|
"tint-success": {
|
|
276
272
|
"De3pzq": "f2vsrz6",
|
|
277
273
|
"sj55zd": "ffmvakt",
|
|
278
|
-
"g2u3we": "
|
|
279
|
-
"h3c5rm": ["
|
|
280
|
-
"B9xav0g": "
|
|
281
|
-
"zhjwy3": ["
|
|
274
|
+
"g2u3we": "fdmic9h",
|
|
275
|
+
"h3c5rm": ["f196y6m", "fetptd8"],
|
|
276
|
+
"B9xav0g": "f1pev5xq",
|
|
277
|
+
"zhjwy3": ["fetptd8", "f196y6m"]
|
|
282
278
|
},
|
|
283
279
|
"tint-warning": {
|
|
284
280
|
"De3pzq": "f10s6hli",
|
|
285
281
|
"sj55zd": "fpti2h4",
|
|
286
|
-
"g2u3we": "
|
|
287
|
-
"h3c5rm": ["
|
|
288
|
-
"B9xav0g": "
|
|
289
|
-
"zhjwy3": ["
|
|
282
|
+
"g2u3we": "fn9i3n",
|
|
283
|
+
"h3c5rm": ["f1aw8cx4", "f51if14"],
|
|
284
|
+
"B9xav0g": "fvq8iai",
|
|
285
|
+
"zhjwy3": ["f51if14", "f1aw8cx4"]
|
|
290
286
|
}
|
|
291
287
|
}, {
|
|
292
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".
|
|
288
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
|
|
293
289
|
});
|
|
294
290
|
|
|
295
291
|
const useIconStyles = /*#__PURE__*/__styles({
|
|
296
292
|
"base": {
|
|
297
293
|
"mc9l5x": "f22iagw",
|
|
298
|
-
"
|
|
299
|
-
"
|
|
300
|
-
"
|
|
294
|
+
"Bg96gwp": "fp6vxd",
|
|
295
|
+
"B6of3ja": "f1hu3pq6",
|
|
296
|
+
"t21cq0": ["fqq8nkd", "f1fdzpd1"],
|
|
297
|
+
"jrapky": "f19f4twv",
|
|
298
|
+
"Frg6f3": ["f1fdzpd1", "fqq8nkd"]
|
|
299
|
+
},
|
|
300
|
+
"beforeText": {
|
|
301
|
+
"t21cq0": ["f1t8l4o1", "f11juvx6"]
|
|
302
|
+
},
|
|
303
|
+
"afterText": {
|
|
304
|
+
"Frg6f3": ["f11juvx6", "f1t8l4o1"]
|
|
305
|
+
},
|
|
306
|
+
"beforeTextXL": {
|
|
307
|
+
"t21cq0": ["f1rs9grm", "f1kwmkpi"]
|
|
308
|
+
},
|
|
309
|
+
"afterTextXL": {
|
|
310
|
+
"Frg6f3": ["f1kwmkpi", "f1rs9grm"]
|
|
301
311
|
},
|
|
302
312
|
"tiny": {
|
|
303
313
|
"Be2twd7": "f1tccstq"
|
|
@@ -318,7 +328,7 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
318
328
|
"Be2twd7": "fe5j1ua"
|
|
319
329
|
}
|
|
320
330
|
}, {
|
|
321
|
-
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".
|
|
331
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fp6vxd{line-height:1;}", ".f1hu3pq6{margin-top:0;}", ".fqq8nkd{margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f1fdzpd1{margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f19f4twv{margin-bottom:0;}", ".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
|
|
322
332
|
});
|
|
323
333
|
/**
|
|
324
334
|
* Applies style classnames to slots
|
|
@@ -327,11 +337,22 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
327
337
|
|
|
328
338
|
export const useBadgeStyles_unstable = state => {
|
|
329
339
|
const rootStyles = useRootStyles();
|
|
330
|
-
|
|
340
|
+
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
|
|
341
|
+
state.root.className = mergeClasses(badgeClassNames.root, rootStyles.base, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance !== 'ghost' && rootStyles.border, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
|
|
331
342
|
const iconStyles = useIconStyles();
|
|
332
343
|
|
|
333
344
|
if (state.icon) {
|
|
334
|
-
|
|
345
|
+
let iconPositionClass;
|
|
346
|
+
|
|
347
|
+
if (state.root.children) {
|
|
348
|
+
if (state.size === 'extra-large') {
|
|
349
|
+
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
|
|
350
|
+
} else {
|
|
351
|
+
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
state.icon.className = mergeClasses(badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
|
|
335
356
|
}
|
|
336
357
|
|
|
337
358
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `badgeClassNames.root` instead.\n */\nexport const badgeClassName = 'fui-Badge';\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: tokens.fontWeightSemibold,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderStyle('solid'),\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding('2px'),\n ...shorthands.gap('4px'),\n fontSize: '8px',\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.gap('4px'),\n ...shorthands.padding('4px'),\n fontSize: '10px',\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding('4px'),\n fontSize: '12px',\n ...shorthands.gap('4px'),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding('6px'),\n ...shorthands.gap('6px'),\n fontSize: '12px',\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n\n // shape\n\n square: {\n // Default border radius\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius('99px'),\n },\n\n // appearance: filled\n\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandBackground),\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n },\n\n // appearance: ghost\n\n ghost: {\n ...shorthands.borderStyle('none'),\n },\n 'ghost-brand': {\n color: tokens.colorBrandBackground,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandBackground,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n rootStyles.roundedSmallToTiny,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oBAAT,QAAqC,gBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oBAAT,QAAqC,gBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n const state = useCounterBadge_unstable(props, ref);\n useCounterBadgeStyles_unstable(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"sourceRoot":"../src/"}
|
|
@@ -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;
|
|
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;EACnH,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,UAAU,GAAG,QAFT;IAGJ,QAAQ,GAAG,KAHP;IAIJ,aAAa,GAAG,EAJZ;IAKJ,KAAK,GAAG,CALJ;IAMJ,GAAG,GAAG;EANF,IAOF,KAPJ;EASA,MAAM,KAAK,GAAsB,EAC/B,GAAI,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CADU;IAE/B,KAF+B;IAG/B,UAH+B;IAI/B,QAJ+B;IAK/B,KAL+B;IAM/B;EAN+B,CAAjC;;EASA,IAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;IACtC,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,aAAd,GAA8B,GAAG,aAAa,GAA9C,GAAoD,GAAG,KAAK,CAAC,KAAK,EAAxF;EACD;;EAED,OAAO,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,10 +1,5 @@
|
|
|
1
1
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
2
2
|
import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `counterBadgeClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
export const counterBadgeClassName = 'fui-CounterBadge';
|
|
8
3
|
export const counterBadgeClassNames = {
|
|
9
4
|
root: 'fui-CounterBadge',
|
|
10
5
|
icon: 'fui-CounterBadge__icon'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAKA
|
|
1
|
+
{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAKA,OAAO,MAAM,sBAAsB,GAA+B;EAChE,IAAI,EAAE,kBAD0D;EAEhE,IAAI,EAAE;AAF0D,CAA3D;;AAKP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,sBAAsB,CAAC,IADU,EAEjC,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFa,EAGjC,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAH5B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;EACD;;EAED,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAdM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...shorthands.padding('0'),\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.showZero && state.count === 0 && !state.dot && styles.hide,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n\n return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,oBAAT,QAAqC,aAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,oBAAT,QAAqC,aAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n usePresenceBadgeStyles_unstable(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"sourceRoot":"../src/"}
|
|
@@ -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 { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | '
|
|
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 | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, '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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PresenceBadge/presenceIcons.ts"],"names":[],"mappings":"AACA,SACE,0BADF,EAEE,0BAFF,EAGE,0BAHF,EAIE,yBAJF,EAKE,yBALF,EAME,yBANF,EAOE,oBAPF,EAQE,oBARF,EASE,oBATF,EAUE,oBAVF,EAWE,oBAXF,EAYE,oBAZF,EAaE,oBAbF,EAcE,oBAdF,EAeE,oBAfF,EAgBE,mBAhBF,EAiBE,mBAjBF,EAkBE,mBAlBF,EAmBE,oBAnBF,EAoBE,oBApBF,EAqBE,oBArBF,EAsBE,wBAtBF,EAuBE,wBAvBF,EAwBE,wBAxBF,EAyBE,wBAzBF,EA0BE,wBA1BF,EA2BE,wBA3BF,QA4BO,uBA5BP;AA+BA,OAAO,MAAM,kBAAkB,GAAuE;
|
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/presenceIcons.ts"],"names":[],"mappings":"AACA,SACE,0BADF,EAEE,0BAFF,EAGE,0BAHF,EAIE,yBAJF,EAKE,yBALF,EAME,yBANF,EAOE,oBAPF,EAQE,oBARF,EASE,oBATF,EAUE,oBAVF,EAWE,oBAXF,EAYE,oBAZF,EAaE,oBAbF,EAcE,oBAdF,EAeE,oBAfF,EAgBE,mBAhBF,EAiBE,mBAjBF,EAkBE,mBAlBF,EAmBE,oBAnBF,EAoBE,oBApBF,EAqBE,oBArBF,EAsBE,wBAtBF,EAuBE,wBAvBF,EAwBE,wBAxBF,EAyBE,wBAzBF,EA0BE,wBA1BF,EA2BE,wBA3BF,QA4BO,uBA5BP;AA+BA,OAAO,MAAM,kBAAkB,GAAuE;EACpG;EACA;EACA,IAAI,EAAE,oBAH8F;EAIpG,eAAe,oBAJqF;EAKpG,KAAK,EAAE,oBAL6F;EAMpG,MAAM,EAAE,oBAN4F;EAOpG;EACA;EACA,KAAK,EAAE,oBAT6F;EAUpG;EACA;EACA,eAAe;AAZqF,CAA/F;AAeP,OAAO,MAAM,wBAAwB,GAAuE;EAC1G;EACA;EACA,IAAI,EAAE,0BAHoG;EAI1G,eAAe,0BAJ2F;EAK1G,KAAK,EAAE,0BALmG;EAM1G,MAAM,EAAE,0BANkG;EAO1G;EACA;EACA,KAAK,EAAE,0BATmG;EAU1G;EACA;EACA,eAAe;AAZ2F,CAArG;AAeP,OAAO,MAAM,uBAAuB,GAAuE;EACzG;EACA;EACA,IAAI,EAAE,yBAHmG;EAIzG,eAAe,yBAJ0F;EAKzG,KAAK,EAAE,yBALkG;EAMzG,MAAM,EAAE,yBANiG;EAOzG;EACA;EACA,KAAK,EAAE,yBATkG;EAUzG;EACA;EACA,eAAe;AAZ0F,CAApG;AAeP,OAAO,MAAM,kBAAkB,GAAuE;EACpG;EACA;EACA,IAAI,EAAE,oBAH8F;EAIpG,eAAe,oBAJqF;EAKpG,KAAK,EAAE,oBAL6F;EAMpG,MAAM,EAAE,oBAN4F;EAOpG;EACA;EACA,KAAK,EAAE,oBAT6F;EAUpG;EACA;EACA,eAAe;AAZqF,CAA/F;AAeP,OAAO,MAAM,iBAAiB,GAAuE;EACnG;EACA;EACA,IAAI,EAAE,mBAH6F;EAInG,eAAe,mBAJoF;EAKnG,KAAK,EAAE,mBAL4F;EAMnG,MAAM,EAAE,mBAN2F;EAOnG;EACA;EACA,KAAK,EAAE,mBAT4F;EAUnG;EACA;EACA,eAAe;AAZoF,CAA9F;AAeP,OAAO,MAAM,kBAAkB,GAAuE;EACpG;EACA;EACA,IAAI,EAAE,oBAH8F;EAIpG,eAAe,oBAJqF;EAKpG,KAAK,EAAE,oBAL6F;EAMpG,MAAM,EAAE,oBAN4F;EAOpG;EACA;EACA,KAAK,EAAE,oBAT6F;EAUpG;EACA;EACA,eAAe;AAZqF,CAA/F;AAeP,OAAO,MAAM,kBAAkB,GAAuE;EACpG;EACA;EACA,IAAI,EAAE,oBAH8F;EAIpG,eAAe,oBAJqF;EAKpG,KAAK,EAAE,oBAL6F;EAMpG,MAAM,EAAE,oBAN4F;EAOpG;EACA;EACA,KAAK,EAAE,oBAT6F;EAUpG;EACA;EACA,eAAe;AAZqF,CAA/F;AAeP,OAAO,MAAM,sBAAsB,GAAuE;EACxG;EACA;EACA,IAAI,EAAE,wBAHkG;EAIxG,eAAe,wBAJyF;EAKxG,KAAK,EAAE,wBALiG;EAMxG,MAAM,EAAE,wBANgG;EAOxG;EACA;EACA,KAAK,EAAE,wBATiG;EAUxG;EACA;EACA,eAAe;AAZyF,CAAnG;AAeP,OAAO,MAAM,sBAAsB,GAAuE;EACxG;EACA;EACA,IAAI,EAAE,wBAHkG;EAIxG,eAAe,wBAJyF;EAKxG,KAAK,EAAE,wBALiG;EAMxG,MAAM,EAAE,wBANgG;EAOxG;EACA;EACA,KAAK,EAAE,wBATiG;EAUxG;EACA;EACA,eAAe;AAZyF,CAAnG","sourcesContent":["import * as React from 'react';\nimport {\n PresenceAvailable10Regular,\n PresenceAvailable12Regular,\n PresenceAvailable16Regular,\n PresenceAvailable10Filled,\n PresenceAvailable12Filled,\n PresenceAvailable16Filled,\n PresenceAway10Filled,\n PresenceAway12Filled,\n PresenceAway16Filled,\n PresenceBusy10Filled,\n PresenceBusy12Filled,\n PresenceBusy16Filled,\n PresenceDnd10Regular,\n PresenceDnd12Regular,\n PresenceDnd16Regular,\n PresenceDnd10Filled,\n PresenceDnd12Filled,\n PresenceDnd16Filled,\n PresenceOof10Regular,\n PresenceOof12Regular,\n PresenceOof16Regular,\n PresenceOffline10Regular,\n PresenceOffline12Regular,\n PresenceOffline16Regular,\n PresenceUnknown10Regular,\n PresenceUnknown12Regular,\n PresenceUnknown16Regular,\n} from '@fluentui/react-icons';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAway10Filled,\n 'extra-small': PresenceAway10Filled,\n small: PresenceAway12Filled,\n medium: PresenceAway16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAway16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAway16Filled,\n};\n\nexport const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAvailable10Regular,\n 'extra-small': PresenceAvailable10Regular,\n small: PresenceAvailable12Regular,\n medium: PresenceAvailable16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAvailable16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAvailable16Regular,\n};\n\nexport const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAvailable10Filled,\n 'extra-small': PresenceAvailable10Filled,\n small: PresenceAvailable12Filled,\n medium: PresenceAvailable16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAvailable16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAvailable16Filled,\n};\n\nexport const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceBusy10Filled,\n 'extra-small': PresenceBusy10Filled,\n small: PresenceBusy12Filled,\n medium: PresenceBusy16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceBusy16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceBusy16Filled,\n};\n\nexport const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceDnd10Filled,\n 'extra-small': PresenceDnd10Filled,\n small: PresenceDnd12Filled,\n medium: PresenceDnd16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceDnd16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceDnd16Filled,\n};\n\nexport const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceDnd10Regular,\n 'extra-small': PresenceDnd10Regular,\n small: PresenceDnd12Regular,\n medium: PresenceDnd16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceDnd16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceDnd16Regular,\n};\n\nexport const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceOof10Regular,\n 'extra-small': PresenceOof10Regular,\n small: PresenceOof12Regular,\n medium: PresenceOof16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceOof16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceOof16Regular,\n};\n\nexport const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceOffline10Regular,\n 'extra-small': PresenceOffline10Regular,\n small: PresenceOffline12Regular,\n medium: PresenceOffline16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceOffline16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceOffline16Regular,\n};\n\nexport const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceUnknown10Regular,\n 'extra-small': PresenceUnknown10Regular,\n small: PresenceUnknown12Regular,\n medium: PresenceUnknown16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceUnknown16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceUnknown16Regular,\n};\n"],"sourceRoot":"../src/"}
|