@fluentui/react-persona 9.1.0-beta.3 → 9.1.0-beta.5

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

@@ -18,25 +18,25 @@ exports.personaClassNames = {
   tertiaryText: 'fui-Persona__tertiaryText',
   quaternaryText: 'fui-Persona__quaternaryText'
 };
+const avatarSpacing = `--fui-Persona__avatar--spacing`;
 /**
  * Styles for the root slot
  */
 
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
+  "base": {
     "mc9l5x": "fwk3njj",
-    "t4k1zu": "f4wu0r3",
     "v29qe6": "fvtn1bl"
   },
   "after": {
     "Bxotwcr": "f1u07yai",
     "B7hvi0a": "f1m2n5bn",
-    "i8kkvl": "f4px1ci"
+    "Budl1dq": "f1c1ms5d"
   },
   "before": {
     "Bxotwcr": "f1u07yai",
     "B7hvi0a": "f1tll2w5",
-    "i8kkvl": "f4px1ci"
+    "Budl1dq": "ffvkwdr"
   },
   "below": {
     "B7hvi0a": "f1oiokrs"
@@ -44,14 +44,64 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   "coin": {
     "Ijaq50": "f1hek2iy"
   },
-  "fixed": {
+  "start": {
     "qb2dma": "f9h729m"
   },
-  "scaled": {
+  "center": {
     "qb2dma": "f7nlbp4"
+  },
+  "afterAlignToPrimary": {
+    "qb2dma": "f7nlbp4",
+    "Ijaq50": "f1rnkkuc",
+    "Bw0ie65": "f1warjpf"
+  },
+  "beforeAlignToPrimary": {
+    "qb2dma": "f7nlbp4",
+    "Ijaq50": "f1rnkkuc",
+    "Br312pm": "fwu52yu"
   }
 }, {
-  "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}"]
+  "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;}"]
+});
+
+const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
+  "extra-small": {
+    "Bs1gm4r": "f1e48tse"
+  },
+  "small": {
+    "Bs1gm4r": "f18q9vkd"
+  },
+  "medium": {
+    "Bs1gm4r": "f18q9vkd"
+  },
+  "large": {
+    "Bs1gm4r": "fx34bi6"
+  },
+  "extra-large": {
+    "Bs1gm4r": "fx34bi6"
+  },
+  "huge": {
+    "Bs1gm4r": "f1o96qtm"
+  },
+  "after": {
+    "t21cq0": ["f103ycu4", "f1tao51"]
+  },
+  "below": {
+    "jrapky": "fbo7acy"
+  },
+  "before": {
+    "Frg6f3": ["f1tao51", "f103ycu4"]
+  }
+}, {
+  "d": [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}", ".f18q9vkd{--fui-Persona__avatar--spacing:var(--spacingHorizontalS);}", ".fx34bi6{--fui-Persona__avatar--spacing:var(--spacingHorizontalMNudge);}", ".f1o96qtm{--fui-Persona__avatar--spacing:var(--spacingHorizontalM);}", ".f103ycu4{margin-right:var(--fui-Persona__avatar--spacing);}", ".f1tao51{margin-left:var(--fui-Persona__avatar--spacing);}", ".fbo7acy{margin-bottom:var(--fui-Persona__avatar--spacing);}"]
+});
+
+const usePresenceSpacingStyles = /*#__PURE__*/react_1.__styles({
+  "small": {
+    "Bs1gm4r": "f1e48tse"
+  }
+}, {
+  "d": [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"]
 });
 /**
  * Apply styling to the Persona slots based on the state
@@ -60,22 +110,29 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const usePersonaStyles_unstable = state => {
   const {
-    fixed,
+    presenceOnly,
+    size,
+    textAlignment,
     textPosition
   } = state;
-  const styles = useStyles();
+  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
   const {
     primaryTextClassName,
     optionalTextClassName
-  } = useTextClassNames(state);
-  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.root, styles[textPosition], state.root.className);
+  } = useTextClassNames(state, alignToPrimary);
+  const styles = useStyles();
+  const avatarSpacingStyles = useAvatarSpacingStyles();
+  const presenceSpacingStyles = { ...avatarSpacingStyles,
+    ...usePresenceSpacingStyles()
+  };
+  state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
 
   if (state.avatar) {
-    state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, fixed ? styles.fixed : styles.scaled, state.avatar.className);
+    state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
   }
 
   if (state.presence) {
-    state.presence.className = react_1.mergeClasses(exports.personaClassNames.presence, styles.coin, fixed ? styles.fixed : styles.scaled, state.presence.className);
+    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);
   }
 
   if (state.primaryText) {
@@ -109,6 +166,12 @@ const useTextStyles = /*#__PURE__*/react_1.__styles({
   "optionalText": {
     "sj55zd": "fkfq4zb"
   },
+  "beforeAlignToPrimary": {
+    "Bw0ie65": "f1warjpf"
+  },
+  "afterAlignToPrimary": {
+    "Br312pm": "fwu52yu"
+  },
   "body1": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -126,94 +189,50 @@ const useTextStyles = /*#__PURE__*/react_1.__styles({
     "Be2twd7": "fod5ikn",
     "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
-  },
-  "subtitle1": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "f1pp30po",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "f106mvju"
-  },
-  "title2": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fojgt09",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fcen8rp"
-  },
-  "title3": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "f1x0m3f5",
-    "Bhrd7zp": "fl43uef",
-    "Bg96gwp": "fb86gi6"
   }
 }, {
-  "d": [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}"]
+  "d": [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
 });
 
