@fluentui/react-persona 0.0.0-nightly-20230130-0422.1 → 0.0.0-nightly-20230201-0421.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-persona",
   "entries": [
     {
-      "date": "Mon, 30 Jan 2023 04:29:57 GMT",
-      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230130-0422.1",
-      "version": "0.0.0-nightly-20230130-0422.1",
+      "date": "Wed, 01 Feb 2023 04:29:01 GMT",
+      "tag": "@fluentui/react-persona_v0.0.0-nightly-20230201-0421.1",
+      "version": "0.0.0-nightly-20230201-0421.1",
       "comments": {
         "prerelease": [
           {
@@ -16,32 +16,71 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230130-0422.1",
-            "commit": "448f83795601876827935e9f49637383ade73cc9"
+            "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230201-0421.1",
+            "commit": "11cb89f4bbbc21aa76911c5b5bcded0bad95d072"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230130-0422.1",
-            "commit": "448f83795601876827935e9f49637383ade73cc9"
+            "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230201-0421.1",
+            "commit": "11cb89f4bbbc21aa76911c5b5bcded0bad95d072"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230130-0422.1",
-            "commit": "448f83795601876827935e9f49637383ade73cc9"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230201-0421.1",
+            "commit": "11cb89f4bbbc21aa76911c5b5bcded0bad95d072"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230130-0422.1",
-            "commit": "448f83795601876827935e9f49637383ade73cc9"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230201-0421.1",
+            "commit": "11cb89f4bbbc21aa76911c5b5bcded0bad95d072"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-persona",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230130-0422.1",
-            "commit": "448f83795601876827935e9f49637383ade73cc9"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230201-0421.1",
+            "commit": "11cb89f4bbbc21aa76911c5b5bcded0bad95d072"
+          }
+        ]
+      }
+    },
+    {
+      "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"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,22 +1,35 @@
 # Change Log - @fluentui/react-persona
 
-This log was last generated on Mon, 30 Jan 2023 04:29:57 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Feb 2023 04:29:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230130-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230130-0422.1)
+## [0.0.0-nightly-20230201-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230201-0421.1)
 
-Mon, 30 Jan 2023 04:29:57 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.6..@fluentui/react-persona_v0.0.0-nightly-20230130-0422.1)
+Wed, 01 Feb 2023 04:29:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.7..@fluentui/react-persona_v0.0.0-nightly-20230201-0421.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-avatar to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
-- Bump @fluentui/react-badge to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
+- Bump @fluentui/react-avatar to v0.0.0-nightly-20230201-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/11cb89f4bbbc21aa76911c5b5bcded0bad95d072) by beachball)
+- Bump @fluentui/react-badge to v0.0.0-nightly-20230201-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/11cb89f4bbbc21aa76911c5b5bcded0bad95d072) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230201-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/11cb89f4bbbc21aa76911c5b5bcded0bad95d072) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230201-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/11cb89f4bbbc21aa76911c5b5bcded0bad95d072) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230201-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/11cb89f4bbbc21aa76911c5b5bcded0bad95d072) 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)
 

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"
   },
@@ -52,9 +58,21 @@ const useStyles = /*#__PURE__*/__styles({
   },
   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;}", ".f1ryq6si{margin-top:-2px;}"]
+  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": {
@@ -105,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
@@ -115,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, styles.secondLineSpacing, 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","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"]}
+{"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","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":"","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-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"
   },
@@ -58,9 +64,21 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   },
   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;}", ".f1ryq6si{margin-top:-2px;}"]
+  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": {
@@ -111,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
@@ -121,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, styles.secondLineSpacing, 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","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"]}
+{"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":"","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": "0.0.0-nightly-20230130-0422.1",
+  "version": "0.0.0-nightly-20230201-0421.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,15 +27,15 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230130-0422.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230201-0421.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "0.0.0-nightly-20230130-0422.1",
-    "@fluentui/react-badge": "0.0.0-nightly-20230130-0422.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230130-0422.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230130-0422.1",
+    "@fluentui/react-avatar": "0.0.0-nightly-20230201-0421.1",
+    "@fluentui/react-badge": "0.0.0-nightly-20230201-0421.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230201-0421.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230201-0421.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },