@fluentui/react-card 0.0.0-nightly-20250716-0406.1 → 0.0.0-nightly-20250718-0405.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +26 -15
  2. package/lib/components/Card/useCardStyles.styles.raw.js +366 -0
  3. package/lib/components/Card/useCardStyles.styles.raw.js.map +1 -0
  4. package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js +37 -0
  5. package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map +1 -0
  6. package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js +103 -0
  7. package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +1 -0
  8. package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js +35 -0
  9. package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +1 -0
  10. package/lib-commonjs/components/Card/useCardStyles.styles.raw.js +382 -0
  11. package/lib-commonjs/components/Card/useCardStyles.styles.raw.js.map +1 -0
  12. package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js +51 -0
  13. package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js.map +1 -0
  14. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js +118 -0
  15. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +1 -0
  16. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js +49 -0
  17. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +1 -0
  18. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,28 +1,39 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Wed, 16 Jul 2025 04:21:14 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 18 Jul 2025 04:20:26 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250716-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250716-0406.1)
7
+ ## [0.0.0-nightly-20250718-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250718-0405.1)
8
8
 
9
- Wed, 16 Jul 2025 04:21:14 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.3..@fluentui/react-card_v0.0.0-nightly-20250716-0406.1)
9
+ Fri, 18 Jul 2025 04:20:26 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.4.0..@fluentui/react-card_v0.0.0-nightly-20250718-0405.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
18
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
19
- - Bump @fluentui/react-text to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
20
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
21
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
22
- - Bump @fluentui/react-button to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
25
- - Bump @fluentui/react-provider to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
19
+ - Bump @fluentui/react-text to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
20
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
22
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
23
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
25
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20250718-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/ab7d5b05ebda00ad8978b3c581cc55924d972bf7) by beachball)
26
+
27
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.4.0)
28
+
29
+ Thu, 17 Jul 2025 13:49:35 GMT
30
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.3..@fluentui/react-card_v9.4.0)
31
+
32
+ ### Minor changes
33
+
34
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
35
+ - Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
36
+ - Bump @fluentui/react-text to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
26
37
 
27
38
  ## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.3.3)
28
39
 
