@fluentui/react-persona 0.0.0-nightly-20230126-0420.1 → 0.0.0-nightly-20230127-0417.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.json +40 -13
  2. package/CHANGELOG.md +20 -9
  3. package/lib/components/Persona/usePersonaStyles.js +5 -2
  4. package/lib/components/Persona/usePersonaStyles.js.map +1 -1
  5. package/lib-commonjs/components/Persona/usePersonaStyles.js +5 -2
  6. package/lib-commonjs/components/Persona/usePersonaStyles.js.map +1 -1
  7. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-persona",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 Jan 2023 04:27:50 GMT",
6
- "tag": "@fluentui/react-persona_v0.0.0-nightly-20230126-0420.1",
7
- "version": "0.0.0-nightly-20230126-0420.1",
5
+ "date": "Fri, 27 Jan 2023 04:24:31 GMT",
6
+ "tag": "@fluentui/react-persona_v0.0.0-nightly-20230127-0417.1",
7
+ "version": "0.0.0-nightly-20230127-0417.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,59 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-persona",
19
- "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230126-0420.1",
20
- "commit": "3428a8c744066a319dc9afcce72c948f1a96f0b2"
19
+ "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230127-0417.1",
20
+ "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-persona",
25
- "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230126-0420.1",
26
- "commit": "3428a8c744066a319dc9afcce72c948f1a96f0b2"
25
+ "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230127-0417.1",
26
+ "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-persona",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230126-0420.1",
32
- "commit": "3428a8c744066a319dc9afcce72c948f1a96f0b2"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230127-0417.1",
32
+ "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-persona",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230126-0420.1",
38
- "commit": "3428a8c744066a319dc9afcce72c948f1a96f0b2"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230127-0417.1",
38
+ "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-persona",
43
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230126-0420.1",
44
- "commit": "3428a8c744066a319dc9afcce72c948f1a96f0b2"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230127-0417.1",
44
+ "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Thu, 26 Jan 2023 13:31:03 GMT",
51
+ "tag": "@fluentui/react-persona_v9.1.6",
52
+ "version": "9.1.6",
53
+ "comments": {
54
+ "patch": [
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-persona",
58
+ "comment": "Bump @fluentui/react-avatar to v9.3.0",
59
+ "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-persona",
64
+ "comment": "Bump @fluentui/react-badge to v9.0.21",
65
+ "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-persona",
70
+ "comment": "Bump @fluentui/react-utilities to v9.5.0",
71
+ "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
45
72
  }
46
73
  ]
47
74
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,33 @@
1
1
  # Change Log - @fluentui/react-persona
2
2
 
3
- This log was last generated on Thu, 26 Jan 2023 04:27:50 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 27 Jan 2023 04:24:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230126-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230126-0420.1)
7
+ ## [0.0.0-nightly-20230127-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230127-0417.1)
8
8
 
9
- Thu, 26 Jan 2023 04:27:50 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.5..@fluentui/react-persona_v0.0.0-nightly-20230126-0420.1)
9
+ Fri, 27 Jan 2023 04:24:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.6..@fluentui/react-persona_v0.0.0-nightly-20230127-0417.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-avatar to v0.0.0-nightly-20230126-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/3428a8c744066a319dc9afcce72c948f1a96f0b2) by beachball)
16
- - Bump @fluentui/react-badge to v0.0.0-nightly-20230126-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/3428a8c744066a319dc9afcce72c948f1a96f0b2) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230126-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/3428a8c744066a319dc9afcce72c948f1a96f0b2) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230126-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/3428a8c744066a319dc9afcce72c948f1a96f0b2) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230126-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/3428a8c744066a319dc9afcce72c948f1a96f0b2) by beachball)
15
+ - Bump @fluentui/react-avatar to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
16
+ - Bump @fluentui/react-badge to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
20
+
21
+ ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.6)
22
+
23
+ Thu, 26 Jan 2023 13:31:03 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.5..@fluentui/react-persona_v9.1.6)
25
+
26
+ ### Patches
27
+
28
+ - Bump @fluentui/react-avatar to v9.3.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
29
+ - Bump @fluentui/react-badge to v9.0.21 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.5.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
20
31
 
21
32
  ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.5)
22
33
 
package/lib/components/Persona/usePersonaStyles.js CHANGED
@@ -49,9 +49,12 @@ const useStyles = /*#__PURE__*/__styles({
49
49
  qb2dma: "f7nlbp4",
50
50
  Ijaq50: "f1rnkkuc",
51
51
  Br312pm: "fwu52yu"
52
+ },
53
+ secondLineSpacing: {
54
+ B6of3ja: "f1ryq6si"
52
55
  }
53
56
  }, {
54
- 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;}"]
57
+ 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;}", ".f1ryq6si{margin-top:-2px;}"]
55
58
  });