-const useTextClassNames = state => {
+const useTextClassNames = (state, alignToPrimary) => {
   const {
-    fixed,
-    numTextLines,
-    presenceOnly
+    presenceOnly,
+    size,
+    textPosition
   } = state;
   const textStyles = useTextStyles();
   let primaryTextSize;
-  let optionalTextSize;
-
-  if (fixed) {
-    if (state.avatar && state.avatar.size) {
-      const {
-        size
-      } = state.avatar;
-
-      if (size < 40) {
-        primaryTextSize = textStyles.body1;
-        optionalTextSize = textStyles.caption1;
-      } else if (size < 64) {
-        primaryTextSize = textStyles.subtitle2;
-        optionalTextSize = textStyles.body1;
-      } else if (size < 96) {
-        primaryTextSize = textStyles.subtitle1;
-        optionalTextSize = textStyles.caption1;
-      } else {
-        if (numTextLines > 1) {
-          primaryTextSize = textStyles.title3;
-        } else {
-          primaryTextSize = textStyles.title2;
-        }
-
-        optionalTextSize = textStyles.body1;
-      }
-    } else if (presenceOnly && state.presence) {
-      const {
-        size
-      } = state.presence;
-
-      if (size === 'extra-small' || size === 'tiny') {
-        if (numTextLines > 1) {
-          primaryTextSize = textStyles.body1;
-        } else {
-          primaryTextSize = textStyles.caption1;
-        }
-
-        optionalTextSize = textStyles.caption1;
-      } else {
-        primaryTextSize = textStyles.body1;
-        optionalTextSize = textStyles.caption1;
+  let alignToPrimaryClassName;
+
+  if (presenceOnly) {
+    if (size === 'extra-small') {
+      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
+    } else if (size === 'extra-large' || size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    } else {
+      primaryTextSize = textStyles.body1;
+    }
+
+    if (alignToPrimary) {
+      if (textPosition === 'before') {
+        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
+      } else if (textPosition === 'after') {
+        alignToPrimaryClassName = textStyles.afterAlignToPrimary;
       }
     }
   } else {
-    if (numTextLines > 1) {
-      primaryTextSize = textStyles.body1;
+    if (size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    } else if (size === 'extra-large') {
+      primaryTextSize = textStyles.subtitle2;
     } else {
-      primaryTextSize = textStyles.caption1;
+      primaryTextSize = textStyles.body1;
     }
-
-    optionalTextSize = textStyles.caption1;
   }
 
   return {
-    primaryTextClassName: react_1.mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize),
-    optionalTextClassName: react_1.mergeClasses(textStyles.base, textStyles.optionalText, optionalTextSize)
+    primaryTextClassName: react_1.mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
+    optionalTextClassName: react_1.mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)
   };
 };
 //# sourceMappingURL=usePersonaStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'inline-grid',\n    gridAutoColumns: 'max-content',\n    gridAutoRows: 'max-content',\n  },\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    columnGap: '8px',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    columnGap: '8px',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n  coin: {\n    gridRowStart: 'span 5',\n  },\n\n  fixed: {\n    alignSelf: 'start',\n  },\n  scaled: {\n    alignSelf: 'center',\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 { fixed, textPosition } = state;\n  const styles = useStyles();\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state);\n\n  state.root.className = mergeClasses(personaClassNames.root, styles.root, styles[textPosition], state.root.className);\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      styles.coin,\n      fixed ? styles.fixed : styles.scaled,\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      styles.coin,\n      fixed ? styles.fixed : styles.scaled,\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  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n  subtitle1: typographyStyles.subtitle1,\n  title2: typographyStyles.title2,\n  title3: typographyStyles.title3,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { fixed, numTextLines, presenceOnly } = state;\n  const textStyles = useTextStyles();\n  let primaryTextSize;\n  let optionalTextSize;\n\n  if (fixed) {\n    if (state.avatar && state.avatar.size) {\n      const { size } = state.avatar;\n\n      if (size < 40) {\n        primaryTextSize = textStyles.body1;\n        optionalTextSize = textStyles.caption1;\n      } else if (size < 64) {\n        primaryTextSize = textStyles.subtitle2;\n        optionalTextSize = textStyles.body1;\n      } else if (size < 96) {\n        primaryTextSize = textStyles.subtitle1;\n        optionalTextSize = textStyles.caption1;\n      } else {\n        if (numTextLines > 1) {\n          primaryTextSize = textStyles.title3;\n        } else {\n          primaryTextSize = textStyles.title2;\n        }\n        optionalTextSize = textStyles.body1;\n      }\n    } else if (presenceOnly && state.presence) {\n      const { size } = state.presence;\n\n      if (size === 'extra-small' || size === 'tiny') {\n        if (numTextLines > 1) {\n          primaryTextSize = textStyles.body1;\n        } else {\n          primaryTextSize = textStyles.caption1;\n        }\n        optionalTextSize = textStyles.caption1;\n      } else {\n        primaryTextSize = textStyles.body1;\n        optionalTextSize = textStyles.caption1;\n      }\n    }\n  } else {\n    if (numTextLines > 1) {\n      primaryTextSize = textStyles.body1;\n    } else {\n      primaryTextSize = textStyles.caption1;\n    }\n    optionalTextSize = textStyles.caption1;\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize),\n    optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, optionalTextSize),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n  root: 'fui-Persona',\n  avatar: 'fui-Persona__avatar',\n  presence: 'fui-Persona__presence',\n  primaryText: 'fui-Persona__primaryText',\n  secondaryText: 'fui-Persona__secondaryText',\n  tertiaryText: 'fui-Persona__tertiaryText',\n  quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoRows: 'max-content',\n  },\n\n  after: {\n    gridAutoFlow: 'column',\n    justifyItems: 'start',\n    gridTemplateColumns: 'max-content [middle] auto',\n  },\n  before: {\n    gridAutoFlow: 'column',\n    justifyItems: 'end',\n    gridTemplateColumns: 'auto [middle] max-content',\n  },\n  below: {\n    justifyItems: 'center',\n  },\n  coin: {\n    gridRowStart: 'span 5',\n  },\n\n  start: {\n    alignSelf: 'start',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n\n  afterAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnEnd: 'middle',\n  },\n  beforeAlignToPrimary: {\n    alignSelf: 'center',\n    gridRowStart: 'unset',\n    gridColumnStart: 'middle',\n  },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n  'extra-small': {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  medium: {\n    [avatarSpacing]: tokens.spacingHorizontalS,\n  },\n  large: {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  'extra-large': {\n    [avatarSpacing]: tokens.spacingHorizontalMNudge,\n  },\n  huge: {\n    [avatarSpacing]: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginRight: `var(${avatarSpacing})`,\n  },\n  below: {\n    marginBottom: `var(${avatarSpacing})`,\n  },\n  before: {\n    marginLeft: `var(${avatarSpacing})`,\n  },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n  small: {\n    [avatarSpacing]: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n  const { presenceOnly, size, textAlignment, textPosition } = state;\n\n  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n  const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n  const styles = useStyles();\n  const avatarSpacingStyles = useAvatarSpacingStyles();\n  const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n  state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(\n      personaClassNames.avatar,\n      styles.coin,\n      styles[textAlignment],\n      avatarSpacingStyles[size],\n      avatarSpacingStyles[textPosition],\n      state.avatar.className,\n    );\n  }\n\n  if (state.presence) {\n    state.presence.className = mergeClasses(\n      personaClassNames.presence,\n      styles.coin,\n      styles[textAlignment],\n      presenceSpacingStyles[size],\n      presenceSpacingStyles[textPosition],\n      textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n      textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n      state.presence.className,\n    );\n  }\n\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      personaClassNames.primaryText,\n      primaryTextClassName,\n      state.primaryText.className,\n    );\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      personaClassNames.secondaryText,\n      optionalTextClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      personaClassNames.tertiaryText,\n      optionalTextClassName,\n      state.tertiaryText.className,\n    );\n  }\n\n  if (state.quaternaryText) {\n    state.quaternaryText.className = mergeClasses(\n      personaClassNames.quaternaryText,\n      optionalTextClassName,\n      state.quaternaryText.className,\n    );\n  }\n\n  return state;\n};\n\nconst useTextStyles = makeStyles({\n  base: {\n    display: 'block',\n  },\n  primaryText: {\n    color: tokens.colorNeutralForeground1,\n  },\n  optionalText: {\n    color: tokens.colorNeutralForeground2,\n  },\n\n  beforeAlignToPrimary: {\n    gridColumnEnd: 'middle',\n  },\n  afterAlignToPrimary: {\n    gridColumnStart: 'middle',\n  },\n\n  body1: typographyStyles.body1,\n  caption1: typographyStyles.caption1,\n  subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n  state: PersonaState,\n  alignToPrimary: boolean,\n): {\n  primaryTextClassName: string;\n  optionalTextClassName: string;\n} => {\n  const { presenceOnly, size, textPosition } = state;\n  const textStyles = useTextStyles();\n\n  let primaryTextSize;\n  let alignToPrimaryClassName;\n\n  if (presenceOnly) {\n    if (size === 'extra-small') {\n      primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n    } else if (size === 'extra-large' || size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n\n    if (alignToPrimary) {\n      if (textPosition === 'before') {\n        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n      } else if (textPosition === 'after') {\n        alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n      }\n    }\n  } else {\n    if (size === 'huge') {\n      primaryTextSize = textStyles.subtitle2;\n    } else if (size === 'extra-large') {\n      primaryTextSize = textStyles.subtitle2;\n    } else {\n      primaryTextSize = textStyles.body1;\n    }\n  }\n\n  return {\n    primaryTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.primaryText,\n      primaryTextSize,\n      alignToPrimaryClassName,\n    ),\n    optionalTextClassName: mergeClasses(\n      textStyles.base,\n      textStyles.optionalText,\n      !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n      alignToPrimaryClassName,\n    ),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-persona/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState } from './Persona';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-persona",
-  "version": "9.1.0-beta.3",
+  "version": "9.1.0-beta.5",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,11 +19,10 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-persona/src && yarn docs",
     "type-check": "tsc -b tsconfig.json",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -32,10 +31,10 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.2.6",
-    "@fluentui/react-badge": "^9.0.12",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-avatar": "^9.2.8",
+    "@fluentui/react-badge": "^9.0.14",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },

package/MIGRATION.md

@@ -1,44 +0,0 @@
-# Badge Migration
-
-## Migration from v8
-
-v8 offers a component equivalent to v9's `Persona`. However, the API is slightly different. The main difference is that v9's `Persona` does not handle the functionality of the `presence` and `avatar`. Instead, the `presence` and `avatar` are separate components that can be used in conjunction with `Persona`.
-
-Here's how the API of v8's `Persona` compares to the one from v9's `Persona` component:
-
-- `className` => `className`
-- `coinProps` => Use `avatar`'s or `presence`'s slot props
-- `componentRef` => NOT SUPPORTED - use `ref` instead
-- `hidePersonaDetails` => Use the `Avatar` component for this case
-- ```
-
-  ```
-- `imageShouldFadeIn` => NOT SUPPORTED
-- `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}`
-- `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}`
-- `presenceTitle` => NOT SUPPORTED
-- `showOverflowTooltip` => NOT SUPPORTED
-- `showUnknownPersonaCoin` => NOT SUPPORTED
-- `styles` => Use style customization through `className` instead
-
-## Property Mapping
-
-| v8 `Persona`             | v9 `Persona`                           |
-| ------------------------ | -------------------------------------- |
-| `coinProps`              | `avatar` or `badge` slot props         |
-| `coinSize`               | `size` in the `badge` or `avatar` slot |
-| `className`              | `className`                            |
-| `componentRef`           | `ref`                                  |
-| `hidePersonaDetails`     | -                                      |
-| `imageShouldFadeIn`      | -                                      |
-| `isOutOfOffice`          | `status` in `presence` slot props      |
-| `optionalText`           | `quaternaryText`                       |
-| `presence`               | `presence`                             |
-| `presenceTitle`          | -                                      |
-| `primaryText`            | `primaryText`                          |
-| `secondaryText`          | `secondaryText`                        |
-| `showOverflowTooltip`    | -                                      |
-| `showUnknownPersonaCoin` | -                                      |
-| `styles`                 | `className`                            |
-| `tertiaryText`           | `tertiaryText`                         |
-| `text`                   | `name`                                 |

package/Spec.md

@@ -1,213 +0,0 @@
-# @fluentui/react-persona Spec
-
-Convergence epic issue: #24213
-
-## Background
-
-A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge. This composite component is not a card, therefore it will not provide a visual board or a popup when the user hovers the Avatar.
-
-Persona is used in PeoplePicker, Team's left rail and menus, chiclets, and Card.
-
-## Prior Art
-
-- OpenUI research: [Avatar/Persona](https://open-ui.org/components/avatar.research)
-- v7/v8: [link](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona)
-  - > Note: v8's Persona is a combination of v9's Persona and Avatar (v8's Persona has a sub-component PersonaCoin that would count as Avatar, but is not exposed.). In v9 we've taken the approach of having a single component Avatar and another component Persona.
-- v0: Does not have equivalent component.
-
-## Anatomy
-
-![Anatomy](./etc/images/anatomy.png)
-
-### Avatar, PresenceBadge, and Avatar + PresenceBadge
-
-v8's Persona has a sub-component `PersonaCoin`, the equivalent in v9 is an Avatar. Currently Avatar is able to display a PresenceBadge, but this behavior will be deprecated in favor of Persona having this behavior.
-
-Persona has a slot for an `Avatar` and `PresenceBadge`, giving the user the ability to display an Avatar, a PresenceBadge, or Combine them into an Avatar with presence.
-
-## Sample Code
-
-![Avatar](./etc/images/avatar.png)
-
-Persona with Avatar:
-
-```jsx
-<Persona name="Kevin Sturgis" secondaryText="Software Engineer" />
-```
-
-![PresenceBadge](./etc/images/badge.png)
-
-Persona with PresenceBadge:
-
-```jsx
-<Persona presenceOnly name="Kevin Sturgis" presence={{ status: 'offline', outOfOffice: true }} />
-```
-
-![Avatar and PresenceBadge](./etc/images/avatar_badge.png)
-
-Persona with Avatar + PresenceBadge:
-
-```jsx
-<Persona
-  name="Kevin Sturgis"
-  secondaryText="Software Engineer"
-  tertiaryText="Offline"
-  presence={{ status: 'offline', outOfOffice: true }}
-/>
-```
-
-## Variants
-
-> I will refer to the avatar and presence as content.
-
-There are three alignment variants:
-
-- after: Content on the left and text on the right.
-- below: Content on top and text on the bottom.
-- before: Content on the right and text on the left.
-
-There are 3 content variants:
-
-- Avatar
-- PresenceBadge
-- Avatar + PresenceBadge
-
-There are 2 sizing variants:
-
-- scaled: When there is no specified size in the props of either `avatar` or `presence`, the content is resized based on the number of text lines used.
-- fixed: When there is a specified size of either `avatar` or `presence`, the text lines are styled based on the size of the content.
-
-## API
-
-**Slots**
-
-- `root`: The root slot for Persona.
-- `avatar`: The Avatar to display and Persona's primary slot.
-- `presence`: The PresenceBadge to display.
-- `primaryText`: First line of text in Persona. By default its content will be the content of the `name` prop. It is highly encouraged to only use the `name` prop and only specify the content of `primaryText` when it is not a name.
-- `secondaryText`: Second line of text in Persona.
-- `tertiaryText`: Third line of text in Persona.
-- `quaternaryText`: Fourth line of text in Persona.
-
-**Types**
-
-```ts
-export type PersonaSlots = {
-  root: NonNullable<Slot<'div'>>;
-
-  /**
-   * Avatar to display.
-   */
-  avatar?: Slot<typeof Avatar>;
-
-  /**
-   * PresenceBadge to display.
-   */
-  presence?: Slot<typeof PresenceBadge>;
-
-  /**
-   * The first line of text in the Persona, larger than the rest of the lines.
-   *
-   * This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
-   * from the `name` prop.
-   */
-  primaryText?: Slot<'span'>;
-
-  /**
-   * The second line of text in the Persona.
-   */
-  secondaryText?: Slot<'span'>;
-
-  /**
-   * The third line of text in the Persona.
-   */
-  tertiaryText?: Slot<'span'>;
-
-  /**
-   * The fourth line of text in the Persona.
-   */
-  quaternaryText?: Slot<'span'>;
-};
-
-/**
- * Persona Props
- */
-export type PersonaProps = Omit<ComponentProps<PersonaSlots>, 'badge'> &
-  Pick<AvatarProps, 'name'> & {
-    /**
-     * Whether to display only the presence.
-     *
-     * @default false
-     */
-    presenceOnly?: boolean;
-
-    /**
-     * Position the text will be rendered in.
-     *
-     * @default after
-     */
-    textPosition?: 'before' | 'after' | 'below';
-  };
-```
-
-## Structure
-
-To avoid the [issue](https://github.com/microsoft/fluentui/issues/23386) v8 has, a css grid will be used instead of a flexbox that requires a general wrapper and a text container wrapper.
-
-- _**Internal**_
-
-```jsx
-const coin = (
-  <>
-    {!presenceOnly && slots.avatar && <slots.avatar {...slotProps.avatar} />}
-    {presenceOnly && slots.presence && <slots.presence {...slotProps.presence} />}
-  </>
-);
-
-return (
-  <slots.root {...slotProps.root}>
-    {(textPosition === 'after' || textPosition === 'below') && coin}
-    {slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}
-    {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
-    {slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}
-    {slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}
-    {textPosition === 'before' && coin}
-  </slots.root>
-);
-```
-
-- _**DOM**_
-
-```html
-<div class="fui-Persona">
-  <div {/* Avatar, PresenceBadge, or Avatar with PresenceBadge */} />
-  <span class="fui-Persona__primaryText">{/* name */}</span>
-  <span class="fui-Persona__secondaryText">Secondary Text</span>
-  <span class="fui-Persona__tertiaryText">Tertiary Text</span>
-  <span class="fui-Persona__quaternaryText">Quaternary Text</span>
-</div>
-```
-
-## Migration
-
-See [MIGRATION.md](./MIGRATION.md) for details.
-
-## Behaviors
-
-_Explain how the component will behave in use, including:_
-
-- _Component States_
-  - There are no states for this component, it's a visual representation.
-- _Interaction_
-  - _Keyboard_
-    - Doesn't receive focus.
-  - _Cursor_
-    - Doesn't interact with cursor.
-  - _Touch_
-    - Doesn't interact with touch.
-  - _Screen readers_
-    - Contents will be read based on dom order.
-
-## Accessibility
-
-- There's no need for `aria-*` or/and`role`. Avatar and Badge already accessible and the text labels won't need anything as well.