basic rendering

.vscode/launch.json

@@ -33,6 +33,13 @@
       "console": "integratedTerminal",
       "sourceMaps": true,
       "outFiles": []
+    },
+    {
+      "name": "Debug Fabric Tester",
+      "type": "node",
+      "request": "attach",
+      "protocol": "inspector",
+      "port": 9229
     }
   ]
 }

experiments/react-native-uifabric/src/components/Persona/Persona.helpers.ts

@@ -7,30 +7,66 @@ export type FontAttributes = {
   fontWeight?: TextStyle['fontWeight'];
 };
 
+const textFontCache: { [key in PersonaSize]: FontAttributes } = {
+  size8: { fontSize: 14, fontWeight: '500' },
+  size24: { fontSize: 14, fontWeight: '500' },
+  size32: { fontSize: 14, fontWeight: '500' },
+  size40: { fontSize: 14, fontWeight: '500' },
+  size48: { fontSize: 14, fontWeight: '500' },
+  size56: { fontSize: 14, fontWeight: '500' },
+  size72: { fontSize: 14, fontWeight: '500' },
+  size100: { fontSize: 14, fontWeight: '500' },
+  size120: { fontSize: 14, fontWeight: '500' }
+};
+
+const secondaryFontCache: { [key in PersonaSize]: FontAttributes } = {
+  size8: { fontSize: 14, fontWeight: '500' },
+  size24: { fontSize: 14, fontWeight: '500' },
+  size32: { fontSize: 14, fontWeight: '500' },
+  size40: { fontSize: 14, fontWeight: '500' },
+  size48: { fontSize: 14, fontWeight: '500' },
+  size56: { fontSize: 14, fontWeight: '500' },
+  size72: { fontSize: 14, fontWeight: '500' },
+  size100: { fontSize: 14, fontWeight: '500' },
+  size120: { fontSize: 14, fontWeight: '500' }
+};
+
+const tertiaryFontCache: { [key in PersonaSize]: FontAttributes } = {
+  size8: { fontSize: 14, fontWeight: '500' },
+  size24: { fontSize: 14, fontWeight: '500' },
+  size32: { fontSize: 14, fontWeight: '500' },
+  size40: { fontSize: 14, fontWeight: '500' },
+  size48: { fontSize: 14, fontWeight: '500' },
+  size56: { fontSize: 14, fontWeight: '500' },
+  size72: { fontSize: 14, fontWeight: '500' },
+  size100: { fontSize: 14, fontWeight: '500' },
+  size120: { fontSize: 14, fontWeight: '500' }
+};
+
+const optionalFontCache: { [key in PersonaSize]: FontAttributes } = {
+  size8: { fontSize: 14, fontWeight: '500' },
+  size24: { fontSize: 14, fontWeight: '500' },
+  size32: { fontSize: 14, fontWeight: '500' },
+  size40: { fontSize: 14, fontWeight: '500' },
+  size48: { fontSize: 14, fontWeight: '500' },
+  size56: { fontSize: 14, fontWeight: '500' },
+  size72: { fontSize: 14, fontWeight: '500' },
+  size100: { fontSize: 14, fontWeight: '500' },
+  size120: { fontSize: 14, fontWeight: '500' }
+};
+
 export function getTextFont(size: PersonaSize): FontAttributes {
-  return {
-    fontSize: 14,
-    fontWeight: '500'
-  };
+  return textFontCache[size];
 }
 
 export function getSecondaryFont(size: PersonaSize): FontAttributes {
-  return {
-    fontSize: 12,
-    fontWeight: '400'
-  };
+  return secondaryFontCache[size];
 }
 
 export function getTertiaryFont(size: PersonaSize): FontAttributes {
-  return {
-    fontSize: 11,
-    fontWeight: 'normal'
-  };
+  return tertiaryFontCache[size];
 }
 
 export function getOptionalFont(size: PersonaSize): FontAttributes {
-  return {
-    fontSize: 10,
-    fontWeight: 'normal'
-  };
+  return optionalFontCache[size];
 }

experiments/react-native-uifabric/src/components/Persona/Persona.tokens.coin.ts

@@ -0,0 +1,27 @@
+import { ViewProps } from 'react-native';
+import { styleFunction } from '@uifabricshared/foundation-tokens';
+import { ITheme } from '@uifabricshared/theming-ramp';
+import { buildRootStyles as buildPersonaCoinRootStyle } from '../PersonaCoin/PersonaCoin.tokens.root';
+import { IPersonaTokens } from './Persona.types';
+import { IPersonaCoinTokens } from '../PersonaCoin/PersonaCoin.types';
+
+const _coinStyleKeys: (keyof IPersonaTokens)[] = [
+  'coinSize',
+  'size',
+  'horizontalIconAlignment',
+  'verticalIconAlignment',
+  'coinBackgroundColor'
+];
+
+function _buildCoinStyle(tokenProps: IPersonaTokens, theme: ITheme): ViewProps {
+  const { coinBackgroundColor, ...rest } = tokenProps;
+
+  const personaCoinTokens: IPersonaCoinTokens = {
+    ...rest,
+    backgroundColor: coinBackgroundColor
+  };
+
+  return buildPersonaCoinRootStyle(personaCoinTokens, theme);
+}
+
+export const buildCoinStyle = styleFunction<ViewProps, IPersonaTokens, ITheme>(_buildCoinStyle, _coinStyleKeys);

