@fluentui/react-persona 9.1.6 → 9.1.8

package/CHANGELOG.json

@@ -2,7 +2,67 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Thu, 26 Jan 2023 13:27:53 GMT",
+      "date": "Tue, 07 Feb 2023 14:10:47 GMT",
+      "tag": "@fluentui/react-persona_v9.1.8",
+      "version": "9.1.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.3.2",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.23",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Jan 2023 19:53:56 GMT",
+      "tag": "@fluentui/react-persona_v9.1.7",
+      "version": "9.1.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "f4f81bc1025ba1ac43f09ef9e45646cb06f47f89",
+            "comment": "fix: Reduce spacing between first and second line."
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-persona",
+            "commit": "fc896528cd40ac5e32c0fb125fb00c502a471cab",
+            "comment": "fix: Make before and after textPositions align correctly when the Avatar size is larger than the text lines together."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-avatar to v9.3.1",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-badge to v9.0.22",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-persona",
+            "comment": "Bump @fluentui/react-utilities to v9.5.1",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 13:31:03 GMT",
       "tag": "@fluentui/react-persona_v9.1.6",
       "version": "9.1.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Thu, 26 Jan 2023 13:27:53 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Feb 2023 14:10:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.8)
+
+Tue, 07 Feb 2023 14:10:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.7..@fluentui/react-persona_v9.1.8)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.3.2 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+- Bump @fluentui/react-badge to v9.0.23 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+
+## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.7)
+
+Tue, 31 Jan 2023 19:53:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.6..@fluentui/react-persona_v9.1.7)
+
+### Patches
+
+- fix: Reduce spacing between first and second line. ([PR #26520](https://github.com/microsoft/fluentui/pull/26520) by esteban.230@hotmail.com)
+- fix: Make before and after textPositions align correctly when the Avatar size is larger than the text lines together. ([PR #26546](https://github.com/microsoft/fluentui/pull/26546) by esteban.230@hotmail.com)
+- Bump @fluentui/react-avatar to v9.3.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-badge to v9.0.22 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+
 ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.6)
 
-Thu, 26 Jan 2023 13:27:53 GMT 
+Thu, 26 Jan 2023 13:31:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.5..@fluentui/react-persona_v9.1.6)
 
 ### Patches

package/lib/components/Persona/usePersonaStyles.js

@@ -18,6 +18,9 @@ const useStyles = /*#__PURE__*/__styles({
     mc9l5x: "fwk3njj",
     v29qe6: "fvtn1bl"
   },
+  beforeAfterCenter: {
+    wkccdc: "f1iantul"
+  },
   after: {
     Bxotwcr: "f1u07yai",
     B7hvi0a: "f1m2n5bn",
@@ -31,9 +34,12 @@ const useStyles = /*#__PURE__*/__styles({
   below: {
     B7hvi0a: "f1oiokrs"
   },
-  coin: {
+  media: {
     Ijaq50: "f1hek2iy"
   },
+  mediaBeforeAfterCenter: {
+    Ijaq50: "fa4dipu"
+  },
   start: {
     qb2dma: "f9h729m"
   },
@@ -49,9 +55,24 @@ const useStyles = /*#__PURE__*/__styles({
     qb2dma: "f7nlbp4",
     Ijaq50: "f1rnkkuc",
     Br312pm: "fwu52yu"
+  },
+  secondLineSpacing: {
+    B6of3ja: "f1ryq6si"
+  },
+  primary: {
+    Ijaq50: "f1q3ipgb"
+  },
+  secondary: {
+    Ijaq50: "f3drtdk"
+  },
+  tertiary: {
+    Ijaq50: "fa1o6s1"
+  },
+  quaternary: {
+    Ijaq50: "f1tuwaia"
   }
 }, {
-  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;}"]
+  d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".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;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
 });
 const useAvatarSpacingStyles = /*#__PURE__*/__styles({
   "extra-small": {
@@ -102,6 +123,7 @@ export const usePersonaStyles_unstable = state => {
     textPosition
   } = state;
   const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
   const {
     primaryTextClassName,
     optionalTextClassName
@@ -112,24 +134,24 @@ export const usePersonaStyles_unstable = state => {
     ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
-  state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);
+  state.root.className = mergeClasses(personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
   if (state.avatar) {
-    state.avatar.className = mergeClasses(personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+    state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
   if (state.presence) {
-    state.presence.className = mergeClasses(personaClassNames.presence, styles.coin, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+    state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
   }
   if (state.primaryText) {
-    state.primaryText.className = mergeClasses(personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
+    state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
   }
   if (state.secondaryText) {
-    state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
+    state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
   }
   if (state.tertiaryText) {
-    state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
+    state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
   }
   if (state.quaternaryText) {
-    state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
+    state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
   }
   return state;
 };

package/lib/components/Persona/usePersonaStyles.js.map

@@ -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":"../src/","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"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,iBAAiB,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,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;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;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;EAAA;AAAA;EAAA;AAAA,EA4DhB;AAEF,MAAMC,sBAAsB,gBAAG;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,EA4B7B;AAEF,MAAMC,wBAAwB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI/B;AAEF;;;AAGA,OAAO,MAAMC,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,MAAMI,sBAAsB,GAAGF,YAAY,KAAK,OAAO,IAAID,aAAa,KAAK,QAAQ;EACrF,MAAM;IAAEI,oBAAoB;IAAEC;EAAqB,CAAE,GAAGC,iBAAiB,CAACT,KAAK,EAAEK,cAAc,CAAC;EAEhG,MAAMK,MAAM,GAAGd,SAAS,EAAE;EAC1B,MAAMe,mBAAmB,GAAGd,sBAAsB,EAAE;EACpD,MAAMe,qBAAqB,GAAG;IAAE,GAAGD,mBAAmB;IAAE,GAAGb,wBAAwB;EAAE,CAAE;EAEvFE,KAAK,CAACZ,IAAI,CAACyB,SAAS,GAAG7B,YAAY,CACjCG,iBAAiB,CAACC,IAAI,EACtBsB,MAAM,CAACI,IAAI,EACXR,sBAAsB,IAAII,MAAM,CAACK,iBAAiB,EAClDL,MAAM,CAACN,YAAY,CAAC,EACpBJ,KAAK,CAACZ,IAAI,CAACyB,SAAS,CACrB;EAED,IAAIb,KAAK,CAACX,MAAM,EAAE;IAChBW,KAAK,CAACX,MAAM,CAACwB,SAAS,GAAG7B,YAAY,CACnCG,iBAAiB,CAACE,MAAM,EACxBe,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBQ,mBAAmB,CAACT,IAAI,CAAC,EACzBS,mBAAmB,CAACP,YAAY,CAAC,EACjCJ,KAAK,CAACX,MAAM,CAACwB,SAAS,CACvB;;EAGH,IAAIb,KAAK,CAACV,QAAQ,EAAE;IAClBU,KAAK,CAACV,QAAQ,CAACuB,SAAS,GAAG7B,YAAY,CACrCG,iBAAiB,CAACG,QAAQ,EAC1Bc,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBS,qBAAqB,CAACV,IAAI,CAAC,EAC3BU,qBAAqB,CAACR,YAAY,CAAC,EACnCA,YAAY,KAAK,OAAO,IAAIC,cAAc,IAAIK,MAAM,CAACQ,mBAAmB,EACxEd,YAAY,KAAK,QAAQ,IAAIC,cAAc,IAAIK,MAAM,CAACS,oBAAoB,EAC1EnB,KAAK,CAACV,QAAQ,CAACuB,SAAS,CACzB;;EAGH,IAAIb,KAAK,CAACT,WAAW,EAAE;IACrBS,KAAK,CAACT,WAAW,CAACsB,SAAS,GAAG7B,YAAY,CACxCG,iBAAiB,CAACI,WAAW,EAC7Be,sBAAsB,IAAII,MAAM,CAACU,OAAO,EACxCb,oBAAoB,EACpBP,KAAK,CAACT,WAAW,CAACsB,SAAS,CAC5B;;EAGH,IAAIb,KAAK,CAACR,aAAa,EAAE;IACvBQ,KAAK,CAACR,aAAa,CAACqB,SAAS,GAAG7B,YAAY,CAC1CG,iBAAiB,CAACK,aAAa,EAC/Bc,sBAAsB,IAAII,MAAM,CAACW,SAAS,EAC1Cb,qBAAqB,EACrBE,MAAM,CAACY,iBAAiB,EACxBtB,KAAK,CAACR,aAAa,CAACqB,SAAS,CAC9B;;EAGH,IAAIb,KAAK,CAACP,YAAY,EAAE;IACtBO,KAAK,CAACP,YAAY,CAACoB,SAAS,GAAG7B,YAAY,CACzCG,iBAAiB,CAACM,YAAY,EAC9Ba,sBAAsB,IAAII,MAAM,CAACa,QAAQ,EACzCf,qBAAqB,EACrBR,KAAK,CAACP,YAAY,CAACoB,SAAS,CAC7B;;EAGH,IAAIb,KAAK,CAACN,cAAc,EAAE;IACxBM,KAAK,CAACN,cAAc,CAACmB,SAAS,GAAG7B,YAAY,CAC3CG,iBAAiB,CAACO,cAAc,EAChCY,sBAAsB,IAAII,MAAM,CAACc,UAAU,EAC3ChB,qBAAqB,EACrBR,KAAK,CAACN,cAAc,CAACmB,SAAS,CAC/B;;EAGH,OAAOb,KAAK;AACd,CAAC;AAED,MAAMyB,aAAa,gBAAG;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,EAqBpB;AAEF,MAAMhB,iBAAiB,GAAG,CACxBT,KAAmB,EACnBK,cAAuB,KAIrB;EACF,MAAM;IAAEJ,YAAY;IAAEC,IAAI;IAAEE;EAAY,CAAE,GAAGJ,KAAK;EAClD,MAAM0B,UAAU,GAAGD,aAAa,EAAE;EAElC,IAAIE,eAAe;EACnB,IAAIC,uBAAuB;EAE3B,IAAI3B,YAAY,EAAE;IAChB,IAAIC,IAAI,KAAK,aAAa,EAAE;MAC1ByB,eAAe,GAAG3B,KAAK,CAAC6B,YAAY,GAAG,CAAC,GAAGH,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ;KAClF,MAAM,IAAI7B,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM,EAAE;MACpDyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;IAGpC,IAAIzB,cAAc,EAAE;MAClB,IAAID,YAAY,KAAK,QAAQ,EAAE;QAC7BwB,uBAAuB,GAAGF,UAAU,CAACP,oBAAoB;OAC1D,MAAM,IAAIf,YAAY,KAAK,OAAO,EAAE;QACnCwB,uBAAuB,GAAGF,UAAU,CAACR,mBAAmB;;;GAG7D,MAAM;IACL,IAAIhB,IAAI,KAAK,MAAM,EAAE;MACnByB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM,IAAI9B,IAAI,KAAK,aAAa,EAAE;MACjCyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;;EAItC,OAAO;IACLvB,oBAAoB,EAAEvB,YAAY,CAChC0C,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACnC,WAAW,EACtBoC,eAAe,EACfC,uBAAuB,CACxB;IACDpB,qBAAqB,EAAExB,YAAY,CACjC0C,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACO,YAAY,EACvB,CAAChC,YAAY,IAAIC,IAAI,KAAK,MAAM,GAAGwB,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ,EACzEH,uBAAuB;GAE1B;AACH,CAAC","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"../src/","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  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    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\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    styles.base,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst 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-amd/components/Persona/usePersonaStyles.js

@@ -21,6 +21,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
             display: 'inline-grid',
             gridAutoRows: 'max-content',
         },
+        beforeAfterCenter: {
+            // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
+            gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',
+        },
         after: {
             gridAutoFlow: 'column',
             justifyItems: 'start',
@@ -34,9 +38,12 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         below: {
             justifyItems: 'center',
         },
-        coin: {
+        media: {
             gridRowStart: 'span 5',
         },
+        mediaBeforeAfterCenter: {
+            gridRowStart: 'span 6',
+        },
         start: {
             alignSelf: 'start',
         },
@@ -53,6 +60,13 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
             gridRowStart: 'unset',
             gridColumnStart: 'middle',
         },
+        secondLineSpacing: {
+            marginTop: '-2px',
+        },
+        primary: { gridRowStart: 'primary' },
+        secondary: { gridRowStart: 'secondary' },
+        tertiary: { gridRowStart: 'tertiary' },
+        quaternary: { gridRowStart: 'quaternary' },
     });
     var useAvatarSpacingStyles = react_1.makeStyles({
         'extra-small': (_a = {},
@@ -94,28 +108,29 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
     var usePersonaStyles_unstable = function (state) {
         var presenceOnly = state.presenceOnly, size = state.size, textAlignment = state.textAlignment, textPosition = state.textPosition;
         var alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+        var alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
         var _a = useTextClassNames(state, alignToPrimary), primaryTextClassName = _a.primaryTextClassName, optionalTextClassName = _a.optionalTextClassName;
         var styles = useStyles();
         var avatarSpacingStyles = useAvatarSpacingStyles();
         var presenceSpacingStyles = tslib_1.__assign(tslib_1.__assign({}, avatarSpacingStyles), usePresenceSpacingStyles());
-        state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
+        state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
         if (state.avatar) {
-            state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+            state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
         }
         if (state.presence) {
-            state.presence.className = react_1.mergeClasses(exports.personaClassNames.presence, styles.coin, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+            state.presence.className = react_1.mergeClasses(exports.personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
         }
         if (state.primaryText) {
-            state.primaryText.className = react_1.mergeClasses(exports.personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
+            state.primaryText.className = react_1.mergeClasses(exports.personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
         }
         if (state.secondaryText) {
-            state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
+            state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
         }
         if (state.tertiaryText) {
-            state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
+            state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
         }
         if (state.quaternaryText) {
-            state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
+            state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
         }
         return state;
     };

package/lib-amd/components/Persona/usePersonaStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePersonaStyles.js","sourceRoot":"","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"]}
+{"version":3,"file":"usePersonaStyles.js","sourceRoot":"","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  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    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\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    styles.base,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst 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

@@ -24,6 +24,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     mc9l5x: "fwk3njj",
     v29qe6: "fvtn1bl"
   },
+  beforeAfterCenter: {
+    wkccdc: "f1iantul"
+  },
   after: {
     Bxotwcr: "f1u07yai",
     B7hvi0a: "f1m2n5bn",
@@ -37,9 +40,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   below: {
     B7hvi0a: "f1oiokrs"
   },
-  coin: {
+  media: {
     Ijaq50: "f1hek2iy"
   },
+  mediaBeforeAfterCenter: {
+    Ijaq50: "fa4dipu"
+  },
   start: {
     qb2dma: "f9h729m"
   },
@@ -55,9 +61,24 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     qb2dma: "f7nlbp4",
     Ijaq50: "f1rnkkuc",
     Br312pm: "fwu52yu"
+  },
+  secondLineSpacing: {
+    B6of3ja: "f1ryq6si"
+  },
+  primary: {
+    Ijaq50: "f1q3ipgb"
+  },
+  secondary: {
+    Ijaq50: "f3drtdk"
+  },
+  tertiary: {
+    Ijaq50: "fa1o6s1"
+  },
+  quaternary: {
+    Ijaq50: "f1tuwaia"
   }
 }, {
-  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;}"]
+  d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".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;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
 });
 const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
   "extra-small": {
@@ -108,6 +129,7 @@ const usePersonaStyles_unstable = state => {
     textPosition
   } = state;
   const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
   const {
     primaryTextClassName,
     optionalTextClassName
@@ -118,24 +140,24 @@ const usePersonaStyles_unstable = state => {
     ...avatarSpacingStyles,
     ...usePresenceSpacingStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
+  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
   if (state.avatar) {
-    state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+    state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
   if (state.presence) {
-    state.presence.className = react_1.mergeClasses(exports.personaClassNames.presence, styles.coin, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+    state.presence.className = react_1.mergeClasses(exports.personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
   }
   if (state.primaryText) {
-    state.primaryText.className = react_1.mergeClasses(exports.personaClassNames.primaryText, primaryTextClassName, state.primaryText.className);
+    state.primaryText.className = react_1.mergeClasses(exports.personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
   }
   if (state.secondaryText) {
-    state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, optionalTextClassName, state.secondaryText.className);
+    state.secondaryText.className = react_1.mergeClasses(exports.personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
   }
   if (state.tertiaryText) {
-    state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, optionalTextClassName, state.tertiaryText.className);
+    state.tertiaryText.className = react_1.mergeClasses(exports.personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
   }
   if (state.quaternaryText) {
-    state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, optionalTextClassName, state.quaternaryText.className);
+    state.quaternaryText.className = react_1.mergeClasses(exports.personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
   }
   return state;
 };

package/lib-commonjs/components/Persona/usePersonaStyles.js.map

@@ -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":"../src/","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"]}
+{"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","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"../src/","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  beforeAfterCenter: {\n    // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n    gridTemplateRows:\n      '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n  },\n\n  after: {\n    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\n  media: {\n    gridRowStart: 'span 5',\n  },\n\n  mediaBeforeAfterCenter: {\n    gridRowStart: 'span 6',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n\n  secondLineSpacing: {\n    marginTop: '-2px',\n  },\n\n  primary: { gridRowStart: 'primary' },\n  secondary: { gridRowStart: 'secondary' },\n  tertiary: { gridRowStart: 'tertiary' },\n  quaternary: { gridRowStart: 'quaternary' },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(\n    personaClassNames.root,\n    styles.base,\n    alignBeforeAfterCenter && styles.beforeAfterCenter,\n    styles[textPosition],\n    state.root.className,\n  );\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      textPosition !== 'below' && styles.media,\n      alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      alignBeforeAfterCenter && styles.primary,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      alignBeforeAfterCenter && styles.secondary,\n      optionalTextClassName,\n      styles.secondLineSpacing,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      alignBeforeAfterCenter && styles.tertiary,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      alignBeforeAfterCenter && styles.quaternary,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst 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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,10 +32,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.3.0",
-    "@fluentui/react-badge": "^9.0.21",
+    "@fluentui/react-avatar": "^9.3.2",
+    "@fluentui/react-badge": "^9.0.23",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.0",
+    "@fluentui/react-utilities": "^9.5.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },