diff --git a/common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-17-43.json b/common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-17-43.json new file mode 100644 index 0000000000000..498610e85430a --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-20-37.json b/common/changes/office-ui-fabric-react/mergeStyles-persona-part3_2018-04-09-20-37.json new file mode 100644 index 0000000000000..15bbede12ab80 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx similarity index 89% rename from packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx rename to packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx index 5da9f432237f9..c466e9233e277 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/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(); @@ -83,7 +81,7 @@ export class PersonaCoinBase extends BaseComponent { const { coinSize, - getStyles: getStylesProp, + getStyles, imageUrl, imageAlt, imageShouldFadeIn, @@ -172,7 +170,7 @@ export class PersonaCoinBase extends BaseComponent( - PersonaCoinBase, - getStyles -); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts similarity index 98% rename from packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts rename to packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts index 3765b3b6e8ee2..4d702892baf9f 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/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 diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.tsx new file mode 100644 index 0000000000000..b044070731e6e --- /dev/null +++ b/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( + PersonaCoinBase, + getStyles +); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/index.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/index.ts new file mode 100644 index 0000000000000..ec87d258da62a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/index.ts @@ -0,0 +1,2 @@ +export * from './PersonaCoin'; +export * from './PersonaCoin.base'; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx similarity index 85% rename from packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx rename to packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx index 37a471843a46a..4118f8b14044a 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx @@ -3,9 +3,8 @@ import { BaseComponent, classNamesFunction, customizable, - styled, -} from '../../Utilities'; -import { IStyleSet } from '../../Styling'; +} from '../../../Utilities'; +import { IStyleSet } from '../../../Styling'; import { Icon } from '../../Icon'; import { IPersonaPresenceProps, @@ -13,9 +12,8 @@ import { 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( - PersonaPresenceBase, - getStyles -); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts similarity index 98% rename from packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts rename to packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.styles.ts index 28fd5f19caf78..1c042712ee459 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/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 diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.tsx new file mode 100644 index 0000000000000..b07850f595730 --- /dev/null +++ b/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( + PersonaPresenceBase, + getStyles +); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/index.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/index.ts new file mode 100644 index 0000000000000..2f2127ed728e1 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/index.ts @@ -0,0 +1,2 @@ +export * from './PersonaPresence'; +export * from './PersonaPresence.base'; \ No newline at end of file