experiments/react-native-uifabric/src/components/Persona/Persona.tokens.root.ts

@@ -3,7 +3,9 @@ import { styleFunction } from '@uifabricshared/foundation-tokens';
 import { IPersonaTokens } from './Persona.types';
 import { ITheme } from '@uifabricshared/theming-ramp';
 
-function _buildRootStyles(tokenProps: IPersonaTokens): ViewProps {
+const _rootKeyProps: (keyof IPersonaTokens)[] = ['coinSize', 'size'];
+
+function _buildRootStyle(tokenProps: IPersonaTokens): ViewProps {
   const rootStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center'
@@ -18,4 +20,4 @@ function _buildRootStyles(tokenProps: IPersonaTokens): ViewProps {
   return { style: rootStyle };
 }
 
-export const buildPersonaRootStyles = styleFunction<ViewProps, IPersonaTokens, ITheme>(_buildRootStyles, []);
+export const buildRootStyle = styleFunction<ViewProps, IPersonaTokens, ITheme>(_buildRootStyle, _rootKeyProps);

experiments/react-native-uifabric/src/components/Persona/Persona.tokens.texts.ts

@@ -0,0 +1,66 @@
+import { TextStyle, TextProps } from 'react-native';
+import { styleFunction } from '@uifabricshared/foundation-tokens';
+import { IPersonaTokens } from './Persona.types';
+import { ITheme } from '@uifabricshared/theming-ramp';
+import { ITextTokens } from '../../tokens/TextTokens';
+import { PersonaSize } from '..';
+import { getTextFont, FontAttributes, getSecondaryFont, getTertiaryFont, getOptionalFont } from './Persona.helpers';
+
+function buildTextStyleHelper(
+  verticalGap: number | undefined,
+  size: PersonaSize | undefined,
+  getFontAttributes: (size: PersonaSize) => FontAttributes,
+  fontTokens: ITextTokens | undefined,
+  theme: ITheme
+) {
+  const textStyle: TextStyle = {};
+  if (verticalGap && verticalGap > 0) {
+    textStyle.marginBottom = verticalGap;
+  }
+  if (fontTokens) {
+    const { fontFamily, fontSize, fontWeight } = fontTokens;
+    textStyle.fontFamily = fontFamily && theme.typography.families[fontFamily];
+    textStyle.fontSize = fontSize && theme.typography.sizes[fontSize];
+    textStyle.fontWeight = fontWeight && theme.typography.weights[fontWeight];
+  } else {
+    const { fontFamily, fontSize, fontWeight } = getFontAttributes(size || 'size40');
+    textStyle.fontFamily = fontFamily;
+    textStyle.fontSize = fontSize;
+    textStyle.fontWeight = fontWeight;
+  }
+
+  return textStyle;
+}
+
+function _buildTextStyle(tokenProps: IPersonaTokens, theme: ITheme): TextProps {
+  const { verticalGap, textFont, size } = tokenProps;
+  return { style: buildTextStyleHelper(verticalGap, size, getTextFont, textFont, theme) };
+}
+
+function _buildSecondaryStyle(tokenProps: IPersonaTokens, theme: ITheme): TextProps {
+  const { verticalGap, secondaryFont, size } = tokenProps;
+  return { style: buildTextStyleHelper(verticalGap, size, getSecondaryFont, secondaryFont, theme) };
+}
+
+function _buildTertiaryStyle(tokenProps: IPersonaTokens, theme: ITheme): TextProps {
+  const { verticalGap, tertiaryFont, size } = tokenProps;
+  return { style: buildTextStyleHelper(verticalGap, size, getTertiaryFont, tertiaryFont, theme) };
+}
+
+function _buildOptionalStyle(tokenProps: IPersonaTokens, theme: ITheme): TextProps {
+  const { optionalFont, size } = tokenProps;
+  return { style: buildTextStyleHelper(undefined, size, getOptionalFont, optionalFont, theme) };
+}
+
+export const buildTextStyle = styleFunction<TextProps, IPersonaTokens, ITheme>(_buildTextStyle, ['size', 'textFont', 'verticalGap']);
+export const buildSecondaryStyle = styleFunction<TextProps, IPersonaTokens, ITheme>(_buildSecondaryStyle, [
+  'size',
+  'secondaryFont',
+  'verticalGap'
+]);
+export const buildTertiaryStyle = styleFunction<TextProps, IPersonaTokens, ITheme>(_buildTertiaryStyle, [
+  'size',
+  'tertiaryFont',
+  'verticalGap'
+]);
+export const buildOptionalStyle = styleFunction<TextProps, IPersonaTokens, ITheme>(_buildOptionalStyle, ['size', 'optionalFont']);

experiments/react-native-uifabric/src/components/Persona/Persona.tsx

@@ -2,39 +2,34 @@
 import { compose, IUseComposeStyling } from '@uifabricshared/foundation-compose';
 import { IPersonaType, personaName, IPersonaSlotProps, IPersonaProps, IPersonaRenderData } from './Persona.types';
 import { settings } from './Persona.settings';
-import { View, Text, TextStyle } from 'react-native';
+import { View, Text } from 'react-native';
 import { filterViewProps } from '../../utilities/RenderHelpers';
 import { PersonaCoin } from '../PersonaCoin/PersonaCoin';
 import { ISlots, withSlots, IRenderData } from '@uifabricshared/foundation-composable';
 import { mergeSettings } from '@uifabricshared/foundation-settings';
-import { buildPersonaRootStyles } from './Persona.tokens';
-import { getTextFont, getSecondaryFont, getTertiaryFont, getOptionalFont } from './Persona.helpers';
+import { buildRootStyle } from './Persona.tokens.root';
+import { buildTextStyle, buildTertiaryStyle, buildOptionalStyle, buildSecondaryStyle } from './Persona.tokens.texts';
+import { buildCoinStyle } from './Persona.tokens.coin';
 
 function usePrepareForProps(props: IPersonaProps, useStyling: IUseComposeStyling<IPersonaType>): IRenderData<IPersonaSlotProps, {}> {
-  const { text, secondaryText, tertiaryText, optionalText, size, ...rootProps } = props;
+  const {
+    text,
+    secondaryText,
+    tertiaryText,
+    optionalText,
+    size,
+    coinColor,
+    imageUrl,
+    imageDescription,
+    initials,
+    presence,
+    isOutOfOffice,
+    ...rootProps
+  } = props;
 
-  const styledProps = useStyling(props);
-
-  const textStyle: TextStyle = size !== undefined ? { ...getTextFont(size) } : {};
-  const secondaryStyle: TextStyle = size !== undefined ? { ...getSecondaryFont(size) } : {};
-  const tertiaryStyle: TextStyle = size !== undefined ? { ...getTertiaryFont(size) } : {};
-  const optionalStyle: TextStyle = size !== undefined ? { ...getOptionalFont(size) } : {};
-
-  const slotProps = mergeSettings<IPersonaType['slotProps']>(styledProps, {
+  const slotProps = mergeSettings<IPersonaType['slotProps']>(useStyling(props), {
     root: { ...rootProps },
-    coin: { ...rootProps, size },
-    text: {
-      style: textStyle
-    },
-    secondary: {
-      style: secondaryStyle
-    },
-    tertiary: {
-      style: tertiaryStyle
-    },
-    optional: {
-      style: optionalStyle
-    }
+    coin: { size, coinColor, imageUrl, imageDescription, initials, presence, isOutOfOffice }
   });
 
   return {
@@ -52,7 +47,6 @@ const render = (Slots: ISlots<IPersonaSlotProps>, renderData: IPersonaRenderData
   if (!renderData.state) {
     return null;
   }
-
   const { text, secondaryText, tertiaryText, optionalText } = renderData.state;
 
   return (
@@ -86,11 +80,12 @@ export const Persona = compose<IPersonaType>({
     optional: Text
   },
   styles: {
-    root: [buildPersonaRootStyles],
-    text: [{ source: 'verticalGap', target: 'marginBottom' }],
-    secondary: [{ source: 'verticalGap', target: 'marginBottom' }],
-    tertiary: [{ source: 'verticalGap', target: 'marginBottom' }],
-    optional: [],
+    root: [buildRootStyle],
+    coin: [buildCoinStyle],
+    text: [buildTextStyle],
+    secondary: [buildSecondaryStyle],
+    tertiary: [buildTertiaryStyle],
+    optional: [buildOptionalStyle],
     stack: [{ source: 'horizontalGap', target: 'marginLeft' }]
   }
 });

experiments/react-native-uifabric/src/components/Persona/Persona.types.ts

@@ -16,7 +16,7 @@ export interface IPersonaProps extends IPersonaCoinProps, IPersonaState {}
 
 export interface IPersonaSlotProps {
   root: ViewProps;
-  coin: ViewProps;
+  coin: IPersonaCoinProps;
   stack: ViewProps;
   text: TextProps;
   secondary: TextProps;
@@ -24,10 +24,12 @@ export interface IPersonaSlotProps {
   optional: TextProps;
 }
 
-export interface IPersonaTokens extends IPersonaCoinTokens {
+export interface IPersonaTokens extends Omit<IPersonaCoinTokens, 'backgroundColor'> {
   verticalGap?: number;
   horizontalGap?: number;
 
+  coinBackgroundColor?: string;
+
   textFont?: ITextTokens;
   secondaryFont?: ITextTokens;
   tertiaryFont?: ITextTokens;
@@ -38,7 +40,7 @@ export interface IPersonaType {
   props: IPersonaProps;
   slotProps: IPersonaSlotProps;
   tokens: IPersonaTokens;
-  state: {};
+  state: IPersonaState;
 }
 
 export type IPersonaRenderData = IRenderData<IPersonaSlotProps, IPersonaState>;