56
59
  const useAvatarSpacingStyles = /*#__PURE__*/__styles({
57
60
  "extra-small": {
@@ -123,7 +126,7 @@ export const usePersonaStyles_unstable = state => {
123
126
  state.primaryText.className = mergeClasses(personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
124
127
  }
125
128
  if (state.secondaryText) {
126
- state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
129
+ state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
127
130
  }
128
131
  if (state.tertiaryText) {
129
132
  state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
package/lib/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","coin","afterAlignToPrimary","beforeAlignToPrimary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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"]}
1
+ {"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","coin","afterAlignToPrimary","beforeAlignToPrimary","secondLineSpacing","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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 secondLineSpacing: {\n marginTop: '-2px',\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 styles.secondLineSpacing,\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"]}
package/lib-commonjs/components/Persona/usePersonaStyles.js CHANGED
@@ -55,9 +55,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
55
55
  qb2dma: "f7nlbp4",
56
56
  Ijaq50: "f1rnkkuc",
57
57
  Br312pm: "fwu52yu"
58
+ },
59
+ secondLineSpacing: {
60
+ B6of3ja: "f1ryq6si"
58
61
  }
59
62
  }, {
60
- 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;}"]
63
+ 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;}", ".f1ryq6si{margin-top:-2px;}"]
61
64
  });
62
65
  const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
