Persona: mergeStyles part 3, split sub-components

common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-17-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Split PersonaCoin and PersonaPresence files for more consistency.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jordancjanzen@gmail.com"
+}

common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-20-37.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Move sub-components to sub-folders",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jordanjanzen@jordanjanzen.com"
+}

packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx → packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx

@@ -7,10 +7,9 @@ import {
   getInitials,
   getNativeProps,
   getRTL,
-  styled,
-} from '../../Utilities';
-import { mergeStyles } from '../../Styling';
-import { PersonaPresence } from './PersonaPresence';
+} from '../../../Utilities';
+import { mergeStyles } from '../../../Styling';
+import { PersonaPresence } from '../PersonaPresence';
 import {
   Icon
 } from '../../Icon';
@@ -26,9 +25,8 @@ import {
   IPersonaPresenceProps,
   PersonaPresence as PersonaPresenceEnum,
   PersonaSize,
-} from './Persona.types';
-import { initialsColorPropToColorCode } from './PersonaInitialsColor';
-import { getStyles } from './PersonaCoin.styles';
+} from '../Persona.types';
+import { initialsColorPropToColorCode } from '../PersonaInitialsColor';
 
 const getClassNames = classNamesFunction<IPersonaCoinStyleProps, IPersonaCoinStyles>();
 
@@ -83,7 +81,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
       className,
       coinProps,
       coinSize,
-      getStyles: getStylesProp, // Use getStyles from props.
+      getStyles,
       imageUrl,
       onRenderCoin = this._onRenderCoin,
       onRenderInitials = this._onRenderInitials,
@@ -103,7 +101,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
     };
 
     // Use getStyles from props, or fall back to getStyles from styles file.
-    const classNames = getClassNames(getStylesProp, {
+    const classNames = getClassNames(getStyles, {
       theme: theme!,
       className: (coinProps && coinProps.className) ? coinProps.className : className,
       size,
@@ -162,7 +160,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
   private _onRenderCoin = (props: IPersonaCoinProps): JSX.Element | null => {
     const {
       coinSize,
-      getStyles: getStylesProp,
+      getStyles,
       imageUrl,
       imageAlt,
       imageShouldFadeIn,
@@ -172,7 +170,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
 
     const size = this.props.size as PersonaSize;
 
-    const classNames = getClassNames(getStylesProp, {
+    const classNames = getClassNames(getStyles, {
       theme: theme!,
       size
     });
@@ -219,11 +217,3 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
     this.props.onPhotoLoadingStateChange && this.props.onPhotoLoadingStateChange(loadState);
   }
 }
-
-/**
- * PersonaCoin is used to render an individual's avatar and presence.
- */
-export const PersonaCoin = styled<IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles>(
-  PersonaCoinBase,
-  getStyles
-);

packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts → packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts

@@ -2,16 +2,16 @@ import {
   IPersonaCoinStyleProps,
   IPersonaCoinStyles,
   PersonaSize,
-} from './Persona.types';
+} from '../Persona.types';
 import {
   HighContrastSelector,
   FontSizes,
   FontWeights,
-} from '../../Styling';
+} from '../../../Styling';
 import {
   personaSize,
   sizeBoolean,
-} from './PersonaConsts';
+} from '../PersonaConsts';
 
 export const getStyles = (
   props: IPersonaCoinStyleProps

packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.tsx

@@ -0,0 +1,16 @@
+import { styled } from '../../../Utilities';
+import {
+  IPersonaCoinProps,
+  IPersonaCoinStyleProps,
+  IPersonaCoinStyles
+} from '../Persona.types';
+import { PersonaCoinBase } from './PersonaCoin.base';
+import { getStyles } from './PersonaCoin.styles';
+
+/**
+ * PersonaCoin is used to render an individual's avatar and presence.
+ */
+export const PersonaCoin = styled<IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles>(
+  PersonaCoinBase,
+  getStyles
+);

packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/index.ts

@@ -0,0 +1,2 @@
+export * from './PersonaCoin';
+export * from './PersonaCoin.base';

packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx → packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx

@@ -3,19 +3,17 @@ import {
   BaseComponent,
   classNamesFunction,
   customizable,
-  styled,
-} from '../../Utilities';
-import { IStyleSet } from '../../Styling';
+} from '../../../Utilities';
+import { IStyleSet } from '../../../Styling';
 import { Icon } from '../../Icon';
 import {
   IPersonaPresenceProps,
   IPersonaPresenceStyleProps,
   IPersonaPresenceStyles,
   PersonaPresence as PersonaPresenceEnum,
   PersonaSize,
-} from './Persona.types';
-import { sizeBoolean } from './PersonaConsts';
-import { getStyles } from './PersonaPresence.styles';
+} from '../Persona.types';
+import { sizeBoolean } from '../PersonaConsts';
 
 const coinSizeFontScaleFactor = 6;
 const coinSizePresenceScaleFactor = 3;
@@ -37,7 +35,7 @@ export class PersonaPresenceBase extends BaseComponent<IPersonaPresenceProps, {}
   public render(): JSX.Element | null {
     const {
       coinSize,
-      getStyles: getStylesProp, // Use getStyles from props.
+      getStyles, // Use getStyles from props.
       presence,
       theme,
     } = this.props;
@@ -52,7 +50,7 @@ export class PersonaPresenceBase extends BaseComponent<IPersonaPresenceProps, {}
     const coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;
 
     // Use getStyles from props, or fall back to getStyles from styles file.
-    const classNames = getClassNames(getStylesProp, {
+    const classNames = getClassNames(getStyles, {
       theme: theme!,
       presence,
       size: this.props.size,
@@ -104,11 +102,3 @@ export class PersonaPresenceBase extends BaseComponent<IPersonaPresenceProps, {}
     }
   }
 }
-
-/**
- * PersonaPresence is used to render an individual's presence.
- */
-export const PersonaPresence = styled<IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles>(
-  PersonaPresenceBase,
-  getStyles
-);

packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts → packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts

@@ -3,16 +3,16 @@ import {
   IPersonaPresenceStyles,
   PersonaPresence,
   PersonaSize,
-} from './Persona.types';
+} from '../Persona.types';
 import {
   FontSizes,
   HighContrastSelector,
-} from '../../Styling';
+} from '../../../Styling';
 import {
   personaPresenceSize,
   presenceBoolean,
   sizeBoolean,
-} from './PersonaConsts';
+} from '../PersonaConsts';
 
 export const getStyles = (
   props: IPersonaPresenceStyleProps

packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.tsx

@@ -0,0 +1,16 @@
+import { styled } from '../../../Utilities';
+import {
+  IPersonaPresenceProps,
+  IPersonaPresenceStyleProps,
+  IPersonaPresenceStyles
+} from '../Persona.types';
+import { PersonaPresenceBase } from './PersonaPresence.base';
+import { getStyles } from './PersonaPresence.styles';
+
+/**
+ * PersonaPresence is used to render an individual's presence.
+ */
+export const PersonaPresence = styled<IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles>(
+  PersonaPresenceBase,
+  getStyles
+);

packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/index.ts

@@ -0,0 +1,2 @@
+export * from './PersonaPresence';
+export * from './PersonaPresence.base';