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

Sign up to get free protection for your applications and to get access to all the features.
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":"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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/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.