63
66
  "extra-small": {
@@ -129,7 +132,7 @@ const usePersonaStyles_unstable = state => {
129
132
  state.primaryText.className = react_1.mergeClasses(exports.personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
130
133
  }
131
134
  if (state.secondaryText) {
132
- state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
135
+ state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
133
136
  }
134
137
  if (state.tertiaryText) {
135
138
  state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
package/lib-commonjs/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","react_1","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","coin","afterAlignToPrimary","beforeAlignToPrimary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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"]}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAIaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,MAAM,EAAE,qBAAqB;EAC7BC,QAAQ,EAAE,uBAAuB;EACjCC,WAAW,EAAE,0BAA0B;EACvCC,aAAa,EAAE,4BAA4B;EAC3CC,YAAY,EAAE,2BAA2B;EACzCC,cAAc,EAAE;CACjB;AAED,MAAMC,aAAa,GAAG,gCAAgC;AAEtD;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4C1B;AAEF,MAAMC,sBAAsB,gBAAGD,gBAAU;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,EA4BvC;AAEF,MAAME,wBAAwB,gBAAGF,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIzC;AAEF;;;AAGO,MAAMG,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,YAAY;IAAEC,IAAI;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAEjE,MAAMK,cAAc,GAAGJ,YAAY,IAAIE,aAAa,KAAK,OAAO,IAAID,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM;EAC7G,MAAM;IAAEI,oBAAoB;IAAEC;EAAqB,CAAE,GAAGC,iBAAiB,CAACR,KAAK,EAAEK,cAAc,CAAC;EAEhG,MAAMI,MAAM,GAAGd,SAAS,EAAE;EAC1B,MAAMe,mBAAmB,GAAGb,sBAAsB,EAAE;EACpD,MAAMc,qBAAqB,GAAG;IAAE,GAAGD,mBAAmB;IAAE,GAAGZ,wBAAwB;EAAE,CAAE;EAEvFE,KAAK,CAACb,IAAI,CAACyB,SAAS,GAAGhB,oBAAY,CAACV,yBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACI,IAAI,EAAEJ,MAAM,CAACL,YAAY,CAAC,EAAEJ,KAAK,CAACb,IAAI,CAACyB,SAAS,CAAC;EAEpH,IAAIZ,KAAK,CAACZ,MAAM,EAAE;IAChBY,KAAK,CAACZ,MAAM,CAACwB,SAAS,GAAGhB,oBAAY,CACnCV,yBAAiB,CAACE,MAAM,EACxBqB,MAAM,CAACK,IAAI,EACXL,MAAM,CAACN,aAAa,CAAC,EACrBO,mBAAmB,CAACR,IAAI,CAAC,EACzBQ,mBAAmB,CAACN,YAAY,CAAC,EACjCJ,KAAK,CAACZ,MAAM,CAACwB,SAAS,CACvB;;EAGH,IAAIZ,KAAK,CAACX,QAAQ,EAAE;IAClBW,KAAK,CAACX,QAAQ,CAACuB,SAAS,GAAGhB,oBAAY,CACrCV,yBAAiB,CAACG,QAAQ,EAC1BoB,MAAM,CAACK,IAAI,EACXL,MAAM,CAACN,aAAa,CAAC,EACrBQ,qBAAqB,CAACT,IAAI,CAAC,EAC3BS,qBAAqB,CAACP,YAAY,CAAC,EACnCA,YAAY,KAAK,OAAO,IAAIC,cAAc,IAAII,MAAM,CAACM,mBAAmB,EACxEX,YAAY,KAAK,QAAQ,IAAIC,cAAc,IAAII,MAAM,CAACO,oBAAoB,EAC1EhB,KAAK,CAACX,QAAQ,CAACuB,SAAS,CACzB;;EAGH,IAAIZ,KAAK,CAACV,WAAW,EAAE;IACrBU,KAAK,CAACV,WAAW,CAACsB,SAAS,GAAGhB,oBAAY,CACxCV,yBAAiB,CAACI,WAAW,EAC7BgB,oBAAoB,EACpBN,KAAK,CAACV,WAAW,CAACsB,SAAS,CAC5B;;EAGH,IAAIZ,KAAK,CAACT,aAAa,EAAE;IACvBS,KAAK,CAACT,aAAa,CAACqB,SAAS,GAAGhB,oBAAY,CAC1CV,yBAAiB,CAACK,aAAa,EAC/BgB,qBAAqB,EACrBE,MAAM,CAACQ,iBAAiB,EACxBjB,KAAK,CAACT,aAAa,CAACqB,SAAS,CAC9B;;EAGH,IAAIZ,KAAK,CAACR,YAAY,EAAE;IACtBQ,KAAK,CAACR,YAAY,CAACoB,SAAS,GAAGhB,oBAAY,CACzCV,yBAAiB,CAACM,YAAY,EAC9Be,qBAAqB,EACrBP,KAAK,CAACR,YAAY,CAACoB,SAAS,CAC7B;;EAGH,IAAIZ,KAAK,CAACP,cAAc,EAAE;IACxBO,KAAK,CAACP,cAAc,CAACmB,SAAS,GAAGhB,oBAAY,CAC3CV,yBAAiB,CAACO,cAAc,EAChCc,qBAAqB,EACrBP,KAAK,CAACP,cAAc,CAACmB,SAAS,CAC/B;;EAGH,OAAOZ,KAAK;AACd,CAAC;AAtEYd,iCAAyB;AAwEtC,MAAMgC,aAAa,gBAAGtB,gBAAU;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,EAqB9B;AAEF,MAAMY,iBAAiB,GAAG,CACxBR,KAAmB,EACnBK,cAAuB,KAIrB;EACF,MAAM;IAAEJ,YAAY;IAAEC,IAAI;IAAEE;EAAY,CAAE,GAAGJ,KAAK;EAClD,MAAMmB,UAAU,GAAGD,aAAa,EAAE;EAElC,IAAIE,eAAe;EACnB,IAAIC,uBAAuB;EAE3B,IAAIpB,YAAY,EAAE;IAChB,IAAIC,IAAI,KAAK,aAAa,EAAE;MAC1BkB,eAAe,GAAGpB,KAAK,CAACsB,YAAY,GAAG,CAAC,GAAGH,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ;KAClF,MAAM,IAAItB,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM,EAAE;MACpDkB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;IAGpC,IAAIlB,cAAc,EAAE;MAClB,IAAID,YAAY,KAAK,QAAQ,EAAE;QAC7BiB,uBAAuB,GAAGF,UAAU,CAACH,oBAAoB;OAC1D,MAAM,IAAIZ,YAAY,KAAK,OAAO,EAAE;QACnCiB,uBAAuB,GAAGF,UAAU,CAACJ,mBAAmB;;;GAG7D,MAAM;IACL,IAAIb,IAAI,KAAK,MAAM,EAAE;MACnBkB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM,IAAIvB,IAAI,KAAK,aAAa,EAAE;MACjCkB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;;EAItC,OAAO;IACLjB,oBAAoB,EAAEV,oBAAY,CAChCuB,UAAU,CAACN,IAAI,EACfM,UAAU,CAAC7B,WAAW,EACtB8B,eAAe,EACfC,uBAAuB,CACxB;IACDd,qBAAqB,EAAEX,oBAAY,CACjCuB,UAAU,CAACN,IAAI,EACfM,UAAU,CAACO,YAAY,EACvB,CAACzB,YAAY,IAAIC,IAAI,KAAK,MAAM,GAAGiB,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ,EACzEH,uBAAuB;GAE1B;AACH,CAAC","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","react_1","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","coin","afterAlignToPrimary","beforeAlignToPrimary","secondLineSpacing","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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 secondLineSpacing: {\n marginTop: '-2px',\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 styles.secondLineSpacing,\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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-persona",
3
- "version": "0.0.0-nightly-20230126-0420.1",
3
+ "version": "0.0.0-nightly-20230127-0417.1",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,15 +27,15 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230126-0420.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230127-0417.1",
31
31
  "@fluentui/scripts-api-extractor": "*",
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-avatar": "0.0.0-nightly-20230126-0420.1",
36
- "@fluentui/react-badge": "0.0.0-nightly-20230126-0420.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20230126-0420.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20230126-0420.1",
35
+ "@fluentui/react-avatar": "0.0.0-nightly-20230127-0417.1",
36
+ "@fluentui/react-badge": "0.0.0-nightly-20230127-0417.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20230127-0417.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20230127-0417.1",
39
39
  "@griffel/react": "^1.5.2",
40
40
  "tslib": "^2.1.0"
41
41
  },