@fluentui/react-persona 9.4.6 → 9.5.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.
- package/CHANGELOG.md +22 -2
- package/lib/components/Persona/usePersonaStyles.styles.raw.js +198 -0
- package/lib/components/Persona/usePersonaStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Persona/usePersonaStyles.styles.raw.js +213 -0
- package/lib-commonjs/components/Persona/usePersonaStyles.styles.raw.js.map +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.4.7..@fluentui/react-persona_v9.5.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
|
+
- Bump @fluentui/react-avatar to v9.9.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
- Bump @fluentui/react-badge to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.4.7)
|
|
19
|
+
|
|
20
|
+
Fri, 11 Jul 2025 15:59:24 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.4.6..@fluentui/react-persona_v9.4.7)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-avatar to v9.8.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.4.6)
|
|
8
28
|
|
|
9
|
-
Fri, 04 Jul 2025 10:
|
|
29
|
+
Fri, 04 Jul 2025 10:02:51 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.4.5..@fluentui/react-persona_v9.4.6)
|
|
11
31
|
|
|
12
32
|
### Patches
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
3
|
+
export const personaClassNames = {
|
|
4
|
+
root: 'fui-Persona',
|
|
5
|
+
avatar: 'fui-Persona__avatar',
|
|
6
|
+
presence: 'fui-Persona__presence',
|
|
7
|
+
primaryText: 'fui-Persona__primaryText',
|
|
8
|
+
secondaryText: 'fui-Persona__secondaryText',
|
|
9
|
+
tertiaryText: 'fui-Persona__tertiaryText',
|
|
10
|
+
quaternaryText: 'fui-Persona__quaternaryText'
|
|
11
|
+
};
|
|
12
|
+
const avatarSpacing = `--fui-Persona__avatar--spacing`;
|
|
13
|
+
const useRootClassName = makeResetStyles({
|
|
14
|
+
display: 'inline-grid',
|
|
15
|
+
gridAutoRows: 'max-content',
|
|
16
|
+
gridAutoFlow: 'column',
|
|
17
|
+
justifyItems: 'start',
|
|
18
|
+
gridTemplateColumns: 'max-content [middle] auto'
|
|
19
|
+
});
|
|
20
|
+
/**
|
|
21
|
+
* Styles for the root slot
|
|
22
|
+
*/ const useStyles = makeStyles({
|
|
23
|
+
beforeAfterCenter: {
|
|
24
|
+
// This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
|
|
25
|
+
gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr'
|
|
26
|
+
},
|
|
27
|
+
after: {
|
|
28
|
+
},
|
|
29
|
+
before: {
|
|
30
|
+
justifyItems: 'end',
|
|
31
|
+
gridTemplateColumns: 'auto [middle] max-content'
|
|
32
|
+
},
|
|
33
|
+
below: {
|
|
34
|
+
gridAutoFlow: 'unset',
|
|
35
|
+
justifyItems: 'center',
|
|
36
|
+
gridTemplateColumns: 'unset'
|
|
37
|
+
},
|
|
38
|
+
media: {
|
|
39
|
+
gridRowStart: 'span 5'
|
|
40
|
+
},
|
|
41
|
+
mediaBeforeAfterCenter: {
|
|
42
|
+
gridRowStart: 'span 6'
|
|
43
|
+
},
|
|
44
|
+
start: {
|
|
45
|
+
alignSelf: 'start'
|
|
46
|
+
},
|
|
47
|
+
center: {
|
|
48
|
+
alignSelf: 'center'
|
|
49
|
+
},
|
|
50
|
+
afterAlignToPrimary: {
|
|
51
|
+
alignSelf: 'center',
|
|
52
|
+
gridRowStart: 'unset',
|
|
53
|
+
gridColumnEnd: 'middle'
|
|
54
|
+
},
|
|
55
|
+
beforeAlignToPrimary: {
|
|
56
|
+
alignSelf: 'center',
|
|
57
|
+
gridRowStart: 'unset',
|
|
58
|
+
gridColumnStart: 'middle'
|
|
59
|
+
},
|
|
60
|
+
secondLineSpacing: {
|
|
61
|
+
marginTop: '-2px'
|
|
62
|
+
},
|
|
63
|
+
primary: {
|
|
64
|
+
gridRowStart: 'primary'
|
|
65
|
+
},
|
|
66
|
+
secondary: {
|
|
67
|
+
gridRowStart: 'secondary'
|
|
68
|
+
},
|
|
69
|
+
tertiary: {
|
|
70
|
+
gridRowStart: 'tertiary'
|
|
71
|
+
},
|
|
72
|
+
quaternary: {
|
|
73
|
+
gridRowStart: 'quaternary'
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
const useAvatarSpacingStyles = makeStyles({
|
|
77
|
+
'extra-small': {
|
|
78
|
+
[avatarSpacing]: tokens.spacingHorizontalSNudge
|
|
79
|
+
},
|
|
80
|
+
small: {
|
|
81
|
+
[avatarSpacing]: tokens.spacingHorizontalS
|
|
82
|
+
},
|
|
83
|
+
medium: {
|
|
84
|
+
[avatarSpacing]: tokens.spacingHorizontalS
|
|
85
|
+
},
|
|
86
|
+
large: {
|
|
87
|
+
[avatarSpacing]: tokens.spacingHorizontalMNudge
|
|
88
|
+
},
|
|
89
|
+
'extra-large': {
|
|
90
|
+
[avatarSpacing]: tokens.spacingHorizontalMNudge
|
|
91
|
+
},
|
|
92
|
+
huge: {
|
|
93
|
+
[avatarSpacing]: tokens.spacingHorizontalM
|
|
94
|
+
},
|
|
95
|
+
after: {
|
|
96
|
+
marginRight: `var(${avatarSpacing})`
|
|
97
|
+
},
|
|
98
|
+
below: {
|
|
99
|
+
marginBottom: `var(${avatarSpacing})`
|
|
100
|
+
},
|
|
101
|
+
before: {
|
|
102
|
+
marginLeft: `var(${avatarSpacing})`
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
const usePresenceSpacingStyles = makeStyles({
|
|
106
|
+
small: {
|
|
107
|
+
[avatarSpacing]: tokens.spacingHorizontalSNudge
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
/**
|
|
111
|
+
* Apply styling to the Persona slots based on the state
|
|
112
|
+
*/ export const usePersonaStyles_unstable = (state)=>{
|
|
113
|
+
'use no memo';
|
|
114
|
+
const { presenceOnly, size, textAlignment, textPosition } = state;
|
|
115
|
+
const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
|
|
116
|
+
const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
|
|
117
|
+
const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);
|
|
118
|
+
const rootClassName = useRootClassName();
|
|
119
|
+
const styles = useStyles();
|
|
120
|
+
const avatarSpacingStyles = useAvatarSpacingStyles();
|
|
121
|
+
const presenceSpacingStyles = {
|
|
122
|
+
...avatarSpacingStyles,
|
|
123
|
+
...usePresenceSpacingStyles()
|
|
124
|
+
};
|
|
125
|
+
state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
|
|
126
|
+
if (state.avatar) {
|
|
127
|
+
state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
|
|
128
|
+
}
|
|
129
|
+
if (state.presence) {
|
|
130
|
+
state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
|
|
131
|
+
}
|
|
132
|
+
if (state.primaryText) {
|
|
133
|
+
state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
|
|
134
|
+
}
|
|
135
|
+
if (state.secondaryText) {
|
|
136
|
+
state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
|
|
137
|
+
}
|
|
138
|
+
if (state.tertiaryText) {
|
|
139
|
+
state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
|
|
140
|
+
}
|
|
141
|
+
if (state.quaternaryText) {
|
|
142
|
+
state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
|
|
143
|
+
}
|
|
144
|
+
return state;
|
|
145
|
+
};
|
|
146
|
+
const usePrimaryTextBaseClassName = makeResetStyles({
|
|
147
|
+
display: 'block',
|
|
148
|
+
color: tokens.colorNeutralForeground1,
|
|
149
|
+
...typographyStyles.body1
|
|
150
|
+
});
|
|
151
|
+
const useOptionalTextBaseClassName = makeResetStyles({
|
|
152
|
+
display: 'block',
|
|
153
|
+
color: tokens.colorNeutralForeground2,
|
|
154
|
+
...typographyStyles.caption1
|
|
155
|
+
});
|
|
156
|
+
const useTextStyles = makeStyles({
|
|
157
|
+
beforeAlignToPrimary: {
|
|
158
|
+
gridColumnEnd: 'middle'
|
|
159
|
+
},
|
|
160
|
+
afterAlignToPrimary: {
|
|
161
|
+
gridColumnStart: 'middle'
|
|
162
|
+
},
|
|
163
|
+
body1: typographyStyles.body1,
|
|
164
|
+
caption1: typographyStyles.caption1,
|
|
165
|
+
subtitle2: typographyStyles.subtitle2
|
|
166
|
+
});
|
|
167
|
+
const useTextClassNames = (state, alignToPrimary)=>{
|
|
168
|
+
const { presenceOnly, size, textPosition } = state;
|
|
169
|
+
const primaryTextBaseClassName = usePrimaryTextBaseClassName();
|
|
170
|
+
const optionalTextBaseClassName = useOptionalTextBaseClassName();
|
|
171
|
+
const textStyles = useTextStyles();
|
|
172
|
+
let primaryTextSize;
|
|
173
|
+
let alignToPrimaryClassName;
|
|
174
|
+
if (presenceOnly) {
|
|
175
|
+
if (size === 'extra-small') {
|
|
176
|
+
primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
|
|
177
|
+
} else if (size === 'extra-large' || size === 'huge') {
|
|
178
|
+
primaryTextSize = textStyles.subtitle2;
|
|
179
|
+
}
|
|
180
|
+
if (alignToPrimary) {
|
|
181
|
+
if (textPosition === 'before') {
|
|
182
|
+
alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
|
|
183
|
+
} else if (textPosition === 'after') {
|
|
184
|
+
alignToPrimaryClassName = textStyles.afterAlignToPrimary;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
} else {
|
|
188
|
+
if (size === 'huge') {
|
|
189
|
+
primaryTextSize = textStyles.subtitle2;
|
|
190
|
+
} else if (size === 'extra-large') {
|
|
191
|
+
primaryTextSize = textStyles.subtitle2;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
return {
|
|
195
|
+
primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
|
|
196
|
+
optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
|
|
197
|
+
};
|
|
198
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n\n secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n 'use no memo';\n\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","usePrimaryTextBaseClassName","color","colorNeutralForeground1","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,213 @@
|
|
|
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
|
+
personaClassNames: function() {
|
|
13
|
+
return personaClassNames;
|
|
14
|
+
},
|
|
15
|
+
usePersonaStyles_unstable: function() {
|
|
16
|
+
return usePersonaStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const personaClassNames = {
|
|
22
|
+
root: 'fui-Persona',
|
|
23
|
+
avatar: 'fui-Persona__avatar',
|
|
24
|
+
presence: 'fui-Persona__presence',
|
|
25
|
+
primaryText: 'fui-Persona__primaryText',
|
|
26
|
+
secondaryText: 'fui-Persona__secondaryText',
|
|
27
|
+
tertiaryText: 'fui-Persona__tertiaryText',
|
|
28
|
+
quaternaryText: 'fui-Persona__quaternaryText'
|
|
29
|
+
};
|
|
30
|
+
const avatarSpacing = `--fui-Persona__avatar--spacing`;
|
|
31
|
+
const useRootClassName = (0, _react.makeResetStyles)({
|
|
32
|
+
display: 'inline-grid',
|
|
33
|
+
gridAutoRows: 'max-content',
|
|
34
|
+
gridAutoFlow: 'column',
|
|
35
|
+
justifyItems: 'start',
|
|
36
|
+
gridTemplateColumns: 'max-content [middle] auto'
|
|
37
|
+
});
|
|
38
|
+
/**
|
|
39
|
+
* Styles for the root slot
|
|
40
|
+
*/ const useStyles = (0, _react.makeStyles)({
|
|
41
|
+
beforeAfterCenter: {
|
|
42
|
+
// This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
|
|
43
|
+
gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr'
|
|
44
|
+
},
|
|
45
|
+
after: {},
|
|
46
|
+
before: {
|
|
47
|
+
justifyItems: 'end',
|
|
48
|
+
gridTemplateColumns: 'auto [middle] max-content'
|
|
49
|
+
},
|
|
50
|
+
below: {
|
|
51
|
+
gridAutoFlow: 'unset',
|
|
52
|
+
justifyItems: 'center',
|
|
53
|
+
gridTemplateColumns: 'unset'
|
|
54
|
+
},
|
|
55
|
+
media: {
|
|
56
|
+
gridRowStart: 'span 5'
|
|
57
|
+
},
|
|
58
|
+
mediaBeforeAfterCenter: {
|
|
59
|
+
gridRowStart: 'span 6'
|
|
60
|
+
},
|
|
61
|
+
start: {
|
|
62
|
+
alignSelf: 'start'
|
|
63
|
+
},
|
|
64
|
+
center: {
|
|
65
|
+
alignSelf: 'center'
|
|
66
|
+
},
|
|
67
|
+
afterAlignToPrimary: {
|
|
68
|
+
alignSelf: 'center',
|
|
69
|
+
gridRowStart: 'unset',
|
|
70
|
+
gridColumnEnd: 'middle'
|
|
71
|
+
},
|
|
72
|
+
beforeAlignToPrimary: {
|
|
73
|
+
alignSelf: 'center',
|
|
74
|
+
gridRowStart: 'unset',
|
|
75
|
+
gridColumnStart: 'middle'
|
|
76
|
+
},
|
|
77
|
+
secondLineSpacing: {
|
|
78
|
+
marginTop: '-2px'
|
|
79
|
+
},
|
|
80
|
+
primary: {
|
|
81
|
+
gridRowStart: 'primary'
|
|
82
|
+
},
|
|
83
|
+
secondary: {
|
|
84
|
+
gridRowStart: 'secondary'
|
|
85
|
+
},
|
|
86
|
+
tertiary: {
|
|
87
|
+
gridRowStart: 'tertiary'
|
|
88
|
+
},
|
|
89
|
+
quaternary: {
|
|
90
|
+
gridRowStart: 'quaternary'
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
const useAvatarSpacingStyles = (0, _react.makeStyles)({
|
|
94
|
+
'extra-small': {
|
|
95
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalSNudge
|
|
96
|
+
},
|
|
97
|
+
small: {
|
|
98
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalS
|
|
99
|
+
},
|
|
100
|
+
medium: {
|
|
101
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalS
|
|
102
|
+
},
|
|
103
|
+
large: {
|
|
104
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalMNudge
|
|
105
|
+
},
|
|
106
|
+
'extra-large': {
|
|
107
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalMNudge
|
|
108
|
+
},
|
|
109
|
+
huge: {
|
|
110
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalM
|
|
111
|
+
},
|
|
112
|
+
after: {
|
|
113
|
+
marginRight: `var(${avatarSpacing})`
|
|
114
|
+
},
|
|
115
|
+
below: {
|
|
116
|
+
marginBottom: `var(${avatarSpacing})`
|
|
117
|
+
},
|
|
118
|
+
before: {
|
|
119
|
+
marginLeft: `var(${avatarSpacing})`
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
const usePresenceSpacingStyles = (0, _react.makeStyles)({
|
|
123
|
+
small: {
|
|
124
|
+
[avatarSpacing]: _reacttheme.tokens.spacingHorizontalSNudge
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
const usePersonaStyles_unstable = (state)=>{
|
|
128
|
+
'use no memo';
|
|
129
|
+
const { presenceOnly, size, textAlignment, textPosition } = state;
|
|
130
|
+
const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
|
|
131
|
+
const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
|
|
132
|
+
const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);
|
|
133
|
+
const rootClassName = useRootClassName();
|
|
134
|
+
const styles = useStyles();
|
|
135
|
+
const avatarSpacingStyles = useAvatarSpacingStyles();
|
|
136
|
+
const presenceSpacingStyles = {
|
|
137
|
+
...avatarSpacingStyles,
|
|
138
|
+
...usePresenceSpacingStyles()
|
|
139
|
+
};
|
|
140
|
+
state.root.className = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
|
|
141
|
+
if (state.avatar) {
|
|
142
|
+
state.avatar.className = (0, _react.mergeClasses)(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
|
|
143
|
+
}
|
|
144
|
+
if (state.presence) {
|
|
145
|
+
state.presence.className = (0, _react.mergeClasses)(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
|
|
146
|
+
}
|
|
147
|
+
if (state.primaryText) {
|
|
148
|
+
state.primaryText.className = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
|
|
149
|
+
}
|
|
150
|
+
if (state.secondaryText) {
|
|
151
|
+
state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
|
|
152
|
+
}
|
|
153
|
+
if (state.tertiaryText) {
|
|
154
|
+
state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
|
|
155
|
+
}
|
|
156
|
+
if (state.quaternaryText) {
|
|
157
|
+
state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
|
|
158
|
+
}
|
|
159
|
+
return state;
|
|
160
|
+
};
|
|
161
|
+
const usePrimaryTextBaseClassName = (0, _react.makeResetStyles)({
|
|
162
|
+
display: 'block',
|
|
163
|
+
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
164
|
+
..._reacttheme.typographyStyles.body1
|
|
165
|
+
});
|
|
166
|
+
const useOptionalTextBaseClassName = (0, _react.makeResetStyles)({
|
|
167
|
+
display: 'block',
|
|
168
|
+
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
169
|
+
..._reacttheme.typographyStyles.caption1
|
|
170
|
+
});
|
|
171
|
+
const useTextStyles = (0, _react.makeStyles)({
|
|
172
|
+
beforeAlignToPrimary: {
|
|
173
|
+
gridColumnEnd: 'middle'
|
|
174
|
+
},
|
|
175
|
+
afterAlignToPrimary: {
|
|
176
|
+
gridColumnStart: 'middle'
|
|
177
|
+
},
|
|
178
|
+
body1: _reacttheme.typographyStyles.body1,
|
|
179
|
+
caption1: _reacttheme.typographyStyles.caption1,
|
|
180
|
+
subtitle2: _reacttheme.typographyStyles.subtitle2
|
|
181
|
+
});
|
|
182
|
+
const useTextClassNames = (state, alignToPrimary)=>{
|
|
183
|
+
const { presenceOnly, size, textPosition } = state;
|
|
184
|
+
const primaryTextBaseClassName = usePrimaryTextBaseClassName();
|
|
185
|
+
const optionalTextBaseClassName = useOptionalTextBaseClassName();
|
|
186
|
+
const textStyles = useTextStyles();
|
|
187
|
+
let primaryTextSize;
|
|
188
|
+
let alignToPrimaryClassName;
|
|
189
|
+
if (presenceOnly) {
|
|
190
|
+
if (size === 'extra-small') {
|
|
191
|
+
primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
|
|
192
|
+
} else if (size === 'extra-large' || size === 'huge') {
|
|
193
|
+
primaryTextSize = textStyles.subtitle2;
|
|
194
|
+
}
|
|
195
|
+
if (alignToPrimary) {
|
|
196
|
+
if (textPosition === 'before') {
|
|
197
|
+
alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
|
|
198
|
+
} else if (textPosition === 'after') {
|
|
199
|
+
alignToPrimaryClassName = textStyles.afterAlignToPrimary;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
} else {
|
|
203
|
+
if (size === 'huge') {
|
|
204
|
+
primaryTextSize = textStyles.subtitle2;
|
|
205
|
+
} else if (size === 'extra-large') {
|
|
206
|
+
primaryTextSize = textStyles.subtitle2;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
return {
|
|
210
|
+
primaryTextClassName: (0, _react.mergeClasses)(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
|
|
211
|
+
optionalTextClassName: (0, _react.mergeClasses)(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
|
|
212
|
+
};
|
|
213
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Persona/usePersonaStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n\n secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n 'use no memo';\n\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"names":["personaClassNames","usePersonaStyles_unstable","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","makeResetStyles","display","gridAutoRows","gridAutoFlow","justifyItems","gridTemplateColumns","useStyles","makeStyles","beforeAfterCenter","gridTemplateRows","after","before","below","media","gridRowStart","mediaBeforeAfterCenter","start","alignSelf","center","afterAlignToPrimary","gridColumnEnd","beforeAlignToPrimary","gridColumnStart","secondLineSpacing","marginTop","primary","secondary","tertiary","quaternary","useAvatarSpacingStyles","tokens","spacingHorizontalSNudge","small","spacingHorizontalS","medium","large","spacingHorizontalMNudge","huge","spacingHorizontalM","marginRight","marginBottom","marginLeft","usePresenceSpacingStyles","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","mergeClasses","usePrimaryTextBaseClassName","color","colorNeutralForeground1","typographyStyles","body1","useOptionalTextBaseClassName","colorNeutralForeground2","caption1","useTextStyles","subtitle2","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-persona",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-avatar": "^9.
|
|
22
|
-
"@fluentui/react-badge": "^9.
|
|
21
|
+
"@fluentui/react-avatar": "^9.9.0",
|
|
22
|
+
"@fluentui/react-badge": "^9.4.0",
|
|
23
23
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
24
24
|
"@fluentui/react-theme": "^9.1.24",
|
|
25
25
|
"@fluentui/react-utilities": "^9.22.0",
|