@fluentui/react-badge 9.3.1 → 9.4.0

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/lib/components/Badge/useBadgeStyles.styles.raw.js +292 -0
  3. package/lib/components/Badge/useBadgeStyles.styles.raw.js.map +1 -0
  4. package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js +28 -0
  5. package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map +1 -0
  6. package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js +104 -0
  7. package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map +1 -0
  8. package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js +302 -0
  9. package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js.map +1 -0
  10. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js +44 -0
  11. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map +1 -0
  12. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js +120 -0
  13. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map +1 -0
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Wed, 18 Jun 2025 17:29:30 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Jul 2025 13:45:34 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.4.0)
8
+
9
+ Thu, 17 Jul 2025 13:45:34 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.3.2..@fluentui/react-badge_v9.4.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
15
+
16
+ ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.3.2)
17
+
18
+ Thu, 26 Jun 2025 14:11:55 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.3.1..@fluentui/react-badge_v9.3.2)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
24
+ - Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
25
+
7
26
  ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.3.1)
8
27
 
9
- Wed, 18 Jun 2025 17:29:30 GMT
28
+ Wed, 18 Jun 2025 17:34:00 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.3.0..@fluentui/react-badge_v9.3.1)
11
30
 
12
31
  ### Patches
package/lib/components/Badge/useBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,292 @@
1
+ import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
+ export const badgeClassNames = {
4
+ root: 'fui-Badge',
5
+ icon: 'fui-Badge__icon'
6
+ };
7
+ // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
8
+ // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
9
+ const textPadding = tokens.spacingHorizontalXXS;
10
+ const useRootClassName = makeResetStyles({
11
+ display: 'inline-flex',
12
+ boxSizing: 'border-box',
13
+ alignItems: 'center',
14
+ justifyContent: 'center',
15
+ position: 'relative',
16
+ ...typographyStyles.caption1Strong,
17
+ height: '20px',
18
+ minWidth: '20px',
19
+ padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
20
+ borderRadius: tokens.borderRadiusCircular,
21
+ // Use a transparent stroke (rather than no border) so the border is visible in high contrast
22
+ borderColor: tokens.colorTransparentStroke,
23
+ '::after': {
24
+ content: '""',
25
+ position: 'absolute',
26
+ top: 0,
27
+ left: 0,
28
+ bottom: 0,
29
+ right: 0,
30
+ borderStyle: 'solid',
31
+ borderColor: 'inherit',
32
+ borderWidth: tokens.strokeWidthThin,
33
+ borderRadius: 'inherit'
34
+ }
35
+ });
36
+ const useRootStyles = makeStyles({
37
+ fontSmallToTiny: {
38
+ ...typographyStyles.caption2Strong
39
+ },
40
+ // size
41
+ tiny: {
42
+ width: '6px',
43
+ height: '6px',
44
+ fontSize: '4px',
45
+ lineHeight: '4px',
46
+ minWidth: 'unset',
47
+ padding: 'unset'
48
+ },
49
+ 'extra-small': {
50
+ width: '10px',
51
+ height: '10px',
52
+ fontSize: '6px',
53
+ lineHeight: '6px',
54
+ minWidth: 'unset',
55
+ padding: 'unset'
56
+ },
57
+ small: {
58
+ minWidth: '16px',
59
+ height: '16px',
60
+ padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
61
+ },
62
+ medium: {
63
+ },
64
+ large: {
65
+ minWidth: '24px',
66
+ height: '24px',
67
+ padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`
68
+ },
69
+ 'extra-large': {
70
+ minWidth: '32px',
71
+ height: '32px',
72
+ padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`
73
+ },
74
+ // shape
75
+ square: {
76
+ borderRadius: tokens.borderRadiusNone
77
+ },
78
+ rounded: {
79
+ borderRadius: tokens.borderRadiusMedium
80
+ },
81
+ roundedSmallToTiny: {
82
+ borderRadius: tokens.borderRadiusSmall
83
+ },
84
+ circular: {
85
+ },
86
+ // hide the boder when appearance is "ghost"
87
+ borderGhost: {
88
+ // The border is applied in an ::after pseudo-element because it should not affect layout.
89
+ // The padding and size of the badge should be the same regardless of whether or not it has a border.
90
+ '::after': {
91
+ display: 'none'
92
+ }
93
+ },
94
+ // appearance: filled
95
+ filled: {
96
+ },
97
+ 'filled-brand': {
98
+ backgroundColor: tokens.colorBrandBackground,
99
+ color: tokens.colorNeutralForegroundOnBrand
100
+ },
101
+ 'filled-danger': {
102
+ backgroundColor: tokens.colorPaletteRedBackground3,
103
+ color: tokens.colorNeutralForegroundOnBrand
104
+ },
105
+ 'filled-important': {
106
+ backgroundColor: tokens.colorNeutralForeground1,
107
+ color: tokens.colorNeutralBackground1
108
+ },
109
+ 'filled-informative': {
110
+ backgroundColor: tokens.colorNeutralBackground5,
111
+ color: tokens.colorNeutralForeground3
112
+ },
113
+ 'filled-severe': {
114
+ backgroundColor: tokens.colorPaletteDarkOrangeBackground3,
115
+ color: tokens.colorNeutralForegroundOnBrand
116
+ },
117
+ 'filled-subtle': {
118
+ backgroundColor: tokens.colorNeutralBackground1,
119
+ color: tokens.colorNeutralForeground1
120
+ },
121
+ 'filled-success': {
122
+ backgroundColor: tokens.colorPaletteGreenBackground3,
123
+ color: tokens.colorNeutralForegroundOnBrand
124
+ },
125
+ 'filled-warning': {
126
+ backgroundColor: tokens.colorPaletteYellowBackground3,
127
+ color: tokens.colorNeutralForeground1Static
128
+ },
129
+ // appearance: ghost
130
+ ghost: {
131
+ },
132
+ 'ghost-brand': {
133
+ color: tokens.colorBrandForeground1
134
+ },
135
+ 'ghost-danger': {
136
+ color: tokens.colorPaletteRedForeground3
137
+ },
138
+ 'ghost-important': {
139
+ color: tokens.colorNeutralForeground1
140
+ },
141
+ 'ghost-informative': {
142
+ color: tokens.colorNeutralForeground3
143
+ },
144
+ 'ghost-severe': {
145
+ color: tokens.colorPaletteDarkOrangeForeground3
146
+ },
147
+ 'ghost-subtle': {
148
+ color: tokens.colorNeutralForegroundStaticInverted
149
+ },
150
+ 'ghost-success': {
151
+ color: tokens.colorPaletteGreenForeground3
152
+ },
153
+ 'ghost-warning': {
154
+ color: tokens.colorPaletteYellowForeground2
155
+ },
156
+ // appearance: outline
157
+ outline: {
158
+ ...shorthands.borderColor('currentColor')
159
+ },
160
+ 'outline-brand': {
161
+ color: tokens.colorBrandForeground1
162
+ },
163
+ 'outline-danger': {
164
+ color: tokens.colorPaletteRedForeground3,
165
+ ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
166
+ },
167
+ 'outline-important': {
168
+ color: tokens.colorNeutralForeground3,
169
+ ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)
170
+ },
171
+ 'outline-informative': {
172
+ color: tokens.colorNeutralForeground3,
173
+ ...shorthands.borderColor(tokens.colorNeutralStroke2)
174
+ },
175
+ 'outline-severe': {
176
+ color: tokens.colorPaletteDarkOrangeForeground3
177
+ },
178
+ 'outline-subtle': {
179
+ color: tokens.colorNeutralForegroundStaticInverted
180
+ },
181
+ 'outline-success': {
182
+ color: tokens.colorPaletteGreenForeground3,
183
+ ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)
184
+ },
185
+ 'outline-warning': {
186
+ color: tokens.colorPaletteYellowForeground2
187
+ },
188
+ // appearance: tint
189
+ tint: {
190
+ },
191
+ 'tint-brand': {
192
+ backgroundColor: tokens.colorBrandBackground2,
193
+ color: tokens.colorBrandForeground2,
194
+ ...shorthands.borderColor(tokens.colorBrandStroke2)
195
+ },
196
+ 'tint-danger': {
197
+ backgroundColor: tokens.colorPaletteRedBackground1,
198
+ color: tokens.colorPaletteRedForeground1,
199
+ ...shorthands.borderColor(tokens.colorPaletteRedBorder1)
200
+ },
201
+ 'tint-important': {
202
+ backgroundColor: tokens.colorNeutralForeground3,
203
+ color: tokens.colorNeutralBackground1,
204
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
205
+ },
206
+ 'tint-informative': {
207
+ backgroundColor: tokens.colorNeutralBackground4,
208
+ color: tokens.colorNeutralForeground3,
209
+ ...shorthands.borderColor(tokens.colorNeutralStroke2)
210
+ },
211
+ 'tint-severe': {
212
+ backgroundColor: tokens.colorPaletteDarkOrangeBackground1,
213
+ color: tokens.colorPaletteDarkOrangeForeground1,
214
+ ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)
215
+ },
216
+ 'tint-subtle': {
217
+ backgroundColor: tokens.colorNeutralBackground1,
218
+ color: tokens.colorNeutralForeground3,
219
+ ...shorthands.borderColor(tokens.colorNeutralStroke2)
220
+ },
221
+ 'tint-success': {
222
+ backgroundColor: tokens.colorPaletteGreenBackground1,
223
+ color: tokens.colorPaletteGreenForeground1,
224
+ ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)
225
+ },
226
+ 'tint-warning': {
227
+ backgroundColor: tokens.colorPaletteYellowBackground1,
228
+ color: tokens.colorPaletteYellowForeground1,
229
+ ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)
230
+ }
231
+ });
232
+ const useIconRootClassName = makeResetStyles({
233
+ display: 'flex',
234
+ lineHeight: '1',
235
+ margin: `0 calc(-1 * ${textPadding})`,
236
+ fontSize: '12px'
237
+ });
238
+ const useIconStyles = makeStyles({
239
+ beforeText: {
240
+ marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
241
+ },
242
+ afterText: {
243
+ marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
244
+ },
245
+ beforeTextXL: {
246
+ marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
247
+ },
248
+ afterTextXL: {
249
+ marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
250
+ },
251
+ // size
252
+ tiny: {
253
+ fontSize: '6px'
254
+ },
255
+ 'extra-small': {
256
+ fontSize: '10px'
257
+ },
258
+ small: {
259
+ fontSize: '12px'
260
+ },
261
+ medium: {
262
+ },
263
+ large: {
264
+ fontSize: '16px'
265
+ },
266
+ 'extra-large': {
267
+ fontSize: '20px'
268
+ }
269
+ });
270
+ /**
271
+ * Applies style classnames to slots
272
+ */ export const useBadgeStyles_unstable = (state)=>{
273
+ 'use no memo';
274
+ const rootClassName = useRootClassName();
275
+ const rootStyles = useRootStyles();
276
+ const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
277
+ state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
278
+ const iconRootClassName = useIconRootClassName();
279
+ const iconStyles = useIconStyles();
280
+ if (state.icon) {
281
+ let iconPositionClass;
282
+ if (state.root.children) {
283
+ if (state.size === 'extra-large') {
284
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
285
+ } else {
286
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
287
+ }
288
+ }
289
+ state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
290
+ }
291
+ return state;
292
+ };
package/lib/components/Badge/useBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } 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 useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\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 minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\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 display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\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.colorNeutralForegroundStaticInverted,\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 ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\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.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\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.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\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 // Set by useIconRootClassName\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 'use no memo';\n\n const rootClassName = useRootClassName();\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 rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\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 iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,28 @@
1
+ import { mergeClasses, makeStyles } from '@griffel/react';
2
+ import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
3
+ export const counterBadgeClassNames = {
4
+ root: 'fui-CounterBadge',
5
+ icon: 'fui-CounterBadge__icon'
6
+ };
7
+ const useStyles = makeStyles({
8
+ dot: {
9
+ minWidth: 'auto',
10
+ width: '6px',
11
+ height: '6px',
12
+ padding: '0'
13
+ },
14
+ hide: {
15
+ display: 'none'
16
+ }
17
+ });
18
+ /**
19
+ * Applies style classnames to slots
20
+ */ export const useCounterBadgeStyles_unstable = (state)=>{
21
+ 'use no memo';
22
+ const styles = useStyles();
23
+ state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
24
+ if (state.icon) {
25
+ state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
26
+ }
27
+ return useBadgeStyles_unstable(state);
28
+ };
package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\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 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 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.root.children && !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"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,QAAQ,iCAAiC;AAKzE,OAAO,MAAMC,yBAAqD;IAChEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGjB,aAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOf,wBAAwBa;AACjC,EAAE"}
package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,104 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const presenceBadgeClassNames = {
4
+ root: 'fui-PresenceBadge',
5
+ icon: 'fui-PresenceBadge__icon'
6
+ };
7
+ const getIsBusy = (status)=>{
8
+ if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
9
+ return true;
10
+ }
11
+ return false;
12
+ };
13
+ const useRootClassName = makeResetStyles({
14
+ display: 'inline-flex',
15
+ boxSizing: 'border-box',
16
+ alignItems: 'center',
17
+ justifyContent: 'center',
18
+ borderRadius: tokens.borderRadiusCircular,
19
+ backgroundColor: tokens.colorNeutralBackground1,
20
+ // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
21
+ // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
22
+ // using padding and backgroundClip. The icon has margin: -1px to account for the padding.
23
+ // (* except size="tiny", where backgroundClip is unset)
24
+ padding: '1px',
25
+ backgroundClip: 'content-box'
26
+ });
27
+ const useIconClassName = makeResetStyles({
28
+ display: 'flex',
29
+ margin: '-1px'
30
+ });
31
+ const useStyles = makeStyles({
32
+ statusBusy: {
33
+ color: tokens.colorPaletteRedBackground3
34
+ },
35
+ statusAway: {
36
+ color: tokens.colorPaletteMarigoldBackground3
37
+ },
38
+ statusAvailable: {
39
+ color: tokens.colorPaletteLightGreenForeground3
40
+ },
41
+ statusOffline: {
42
+ color: tokens.colorNeutralForeground3
43
+ },
44
+ statusOutOfOffice: {
45
+ color: tokens.colorPaletteBerryForeground3
46
+ },
47
+ statusUnknown: {
48
+ color: tokens.colorNeutralForeground3
49
+ },
50
+ outOfOffice: {
51
+ color: tokens.colorNeutralBackground1
52
+ },
53
+ outOfOfficeAvailable: {
54
+ color: tokens.colorPaletteLightGreenForeground3
55
+ },
56
+ outOfOfficeBusy: {
57
+ color: tokens.colorPaletteRedBackground3
58
+ },
59
+ outOfOfficeUnknown: {
60
+ color: tokens.colorNeutralForeground3
61
+ },
62
+ // Icons are not resizeable, and these sizes are currently missing
63
+ // use `!important` to size the currently available icons to the missing ones
64
+ //
65
+ tiny: {
66
+ aspectRatio: '1',
67
+ width: '6px',
68
+ backgroundClip: 'unset',
69
+ '& svg': {
70
+ width: '6px !important',
71
+ height: '6px !important'
72
+ }
73
+ },
74
+ large: {
75
+ aspectRatio: '1',
76
+ width: '20px',
77
+ '& svg': {
78
+ width: '20px !important',
79
+ height: '20px !important'
80
+ }
81
+ },
82
+ extraLarge: {
83
+ aspectRatio: '1',
84
+ width: '28px',
85
+ '& svg': {
86
+ width: '28px !important',
87
+ height: '28px !important'
88
+ }
89
+ }
90
+ });
91
+ /**
92
+ * Applies style classnames to slots
93
+ */ export const usePresenceBadgeStyles_unstable = (state)=>{
94
+ 'use no memo';
95
+ const rootClassName = useRootClassName();
96
+ const iconClassName = useIconClassName();
97
+ const styles = useStyles();
98
+ const isBusy = getIsBusy(state.status);
99
+ state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
100
+ if (state.icon) {
101
+ state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
102
+ }
103
+ return state;
104
+ };
package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n\n return false;\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorNeutralBackground1,\n\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n statusUnknown: {\n color: tokens.colorNeutralForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n outOfOfficeUnknown: {\n color: tokens.colorNeutralForeground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n rootClassName,\n isBusy && styles.statusBusy,\n state.status === 'away' && styles.statusAway,\n state.status === 'available' && styles.statusAvailable,\n state.status === 'offline' && styles.statusOffline,\n state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.status === 'unknown' && styles.statusUnknown,\n state.outOfOffice && styles.outOfOffice,\n state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n state.outOfOffice &&\n (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n styles.statusOutOfOffice,\n state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n state.size === 'tiny' && styles.tiny,\n state.size === 'large' && styles.large,\n state.size === 'extra-large' && styles.extraLarge,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","display","boxSizing","alignItems","justifyContent","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,302 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ badgeClassNames: function() {
13
+ return badgeClassNames;
14
+ },
15
+ useBadgeStyles_unstable: function() {
16
+ return useBadgeStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const badgeClassNames = {
22
+ root: 'fui-Badge',
23
+ icon: 'fui-Badge__icon'
24
+ };
25
+ // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
26
+ // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
27
+ const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
28
+ const useRootClassName = (0, _react.makeResetStyles)({
29
+ display: 'inline-flex',
30
+ boxSizing: 'border-box',
31
+ alignItems: 'center',
32
+ justifyContent: 'center',
33
+ position: 'relative',
34
+ ..._reacttheme.typographyStyles.caption1Strong,
35
+ height: '20px',
36
+ minWidth: '20px',
37
+ padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`,
38
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
39
+ // Use a transparent stroke (rather than no border) so the border is visible in high contrast
40
+ borderColor: _reacttheme.tokens.colorTransparentStroke,
41
+ '::after': {
42
+ content: '""',
43
+ position: 'absolute',
44
+ top: 0,
45
+ left: 0,
46
+ bottom: 0,
47
+ right: 0,
48
+ borderStyle: 'solid',
49
+ borderColor: 'inherit',
50
+ borderWidth: _reacttheme.tokens.strokeWidthThin,
51
+ borderRadius: 'inherit'
52
+ }
53
+ });
54
+ const useRootStyles = (0, _react.makeStyles)({
55
+ fontSmallToTiny: {
56
+ ..._reacttheme.typographyStyles.caption2Strong
57
+ },
58
+ // size
59
+ tiny: {
60
+ width: '6px',
61
+ height: '6px',
62
+ fontSize: '4px',
63
+ lineHeight: '4px',
64
+ minWidth: 'unset',
65
+ padding: 'unset'
66
+ },
67
+ 'extra-small': {
68
+ width: '10px',
69
+ height: '10px',
70
+ fontSize: '6px',
71
+ lineHeight: '6px',
72
+ minWidth: 'unset',
73
+ padding: 'unset'
74
+ },
75
+ small: {
76
+ minWidth: '16px',
77
+ height: '16px',
78
+ padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
79
+ },
80
+ medium: {},
81
+ large: {
82
+ minWidth: '24px',
83
+ height: '24px',
84
+ padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
85
+ },
86
+ 'extra-large': {
87
+ minWidth: '32px',
88
+ height: '32px',
89
+ padding: `0 calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${textPadding})`
90
+ },
91
+ // shape
92
+ square: {
93
+ borderRadius: _reacttheme.tokens.borderRadiusNone
94
+ },
95
+ rounded: {
96
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
97
+ },
98
+ roundedSmallToTiny: {
99
+ borderRadius: _reacttheme.tokens.borderRadiusSmall
100
+ },
101
+ circular: {},
102
+ // hide the boder when appearance is "ghost"
103
+ borderGhost: {
104
+ // The border is applied in an ::after pseudo-element because it should not affect layout.
105
+ // The padding and size of the badge should be the same regardless of whether or not it has a border.
106
+ '::after': {
107
+ display: 'none'
108
+ }
109
+ },
110
+ // appearance: filled
111
+ filled: {},
112
+ 'filled-brand': {
113
+ backgroundColor: _reacttheme.tokens.colorBrandBackground,
114
+ color: _reacttheme.tokens.colorNeutralForegroundOnBrand
115
+ },
116
+ 'filled-danger': {
117
+ backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3,
118
+ color: _reacttheme.tokens.colorNeutralForegroundOnBrand
119
+ },
120
+ 'filled-important': {
121
+ backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
122
+ color: _reacttheme.tokens.colorNeutralBackground1
123
+ },
124
+ 'filled-informative': {
125
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground5,
126
+ color: _reacttheme.tokens.colorNeutralForeground3
127
+ },
128
+ 'filled-severe': {
129
+ backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3,
130
+ color: _reacttheme.tokens.colorNeutralForegroundOnBrand
131
+ },
132
+ 'filled-subtle': {
133
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
134
+ color: _reacttheme.tokens.colorNeutralForeground1
135
+ },
136
+ 'filled-success': {
137
+ backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3,
138
+ color: _reacttheme.tokens.colorNeutralForegroundOnBrand
139
+ },
140
+ 'filled-warning': {
141
+ backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground3,
142
+ color: _reacttheme.tokens.colorNeutralForeground1Static
143
+ },
144
+ // appearance: ghost
145
+ ghost: {},
146
+ 'ghost-brand': {
147
+ color: _reacttheme.tokens.colorBrandForeground1
148
+ },
149
+ 'ghost-danger': {
150
+ color: _reacttheme.tokens.colorPaletteRedForeground3
151
+ },
152
+ 'ghost-important': {
153
+ color: _reacttheme.tokens.colorNeutralForeground1
154
+ },
155
+ 'ghost-informative': {
156
+ color: _reacttheme.tokens.colorNeutralForeground3
157
+ },
158
+ 'ghost-severe': {
159
+ color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
160
+ },
161
+ 'ghost-subtle': {
162
+ color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
163
+ },
164
+ 'ghost-success': {
165
+ color: _reacttheme.tokens.colorPaletteGreenForeground3
166
+ },
167
+ 'ghost-warning': {
168
+ color: _reacttheme.tokens.colorPaletteYellowForeground2
169
+ },
170
+ // appearance: outline
171
+ outline: {
172
+ ..._react.shorthands.borderColor('currentColor')
173
+ },
174
+ 'outline-brand': {
175
+ color: _reacttheme.tokens.colorBrandForeground1
176
+ },
177
+ 'outline-danger': {
178
+ color: _reacttheme.tokens.colorPaletteRedForeground3,
179
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
180
+ },
181
+ 'outline-important': {
182
+ color: _reacttheme.tokens.colorNeutralForeground3,
183
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
184
+ },
185
+ 'outline-informative': {
186
+ color: _reacttheme.tokens.colorNeutralForeground3,
187
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
188
+ },
189
+ 'outline-severe': {
190
+ color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
191
+ },
192
+ 'outline-subtle': {
193
+ color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
194
+ },
195
+ 'outline-success': {
196
+ color: _reacttheme.tokens.colorPaletteGreenForeground3,
197
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
198
+ },
199
+ 'outline-warning': {
200
+ color: _reacttheme.tokens.colorPaletteYellowForeground2
201
+ },
202
+ // appearance: tint
203
+ tint: {},
204
+ 'tint-brand': {
205
+ backgroundColor: _reacttheme.tokens.colorBrandBackground2,
206
+ color: _reacttheme.tokens.colorBrandForeground2,
207
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
208
+ },
209
+ 'tint-danger': {
210
+ backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
211
+ color: _reacttheme.tokens.colorPaletteRedForeground1,
212
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
213
+ },
214
+ 'tint-important': {
215
+ backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
216
+ color: _reacttheme.tokens.colorNeutralBackground1,
217
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
218
+ },
219
+ 'tint-informative': {
220
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
221
+ color: _reacttheme.tokens.colorNeutralForeground3,
222
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
223
+ },
224
+ 'tint-severe': {
225
+ backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
226
+ color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
227
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
228
+ },
229
+ 'tint-subtle': {
230
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
231
+ color: _reacttheme.tokens.colorNeutralForeground3,
232
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
233
+ },
234
+ 'tint-success': {
235
+ backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
236
+ color: _reacttheme.tokens.colorPaletteGreenForeground1,
237
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
238
+ },
239
+ 'tint-warning': {
240
+ backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
241
+ color: _reacttheme.tokens.colorPaletteYellowForeground1,
242
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
243
+ }
244
+ });
245
+ const useIconRootClassName = (0, _react.makeResetStyles)({
246
+ display: 'flex',
247
+ lineHeight: '1',
248
+ margin: `0 calc(-1 * ${textPadding})`,
249
+ fontSize: '12px'
250
+ });
251
+ const useIconStyles = (0, _react.makeStyles)({
252
+ beforeText: {
253
+ marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
254
+ },
255
+ afterText: {
256
+ marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
257
+ },
258
+ beforeTextXL: {
259
+ marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
260
+ },
261
+ afterTextXL: {
262
+ marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
263
+ },
264
+ // size
265
+ tiny: {
266
+ fontSize: '6px'
267
+ },
268
+ 'extra-small': {
269
+ fontSize: '10px'
270
+ },
271
+ small: {
272
+ fontSize: '12px'
273
+ },
274
+ medium: {},
275
+ large: {
276
+ fontSize: '16px'
277
+ },
278
+ 'extra-large': {
279
+ fontSize: '20px'
280
+ }
281
+ });
282
+ const useBadgeStyles_unstable = (state)=>{
283
+ 'use no memo';
284
+ const rootClassName = useRootClassName();
285
+ const rootStyles = useRootStyles();
286
+ const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
287
+ state.root.className = (0, _react.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
288
+ const iconRootClassName = useIconRootClassName();
289
+ const iconStyles = useIconStyles();
290
+ if (state.icon) {
291
+ let iconPositionClass;
292
+ if (state.root.children) {
293
+ if (state.size === 'extra-large') {
294
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
295
+ } else {
296
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
297
+ }
298
+ }
299
+ state.icon.className = (0, _react.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
300
+ }
301
+ return state;
302
+ };
package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } 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 useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\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 minWidth: 'unset',\n padding: 'unset',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n padding: 'unset',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n },\n\n // shape\n\n square: { borderRadius: tokens.borderRadiusNone },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n circular: {\n // Set by useRootClassName\n },\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\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 display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\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.colorNeutralForegroundStaticInverted,\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 ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\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.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\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.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\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 // Set by useIconRootClassName\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 'use no memo';\n\n const rootClassName = useRootClassName();\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 rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\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 iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["badgeClassNames","useBadgeStyles_unstable","root","icon","textPadding","tokens","spacingHorizontalXXS","useRootClassName","makeResetStyles","display","boxSizing","alignItems","justifyContent","position","typographyStyles","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","makeStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","shorthands","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","state","rootClassName","rootStyles","smallToTiny","size","className","mergeClasses","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ counterBadgeClassNames: function() {
13
+ return counterBadgeClassNames;
14
+ },
15
+ useCounterBadgeStyles_unstable: function() {
16
+ return useCounterBadgeStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
21
+ const counterBadgeClassNames = {
22
+ root: 'fui-CounterBadge',
23
+ icon: 'fui-CounterBadge__icon'
24
+ };
25
+ const useStyles = (0, _react.makeStyles)({
26
+ dot: {
27
+ minWidth: 'auto',
28
+ width: '6px',
29
+ height: '6px',
30
+ padding: '0'
31
+ },
32
+ hide: {
33
+ display: 'none'
34
+ }
35
+ });
36
+ const useCounterBadgeStyles_unstable = (state)=>{
37
+ 'use no memo';
38
+ const styles = useStyles();
39
+ state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
40
+ if (state.icon) {
41
+ state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
42
+ }
43
+ return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
44
+ };
package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\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 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 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.root.children && !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"],"names":["counterBadgeClassNames","useCounterBadgeStyles_unstable","root","icon","useStyles","makeStyles","dot","minWidth","width","height","padding","hide","display","state","styles","className","mergeClasses","children","useBadgeStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,sBAAAA;eAAAA;;IAoBAC,8BAAAA;eAAAA;;;uBA1B4B;sCACD;AAKjC,MAAMD,yBAAqD;IAChEE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,MAAMX,iCAAiC,CAACY;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EACrBhB,uBAAuBE,IAAI,EAC3BW,MAAMP,GAAG,IAAIQ,OAAOR,GAAG,EACvB,CAACO,MAAMX,IAAI,CAACe,QAAQ,IAAI,CAACJ,MAAMP,GAAG,IAAIQ,OAAOH,IAAI,EACjDE,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAahB,uBAAuBG,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOG,IAAAA,6CAAAA,EAAwBL;AACjC"}
package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js ADDED
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ presenceBadgeClassNames: function() {
13
+ return presenceBadgeClassNames;
14
+ },
15
+ usePresenceBadgeStyles_unstable: function() {
16
+ return usePresenceBadgeStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const presenceBadgeClassNames = {
22
+ root: 'fui-PresenceBadge',
23
+ icon: 'fui-PresenceBadge__icon'
24
+ };
25
+ const getIsBusy = (status)=>{
26
+ if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
27
+ return true;
28
+ }
29
+ return false;
30
+ };
31
+ const useRootClassName = (0, _react.makeResetStyles)({
32
+ display: 'inline-flex',
33
+ boxSizing: 'border-box',
34
+ alignItems: 'center',
35
+ justifyContent: 'center',
36
+ borderRadius: _reacttheme.tokens.borderRadiusCircular,
37
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
38
+ // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
39
+ // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
40
+ // using padding and backgroundClip. The icon has margin: -1px to account for the padding.
41
+ // (* except size="tiny", where backgroundClip is unset)
42
+ padding: '1px',
43
+ backgroundClip: 'content-box'
44
+ });
45
+ const useIconClassName = (0, _react.makeResetStyles)({
46
+ display: 'flex',
47
+ margin: '-1px'
48
+ });
49
+ const useStyles = (0, _react.makeStyles)({
50
+ statusBusy: {
51
+ color: _reacttheme.tokens.colorPaletteRedBackground3
52
+ },
53
+ statusAway: {
54
+ color: _reacttheme.tokens.colorPaletteMarigoldBackground3
55
+ },
56
+ statusAvailable: {
57
+ color: _reacttheme.tokens.colorPaletteLightGreenForeground3
58
+ },
59
+ statusOffline: {
60
+ color: _reacttheme.tokens.colorNeutralForeground3
61
+ },
62
+ statusOutOfOffice: {
63
+ color: _reacttheme.tokens.colorPaletteBerryForeground3
64
+ },
65
+ statusUnknown: {
66
+ color: _reacttheme.tokens.colorNeutralForeground3
67
+ },
68
+ outOfOffice: {
69
+ color: _reacttheme.tokens.colorNeutralBackground1
70
+ },
71
+ outOfOfficeAvailable: {
72
+ color: _reacttheme.tokens.colorPaletteLightGreenForeground3
73
+ },
74
+ outOfOfficeBusy: {
75
+ color: _reacttheme.tokens.colorPaletteRedBackground3
76
+ },
77
+ outOfOfficeUnknown: {
78
+ color: _reacttheme.tokens.colorNeutralForeground3
79
+ },
80
+ // Icons are not resizeable, and these sizes are currently missing
81
+ // use `!important` to size the currently available icons to the missing ones
82
+ //
83
+ tiny: {
84
+ aspectRatio: '1',
85
+ width: '6px',
86
+ backgroundClip: 'unset',
87
+ '& svg': {
88
+ width: '6px !important',
89
+ height: '6px !important'
90
+ }
91
+ },
92
+ large: {
93
+ aspectRatio: '1',
94
+ width: '20px',
95
+ '& svg': {
96
+ width: '20px !important',
97
+ height: '20px !important'
98
+ }
99
+ },
100
+ extraLarge: {
101
+ aspectRatio: '1',
102
+ width: '28px',
103
+ '& svg': {
104
+ width: '28px !important',
105
+ height: '28px !important'
106
+ }
107
+ }
108
+ });
109
+ const usePresenceBadgeStyles_unstable = (state)=>{
110
+ 'use no memo';
111
+ const rootClassName = useRootClassName();
112
+ const iconClassName = useIconClassName();
113
+ const styles = useStyles();
114
+ const isBusy = getIsBusy(state.status);
115
+ state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
116
+ if (state.icon) {
117
+ state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
118
+ }
119
+ return state;
120
+ };
package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n return true;\n }\n\n return false;\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorNeutralBackground1,\n\n // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n // (* except size=\"tiny\", where backgroundClip is unset)\n padding: '1px',\n backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n display: 'flex',\n margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n statusUnknown: {\n color: tokens.colorNeutralForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n outOfOfficeUnknown: {\n color: tokens.colorNeutralForeground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n const iconClassName = useIconClassName();\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n rootClassName,\n isBusy && styles.statusBusy,\n state.status === 'away' && styles.statusAway,\n state.status === 'available' && styles.statusAvailable,\n state.status === 'offline' && styles.statusOffline,\n state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.status === 'unknown' && styles.statusUnknown,\n state.outOfOffice && styles.outOfOffice,\n state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n state.outOfOffice &&\n (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n styles.statusOutOfOffice,\n state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n state.size === 'tiny' && styles.tiny,\n state.size === 'large' && styles.large,\n state.size === 'extra-large' && styles.extraLarge,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n }\n\n return state;\n};\n"],"names":["presenceBadgeClassNames","usePresenceBadgeStyles_unstable","root","icon","getIsBusy","status","useRootClassName","makeResetStyles","display","boxSizing","alignItems","justifyContent","borderRadius","tokens","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","makeStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","state","rootClassName","iconClassName","styles","isBusy","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,uBAAAA;eAAAA;;IAoGAC,+BAAAA;eAAAA;;;uBA1G6C;4BACnC;AAKhB,MAAMD,0BAAsD;IACjEE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,YAAY,CAACC;IACjB,IAAIA,WAAW,UAAUA,WAAW,oBAAoBA,WAAW,WAAW;QAC5E,OAAO;IACT;IAEA,OAAO;AACT;AAEA,MAAMC,mBAAmBC,IAAAA,sBAAAA,EAAgB;IACvCC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,gBAAgB;IAEhBC,cAAcC,kBAAAA,CAAOC,oBAAoB;IACzCC,iBAAiBF,kBAAAA,CAAOG,uBAAuB;IAE/C,iHAAiH;IACjH,iHAAiH;IACjH,0FAA0F;IAC1F,wDAAwD;IACxDC,SAAS;IACTC,gBAAgB;AAClB;AAEA,MAAMC,mBAAmBZ,IAAAA,sBAAAA,EAAgB;IACvCC,SAAS;IACTY,QAAQ;AACV;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,YAAY;QACVC,OAAOX,kBAAAA,CAAOY,0BAA0B;IAC1C;IACAC,YAAY;QACVF,OAAOX,kBAAAA,CAAOc,+BAA+B;IAC/C;IACAC,iBAAiB;QACfJ,OAAOX,kBAAAA,CAAOgB,iCAAiC;IACjD;IACAC,eAAe;QACbN,OAAOX,kBAAAA,CAAOkB,uBAAuB;IACvC;IACAC,mBAAmB;QACjBR,OAAOX,kBAAAA,CAAOoB,4BAA4B;IAC5C;IACAC,eAAe;QACbV,OAAOX,kBAAAA,CAAOkB,uBAAuB;IACvC;IACAI,aAAa;QACXX,OAAOX,kBAAAA,CAAOG,uBAAuB;IACvC;IACAoB,sBAAsB;QACpBZ,OAAOX,kBAAAA,CAAOgB,iCAAiC;IACjD;IACAQ,iBAAiB;QACfb,OAAOX,kBAAAA,CAAOY,0BAA0B;IAC1C;IACAa,oBAAoB;QAClBd,OAAOX,kBAAAA,CAAOkB,uBAAuB;IACvC;IAEA,kEAAkE;IAClE,6EAA6E;IAC7E,EAAE;IACFQ,MAAM;QACJC,aAAa;QACbC,OAAO;QACPvB,gBAAgB;QAChB,SAAS;YACPuB,OAAO;YACPC,QAAQ;QACV;IACF;IACAC,OAAO;QACLH,aAAa;QACbC,OAAO;QACP,SAAS;YACPA,OAAO;YACPC,QAAQ;QACV;IACF;IACAE,YAAY;QACVJ,aAAa;QACbC,OAAO;QACP,SAAS;YACPA,OAAO;YACPC,QAAQ;QACV;IACF;AACF;AAKO,MAAMzC,kCAAkC,CAAC4C;IAC9C;IAEA,MAAMC,gBAAgBxC;IACtB,MAAMyC,gBAAgB5B;IACtB,MAAM6B,SAAS3B;IACf,MAAM4B,SAAS7C,UAAUyC,MAAMxC,MAAM;IACrCwC,MAAM3C,IAAI,CAACgD,SAAS,GAAGC,IAAAA,mBAAAA,EACrBnD,wBAAwBE,IAAI,EAC5B4C,eACAG,UAAUD,OAAOzB,UAAU,EAC3BsB,MAAMxC,MAAM,KAAK,UAAU2C,OAAOtB,UAAU,EAC5CmB,MAAMxC,MAAM,KAAK,eAAe2C,OAAOpB,eAAe,EACtDiB,MAAMxC,MAAM,KAAK,aAAa2C,OAAOlB,aAAa,EAClDe,MAAMxC,MAAM,KAAK,mBAAmB2C,OAAOhB,iBAAiB,EAC5Da,MAAMxC,MAAM,KAAK,aAAa2C,OAAOd,aAAa,EAClDW,MAAMV,WAAW,IAAIa,OAAOb,WAAW,EACvCU,MAAMV,WAAW,IAAIU,MAAMxC,MAAM,KAAK,eAAe2C,OAAOZ,oBAAoB,EAChFS,MAAMV,WAAW,IAAIc,UAAUD,OAAOX,eAAe,EACrDQ,MAAMV,WAAW,IACdU,CAAAA,MAAMxC,MAAM,KAAK,mBAAmBwC,MAAMxC,MAAM,KAAK,UAAUwC,MAAMxC,MAAM,KAAK,SAAA,KACjF2C,OAAOhB,iBAAiB,EAC1Ba,MAAMV,WAAW,IAAIU,MAAMxC,MAAM,KAAK,aAAa2C,OAAOV,kBAAkB,EAC5EO,MAAMO,IAAI,KAAK,UAAUJ,OAAOT,IAAI,EACpCM,MAAMO,IAAI,KAAK,WAAWJ,OAAOL,KAAK,EACtCE,MAAMO,IAAI,KAAK,iBAAiBJ,OAAOJ,UAAU,EACjDC,MAAM3C,IAAI,CAACgD,SAAS;IAGtB,IAAIL,MAAM1C,IAAI,EAAE;QACd0C,MAAM1C,IAAI,CAAC+C,SAAS,GAAGC,IAAAA,mBAAAA,EAAanD,wBAAwBG,IAAI,EAAE4C,eAAeF,MAAM1C,IAAI,CAAC+C,SAAS;IACvG;IAEA,OAAOL;AACT"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "9.3.1",
3
+ "version": "9.4.0",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,10 +19,10 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@fluentui/react-icons": "^2.0.245",
22
- "@fluentui/react-jsx-runtime": "^9.1.1",
22
+ "@fluentui/react-jsx-runtime": "^9.1.2",
23
23
  "@fluentui/react-shared-contexts": "^9.24.0",
24
24
  "@fluentui/react-theme": "^9.1.24",
25
- "@fluentui/react-utilities": "^9.21.1",
25
+ "@fluentui/react-utilities": "^9.22.0",
26
26
  "@griffel/react": "^1.5.22",
27
27
  "@swc/helpers": "^0.5.1"
28
28
  },