@fluentui/react-persona 9.1.0-beta.4 → 9.1.0-beta.6

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 (11) hide show
  1. package/CHANGELOG.json +79 -1
  2. package/CHANGELOG.md +28 -2
  3. package/dist/index.d.ts +2 -2
  4. package/lib/components/Persona/Persona.types.js.map +1 -1
  5. package/lib/components/Persona/usePersonaStyles.js +8 -9
  6. package/lib/components/Persona/usePersonaStyles.js.map +1 -1
  7. package/lib-commonjs/components/Persona/usePersonaStyles.js +8 -9
  8. package/lib-commonjs/components/Persona/usePersonaStyles.js.map +1 -1
  9. package/package.json +5 -5
  10. package/MIGRATION.md +0 -44
  11. package/Spec.md +0 -213
package/CHANGELOG.json CHANGED
@@ -2,7 +2,85 @@
2
2
  "name": "@fluentui/react-persona",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Nov 2022 23:02:39 GMT",
5
+ "date": "Tue, 20 Dec 2022 14:55:58 GMT",
6
+ "tag": "@fluentui/react-persona_v9.1.0-beta.6",
7
+ "version": "9.1.0-beta.6",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-persona",
13
+ "comment": "Bump @fluentui/react-avatar to v9.2.9",
14
+ "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-persona",
19
+ "comment": "Bump @fluentui/react-badge to v9.0.15",
20
+ "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-persona",
25
+ "comment": "Bump @fluentui/react-theme to v9.1.4",
26
+ "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-persona",
31
+ "comment": "Bump @fluentui/react-utilities to v9.3.0",
32
+ "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Mon, 05 Dec 2022 18:29:26 GMT",
39
+ "tag": "@fluentui/react-persona_v9.1.0-beta.5",
40
+ "version": "9.1.0-beta.5",
41
+ "comments": {
42
+ "prerelease": [
43
+ {
44
+ "author": "esteban.230@hotmail.com",
45
+ "package": "@fluentui/react-persona",
46
+ "commit": "df99a7d82e3ca707300a079e0050db218d6cfcce",
47
+ "comment": "chore: Updating Persona's docs to match implementation."
48
+ },
49
+ {
50
+ "author": "tristan.watanabe@gmail.com",
51
+ "package": "@fluentui/react-persona",
52
+ "commit": "fafaced9e47597c8ae38d68518887926082986cb",
53
+ "comment": "chore: Migrate to new package structure."
54
+ },
55
+ {
56
+ "author": "esteban.230@hotmail.com",
57
+ "package": "@fluentui/react-persona",
58
+ "commit": "7f4466d1f16a45c6268d540ccd6c088e0c79dfbb",
59
+ "comment": "fix: Make Persona's text wrap when overflowing its container."
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-persona",
64
+ "comment": "Bump @fluentui/react-avatar to v9.2.8",
65
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-persona",
70
+ "comment": "Bump @fluentui/react-badge to v9.0.14",
71
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-persona",
76
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
77
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
78
+ }
79
+ ]
80
+ }
81
+ },
82
+ {
83
+ "date": "Thu, 17 Nov 2022 23:05:42 GMT",
6
84
  "tag": "@fluentui/react-persona_v9.1.0-beta.4",
7
85
  "version": "9.1.0-beta.4",
8
86
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,38 @@
1
1
  # Change Log - @fluentui/react-persona
2
2
 
3
- This log was last generated on Thu, 17 Nov 2022 23:02:39 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Dec 2022 14:55:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.6)
8
+
9
+ Tue, 20 Dec 2022 14:55:58 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.5..@fluentui/react-persona_v9.1.0-beta.6)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-avatar to v9.2.9 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
15
+ - Bump @fluentui/react-badge to v9.0.15 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
16
+ - Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
18
+
19
+ ## [9.1.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.5)
20
+
21
+ Mon, 05 Dec 2022 18:29:26 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.4..@fluentui/react-persona_v9.1.0-beta.5)
23
+
24
+ ### Changes
25
+
26
+ - chore: Updating Persona's docs to match implementation. ([PR #25770](https://github.com/microsoft/fluentui/pull/25770) by esteban.230@hotmail.com)
27
+ - chore: Migrate to new package structure. ([PR #25737](https://github.com/microsoft/fluentui/pull/25737) by tristan.watanabe@gmail.com)
28
+ - fix: Make Persona's text wrap when overflowing its container. ([PR #25880](https://github.com/microsoft/fluentui/pull/25880) by esteban.230@hotmail.com)
29
+ - Bump @fluentui/react-avatar to v9.2.8 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
30
+ - Bump @fluentui/react-badge to v9.0.14 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
31
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
32
+
7
33
  ## [9.1.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.4)
8
34
 
9
- Thu, 17 Nov 2022 23:02:39 GMT
35
+ Thu, 17 Nov 2022 23:05:42 GMT
10
36
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.3..@fluentui/react-persona_v9.1.0-beta.4)
11
37
 
12
38
  ### Changes
package/dist/index.d.ts CHANGED
@@ -70,8 +70,8 @@ export declare type PersonaSlots = {
70
70
  /**
71
71
  * The first line of text in the Persona, larger than the rest of the lines.
72
72
  *
73
- * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
74
- * from the `name` prop.
73
+ * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is
74
+ * different than the `name` prop.
75
75
  */
76
76
  primaryText?: Slot<'span'>;
77
77
  /**
package/lib/components/Persona/Persona.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Persona.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Avatar to display.\n *\n * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n */\n avatar?: Slot<typeof Avatar>;\n\n /**\n * PresenceBadge to display.\n *\n * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n */\n presence?: Slot<typeof PresenceBadge>;\n\n /**\n * The first line of text in the Persona, larger than the rest of the lines.\n *\n * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from\n * from the `name` prop.\n */\n primaryText?: Slot<'span'>;\n\n /**\n * The second line of text in the Persona.\n */\n secondaryText?: Slot<'span'>;\n\n /**\n * The third line of text in the Persona.\n */\n tertiaryText?: Slot<'span'>;\n\n /**\n * The fourth line of text in the Persona.\n */\n quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n /**\n * The name of the person or entity represented by the Persona.\n *\n * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n */\n name?: string;\n\n /**\n * Whether to display only the presence.\n *\n * @default false\n */\n presenceOnly?: boolean;\n\n /**\n * The size of a Persona and its text.\n *\n * @default medium\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n /**\n * The position of the text relative to the avatar/presence.\n *\n * @default after\n */\n textPosition?: 'after' | 'before' | 'below';\n\n /**\n * The vertical alignment of the text relative to the avatar/presence.\n *\n * @default start\n */\n textAlignment?: 'center' | 'start';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n /**\n * The number of text lines used.\n */\n numTextLines: number;\n };\n"]}
1
+ {"version":3,"file":"Persona.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Avatar to display.\n *\n * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n */\n avatar?: Slot<typeof Avatar>;\n\n /**\n * PresenceBadge to display.\n *\n * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n */\n presence?: Slot<typeof PresenceBadge>;\n\n /**\n * The first line of text in the Persona, larger than the rest of the lines.\n *\n * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n * different than the `name` prop.\n */\n primaryText?: Slot<'span'>;\n\n /**\n * The second line of text in the Persona.\n */\n secondaryText?: Slot<'span'>;\n\n /**\n * The third line of text in the Persona.\n */\n tertiaryText?: Slot<'span'>;\n\n /**\n * The fourth line of text in the Persona.\n */\n quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n /**\n * The name of the person or entity represented by the Persona.\n *\n * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n */\n name?: string;\n\n /**\n * Whether to display only the presence.\n *\n * @default false\n */\n presenceOnly?: boolean;\n\n /**\n * The size of a Persona and its text.\n *\n * @default medium\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n /**\n * The position of the text relative to the avatar/presence.\n *\n * @default after\n */\n textPosition?: 'after' | 'before' | 'below';\n\n /**\n * The vertical alignment of the text relative to the avatar/presence.\n *\n * @default start\n */\n textAlignment?: 'center' | 'start';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n /**\n * The number of text lines used.\n */\n numTextLines: number;\n };\n"]}
package/lib/components/Persona/usePersonaStyles.js CHANGED
@@ -17,16 +17,17 @@ const avatarSpacing = `--fui-Persona__avatar--spacing`;
17
17
  const useStyles = /*#__PURE__*/__styles({
18
18
  "base": {
19
19
  "mc9l5x": "fwk3njj",
20
- "t4k1zu": "f4wu0r3",
21
20
  "v29qe6": "fvtn1bl"
22
21
  },
23
22
  "after": {
24
23
  "Bxotwcr": "f1u07yai",
25
- "B7hvi0a": "f1m2n5bn"
24
+ "B7hvi0a": "f1m2n5bn",
25
+ "Budl1dq": "f1c1ms5d"
26
26
  },
27
27
  "before": {
28
28
  "Bxotwcr": "f1u07yai",
29
- "B7hvi0a": "f1tll2w5"
29
+ "B7hvi0a": "f1tll2w5",
30
+ "Budl1dq": "ffvkwdr"
30
31
  },
31
32
  "below": {
32
33
  "B7hvi0a": "f1oiokrs"
@@ -40,9 +41,6 @@ const useStyles = /*#__PURE__*/__styles({
40
41
  "center": {
41
42
  "qb2dma": "f7nlbp4"
42
43
  },
43
- "alignToPrimary": {
44
- "Budl1dq": "fv2o0x6"
45
- },
46
44
  "afterAlignToPrimary": {
47
45
  "qb2dma": "f7nlbp4",
48
46
  "Ijaq50": "f1rnkkuc",
@@ -54,7 +52,7 @@ const useStyles = /*#__PURE__*/__styles({
54
52
  "Br312pm": "fwu52yu"
55
53
  }
56
54
  }, {
57
- "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fv2o0x6{grid-template-columns:max-content [middle] max-content;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
55
+ "d": [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
58
56
  });
59
57
 
60
58
  const useAvatarSpacingStyles = /*#__PURE__*/__styles({
@@ -103,11 +101,12 @@ const usePresenceSpacingStyles = /*#__PURE__*/__styles({
103
101
 
104
102
  export const usePersonaStyles_unstable = state => {
105
103
  const {
104
+ presenceOnly,
106
105
  size,
107
106
  textAlignment,
108
107
  textPosition
109
108
  } = state;
110
- const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
109
+ const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
111
110
  const {
112
111
  primaryTextClassName,
113
112
  optionalTextClassName
@@ -117,7 +116,7 @@ export const usePersonaStyles_unstable = state => {
117
116
  const presenceSpacingStyles = { ...avatarSpacingStyles,
118
117
  ...usePresenceSpacingStyles()
119
118
  };
120
- state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], textPosition !== 'below' && alignToPrimary && styles.alignToPrimary, state.root.className);
119
+ state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);
121
120
 
122
121
  if (state.avatar) {
123
122
  state.avatar.className = mergeClasses(personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
package/lib/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoColumns: 'max-content',\n gridAutoRows: 'max-content',\n },\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n // These alignToPrimary styles are needed due to presence being too small to center with the primary text.\n alignToPrimary: {\n gridTemplateColumns: `max-content [middle] max-content`,\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\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 const { size, textAlignment, textPosition } = state;\n const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n styles.base,\n styles[textPosition],\n textPosition !== 'below' && alignToPrimary && styles.alignToPrimary,\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\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 styles.coin,\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 primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\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 textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\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 } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n },\n\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\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\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 const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\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 styles.coin,\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 primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\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 textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\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 } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Persona/usePersonaStyles.js CHANGED
@@ -26,16 +26,17 @@ const avatarSpacing = `--fui-Persona__avatar--spacing`;
26
26
  const useStyles = /*#__PURE__*/react_1.__styles({
27
27
  "base": {
28
28
  "mc9l5x": "fwk3njj",
29
- "t4k1zu": "f4wu0r3",
30
29
  "v29qe6": "fvtn1bl"
31
30
  },
32
31
  "after": {
33
32
  "Bxotwcr": "f1u07yai",
34
- "B7hvi0a": "f1m2n5bn"
33
+ "B7hvi0a": "f1m2n5bn",
34
+ "Budl1dq": "f1c1ms5d"
35
35
  },
36
36
  "before": {
37
37
  "Bxotwcr": "f1u07yai",
38
- "B7hvi0a": "f1tll2w5"
38
+ "B7hvi0a": "f1tll2w5",
39
+ "Budl1dq": "ffvkwdr"
39
40
  },
40
41
  "below": {
41
42
  "B7hvi0a": "f1oiokrs"
@@ -49,9 +50,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
49
50
  "center": {
50
51
  "qb2dma": "f7nlbp4"
51
52
  },
52
- "alignToPrimary": {
53
- "Budl1dq": "fv2o0x6"
54
- },
55
53
  "afterAlignToPrimary": {
56
54
  "qb2dma": "f7nlbp4",
57
55
  "Ijaq50": "f1rnkkuc",
@@ -63,7 +61,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
63
61
  "Br312pm": "fwu52yu"
64
62
  }
65
63
  }, {
66
- "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fv2o0x6{grid-template-columns:max-content [middle] max-content;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
64
+ "d": [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
67
65
  });
68
66
 
69
67
  const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
@@ -112,11 +110,12 @@ const usePresenceSpacingStyles = /*#__PURE__*/react_1.__styles({
112
110
 
113
111
  const usePersonaStyles_unstable = state => {
114
112
  const {
113
+ presenceOnly,
115
114
  size,
116
115
  textAlignment,
117
116
  textPosition
118
117
  } = state;
119
- const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
118
+ const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
120
119
  const {
121
120
  primaryTextClassName,
122
121
  optionalTextClassName
@@ -126,7 +125,7 @@ const usePersonaStyles_unstable = state => {
126
125
  const presenceSpacingStyles = { ...avatarSpacingStyles,
127
126
  ...usePresenceSpacingStyles()
128
127
  };
129
- state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], textPosition !== 'below' && alignToPrimary && styles.alignToPrimary, state.root.className);
128
+ state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
130
129
 
131
130
  if (state.avatar) {
132
131
  state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
package/lib-commonjs/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE,aADuD;EAE7D,MAAM,EAAE,qBAFqD;EAG7D,QAAQ,EAAE,uBAHmD;EAI7D,WAAW,EAAE,0BAJgD;EAK7D,aAAa,EAAE,4BAL8C;EAM7D,YAAY,EAAE,2BAN+C;EAO7D,cAAc,EAAE;AAP6C,CAAlD;AAUb,MAAM,aAAa,GAAG,gCAAtB;AAEA;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AA4CA,MAAM,sBAAsB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA/B;;AA8BA,MAAM,wBAAwB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAjC;AAMA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE,IAAF;IAAQ,aAAR;IAAuB;EAAvB,IAAwC,KAA9C;EACA,MAAM,cAAc,GAAG,aAAa,KAAK,OAAlB,IAA6B,IAAI,KAAK,aAAtC,IAAuD,IAAI,KAAK,MAAvF;EACA,MAAM;IAAE,oBAAF;IAAwB;EAAxB,IAAkD,iBAAiB,CAAC,KAAD,EAAQ,cAAR,CAAzE;EAEA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,mBAAmB,GAAG,sBAAsB,EAAlD;EACA,MAAM,qBAAqB,GAAG,EAAE,GAAG,mBAAL;IAA0B,GAAG,wBAAwB;EAArD,CAA9B;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,YAAD,CAHe,EAIrB,YAAY,KAAK,OAAjB,IAA4B,cAA5B,IAA8C,MAAM,CAAC,cAJhC,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;EAQA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,iBAAA,CAAkB,MADK,EAEvB,MAAM,CAAC,IAFgB,EAGvB,MAAM,CAAC,aAAD,CAHiB,EAIvB,mBAAmB,CAAC,IAAD,CAJI,EAKvB,mBAAmB,CAAC,YAAD,CALI,EAMvB,KAAK,CAAC,MAAN,CAAa,SANU,CAAzB;EAQD;;EAED,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,iBAAA,CAAkB,QADO,EAEzB,MAAM,CAAC,IAFkB,EAGzB,MAAM,CAAC,aAAD,CAHmB,EAIzB,qBAAqB,CAAC,IAAD,CAJI,EAKzB,qBAAqB,CAAC,YAAD,CALI,EAMzB,YAAY,KAAK,OAAjB,IAA4B,cAA5B,IAA8C,MAAM,CAAC,mBAN5B,EAOzB,YAAY,KAAK,QAAjB,IAA6B,cAA7B,IAA+C,MAAM,CAAC,oBAP7B,EAQzB,KAAK,CAAC,QAAN,CAAe,SARU,CAA3B;EAUD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAC5B,OAAA,CAAA,iBAAA,CAAkB,WADU,EAE5B,oBAF4B,EAG5B,KAAK,CAAC,WAAN,CAAkB,SAHU,CAA9B;EAKD;;EAED,IAAI,KAAK,CAAC,aAAV,EAAyB;IACvB,KAAK,CAAC,aAAN,CAAoB,SAApB,GAAgC,OAAA,CAAA,YAAA,CAC9B,OAAA,CAAA,iBAAA,CAAkB,aADY,EAE9B,qBAF8B,EAG9B,KAAK,CAAC,aAAN,CAAoB,SAHU,CAAhC;EAKD;;EAED,IAAI,KAAK,CAAC,YAAV,EAAwB;IACtB,KAAK,CAAC,YAAN,CAAmB,SAAnB,GAA+B,OAAA,CAAA,YAAA,CAC7B,OAAA,CAAA,iBAAA,CAAkB,YADW,EAE7B,qBAF6B,EAG7B,KAAK,CAAC,YAAN,CAAmB,SAHU,CAA/B;EAKD;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,iBAAA,CAAkB,cADa,EAE/B,qBAF+B,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAKD;;EAED,OAAO,KAAP;AACD,CA1EM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB;;AA4Eb,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAuBA,MAAM,iBAAiB,GAAG,CACxB,KADwB,EAExB,cAFwB,KAMtB;EACF,MAAM;IAAE,YAAF;IAAgB,IAAhB;IAAsB;EAAtB,IAAuC,KAA7C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EAEA,IAAI,eAAJ;EACA,IAAI,uBAAJ;;EAEA,IAAI,YAAJ,EAAkB;IAChB,IAAI,IAAI,KAAK,aAAb,EAA4B;MAC1B,eAAe,GAAG,KAAK,CAAC,YAAN,GAAqB,CAArB,GAAyB,UAAU,CAAC,KAApC,GAA4C,UAAU,CAAC,QAAzE;IACD,CAFD,MAEO,IAAI,IAAI,KAAK,aAAT,IAA0B,IAAI,KAAK,MAAvC,EAA+C;MACpD,eAAe,GAAG,UAAU,CAAC,SAA7B;IACD,CAFM,MAEA;MACL,eAAe,GAAG,UAAU,CAAC,KAA7B;IACD;;IAED,IAAI,cAAJ,EAAoB;MAClB,IAAI,YAAY,KAAK,QAArB,EAA+B;QAC7B,uBAAuB,GAAG,UAAU,CAAC,oBAArC;MACD,CAFD,MAEO,IAAI,YAAY,KAAK,OAArB,EAA8B;QACnC,uBAAuB,GAAG,UAAU,CAAC,mBAArC;MACD;IACF;EACF,CAhBD,MAgBO;IACL,IAAI,IAAI,KAAK,MAAb,EAAqB;MACnB,eAAe,GAAG,UAAU,CAAC,SAA7B;IACD,CAFD,MAEO,IAAI,IAAI,KAAK,aAAb,EAA4B;MACjC,eAAe,GAAG,UAAU,CAAC,SAA7B;IACD,CAFM,MAEA;MACL,eAAe,GAAG,UAAU,CAAC,KAA7B;IACD;EACF;;EAED,OAAO;IACL,oBAAoB,EAAE,OAAA,CAAA,YAAA,CACpB,UAAU,CAAC,IADS,EAEpB,UAAU,CAAC,WAFS,EAGpB,eAHoB,EAIpB,uBAJoB,CADjB;IAOL,qBAAqB,EAAE,OAAA,CAAA,YAAA,CACrB,UAAU,CAAC,IADU,EAErB,UAAU,CAAC,YAFU,EAGrB,CAAC,YAAD,IAAiB,IAAI,KAAK,MAA1B,GAAmC,UAAU,CAAC,KAA9C,GAAsD,UAAU,CAAC,QAH5C,EAIrB,uBAJqB;EAPlB,CAAP;AAcD,CArDD","sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoColumns: 'max-content',\n gridAutoRows: 'max-content',\n },\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n // These alignToPrimary styles are needed due to presence being too small to center with the primary text.\n alignToPrimary: {\n gridTemplateColumns: `max-content [middle] max-content`,\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\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 const { size, textAlignment, textPosition } = state;\n const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n styles.base,\n styles[textPosition],\n textPosition !== 'below' && alignToPrimary && styles.alignToPrimary,\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\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 styles.coin,\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 primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\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 textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\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 } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n },\n\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\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\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 const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\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 styles.coin,\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 primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\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 textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\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 } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-persona",
3
- "version": "9.1.0-beta.4",
3
+ "version": "9.1.0-beta.6",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,10 +31,10 @@
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-avatar": "^9.2.7",
35
- "@fluentui/react-badge": "^9.0.13",
36
- "@fluentui/react-theme": "^9.1.2",
37
- "@fluentui/react-utilities": "^9.2.2",
34
+ "@fluentui/react-avatar": "^9.2.9",
35
+ "@fluentui/react-badge": "^9.0.15",
36
+ "@fluentui/react-theme": "^9.1.4",
37
+ "@fluentui/react-utilities": "^9.3.0",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
40
40
  },
package/MIGRATION.md DELETED
@@ -1,44 +0,0 @@
1
- # Badge Migration
2
-
3
- ## Migration from v8
4
-
5
- v8 offers a component equivalent to v9's `Persona`. However, the API is slightly different. The main difference is that v9's `Persona` does not handle the functionality of the `presence` and `avatar`. Instead, the `presence` and `avatar` are separate components that can be used in conjunction with `Persona`.
6
-
7
- Here's how the API of v8's `Persona` compares to the one from v9's `Persona` component:
8
-
9
- - `className` => `className`
10
- - `coinProps` => Use `avatar`'s or `presence`'s slot props
11
- - `componentRef` => NOT SUPPORTED - use `ref` instead
12
- - `hidePersonaDetails` => Use the `Avatar` component for this case
13
- - ```
14
-
15
- ```
16
- - `imageShouldFadeIn` => NOT SUPPORTED
17
- - `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}`
18
- - `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}`
19
- - `presenceTitle` => NOT SUPPORTED
20
- - `showOverflowTooltip` => NOT SUPPORTED
21
- - `showUnknownPersonaCoin` => NOT SUPPORTED
22
- - `styles` => Use style customization through `className` instead
23
-
24
- ## Property Mapping
25
-
26
- | v8 `Persona` | v9 `Persona` |
27
- | ------------------------ | -------------------------------------- |
28
- | `coinProps` | `avatar` or `badge` slot props |
29
- | `coinSize` | `size` in the `badge` or `avatar` slot |
30
- | `className` | `className` |
31
- | `componentRef` | `ref` |
32
- | `hidePersonaDetails` | - |
33
- | `imageShouldFadeIn` | - |
34
- | `isOutOfOffice` | `status` in `presence` slot props |
35
- | `optionalText` | `quaternaryText` |
36
- | `presence` | `presence` |
37
- | `presenceTitle` | - |
38
- | `primaryText` | `primaryText` |
39
- | `secondaryText` | `secondaryText` |
40
- | `showOverflowTooltip` | - |
41
- | `showUnknownPersonaCoin` | - |
42
- | `styles` | `className` |
43
- | `tertiaryText` | `tertiaryText` |
44
- | `text` | `name` |
package/Spec.md DELETED
@@ -1,213 +0,0 @@
1
- # @fluentui/react-persona Spec
2
-
3
- Convergence epic issue: #24213
4
-
5
- ## Background
6
-
7
- A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge. This composite component is not a card, therefore it will not provide a visual board or a popup when the user hovers the Avatar.
8
-
9
- Persona is used in PeoplePicker, Team's left rail and menus, chiclets, and Card.
10
-
11
- ## Prior Art
12
-
13
- - OpenUI research: [Avatar/Persona](https://open-ui.org/components/avatar.research)
14
- - v7/v8: [link](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona)
15
- - > Note: v8's Persona is a combination of v9's Persona and Avatar (v8's Persona has a sub-component PersonaCoin that would count as Avatar, but is not exposed.). In v9 we've taken the approach of having a single component Avatar and another component Persona.
16
- - v0: Does not have equivalent component.
17
-
18
- ## Anatomy
19
-
20
- ![Anatomy](./etc/images/anatomy.png)
21
-
22
- ### Avatar, PresenceBadge, and Avatar + PresenceBadge
23
-
24
- v8's Persona has a sub-component `PersonaCoin`, the equivalent in v9 is an Avatar. Currently Avatar is able to display a PresenceBadge, but this behavior will be deprecated in favor of Persona having this behavior.
25
-
26
- Persona has a slot for an `Avatar` and `PresenceBadge`, giving the user the ability to display an Avatar, a PresenceBadge, or Combine them into an Avatar with presence.
27
-
28
- ## Sample Code
29
-
30
- ![Avatar](./etc/images/avatar.png)
31
-
32
- Persona with Avatar:
33
-
34
- ```jsx
35
- <Persona name="Kevin Sturgis" secondaryText="Software Engineer" />
36
- ```
37
-
38
- ![PresenceBadge](./etc/images/badge.png)
39
-
40
- Persona with PresenceBadge:
41
-
42
- ```jsx
43
- <Persona presenceOnly name="Kevin Sturgis" presence={{ status: 'offline', outOfOffice: true }} />
44
- ```
45
-
46
- ![Avatar and PresenceBadge](./etc/images/avatar_badge.png)
47
-
48
- Persona with Avatar + PresenceBadge:
49
-
50
- ```jsx
51
- <Persona
52
- name="Kevin Sturgis"
53
- secondaryText="Software Engineer"
54
- tertiaryText="Offline"
55
- presence={{ status: 'offline', outOfOffice: true }}
56
- />
57
- ```
58
-
59
- ## Variants
60
-
61
- > I will refer to the avatar and presence as content.
62
-
63
- There are three alignment variants:
64
-
65
- - after: Content on the left and text on the right.
66
- - below: Content on top and text on the bottom.
67
- - before: Content on the right and text on the left.
68
-
69
- There are 3 content variants:
70
-
71
- - Avatar
72
- - PresenceBadge
73
- - Avatar + PresenceBadge
74
-
75
- There are 2 sizing variants:
76
-
77
- - scaled: When there is no specified size in the props of either `avatar` or `presence`, the content is resized based on the number of text lines used.
78
- - fixed: When there is a specified size of either `avatar` or `presence`, the text lines are styled based on the size of the content.
79
-
80
- ## API
81
-
82
- **Slots**
83
-
84
- - `root`: The root slot for Persona.
85
- - `avatar`: The Avatar to display and Persona's primary slot.
86
- - `presence`: The PresenceBadge to display.
87
- - `primaryText`: First line of text in Persona. By default its content will be the content of the `name` prop. It is highly encouraged to only use the `name` prop and only specify the content of `primaryText` when it is not a name.
88
- - `secondaryText`: Second line of text in Persona.
89
- - `tertiaryText`: Third line of text in Persona.
90
- - `quaternaryText`: Fourth line of text in Persona.
91
-
92
- **Types**
93
-
94
- ```ts
95
- export type PersonaSlots = {
96
- root: NonNullable<Slot<'div'>>;
97
-
98
- /**
99
- * Avatar to display.
100
- */
101
- avatar?: Slot<typeof Avatar>;
102
-
103
- /**
104
- * PresenceBadge to display.
105
- */
106
- presence?: Slot<typeof PresenceBadge>;
107
-
108
- /**
109
- * The first line of text in the Persona, larger than the rest of the lines.
110
- *
111
- * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
112
- * from the `name` prop.
113
- */
114
- primaryText?: Slot<'span'>;
115
-
116
- /**
117
- * The second line of text in the Persona.
118
- */
119
- secondaryText?: Slot<'span'>;
120
-
121
- /**
122
- * The third line of text in the Persona.
123
- */
124
- tertiaryText?: Slot<'span'>;
125
-
126
- /**
127
- * The fourth line of text in the Persona.
128
- */
129
- quaternaryText?: Slot<'span'>;
130
- };
131
-
132
- /**
133
- * Persona Props
134
- */
135
- export type PersonaProps = Omit<ComponentProps<PersonaSlots>, 'badge'> &
136
- Pick<AvatarProps, 'name'> & {
137
- /**
138
- * Whether to display only the presence.
139
- *
140
- * @default false
141
- */
142
- presenceOnly?: boolean;
143
-
144
- /**
145
- * Position the text will be rendered in.
146
- *
147
- * @default after
148
- */
149
- textPosition?: 'before' | 'after' | 'below';
150
- };
151
- ```
152
-
153
- ## Structure
154
-
155
- To avoid the [issue](https://github.com/microsoft/fluentui/issues/23386) v8 has, a css grid will be used instead of a flexbox that requires a general wrapper and a text container wrapper.
156
-
157
- - _**Internal**_
158
-
159
- ```jsx
160
- const coin = (
161
- <>
162
- {!presenceOnly && slots.avatar && <slots.avatar {...slotProps.avatar} />}
163
- {presenceOnly && slots.presence && <slots.presence {...slotProps.presence} />}
164
- </>
165
- );
166
-
167
- return (
168
- <slots.root {...slotProps.root}>
169
- {(textPosition === 'after' || textPosition === 'below') && coin}
170
- {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}
171
- {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
172
- {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}
173
- {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}
174
- {textPosition === 'before' && coin}
175
- </slots.root>
176
- );
177
- ```
178
-
179
- - _**DOM**_
180
-
181
- ```html
182
- <div class="fui-Persona">
183
- <div {/* Avatar, PresenceBadge, or Avatar with PresenceBadge */} />
184
- <span class="fui-Persona__primaryText">{/* name */}</span>
185
- <span class="fui-Persona__secondaryText">Secondary Text</span>
186
- <span class="fui-Persona__tertiaryText">Tertiary Text</span>
187
- <span class="fui-Persona__quaternaryText">Quaternary Text</span>
188
- </div>
189
- ```
190
-
191
- ## Migration
192
-
193
- See [MIGRATION.md](./MIGRATION.md) for details.
194
-
195
- ## Behaviors
196
-
197
- _Explain how the component will behave in use, including:_
198
-
199
- - _Component States_
200
- - There are no states for this component, it's a visual representation.
201
- - _Interaction_
202
- - _Keyboard_
203
- - Doesn't receive focus.
204
- - _Cursor_
205
- - Doesn't interact with cursor.
206
- - _Touch_
207
- - Doesn't interact with touch.
208
- - _Screen readers_
209
- - Contents will be read based on dom order.
210
-
211
- ## Accessibility
212
-
213
- - There's no need for `aria-*` or/and`role`. Avatar and Badge already accessible and the text labels won't need anything as well.