package/lib/components/Card/useCardStyles.styles.raw.js ADDED
@@ -0,0 +1,366 @@
1
+ import * as React from 'react';
2
+ import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
3
+ import { tokens } from '@fluentui/react-theme';
4
+ import { textClassNames } from '@fluentui/react-text';
5
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
6
+ import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
7
+ import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
8
+ import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
9
+ /**
10
+ * Static CSS class names used internally for the component slots.
11
+ */ export const cardClassNames = {
12
+ root: 'fui-Card',
13
+ floatingAction: 'fui-Card__floatingAction',
14
+ checkbox: 'fui-Card__checkbox'
15
+ };
16
+ /**
17
+ * CSS variable names used internally for uniform styling in Card.
18
+ */ export const cardCSSVars = {
19
+ cardSizeVar: '--fui-Card--size',
20
+ cardBorderRadiusVar: '--fui-Card--border-radius'
21
+ };
22
+ const focusOutlineStyle = {
23
+ outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
24
+ outlineWidth: tokens.strokeWidthThick,
25
+ outlineOffset: '-2px'
26
+ };
27
+ const useCardResetStyles = makeResetStyles({
28
+ overflow: 'hidden',
29
+ borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
30
+ padding: `var(${cardCSSVars.cardSizeVar})`,
31
+ gap: `var(${cardCSSVars.cardSizeVar})`,
32
+ display: 'flex',
33
+ position: 'relative',
34
+ boxSizing: 'border-box',
35
+ color: tokens.colorNeutralForeground1,
36
+ // Border setting using after pseudo element to allow CardPreview to render behind it.
37
+ '::after': {
38
+ position: 'absolute',
39
+ top: 0,
40
+ left: 0,
41
+ right: 0,
42
+ bottom: 0,
43
+ content: '""',
44
+ pointerEvents: 'none',
45
+ ...shorthands.borderStyle('solid'),
46
+ ...shorthands.borderWidth(tokens.strokeWidthThin),
47
+ borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
48
+ },
49
+ // Prevents CardHeader and CardFooter from shrinking.
50
+ [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {
51
+ flexShrink: 0
52
+ }
53
+ });
54
+ const useCardStyles = makeStyles({
55
+ focused: {
56
+ ...createFocusOutlineStyle({
57
+ style: focusOutlineStyle,
58
+ selector: 'focus'
59
+ })
60
+ },
61
+ selectableFocused: createFocusOutlineStyle({
62
+ style: focusOutlineStyle,
63
+ selector: 'focus-within'
64
+ }),
65
+ orientationHorizontal: {
66
+ flexDirection: 'row',
67
+ alignItems: 'center',
68
+ // Remove vertical padding to keep CardPreview content flush with Card's borders.
69
+ [`> .${cardPreviewClassNames.root}`]: {
70
+ marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
71
+ marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
72
+ },
73
+ // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
74
+ // As such, the code below targets a CardPreview, when it's the first element.
75
+ // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.
76
+ [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
77
+ marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
78
+ },
79
+ // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
80
+ // As such, the code below targets a CardPreview, when it's the last element.
81
+ // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.
82
+ [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
83
+ marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
84
+ },
85
+ // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
86
+ [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {
87
+ flexGrow: 1
88
+ }
89
+ },
90
+ orientationVertical: {
91
+ flexDirection: 'column',
92
+ // Remove lateral padding to keep CardPreview content flush with Card's borders.
93
+ [`> .${cardPreviewClassNames.root}`]: {
94
+ marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
95
+ marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
96
+ },
97
+ // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
98
+ // As such, the code below targets a CardPreview, when it's the first element.
99
+ // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.
100
+ [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
101
+ marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
102
+ },
103
+ [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {
104
+ marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
105
+ },
106
+ // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
107
+ // As such, the code below targets a CardPreview, when it's the first element.
108
+ // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.
109
+ [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
110
+ marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
111
+ }
112
+ },
113
+ sizeSmall: {
114
+ [cardCSSVars.cardSizeVar]: '8px',
115
+ [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall
116
+ },
117
+ sizeMedium: {
118
+ [cardCSSVars.cardSizeVar]: '12px',
119
+ [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium
120
+ },
121
+ sizeLarge: {
122
+ [cardCSSVars.cardSizeVar]: '16px',
123
+ [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge
124
+ },
125
+ interactive: {
126
+ [`& .${textClassNames.root}`]: {
127
+ color: 'currentColor'
128
+ }
129
+ },
130
+ filled: {
131
+ backgroundColor: tokens.colorNeutralBackground1,
132
+ boxShadow: tokens.shadow4,
133
+ '::after': {
134
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
135
+ }
136
+ },
137
+ filledInteractive: {
138
+ cursor: 'pointer',
139
+ backgroundColor: tokens.colorNeutralBackground1,
140
+ boxShadow: tokens.shadow4,
141
+ '::after': {
142
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
143
+ },
144
+ ':hover': {
145
+ color: tokens.colorNeutralForeground1Hover,
146
+ backgroundColor: tokens.colorNeutralBackground1Hover,
147
+ boxShadow: tokens.shadow8
148
+ },
149
+ ':active': {
150
+ backgroundColor: tokens.colorNeutralBackground1Pressed
151
+ }
152
+ },
153
+ filledInteractiveSelected: {
154
+ backgroundColor: tokens.colorNeutralBackground1Selected,
155
+ '::after': {
156
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
157
+ },
158
+ ':hover': {
159
+ color: tokens.colorNeutralForeground1Selected,
160
+ backgroundColor: tokens.colorNeutralBackground1Selected
161
+ }
162
+ },
163
+ filledAlternative: {
164
+ backgroundColor: tokens.colorNeutralBackground2,
165
+ boxShadow: tokens.shadow4,
166
+ '::after': {
167
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
168
+ }
169
+ },
170
+ filledAlternativeInteractive: {
171
+ cursor: 'pointer',
172
+ backgroundColor: tokens.colorNeutralBackground2,
173
+ boxShadow: tokens.shadow4,
174
+ '::after': {
175
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
176
+ },
177
+ ':hover': {
178
+ color: tokens.colorNeutralForeground2Hover,
179
+ backgroundColor: tokens.colorNeutralBackground2Hover,
180
+ boxShadow: tokens.shadow8
181
+ },
182
+ ':active': {
183
+ backgroundColor: tokens.colorNeutralBackground2Pressed
184
+ }
185
+ },
186
+ filledAlternativeInteractiveSelected: {
187
+ backgroundColor: tokens.colorNeutralBackground2Selected,
188
+ '::after': {
189
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
190
+ },
191
+ ':hover': {
192
+ color: tokens.colorNeutralForeground2Selected,
193
+ backgroundColor: tokens.colorNeutralBackground2Selected
194
+ }
195
+ },
196
+ outline: {
197
+ backgroundColor: tokens.colorTransparentBackground,
198
+ boxShadow: 'none',
199
+ '::after': {
200
+ ...shorthands.borderColor(tokens.colorNeutralStroke1)
201
+ }
202
+ },
203
+ outlineInteractive: {
204
+ cursor: 'pointer',
205
+ backgroundColor: tokens.colorTransparentBackground,
206
+ boxShadow: 'none',
207
+ '::after': {
208
+ ...shorthands.borderColor(tokens.colorNeutralStroke1)
209
+ },
210
+ ':hover': {
211
+ color: tokens.colorNeutralForeground1Hover,
212
+ backgroundColor: tokens.colorTransparentBackgroundHover,
213
+ '::after': {
214
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)
215
+ }
216
+ },
217
+ ':active': {
218
+ backgroundColor: tokens.colorTransparentBackgroundPressed,
219
+ '::after': {
220
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)
221
+ }
222
+ }
223
+ },
224
+ outlineInteractiveSelected: {
225
+ backgroundColor: tokens.colorTransparentBackgroundSelected,
226
+ '::after': {
227
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
228
+ },
229
+ ':hover': {
230
+ color: tokens.colorNeutralForeground1Selected,
231
+ backgroundColor: tokens.colorTransparentBackgroundSelected
232
+ }
233
+ },
234
+ subtle: {
235
+ backgroundColor: tokens.colorSubtleBackground,
236
+ boxShadow: 'none',
237
+ '::after': {
238
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
239
+ }
240
+ },
241
+ subtleInteractive: {
242
+ cursor: 'pointer',
243
+ backgroundColor: tokens.colorSubtleBackground,
244
+ boxShadow: 'none',
245
+ '::after': {
246
+ ...shorthands.borderColor(tokens.colorTransparentStroke)
247
+ },
248
+ ':hover': {
249
+ color: tokens.colorNeutralForeground1Hover,
250
+ backgroundColor: tokens.colorSubtleBackgroundHover
251
+ },
252
+ ':active': {
253
+ backgroundColor: tokens.colorSubtleBackgroundPressed
254
+ }
255
+ },
256
+ subtleInteractiveSelected: {
257
+ backgroundColor: tokens.colorSubtleBackgroundSelected,
258
+ '::after': {
259
+ ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
260
+ },
261
+ ':hover': {
262
+ color: tokens.colorNeutralForeground1Selected,
263
+ backgroundColor: tokens.colorSubtleBackgroundSelected
264
+ }
265
+ },
266
+ highContrastSelected: {
267
+ '@media (forced-colors: active)': {
268
+ forcedColorAdjust: 'none',
269
+ backgroundColor: 'Highlight',
270
+ color: 'HighlightText',
271
+ [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
272
+ forcedColorAdjust: 'auto'
273
+ },
274
+ '::after': {
275
+ ...shorthands.borderColor('Highlight')
276
+ }
277
+ }
278
+ },
279
+ highContrastInteractive: {
280
+ '@media (forced-colors: active)': {
281
+ ':hover, :active': {
282
+ forcedColorAdjust: 'none',
283
+ backgroundColor: 'Highlight',
284
+ color: 'HighlightText',
285
+ [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
286
+ forcedColorAdjust: 'auto'
287
+ }
288
+ },
289
+ '::after': {
290
+ ...shorthands.borderColor('Highlight')
291
+ }
292
+ }
293
+ },
294
+ select: {
295
+ position: 'absolute',
296
+ top: '4px',
297
+ right: '4px',
298
+ zIndex: 1
299
+ },
300
+ hiddenCheckbox: {
301
+ overflow: 'hidden',
302
+ width: '1px',
303
+ height: '1px',
304
+ position: 'absolute',
305
+ clip: 'rect(0 0 0 0)',
306
+ clipPath: 'inset(50%)',
307
+ whiteSpace: 'nowrap'
308
+ }
309
+ });
310
+ /**
311
+ * Apply styling to the Card slots based on the state.
312
+ */ export const useCardStyles_unstable = (state)=>{
313
+ 'use no memo';
314
+ const resetStyles = useCardResetStyles();
315
+ const styles = useCardStyles();
316
+ const orientationMap = {
317
+ horizontal: styles.orientationHorizontal,
318
+ vertical: styles.orientationVertical
319
+ };
320
+ const sizeMap = {
321
+ small: styles.sizeSmall,
322
+ medium: styles.sizeMedium,
323
+ large: styles.sizeLarge
324
+ };
325
+ const appearanceMap = {
326
+ filled: styles.filled,
327
+ 'filled-alternative': styles.filledAlternative,
328
+ outline: styles.outline,
329
+ subtle: styles.subtle
330
+ };
331
+ const selectedMap = {
332
+ filled: styles.filledInteractiveSelected,
333
+ 'filled-alternative': styles.filledAlternativeInteractiveSelected,
334
+ outline: styles.outlineInteractiveSelected,
335
+ subtle: styles.subtleInteractiveSelected
336
+ };
337
+ const interactiveMap = {
338
+ filled: styles.filledInteractive,
339
+ 'filled-alternative': styles.filledAlternativeInteractive,
340
+ outline: styles.outlineInteractive,
341
+ subtle: styles.subtleInteractive
342
+ };
343
+ const isSelectableOrInteractive = state.interactive || state.selectable;
344
+ const focusedClassName = React.useMemo(()=>{
345
+ if (state.selectable) {
346
+ if (state.selectFocused) {
347
+ return styles.selectableFocused;
348
+ }
349
+ return '';
350
+ }
351
+ return styles.focused;
352
+ }, [
353
+ state.selectFocused,
354
+ state.selectable,
355
+ styles.focused,
356
+ styles.selectableFocused
357
+ ]);
358
+ state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
359
+ if (state.floatingAction) {
360
+ state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
361
+ }
362
+ if (state.checkbox) {
363
+ state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
364
+ }
365
+ return state;
366
+ };
package/lib/components/Card/useCardStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport { FocusOutlineStyleOptions, createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = state.interactive || state.selectable;\n\n const focusedClassName = React.useMemo(() => {\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.root.className,\n );\n\n if (state.floatingAction) {\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","backgroundColor","colorNeutralBackground1","boxShadow","shadow4","borderColor","colorTransparentStroke","filledInteractive","cursor","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","zIndex","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js ADDED
@@ -0,0 +1,37 @@
1
+ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
2
+ /**
3
+ * Static CSS class names used internally for the component slots.
4
+ */ export const cardFooterClassNames = {
5
+ root: 'fui-CardFooter',
6
+ action: 'fui-CardFooter__action'
7
+ };
8
+ const useStyles = makeStyles({
9
+ root: {
10
+ display: 'flex',
11
+ flexDirection: 'row',
12
+ gap: '12px'
13
+ },
14
+ action: {
15
+ marginLeft: 'auto',
16
+ // when the card is selected or hovered, it has custom high contrast color and background styles
17
+ // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
18
+ '@media (forced-colors: active)': {
19
+ '& .fui-Button, & .fui-Link': {
20
+ ...shorthands.borderColor('currentColor'),
21
+ color: 'currentColor',
22
+ outlineColor: 'currentColor'
23
+ }
24
+ }
25
+ }
26
+ });
27
+ /**
28
+ * Apply styling to the CardFooter slots based on the state.
29
+ */ export const useCardFooterStyles_unstable = (state)=>{
30
+ 'use no memo';
31
+ const styles = useStyles();
32
+ state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
33
+ if (state.action) {
34
+ state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
35
+ }
36
+ return state;
37
+ };
package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChBU,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}
package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js ADDED
@@ -0,0 +1,103 @@
1
+ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
2
+ /**
3
+ * Static CSS class names used internally for the component slots.
4
+ */ export const cardHeaderClassNames = {
5
+ root: 'fui-CardHeader',
6
+ image: 'fui-CardHeader__image',
7
+ header: 'fui-CardHeader__header',
8
+ description: 'fui-CardHeader__description',
9
+ action: 'fui-CardHeader__action'
10
+ };
11
+ /**
12
+ * CSS variable names used internally for uniform styling in CardHeader.
13
+ */ export const cardHeaderCSSVars = {
14
+ cardHeaderGapVar: '--fui-CardHeader--gap'
15
+ };
16
+ const useStyles = makeStyles({
17
+ root: {
18
+ [cardHeaderCSSVars.cardHeaderGapVar]: '12px',
19
+ alignItems: 'center'
20
+ },
21
+ image: {
22
+ display: 'inline-flex',
23
+ marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`
24
+ },
25
+ header: {
26
+ display: 'flex'
27
+ },
28
+ description: {
29
+ display: 'flex'
30
+ },
31
+ action: {
32
+ marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,
33
+ // when the card is selected or hovered, it has custom high contrast color and background styles
34
+ // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
35
+ '@media (forced-colors: active)': {
36
+ '& .fui-Button, & .fui-Link': {
37
+ ...shorthands.borderColor('currentColor'),
38
+ color: 'currentColor',
39
+ outlineColor: 'currentColor'
40
+ }
41
+ }
42
+ }
43
+ });
44
+ const useStylesGrid = makeStyles({
45
+ root: {
46
+ display: 'grid',
47
+ gridAutoColumns: 'min-content 1fr min-content'
48
+ },
49
+ image: {
50
+ gridColumnStart: '1',
51
+ gridRowStart: 'span 2'
52
+ },
53
+ header: {
54
+ gridColumnStart: '2',
55
+ gridRowStart: '1'
56
+ },
57
+ description: {
58
+ gridColumnStart: '2',
59
+ gridRowStart: '2'
60
+ },
61
+ action: {
62
+ gridColumnStart: '3',
63
+ gridRowStart: 'span 2'
64
+ }
65
+ });
66
+ const useStylesFlex = makeStyles({
67
+ root: {
68
+ display: 'flex'
69
+ },
70
+ header: {
71
+ flexGrow: 1
72
+ },
73
+ image: {},
74
+ description: {},
75
+ action: {}
76
+ });
77
+ /**
78
+ * Apply styling to the CardHeader slots based on the state.
79
+ */ export const useCardHeaderStyles_unstable = (state)=>{
80
+ 'use no memo';
81
+ const styles = useStyles();
82
+ const stylesGrid = useStylesGrid();
83
+ const stylesFlex = useStylesFlex();
84
+ const boxModelStyles = state.description ? stylesGrid : stylesFlex;
85
+ const getSlotStyles = (slotName)=>{
86
+ var _state_slotName;
87
+ return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
88
+ };
89
+ state.root.className = getSlotStyles('root');
90
+ if (state.image) {
91
+ state.image.className = getSlotStyles('image');
92
+ }
93
+ if (state.header) {
94
+ state.header.className = getSlotStyles('header');
95
+ }
96
+ if (state.description) {
97
+ state.description.className = getSlotStyles('description');
98
+ }
99
+ if (state.action) {
100
+ state.action.className = getSlotStyles('action');
101
+ }
102
+ return state;
103
+ };
package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n 'use no memo';\n\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n return mergeClasses(\n cardHeaderClassNames[slotName],\n styles[slotName],\n boxModelStyles[slotName],\n state[slotName]?.className,\n );\n };\n\n state.root.className = getSlotStyles('root');\n\n if (state.image) {\n state.image.className = getSlotStyles('image');\n }\n\n if (state.header) {\n state.header.className = getSlotStyles('header');\n }\n\n if (state.description) {\n state.description.className = getSlotStyles('description');\n }\n\n if (state.action) {\n state.action.className = getSlotStyles('action');\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,oBAAoB;IAC/BC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,WAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,gBAAgBnB,WAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,gBAAgBvB,WAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAEA;;CAEC,GACD,OAAO,MAAMiB,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,OAAOzB,aACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,GACxBN,kBAAAA,KAAK,CAACM,SAAS,cAAfN,sCAAAA,gBAAiBO,SAAS;IAE9B;IAEAP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACfqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChBoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrBmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChBkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}