From 28c97b54151e51aaa5377dea18c375b325a441df Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 20 Mar 2018 17:00:40 -0700 Subject: [PATCH 01/68] Add zIndex variables --- packages/styling/src/styles/index.ts | 1 + packages/styling/src/styles/zIndex.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/styling/src/styles/zIndex.ts diff --git a/packages/styling/src/styles/index.ts b/packages/styling/src/styles/index.ts index c734f9d094987..a56ebca88eb0e 100644 --- a/packages/styling/src/styles/index.ts +++ b/packages/styling/src/styles/index.ts @@ -14,3 +14,4 @@ export { } from './theme'; export * from './CommonStyles'; export { normalize } from './GeneralStyles'; +export * from './zIndex'; diff --git a/packages/styling/src/styles/zIndex.ts b/packages/styling/src/styles/zIndex.ts new file mode 100644 index 0000000000000..ec18c3382c107 --- /dev/null +++ b/packages/styling/src/styles/zIndex.ts @@ -0,0 +1,12 @@ +// Large ranges +export const zIndex0 = 0; +export const zIndex1 = 100; +export const zIndex2 = 200; +export const zIndex3 = 300; +export const zIndex4 = 400; +export const zIndex5 = 500; + +// Small ranges +export const zIndexBack = 0; +export const zIndexMiddle = 5; +export const zIndexFront = 10; \ No newline at end of file From 02363054afcb9ac643c5fd660298053efc896fc9 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 20 Mar 2018 17:20:30 -0700 Subject: [PATCH 02/68] Make zIndex a namespace --- packages/styling/src/styles/zIndex.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/styling/src/styles/zIndex.ts b/packages/styling/src/styles/zIndex.ts index ec18c3382c107..2b075c4a34f5d 100644 --- a/packages/styling/src/styles/zIndex.ts +++ b/packages/styling/src/styles/zIndex.ts @@ -1,12 +1,14 @@ -// Large ranges -export const zIndex0 = 0; -export const zIndex1 = 100; -export const zIndex2 = 200; -export const zIndex3 = 300; -export const zIndex4 = 400; -export const zIndex5 = 500; +export namespace zIndex { + // large ranges + export const z0 = 0; + export const z1 = 100; + export const z2 = 200; + export const z3 = 300; + export const z4 = 400; + export const z5 = 500; -// Small ranges -export const zIndexBack = 0; -export const zIndexMiddle = 5; -export const zIndexFront = 10; \ No newline at end of file + // small ranges + export const back = 0; + export const middle = 5; + export const front = 10; +} \ No newline at end of file From 50f5437ac70f0ce1ca1dbb480e56856e1ff99395 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 20 Mar 2018 17:20:38 -0700 Subject: [PATCH 03/68] Start converting styles --- .../src/components/Persona/Persona.styles.ts | 133 +++++++++++++++++- .../src/components/Persona/Persona.types.ts | 22 +++ 2 files changed, 152 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 61b84a0b2a2b5..0dd070acde285 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -1,16 +1,143 @@ import { IPersonaStyleProps, IPersonaStyles } from './Persona.types'; +import { + IStyle, + ITheme, + normalize, + FontSizes, + FontWeights, + zIndex, +} from '../../Styling'; +import { optionalText } from 'office-ui-fabric-react/lib/components/Persona/Persona.scss'; export const getStyles = ( props: IPersonaStyleProps ): IPersonaStyles => { + const { + className, + theme, + personaSize, + readOnly, + showSecondaryText, + darkText, + isSelectable, + extraLarge, + isAvailable, + isAway, + isBlocked, + isBusy, + isDoNotDisturb, + isOffline, + } = props; + + const { palette, semanticColors } = theme; + + // Skype presence colors + const colorPresenceAvailable = '#7FBA00'; + const colorPresenceAway = '#FCD116'; + const colorPresenceBusy = '#E81123'; + const colorPresenceDndBackground = '#E81123'; + const colorPresenceDndLine = '#FFFFFF'; + const colorPresenceOffline = '#93ABBD'; + const colorPresenceOutOfOffice = palette.magenta; + + // Other presence colors + const colorPresenceBlockedBackground = '#DEDEDE'; + const colorPresenceBlockedLine = '#C72D25'; + const colorPresenceBusyStripeLight = '#E57A79'; + const colorPresenceBusyStripeDark = '#D00E0D'; + const colorPresenceBusyAverage = '#D93B3B'; + + // Persona Sizes + const personaSize10 = '20px'; + const personaSize16 = '16px'; + const personaSize24 = '24px'; + const personaSize28 = '28px'; + const personaSize32 = '32px'; + const personaSize40 = '40px'; + const personaSize48 = '48px'; + const personaSize72 = '72px'; + const personaSize100 = '100px'; + + // Presence Sizes + const personaPresenceSize6 = '6px'; + const personaPresenceSize8 = '8px'; + const personaPresenceSize12 = '12px'; + const personaPresenceSize20 = '20px'; + const personaPresenceSize28 = '28px'; + const personaPresenceBorder = '2px'; + return ({ root: [ 'ms-Persona', + normalize, { - // Insert css properties + color: palette.neutralPrimary, + fontSize: FontSizes.medium, + fontWeight: FontWeights.regular, + position: 'relative', + height: personaSize48, + display: 'flex', + alignItems: 'center', + + selectors: { + '.contextualHost': { + display: 'none', + }, + + '&:hover': { + selectors: { + '$primaryText': { + color: palette.neutralDark, + } + } + } + } + }, + className + ], + + placeholder: [ + { + color: palette.white, + position: 'absolute', + right: '0', + left: '0', + fontSize: '47px', + top: '9px', + zIndex: zIndex.middle, } ], - // Insert className styles + presense: [ + {} + ], + + presenseIcon: [ + {} + ], + + details: [ + {} + ], + + primaryText: [ + {} + ], + + secondaryText: [ + {} + ], + + tertiaryText: [ + {} + ], + + optionalText: [ + {} + ], + + textContent: [ + {} + ] }); -}; \ No newline at end of file +}; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index eb0ee0d442acb..17e2bf1357428 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -247,8 +247,30 @@ export interface IPersonaStyleProps { * Custom class name. */ className?: string; + personaSize?: PersonaSize; + readOnly?: boolean; + showSecondaryText?: boolean; + darkText?: boolean; + isSelectable?: boolean; + extraLarge?: boolean; + isAvailable?: boolean; + isAway?: boolean; + isBlocked?: boolean; + isBusy?: boolean; + isDoNotDisturb?: boolean; + isOffline?: boolean; } export interface IPersonaStyles { root: IStyle; + placeholder?: IStyle; + presense?: IStyle; + presenseIcon?: IStyle; + details?: IStyle; + primaryText?: IStyle; + secondaryText?: IStyle; + tertiaryText?: IStyle; + optionalText?: IStyle; + textContent?: IStyle; + } From fb5a0f41a9b24cd3f740ebc3c9ac2c0689812b5f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 21 Mar 2018 14:47:25 -0700 Subject: [PATCH 04/68] Add noWrap general function --- packages/styling/src/styles/GeneralStyles.ts | 9 ++++++++- packages/styling/src/styles/index.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/styling/src/styles/GeneralStyles.ts b/packages/styling/src/styles/GeneralStyles.ts index 4b3232a912f94..826f1686f1533 100644 --- a/packages/styling/src/styles/GeneralStyles.ts +++ b/packages/styling/src/styles/GeneralStyles.ts @@ -7,4 +7,11 @@ export const normalize: IRawStyle = { margin: 0, padding: 0, boxSizing: 'border-box' -}; \ No newline at end of file +}; + +export const noWrap: IRawStyle = { + display: 'block', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +}; diff --git a/packages/styling/src/styles/index.ts b/packages/styling/src/styles/index.ts index a56ebca88eb0e..7e67038bdb64c 100644 --- a/packages/styling/src/styles/index.ts +++ b/packages/styling/src/styles/index.ts @@ -13,5 +13,5 @@ export { removeOnThemeChangeCallback } from './theme'; export * from './CommonStyles'; -export { normalize } from './GeneralStyles'; +export * from './GeneralStyles'; export * from './zIndex'; From 25b9a9882a7b569e76023e6633b45723e078f048 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 21 Mar 2018 16:53:46 -0700 Subject: [PATCH 05/68] Add contrast colors --- packages/styling/src/interfaces/IPalette.ts | 17 +++++++++++++++++ packages/styling/src/styles/DefaultPalette.ts | 4 ++++ 2 files changed, 21 insertions(+) diff --git a/packages/styling/src/interfaces/IPalette.ts b/packages/styling/src/interfaces/IPalette.ts index 95aa41a0a1b7f..4e4ac3dee6dc9 100644 --- a/packages/styling/src/interfaces/IPalette.ts +++ b/packages/styling/src/interfaces/IPalette.ts @@ -242,4 +242,21 @@ export interface IPalette { * Color code for greenLight. */ greenLight: string; + + /** + * Color code for contrast black disabled. + */ + contrastBlackDisabled: string; + /** + * Color code for contrast white disabled. + */ + contrastWhiteDisabled: string; + /** + * Color code for contrast black selected. + */ + contrastBlackSelected: string; + /** + * Color code for contrast white selected. + */ + contrastWhiteSelected: string; } diff --git a/packages/styling/src/styles/DefaultPalette.ts b/packages/styling/src/styles/DefaultPalette.ts index f0f277e8f6e78..772a0287820c9 100644 --- a/packages/styling/src/styles/DefaultPalette.ts +++ b/packages/styling/src/styles/DefaultPalette.ts @@ -50,4 +50,8 @@ export const DefaultPalette: IPalette = { greenDark: '#004b1c', green: '#107c10', greenLight: '#bad80a', + contrastBlackDisabled: '#00ff00', + contrastWhiteDisabled: '#600000', + contrastBlackSelected: '#1AEBFF', + contrastWhiteSelected: '#37006E', }; From aeed10f4922118596244bf8311096f648e4e09f2 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 21 Mar 2018 16:54:56 -0700 Subject: [PATCH 06/68] Add styles up to isAway modifier --- .../src/components/Persona/Persona.styles.ts | 456 +++++++++++++++++- .../src/components/Persona/Persona.types.ts | 29 +- 2 files changed, 453 insertions(+), 32 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 0dd070acde285..ae92ccda4fd0d 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -1,10 +1,12 @@ -import { IPersonaStyleProps, IPersonaStyles } from './Persona.types'; +import { IPersonaStyleProps, IPersonaStyles, PersonaSize } from './Persona.types'; import { + FontSizes, + FontWeights, + HighContrastSelector, IStyle, ITheme, normalize, - FontSizes, - FontWeights, + noWrap, zIndex, } from '../../Styling'; import { optionalText } from 'office-ui-fabric-react/lib/components/Persona/Persona.scss'; @@ -14,19 +16,19 @@ export const getStyles = ( ): IPersonaStyles => { const { className, - theme, - personaSize, - readOnly, - showSecondaryText, - darkText, - isSelectable, extraLarge, isAvailable, isAway, isBlocked, isBusy, + isDarkText, isDoNotDisturb, isOffline, + isReadOnly, + isSelectable, + showSecondaryText, + size, + theme, } = props; const { palette, semanticColors } = theme; @@ -47,6 +49,17 @@ export const getStyles = ( const colorPresenceBusyStripeDark = '#D00E0D'; const colorPresenceBusyAverage = '#D93B3B'; + // Persona size conditionals + const isSize10 = size === PersonaSize.size10; + const isSize16 = size === PersonaSize.size16; + const isSize24 = size === PersonaSize.size24; + const isSize28 = size === PersonaSize.size28; + const isSize32 = size === PersonaSize.size32; + const isSize40 = size === PersonaSize.size40; + const isSize48 = size === PersonaSize.size48; + const isSize72 = size === PersonaSize.size72; + const isSize100 = size === PersonaSize.size100; + // Persona Sizes const personaSize10 = '20px'; const personaSize16 = '16px'; @@ -66,6 +79,13 @@ export const getStyles = ( const personaPresenceSize28 = '28px'; const personaPresenceBorder = '2px'; + const sharedTextStyles: IStyle = { + color: palette.neutralSecondary, + fontWeight: FontWeights.regular, + fontSize: FontSizes.small, + whiteSpace: 'nowrap', + }; + return ({ root: [ 'ms-Persona', @@ -93,7 +113,351 @@ export const getStyles = ( } } }, - className + className, + isSize10 && isReadOnly && [ + { + padding: 0, + backgroundColor: 'transparent', + + selectors: { + '$primaryText:after': { + content: ';', + } + } + } + ], + isSize16 && [ + { + height: personaSize16, + minWidth: personaSize16, + + selectors: { + '$placeholder': { + fontSize: '18px', + top: '4px', + }, + + '$presence': { + height: personaPresenceSize6, + width: personaPresenceSize6, + borderWidth: '1.5px', + }, + + '$presenceIcon': { + display: 'none', + }, + + '$primaryText': { + fontSize: FontSizes.medium, + lineHeight: personaSize28, + }, + + '$secondaryText': { + display: 'none', + } + } + } + ], + + isSize24 && [ + { + height: personaSize24, + minWidth: personaSize24, + + selectors: { + '$placeholder': { + fontSize: '18px', + top: '4px', + }, + + '$presence': { + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + '&:after': { + display: 'none', + } + } + }, + + '$presenceIcon': { + display: 'none', + }, + + '$details': { + padding: '0 12px', + }, + + '$primaryText': { + fontSize: FontSizes.medium, + }, + + '$secondaryText': { + display: 'none', + } + } + }, + + showSecondaryText && { + height: '36px', + + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + height: '18px', + lineHeight: '16px', + overflowX: 'hidden', + } + } + } + ], + + isSize28 && [ + { + height: personaSize28, + minWidth: personaSize28, + + selectors: { + '$placeholder': { + fontSize: '18px', + top: '4px', + }, + + '$presence': { + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + '&:after': { + display: 'none', + } + } + }, + + '$presenceIcon': { + display: 'none', + }, + + '$details': { + padding: '0 12px', + }, + + '$primaryText': { + fontSize: FontSizes.medium, + }, + + '$secondaryText': { + display: 'none', + } + } + }, + + showSecondaryText && { + height: '32px', + + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + lineHeight: '16px', + height: '16px', + overflowX: 'hidden', + } + } + } + ], + + isSize32 && [ + { + height: personaSize32, + minWidth: personaSize32, + + selectors: { + '$placeholder': { + fontSize: '28px', + top: '6px', + }, + + '$presence': { + height: personaPresenceSize8, + width: personaPresenceSize8, + }, + + '$presenceIcon': { + display: 'none', + }, + + '$primaryText': { + fontSize: FontSizes.medium, + }, + + '$secondaryText': { + display: 'none', + } + } + }, + + showSecondaryText && { + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + height: '16px', + lineHeight: '16px', + overflowX: 'hidden', + } + } + } + ], + + isSize40 && [ + { + height: personaSize40, + minWidth: personaSize40, + + selectors: { + '$placeholder': { + fontSize: '38px', + top: '5px', + }, + + '$primaryText': { + fontSize: FontSizes.medium, + } + } + } + ], + + isSize48 && [], + + isSize72 && [ + { + height: personaSize72, + maxWidth: personaSize72, + + selectors: { + '$placeholder': { + fontSize: '67px', + top: '10px', + }, + + '$presence': { + height: personaPresenceSize20, + width: personaPresenceSize20, + }, + + '$presenceIcon': { + lineHeight: personaPresenceSize20, + fontSize: FontSizes.small, + }, + + '$primaryText': { + fontSize: FontSizes.xLarge, + }, + + '$secondaryText': { + fontSize: FontSizes.medium, + }, + + '$tertiaryText': { + display: 'block', + } + } + } + ], + + isSize100 && [ + { + height: personaSize100, + maxWidth: personaSize100, + + selectors: { + '$placeholder': { + fontSize: '95px', + top: '12px', + }, + + '$presence': { + height: personaPresenceSize28, + width: personaPresenceSize28, + }, + + '$presenceIcon': { + fontSize: FontSizes.medium, + lineHeight: personaPresenceSize28, + }, + + '$primaryText': { + fontSize: FontSizes.xLarge, + fontWeight: FontWeights.semilight, + }, + + '$secondaryText': { + fontSize: FontSizes.medium, + }, + + '$tertiaryText, $optionalText': { + display: 'block', + } + } + } + ], + + isDarkText && [ + { + selectors: { + '$primaryText': { + color: palette.neutralDark, + }, + + '$secondaryText, $tertiaryText, $optionalText': { + color: palette.neutralPrimary, + } + } + } + ], + + isSelectable && [ + { + cursor: 'pointer', + padding: '0 10px', + } + ], + + isSelectable && !extraLarge && [ + { + selectors: { + '&:hover, &:focus': { + backgroundColor: palette.themeLighter, + outline: '1px solid transparent', + } + } + } + ], + + isAvailable && [ + { + selectors: { + '$presence': { + backgroundColor: colorPresenceAvailable, + }, + + [HighContrastSelector]: { + backgroundColor: 'WindowText', + }, + + '@media screen and (-ms-high-contrast: black-on-white)': { + backgroundColor: palette.white, + } + } + } + ], + + isAway && [], + isBlocked && [], + isBusy && [], + isDoNotDisturb && [], + isOffline && [], + isReadOnly && [], ], placeholder: [ @@ -109,7 +473,41 @@ export const getStyles = ( ], presense: [ - {} + { + backgroundColor: colorPresenceAvailable, + position: 'absolute', + height: personaPresenceSize12, + width: personaPresenceSize12, + borderRadius: '50%', + top: 'auto', + right: personaPresenceBorder, + bottom: personaPresenceBorder, + border: `${personaPresenceBorder} solid ${palette.white}`, + textAlign: 'center', + boxSizing: 'content-box', + MsHighContrastAdjust: 'none', + + selectors: { + [HighContrastSelector]: { + borderColor: 'Window', + color: 'Window', + backgroundColor: 'WindowText', + }, + + '$presenseIcon': { + color: palette.white, + fontSize: '6px', + lineHeight: personaPresenceSize12, + verticalAlign: 'top', + + selectors: { + [HighContrastSelector]: { + color: 'Window', + } + } + } + } + } ], presenseIcon: [ @@ -117,27 +515,51 @@ export const getStyles = ( ], details: [ - {} + { + padding: '0 24px 0 16px', + minWidth: 0, + width: '100%', + textAlign: 'left', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-around', + } ], primaryText: [ - {} + noWrap, + { + color: palette.neutralPrimary, + fontWeight: FontWeights.regular, + fontSize: FontSizes.large, + } ], secondaryText: [ + noWrap, + sharedTextStyles, {} ], tertiaryText: [ - {} + noWrap, + sharedTextStyles, + { + display: 'none', + } ], optionalText: [ - {} + noWrap, + sharedTextStyles, + { + display: 'none', + } ], textContent: [ - {} - ] + noWrap, + {}, + ], }); }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 17e2bf1357428..7416bb50b6af5 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -247,30 +247,29 @@ export interface IPersonaStyleProps { * Custom class name. */ className?: string; - personaSize?: PersonaSize; - readOnly?: boolean; - showSecondaryText?: boolean; - darkText?: boolean; - isSelectable?: boolean; + size: PersonaSize; extraLarge?: boolean; isAvailable?: boolean; isAway?: boolean; isBlocked?: boolean; isBusy?: boolean; + isDarkText?: boolean; isDoNotDisturb?: boolean; isOffline?: boolean; + isReadOnly?: boolean; + isSelectable?: boolean; + showSecondaryText?: boolean; } export interface IPersonaStyles { root: IStyle; - placeholder?: IStyle; - presense?: IStyle; - presenseIcon?: IStyle; - details?: IStyle; - primaryText?: IStyle; - secondaryText?: IStyle; - tertiaryText?: IStyle; - optionalText?: IStyle; - textContent?: IStyle; - + placeholder: IStyle; + presense: IStyle; + presenseIcon: IStyle; + details: IStyle; + primaryText: IStyle; + secondaryText: IStyle; + tertiaryText: IStyle; + optionalText: IStyle; + textContent: IStyle; } From 80fccfa7ff939c7a173887fbf3f74da86ee70ada Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 22 Mar 2018 15:21:27 -0700 Subject: [PATCH 07/68] Finish adding styles from scss, comment sections. --- .../src/components/Persona/Persona.styles.ts | 308 +++++++++++++++++- 1 file changed, 294 insertions(+), 14 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index ae92ccda4fd0d..c6c40d7ff7bbb 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -79,6 +79,8 @@ export const getStyles = ( const personaPresenceSize28 = '28px'; const personaPresenceBorder = '2px'; + const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; + const sharedTextStyles: IStyle = { color: palette.neutralSecondary, fontWeight: FontWeights.regular, @@ -114,6 +116,58 @@ export const getStyles = ( } }, className, + + /** + * Modifier: Size 10 Persona + */ + isSize10 && [ + { + height: personaSize10, + minWidth: personaSize10, + + selectors: { + '$presence': { + right: 'auto', + top: '7px', + left: 0, + border: 0, + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + [HighContrastSelector]: { + top: '9px', + border: '1px solid WindowText', + }, + + '$presenceIcon': { + display: 'none', + } + } + }, + + '$details': { + paddingLeft: '17px', + }, + + '$primaryText': { + fontSize: FontSizes.small, + lineHeight: personaSize10, + }, + + '$secondaryText': { + display: 'none', + } + } + } + ], + + /** + * Modifier: Size 10 Persona with read only state + * + * This variant includes a semicolon, and is + * most often presented within a People Picker. + */ isSize10 && isReadOnly && [ { padding: 0, @@ -126,6 +180,10 @@ export const getStyles = ( } } ], + + /** + * Modifier: Size 16 Persona + */ isSize16 && [ { height: personaSize16, @@ -159,6 +217,9 @@ export const getStyles = ( } ], + /** + * Modifier: Size 24 Persona + */ isSize24 && [ { height: personaSize24, @@ -213,6 +274,9 @@ export const getStyles = ( } ], + /** + * Modifier: Size 28 Persona + */ isSize28 && [ { height: personaSize28, @@ -267,6 +331,9 @@ export const getStyles = ( } ], + /** + * Modifier: Size 32 Persona + */ isSize32 && [ { height: personaSize32, @@ -309,6 +376,9 @@ export const getStyles = ( } ], + /** + * Modifier: Size 40 Persona + */ isSize40 && [ { height: personaSize40, @@ -327,8 +397,9 @@ export const getStyles = ( } ], - isSize48 && [], - + /** + * Modifier: Size 72 Persona + */ isSize72 && [ { height: personaSize72, @@ -365,6 +436,9 @@ export const getStyles = ( } ], + /** + * Modifier: Size 100 Persona + */ isSize100 && [ { height: personaSize100, @@ -402,6 +476,11 @@ export const getStyles = ( } ], + /** + * Modifier: Persona with darker text + * + * Note: Typically applied when the component has a colored background. + */ isDarkText && [ { selectors: { @@ -416,6 +495,9 @@ export const getStyles = ( } ], + /** + * Modifier: Selectable Persona + */ isSelectable && [ { cursor: 'pointer', @@ -434,6 +516,13 @@ export const getStyles = ( } ], + /** + * === Presence indicator variants. === + */ + + /** + * Modifier: Persona with available presence + */ isAvailable && [ { selectors: { @@ -445,19 +534,212 @@ export const getStyles = ( backgroundColor: 'WindowText', }, - '@media screen and (-ms-high-contrast: black-on-white)': { + [HighContrastBWSelector]: { backgroundColor: palette.white, } } } ], - isAway && [], - isBlocked && [], - isBusy && [], - isDoNotDisturb && [], - isOffline && [], - isReadOnly && [], + /** + * Modifier: Persona with away presence + */ + isAway && [ + { + selectors: { + '$presence': { + backgroundColor: colorPresenceAway, + + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + } + } + }, + + '$presenceIcon': { + position: 'relative', + left: '1px', + } + } + } + ], + + /** + * Modifier: Persona with blocked presence + */ + isBlocked && [ + { + selectors: { + '$presence': { + backgroundColor: palette.white, + + selectors: { + '&:before': { + content: '""', + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, + borderRadius: '50%', + }, + + '&:after': { + content: '""', + width: '100%', + height: '2px', + backgroundColor: colorPresenceBusyAverage, + transform: 'rotate(-45deg)', + position: 'absolute', + top: '40%', + left: 0, + }, + + [HighContrastSelector]: { + color: palette.contrastBlackDisabled, + backgroundColor: 'Window', + + selectors: { + '&:before': { + boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, + }, + + '&:after': { + backgroundColor: palette.contrastBlackDisabled, + } + } + }, + + [HighContrastBWSelector]: { + color: palette.contrastWhiteDisabled, + + selectors: { + '&:before': { + boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, + }, + + '&:after': { + backgroundColor: palette.contrastWhiteDisabled, + } + } + } + } + } + } + } + ], + + isBlocked && isSize72 && [ + { + selectors: { + '$presence': { + selectors: { + '&:after': { + top: '9px', + } + } + } + } + } + ], + + isBlocked && isSize100 && [ + { + selectors: { + '$presence': { + selectors: { + '&:after': { + top: '13px', + } + } + } + } + } + ], + + /** + * Modifier: Persona with busy presence + */ + isBusy && [ + { + selectors: { + '$presence': { + backgroundColor: colorPresenceBusyAverage, + + selectors: { + [HighContrastSelector]: { + backgroundColor: palette.contrastBlackDisabled, + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, + } + } + } + } + } + ], + + /** + * Modifier: Persona with do not disturb presence + */ + isDoNotDisturb && [ + { + selectors: { + '$presence': { + backgroundColor: colorPresenceDndBackground, + + selectors: { + [HighContrastSelector]: { + color: palette.black, + backgroundColor: palette.contrastBlackDisabled, + + selectors: { + '&:before': { + backgroundColor: palette.contrastBlackDisabled, + }, + + '&:after': { + backgroundColor: palette.contrastBlackDisabled, + } + } + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, + } + } + } + } + } + ], + + /** + * Modifier: Persona with offline presence + */ + isOffline && [ + { + selectors: { + '$presence': { + backgroundColor: colorPresenceOffline, + + selectors: { + [HighContrastSelector]: { + backgroundColor: palette.contrastBlackDisabled, + boxShadow: `0 0 0 1px ${palette.white} inset`, + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.white, + boxShadow: `0 0 0 1px ${palette.black} inset`, + } + } + } + } + } + ], ], placeholder: [ @@ -480,8 +762,8 @@ export const getStyles = ( width: personaPresenceSize12, borderRadius: '50%', top: 'auto', - right: personaPresenceBorder, - bottom: personaPresenceBorder, + right: `-${personaPresenceBorder}`, + bottom: `-${personaPresenceBorder}`, border: `${personaPresenceBorder} solid ${palette.white}`, textAlign: 'center', boxSizing: 'content-box', @@ -510,9 +792,7 @@ export const getStyles = ( } ], - presenseIcon: [ - {} - ], + presenseIcon: [], details: [ { From c8aaafd7fc812abfc548b8740f1287b4deab77e8 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 22 Mar 2018 15:36:04 -0700 Subject: [PATCH 08/68] Add temporary className strings --- .../src/components/Persona/Persona.styles.ts | 47 +++++++++++++------ 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index c6c40d7ff7bbb..552760f995f3d 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -121,6 +121,7 @@ export const getStyles = ( * Modifier: Size 10 Persona */ isSize10 && [ + 'ms-Persona--isSize10', { height: personaSize10, minWidth: personaSize10, @@ -168,23 +169,22 @@ export const getStyles = ( * This variant includes a semicolon, and is * most often presented within a People Picker. */ - isSize10 && isReadOnly && [ - { - padding: 0, - backgroundColor: 'transparent', + isSize10 && isReadOnly && { + padding: 0, + backgroundColor: 'transparent', - selectors: { - '$primaryText:after': { - content: ';', - } + selectors: { + '$primaryText:after': { + content: ';', } } - ], + }, /** * Modifier: Size 16 Persona */ isSize16 && [ + 'ms-Persona--isSize16', { height: personaSize16, minWidth: personaSize16, @@ -221,6 +221,7 @@ export const getStyles = ( * Modifier: Size 24 Persona */ isSize24 && [ + 'ms-Persona--isSize24', { height: personaSize24, minWidth: personaSize24, @@ -278,6 +279,7 @@ export const getStyles = ( * Modifier: Size 28 Persona */ isSize28 && [ + 'ms-Persona--isSize28', { height: personaSize28, minWidth: personaSize28, @@ -335,6 +337,7 @@ export const getStyles = ( * Modifier: Size 32 Persona */ isSize32 && [ + 'ms-Persona--isSize32', { height: personaSize32, minWidth: personaSize32, @@ -380,6 +383,7 @@ export const getStyles = ( * Modifier: Size 40 Persona */ isSize40 && [ + 'ms-Persona--isSize40', { height: personaSize40, minWidth: personaSize40, @@ -401,6 +405,7 @@ export const getStyles = ( * Modifier: Size 72 Persona */ isSize72 && [ + 'ms-Persona--isSize72', { height: personaSize72, maxWidth: personaSize72, @@ -440,6 +445,7 @@ export const getStyles = ( * Modifier: Size 100 Persona */ isSize100 && [ + 'ms-Persona--isSize100', { height: personaSize100, maxWidth: personaSize100, @@ -482,6 +488,7 @@ export const getStyles = ( * Note: Typically applied when the component has a colored background. */ isDarkText && [ + 'ms-Persona--isDarkText', { selectors: { '$primaryText': { @@ -499,6 +506,7 @@ export const getStyles = ( * Modifier: Selectable Persona */ isSelectable && [ + 'ms-Persona--isSelected', { cursor: 'pointer', padding: '0 10px', @@ -524,6 +532,7 @@ export const getStyles = ( * Modifier: Persona with available presence */ isAvailable && [ + 'ms-Persona--isAvailable', { selectors: { '$presence': { @@ -545,6 +554,7 @@ export const getStyles = ( * Modifier: Persona with away presence */ isAway && [ + 'ms-Persona--isAway', { selectors: { '$presence': { @@ -569,6 +579,7 @@ export const getStyles = ( * Modifier: Persona with blocked presence */ isBlocked && [ + 'ms-Persona--isBlocked', { selectors: { '$presence': { @@ -663,6 +674,7 @@ export const getStyles = ( * Modifier: Persona with busy presence */ isBusy && [ + 'ms-Persona--isBusy', { selectors: { '$presence': { @@ -686,6 +698,7 @@ export const getStyles = ( * Modifier: Persona with do not disturb presence */ isDoNotDisturb && [ + 'ms-Persona--isDoNotDisturb', { selectors: { '$presence': { @@ -720,6 +733,7 @@ export const getStyles = ( * Modifier: Persona with offline presence */ isOffline && [ + 'ms-Persona--isOffline', { selectors: { '$presence': { @@ -755,6 +769,7 @@ export const getStyles = ( ], presense: [ + 'ms-Persona-presence', { backgroundColor: colorPresenceAvailable, position: 'absolute', @@ -792,9 +807,10 @@ export const getStyles = ( } ], - presenseIcon: [], + presenseIcon: ['ms-Persona-presenceIcon'], details: [ + 'ms-Persona-details', { padding: '0 24px 0 16px', minWidth: 0, @@ -807,6 +823,7 @@ export const getStyles = ( ], primaryText: [ + 'ms-Persona-primaryText', noWrap, { color: palette.neutralPrimary, @@ -816,12 +833,13 @@ export const getStyles = ( ], secondaryText: [ + 'ms-Persona-secondaryText', noWrap, - sharedTextStyles, - {} + sharedTextStyles ], tertiaryText: [ + 'ms-Persona-tertiaryText', noWrap, sharedTextStyles, { @@ -830,6 +848,7 @@ export const getStyles = ( ], optionalText: [ + 'ms-Persona-optionalText', noWrap, sharedTextStyles, { @@ -838,8 +857,8 @@ export const getStyles = ( ], textContent: [ - noWrap, - {}, + 'ms-Persona-textContent', + noWrap ], }); }; From 78da7f23dd9e5793ad92d495531abeb1ddd3d5b9 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 22 Mar 2018 17:42:53 -0700 Subject: [PATCH 09/68] EOD - Split up coin and presence style and types - Remove scss imports --- .../src/components/Persona/Persona.base.tsx | 15 +- .../src/components/Persona/Persona.styles.ts | 121 +++----- .../src/components/Persona/Persona.types.ts | 138 ++++++++- .../components/Persona/PersonaCoin.base.tsx | 218 ++++++++++++++ .../components/Persona/PersonaCoin.styles.ts | 283 ++++++++++++++++++ .../src/components/Persona/PersonaCoin.tsx | 206 +------------ .../Persona/PersonaPresence.styles.ts | 83 +++++ 7 files changed, 773 insertions(+), 291 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx create mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts create mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index c64e7ecf63620..0304915b6bff2 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -11,15 +11,18 @@ import { PersonaCoin } from './PersonaCoin'; import { IPersonaProps, PersonaPresence as PersonaPresenceEnum, - PersonaSize + PersonaSize, + IPersonaStyleProps, + IPersonaStyles, } from './Persona.types'; import { - PERSONA_PRESENCE, - PERSONA_SIZE -} from './PersonaConsts'; -import * as stylesImport from './Persona.scss'; -const styles: any = stylesImport; + classNamesFunction, + customizable, +} from '../../Utilities'; + +const getClassNames = classNamesFunction(); +@customizable('Persona', ['theme']) export class PersonaBase extends BaseComponent { public static defaultProps: IPersonaProps = { primaryText: '', diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 552760f995f3d..0c079dca1b889 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -1,10 +1,9 @@ -import { IPersonaStyleProps, IPersonaStyles, PersonaSize } from './Persona.types'; +import { IPersonaStyleProps, IPersonaStyles, PersonaPresence, PersonaSize } from './Persona.types'; import { FontSizes, FontWeights, HighContrastSelector, IStyle, - ITheme, normalize, noWrap, zIndex, @@ -16,22 +15,35 @@ export const getStyles = ( ): IPersonaStyles => { const { className, - extraLarge, - isAvailable, - isAway, - isBlocked, - isBusy, isDarkText, - isDoNotDisturb, - isOffline, isReadOnly, isSelectable, showSecondaryText, + presence, size, theme, } = props; - const { palette, semanticColors } = theme; + const { palette } = theme; + + // Persona presence conditionals + const isAvailable = presence === PersonaPresence.online; + const isAway = presence === PersonaPresence.away; + const isBlocked = presence === PersonaPresence.blocked; + const isBusy = presence === PersonaPresence.busy; + const isDoNotDisturb = presence === PersonaPresence.dnd; + const isOffline = presence === PersonaPresence.offline; + + // Persona size conditionals + const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; + const isSize16 = size === PersonaSize.size16; + const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; + const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; + const isSize32 = size === PersonaSize.size32; + const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; + const isSize48 = size === PersonaSize.size48; + const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; + const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; // Skype presence colors const colorPresenceAvailable = '#7FBA00'; @@ -49,17 +61,6 @@ export const getStyles = ( const colorPresenceBusyStripeDark = '#D00E0D'; const colorPresenceBusyAverage = '#D93B3B'; - // Persona size conditionals - const isSize10 = size === PersonaSize.size10; - const isSize16 = size === PersonaSize.size16; - const isSize24 = size === PersonaSize.size24; - const isSize28 = size === PersonaSize.size28; - const isSize32 = size === PersonaSize.size32; - const isSize40 = size === PersonaSize.size40; - const isSize48 = size === PersonaSize.size48; - const isSize72 = size === PersonaSize.size72; - const isSize100 = size === PersonaSize.size100; - // Persona Sizes const personaSize10 = '20px'; const personaSize16 = '16px'; @@ -115,13 +116,12 @@ export const getStyles = ( } } }, - className, /** * Modifier: Size 10 Persona */ isSize10 && [ - 'ms-Persona--isSize10', + 'ms-Persona--size10', { height: personaSize10, minWidth: personaSize10, @@ -184,7 +184,7 @@ export const getStyles = ( * Modifier: Size 16 Persona */ isSize16 && [ - 'ms-Persona--isSize16', + 'ms-Persona--size16', { height: personaSize16, minWidth: personaSize16, @@ -221,7 +221,7 @@ export const getStyles = ( * Modifier: Size 24 Persona */ isSize24 && [ - 'ms-Persona--isSize24', + 'ms-Persona--size24', { height: personaSize24, minWidth: personaSize24, @@ -279,7 +279,7 @@ export const getStyles = ( * Modifier: Size 28 Persona */ isSize28 && [ - 'ms-Persona--isSize28', + 'ms-Persona--size28', { height: personaSize28, minWidth: personaSize28, @@ -337,7 +337,7 @@ export const getStyles = ( * Modifier: Size 32 Persona */ isSize32 && [ - 'ms-Persona--isSize32', + 'ms-Persona--size32', { height: personaSize32, minWidth: personaSize32, @@ -383,7 +383,7 @@ export const getStyles = ( * Modifier: Size 40 Persona */ isSize40 && [ - 'ms-Persona--isSize40', + 'ms-Persona--size40', { height: personaSize40, minWidth: personaSize40, @@ -405,7 +405,7 @@ export const getStyles = ( * Modifier: Size 72 Persona */ isSize72 && [ - 'ms-Persona--isSize72', + 'ms-Persona--size72', { height: personaSize72, maxWidth: personaSize72, @@ -445,7 +445,7 @@ export const getStyles = ( * Modifier: Size 100 Persona */ isSize100 && [ - 'ms-Persona--isSize100', + 'ms-Persona--size100', { height: personaSize100, maxWidth: personaSize100, @@ -488,7 +488,7 @@ export const getStyles = ( * Note: Typically applied when the component has a colored background. */ isDarkText && [ - 'ms-Persona--isDarkText', + 'ms-Persona--DarkText', { selectors: { '$primaryText': { @@ -506,14 +506,14 @@ export const getStyles = ( * Modifier: Selectable Persona */ isSelectable && [ - 'ms-Persona--isSelected', + 'ms-Persona--Selected', { cursor: 'pointer', padding: '0 10px', } ], - isSelectable && !extraLarge && [ + isSelectable && !isSize100 && [ { selectors: { '&:hover, &:focus': { @@ -532,7 +532,7 @@ export const getStyles = ( * Modifier: Persona with available presence */ isAvailable && [ - 'ms-Persona--isAvailable', + 'ms-Persona--online', { selectors: { '$presence': { @@ -554,7 +554,7 @@ export const getStyles = ( * Modifier: Persona with away presence */ isAway && [ - 'ms-Persona--isAway', + 'ms-Persona--away', { selectors: { '$presence': { @@ -579,7 +579,7 @@ export const getStyles = ( * Modifier: Persona with blocked presence */ isBlocked && [ - 'ms-Persona--isBlocked', + 'ms-Persona--blocked', { selectors: { '$presence': { @@ -674,7 +674,7 @@ export const getStyles = ( * Modifier: Persona with busy presence */ isBusy && [ - 'ms-Persona--isBusy', + 'ms-Persona--Busy', { selectors: { '$presence': { @@ -698,7 +698,7 @@ export const getStyles = ( * Modifier: Persona with do not disturb presence */ isDoNotDisturb && [ - 'ms-Persona--isDoNotDisturb', + 'ms-Persona--DoNotDisturb', { selectors: { '$presence': { @@ -733,7 +733,7 @@ export const getStyles = ( * Modifier: Persona with offline presence */ isOffline && [ - 'ms-Persona--isOffline', + 'ms-Persona--Offline', { selectors: { '$presence': { @@ -754,6 +754,8 @@ export const getStyles = ( } } ], + + className, ], placeholder: [ @@ -768,47 +770,6 @@ export const getStyles = ( } ], - presense: [ - 'ms-Persona-presence', - { - backgroundColor: colorPresenceAvailable, - position: 'absolute', - height: personaPresenceSize12, - width: personaPresenceSize12, - borderRadius: '50%', - top: 'auto', - right: `-${personaPresenceBorder}`, - bottom: `-${personaPresenceBorder}`, - border: `${personaPresenceBorder} solid ${palette.white}`, - textAlign: 'center', - boxSizing: 'content-box', - MsHighContrastAdjust: 'none', - - selectors: { - [HighContrastSelector]: { - borderColor: 'Window', - color: 'Window', - backgroundColor: 'WindowText', - }, - - '$presenseIcon': { - color: palette.white, - fontSize: '6px', - lineHeight: personaPresenceSize12, - verticalAlign: 'top', - - selectors: { - [HighContrastSelector]: { - color: 'Window', - } - } - } - } - } - ], - - presenseIcon: ['ms-Persona-presenceIcon'], - details: [ 'ms-Persona-details', { diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 7416bb50b6af5..308e9a3a6c0bc 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; import { PersonaBase } from './Persona.base'; +import { PersonaCoinBase } from './PersonaCoin.base'; import { ImageLoadState } from '../../Image'; import { IStyle, ITheme } from '../../Styling'; import { IStyleFunction } from '../../Utilities'; @@ -247,15 +248,10 @@ export interface IPersonaStyleProps { * Custom class name. */ className?: string; - size: PersonaSize; + size?: PersonaSize; + presence?: PersonaPresence; extraLarge?: boolean; - isAvailable?: boolean; - isAway?: boolean; - isBlocked?: boolean; - isBusy?: boolean; isDarkText?: boolean; - isDoNotDisturb?: boolean; - isOffline?: boolean; isReadOnly?: boolean; isSelectable?: boolean; showSecondaryText?: boolean; @@ -264,8 +260,6 @@ export interface IPersonaStyleProps { export interface IPersonaStyles { root: IStyle; placeholder: IStyle; - presense: IStyle; - presenseIcon: IStyle; details: IStyle; primaryText: IStyle; secondaryText: IStyle; @@ -273,3 +267,129 @@ export interface IPersonaStyles { optionalText: IStyle; textContent: IStyle; } + +export interface IPersonaCoinProps extends React.Props { + /** + * Gets the component ref. + */ + componentRef?: (component: IPersonaCoinProps) => void; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Theme provided by HOC. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the PersonaCoin + * @defaultvalue undefined + */ + className?: string; + + /** + * Optional HTML element props for Persona coin. + */ + coinProps?: React.HTMLAttributes; + + /** + * Optional custom persona coin size in pixel. + */ + coinSize?: number; + + /** + * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. + */ + imageUrl?: string; + + /** + * Optional custom renderer for the coin + */ + onRenderCoin?: IRenderFunction; + + /** + * Optional custom renderer for the initials + */ + onRenderInitials?: IRenderFunction; + + /** + * Decides the size of the control. + * @defaultvalue PersonaSize.size48 + */ + size?: PersonaSize; +} + +export interface IPersonaCoinStyleProps { + /** + * Theme. + */ + theme: ITheme; + + /** + * Custom class name. + */ + className?: string; + + /** + * Decides the size of the control. + * @defaultvalue PersonaSize.size48 + */ + size?: PersonaSize; +} + +export interface IPersonaCoinStyles { + coin: IStyle; + imageArea: IStyle; + image: IStyle; + initials: IStyle; + size10NoPresenceIcon: IStyle; +} + +export interface IPersonaPresenceProps { + /** + * Gets the component ref. + */ + componentRef?: (component: IPersonaPresenceProps) => void; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Theme provided by HOC. + */ + theme?: ITheme; + + /** + * Additional css class to apply to the PersonaPresence + * @defaultvalue undefined + */ + className?: string; +} + +export interface IPersonaPresenceStyleProps { + /** + * Theme. + */ + theme: ITheme; + + /** + * Custom class name. + */ + className?: string; + + /** + * Presence of the person to display - will not display presence if undefined. + * @defaultvalue PersonaPresence.none + */ + presence?: PersonaPresence; +} + +export interface IPersonaPresenceStyles { + presense: IStyle; + presenseIcon: IStyle; +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx new file mode 100644 index 0000000000000..9d1092e4b75eb --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx @@ -0,0 +1,218 @@ +import * as React from 'react'; +import { + BaseComponent, + classNamesFunction, + customizable, + divProperties, + getInitials, + getNativeProps, + getRTL, +} from '../../Utilities'; +import { PersonaPresence } from './PersonaPresence'; +import { + IPersonaProps, + IPersonaCoinProps, + IPersonaCoinStyleProps, + IPersonaCoinStyles, + PersonaPresence as PersonaPresenceEnum, + PersonaSize, +} from './Persona.types'; +import { + Icon +} from '../../Icon'; +import { + Image, + ImageFit, + ImageLoadState +} from '../../Image'; +import { mergeStyles } from '../../Styling'; +import { initialsColorPropToColorCode } from './PersonaInitialsColor'; + +const getClassNames = classNamesFunction(); + +const SIZE_TO_PIXELS: { [key: number]: number } = { + [PersonaSize.tiny]: 20, + [PersonaSize.extraExtraSmall]: 24, + [PersonaSize.extraSmall]: 28, + [PersonaSize.small]: 40, + [PersonaSize.regular]: 48, + [PersonaSize.large]: 72, + [PersonaSize.extraLarge]: 100, + + [PersonaSize.size24]: 24, + [PersonaSize.size28]: 28, + [PersonaSize.size10]: 20, + [PersonaSize.size32]: 32, + [PersonaSize.size40]: 40, + [PersonaSize.size48]: 48, + [PersonaSize.size72]: 72, + [PersonaSize.size100]: 100 +}; + +// export const PERSONACOIN_SIZE: { [key: number]: string } = { +// // All non-numerically named sizes are deprecated, use the numerically named classes below +// [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsSize10, +// [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsSize24, +// [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsSize28, +// [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSize40, +// [PersonaSize.regular]: '', +// [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsSize72, +// [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsSize100, + +// [PersonaSize.size10]: 'ms-Persona--size10 ' + styles.rootIsSize10, +// [PersonaSize.size16]: 'ms-Persona--size16 ' + styles.rootIsSize16, +// [PersonaSize.size24]: 'ms-Persona--size24 ' + styles.rootIsSize24, +// [PersonaSize.size28]: 'ms-Persona--size28 ' + styles.rootIsSize28, +// [PersonaSize.size32]: 'ms-Persona--size32 ' + styles.rootIsSize32, +// [PersonaSize.size40]: 'ms-Persona--size40 ' + styles.rootIsSize40, +// [PersonaSize.size48]: 'ms-Persona--size48 ' + styles.rootIsSize48, +// [PersonaSize.size72]: 'ms-Persona--size72 ' + styles.rootIsSize72, +// [PersonaSize.size100]: 'ms-Persona--size100 ' + styles.rootIsSize100 +// }; + +export interface IPersonaState { + isImageLoaded?: boolean; + isImageError?: boolean; +} + +// export class PersonaCoinBase extends React.Component { +@customizable('PersonaCoin', ['theme']) +export class PersonaCoinBase extends BaseComponent { + public static defaultProps: IPersonaProps = { + primaryText: '', + size: PersonaSize.size48, + presence: PersonaPresenceEnum.none, + imageAlt: '' + }; + + constructor(props: IPersonaCoinProps) { + super(props); + + this.state = { + isImageLoaded: false, + isImageError: false + }; + } + + public render() { + const { + coinProps, + coinSize, + getStyles, + imageUrl, + onRenderCoin = this._onRenderCoin, + onRenderInitials = this._onRenderInitials, + theme, + } = this.props; + + const size = this.props.size as PersonaSize; + const divProps = getNativeProps(this.props, divProperties); + const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined; + + const classNames = getClassNames(getStyles!, { + theme: theme!, + className: coinProps!.className, + size, + }); + + return ( +
+ { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? ( +
+ { + !this.state.isImageLoaded && + (!imageUrl || this.state.isImageError) && + ( + + ) + } + { onRenderCoin(this.props, this._onRenderCoin) } + +
+ ) : + (this.props.presence ? + : + + ) + } + { this.props.children } +
+ ); + } + + private _onRenderCoin = (props: IPersonaProps): JSX.Element | null => { + const { + coinSize, + imageUrl, + imageAlt, + imageShouldFadeIn, + imageShouldStartVisible + } = this.props; + + const size = this.props.size as PersonaSize; + + return ( + { + ); + } + + private _onRenderInitials = (props: IPersonaProps): JSX.Element => { + let { imageInitials } = props; + const { primaryText } = props; + + const isRTL = getRTL(); + + imageInitials = imageInitials || getInitials(primaryText, isRTL); + + return ( + imageInitials !== '' ? + { imageInitials } : + + ); + } + + private _onPhotoLoadingStateChange = (loadState: ImageLoadState) => { + this.setState({ + isImageLoaded: loadState === ImageLoadState.loaded, + isImageError: loadState === ImageLoadState.error + }); + + if (this.props.onPhotoLoadingStateChange) { + this.props.onPhotoLoadingStateChange(loadState); + } + } +} \ 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.styles.ts new file mode 100644 index 0000000000000..f51b1beb58224 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -0,0 +1,283 @@ +import { IPersonaCoinStyleProps, IPersonaCoinStyles, PersonaSize } from './Persona.types'; +import { + HighContrastSelector, + FontSizes, + FontWeights, +} from '../../Styling'; + +export const getStyles = ( + props: IPersonaCoinStyleProps +): IPersonaCoinStyles => { + const { + className, + theme, + size, + } = props; + + const { palette } = theme; + + // Persona size conditionals + const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; + const isSize16 = size === PersonaSize.size16; + const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; + const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; + const isSize32 = size === PersonaSize.size32; + const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; + const isSize48 = size === PersonaSize.size48; + const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; + const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; + + // Persona Sizes + const personaSize16 = '16px'; + const personaSize24 = '24px'; + const personaSize28 = '28px'; + const personaSize32 = '32px'; + const personaSize40 = '40px'; + const personaSize48 = '48px'; + const personaSize72 = '72px'; + const personaSize100 = '100px'; + + return ({ + coin: [ + 'ms-Persona-coin', + { + // Insert css properties + + }, + + /** + * Modifier: Size 10 Persona + */ + isSize10 && [ + 'ms-Persona--size10', + { + selectors: { + '$imageArea': { + overflow: 'visible', + background: 'transparent', + height: 0, + width: 0, + } + } + } + ], + + /** + * Modifier: Size 16 Persona + */ + isSize16 && [ + 'ms-Persona--size16', + { + selectors: { + '$imageArea, $image': { + height: personaSize16, + width: personaSize16, + }, + + '$initials': { + fontSize: FontSizes.xSmall, + height: personaSize16, + lineHeight: personaSize16, + } + } + } + ], + + /** + * Modifier: Size 24 Persona + */ + isSize24 && [ + 'ms-Persona--size24', + { + selectors: { + '$imageArea, $image': { + height: personaSize24, + width: personaSize24, + }, + + '$initials': { + fontSize: FontSizes.xSmall, + height: personaSize24, + lineHeight: personaSize24, + } + } + } + ], + + /** + * Modifier: Size 28 Persona + */ + isSize28 && [ + 'ms-Persona--size28', + { + selectors: { + '$imageArea, $image': { + height: personaSize28, + width: personaSize28, + }, + + '$initials': { + fontSize: FontSizes.xSmall, + height: personaSize28, + lineHeight: personaSize28, + } + } + } + ], + + /** + * Modifier: Size 32 Persona + */ + isSize32 && [ + 'ms-Persona--size32', + { + selectors: { + '$imageArea, $image': { + height: personaSize32, + width: personaSize32, + }, + + '$initials': { + fontSize: FontSizes.medium, + height: personaSize32, + lineHeight: personaSize32, + } + } + } + ], + + /** + * Modifier: Size 40 Persona + */ + isSize40 && [ + 'ms-Persona--size40', + { + selectors: { + '$imageArea, $image': { + height: personaSize40, + width: personaSize40, + }, + + '$initials': { + fontSize: FontSizes.medium, + height: personaSize40, + lineHeight: personaSize40, + } + } + } + ], + + /** + * Modifier: Size 72 Persona + */ + isSize72 && [ + 'ms-Persona--size72', + { + selectors: { + '$imageArea, $image': { + height: personaSize72, + width: personaSize72, + }, + + '$initials': { + fontSize: FontSizes.xxLarge, + height: personaSize72, + lineHeight: personaSize72, + } + } + } + ], + + /** + * Modifier: Size 100 Persona + */ + isSize100 && [ + 'ms-Persona--size100', + { + selectors: { + '$imageArea, $image': { + height: personaSize100, + width: personaSize100, + }, + + '$initials': { + fontSize: FontSizes.superLarge, + height: personaSize100, + lineHeight: personaSize100, + } + } + } + ], + + className, + ], + + size10NoPresenceIcon: { + fontSize: '10px', + position: 'absolute', + top: '5px', + right: 'auto', + left: 0, + }, + + imageArea: [ + 'ms-Persona-imageArea', + { + position: 'relative', + textAlign: 'center', + flex: '0 0 auto', + height: personaSize48, + width: personaSize48, + + selectors: { + '$image': { + border: 0, + } + } + } + ], + + image: [ + 'ms-Persona-image', + { + marginRight: '10px', + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + borderRadius: '50%', + perspective: '1px', + + // Remove this and use conditional render to hide instead + selectors: { + '&[src=""]': { + display: 'none', + } + } + } + ], + + initials: [ + 'ms-Persona-initials', + { + borderRadius: '50%', + color: palette.white, + fontSize: FontSizes.large, + fontWeight: FontWeights.regular, + lineHeight: '46px', + height: personaSize48, + + selectors: { + [HighContrastSelector]: { + border: '1px solid WindowText', + MsHighContrastAdjust: 'none', + color: 'WindowText', + boxSizing: 'border-box', + backgroundColor: 'Window !important', + } + } + } + ] + }); +}; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index a2a4fc2d716bb..03918d47e11de 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -1,199 +1,13 @@ -import * as React from 'react'; +import { styled } from '../../Utilities'; import { - css, - divProperties, - getInitials, - getNativeProps, - getRTL -} from '../../Utilities'; -import { Image, ImageFit, ImageLoadState } from '../../Image'; -import { PersonaPresence } from './PersonaPresence'; -import { - IPersonaProps, - PersonaPresence as PersonaPresenceEnum, - PersonaSize + IPersonaCoinProps, + IPersonaCoinStyleProps, + IPersonaCoinStyles } from './Persona.types'; -import { - Icon -} from '../../Icon'; -import * as stylesImport from './PersonaCoin.scss'; -const styles: any = stylesImport; - -const SIZE_TO_PIXELS: { [key: number]: number } = { - [PersonaSize.tiny]: 20, - [PersonaSize.extraExtraSmall]: 24, - [PersonaSize.extraSmall]: 28, - [PersonaSize.small]: 40, - [PersonaSize.regular]: 48, - [PersonaSize.large]: 72, - [PersonaSize.extraLarge]: 100, - - [PersonaSize.size24]: 24, - [PersonaSize.size28]: 28, - [PersonaSize.size10]: 20, - [PersonaSize.size32]: 32, - [PersonaSize.size40]: 40, - [PersonaSize.size48]: 48, - [PersonaSize.size72]: 72, - [PersonaSize.size100]: 100 -}; -import { mergeStyles } from '../../Styling'; -import { initialsColorPropToColorCode } from './PersonaInitialsColor'; - -export const PERSONACOIN_SIZE: { [key: number]: string } = { - // All non-numerically named sizes are deprecated, use the numerically named classes below - [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsSize10, - [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsSize24, - [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsSize28, - [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSize40, - [PersonaSize.regular]: '', - [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsSize72, - [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsSize100, - - [PersonaSize.size10]: 'ms-Persona--size10 ' + styles.rootIsSize10, - [PersonaSize.size16]: 'ms-Persona--size16 ' + styles.rootIsSize16, - [PersonaSize.size24]: 'ms-Persona--size24 ' + styles.rootIsSize24, - [PersonaSize.size28]: 'ms-Persona--size28 ' + styles.rootIsSize28, - [PersonaSize.size32]: 'ms-Persona--size32 ' + styles.rootIsSize32, - [PersonaSize.size40]: 'ms-Persona--size40 ' + styles.rootIsSize40, - [PersonaSize.size48]: 'ms-Persona--size48 ' + styles.rootIsSize48, - [PersonaSize.size72]: 'ms-Persona--size72 ' + styles.rootIsSize72, - [PersonaSize.size100]: 'ms-Persona--size100 ' + styles.rootIsSize100 -}; - -export interface IPersonaState { - isImageLoaded?: boolean; - isImageError?: boolean; -} - -export class PersonaCoin extends React.Component { - public static defaultProps: IPersonaProps = { - primaryText: '', - size: PersonaSize.size48, - presence: PersonaPresenceEnum.none, - imageAlt: '' - }; - - constructor(props: IPersonaProps) { - super(props); - - this.state = { - isImageLoaded: false, - isImageError: false - }; - } - - public render(): JSX.Element | null { - const { - coinProps, - coinSize, - imageUrl, - onRenderCoin = this._onRenderCoin, - onRenderInitials = this._onRenderInitials, - } = this.props; - - const size = this.props.size as PersonaSize; - const divProps = getNativeProps(this.props, divProperties); - const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined; - - return ( -
- { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? ( -
- { - !this.state.isImageLoaded && - (!imageUrl || this.state.isImageError) && - ( - - ) - } - { onRenderCoin(this.props, this._onRenderCoin) } - -
- ) : - (this.props.presence ? - : - - ) - } - { this.props.children } -
- ); - } - - private _onRenderCoin = (props: IPersonaProps): JSX.Element | null => { - const { - coinSize, - imageUrl, - imageAlt, - imageShouldFadeIn, - imageShouldStartVisible - } = this.props; - - const size = this.props.size as PersonaSize; - - return ( - { - ); - } - - private _onRenderInitials = (props: IPersonaProps): JSX.Element => { - let { imageInitials } = props; - const { primaryText } = props; - - const isRTL = getRTL(); - - imageInitials = imageInitials || getInitials(primaryText, isRTL); - - return ( - imageInitials !== '' ? - { imageInitials } : - - ); - } - - private _onPhotoLoadingStateChange = (loadState: ImageLoadState) => { - this.setState({ - isImageLoaded: loadState === ImageLoadState.loaded, - isImageError: loadState === ImageLoadState.error - }); +import { PersonaCoinBase } from './PersonaCoin.base'; +import { getStyles } from './PersonaCoin.styles'; - if (this.props.onPhotoLoadingStateChange) { - this.props.onPhotoLoadingStateChange(loadState); - } - } -} \ No newline at end of file +export const PersonaCoin = styled( + PersonaCoinBase, + 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.styles.ts new file mode 100644 index 0000000000000..34993d4e50954 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -0,0 +1,83 @@ +import { IPersonaPresenceStyleProps, IPersonaPresenceStyles } from './Persona.types'; +import { + HighContrastSelector, +} from '../../Styling'; + +export const getStyles = ( + props: IPersonaPresenceStyleProps +): IPersonaPresenceStyles => { + const { + className, + theme, + presence: presenceEnum + } = props; + + const { palette, semanticColors } = theme; + + // Skype presence colors + const colorPresenceAvailable = '#7FBA00'; + const colorPresenceAway = '#FCD116'; + const colorPresenceBusy = '#E81123'; + const colorPresenceDndBackground = '#E81123'; + const colorPresenceDndLine = '#FFFFFF'; + const colorPresenceOffline = '#93ABBD'; + const colorPresenceOutOfOffice = palette.magenta; + + // Other presence colors + const colorPresenceBlockedBackground = '#DEDEDE'; + const colorPresenceBlockedLine = '#C72D25'; + const colorPresenceBusyStripeLight = '#E57A79'; + const colorPresenceBusyStripeDark = '#D00E0D'; + const colorPresenceBusyAverage = '#D93B3B'; + + // Presence Sizes + const personaPresenceSize6 = '6px'; + const personaPresenceSize8 = '8px'; + const personaPresenceSize12 = '12px'; + const personaPresenceSize20 = '20px'; + const personaPresenceSize28 = '28px'; + const personaPresenceBorder = '2px'; + + return ({ + presense: [ + 'ms-Persona-presence', + { + backgroundColor: colorPresenceAvailable, + position: 'absolute', + height: personaPresenceSize12, + width: personaPresenceSize12, + borderRadius: '50%', + top: 'auto', + right: `-${personaPresenceBorder}`, + bottom: `-${personaPresenceBorder}`, + border: `${personaPresenceBorder} solid ${palette.white}`, + textAlign: 'center', + boxSizing: 'content-box', + MsHighContrastAdjust: 'none', + + selectors: { + [HighContrastSelector]: { + borderColor: 'Window', + color: 'Window', + backgroundColor: 'WindowText', + }, + + '$presenseIcon': { + color: palette.white, + fontSize: '6px', + lineHeight: personaPresenceSize12, + verticalAlign: 'top', + + selectors: { + [HighContrastSelector]: { + color: 'Window', + } + } + } + } + } + ], + + presenseIcon: ['ms-Persona-presenceIcon'], + }); +}; From 9e92ebe3adc8c0d7d8d0f3169a4939d066e4830b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 23 Mar 2018 19:52:48 -0700 Subject: [PATCH 10/68] EOD: - Start using classNames in base components - Trying to get styles to match --- .../src/components/Persona/Persona.base.tsx | 44 +-- .../src/components/Persona/Persona.styles.ts | 108 ++++-- .../src/components/Persona/Persona.types.ts | 320 +++++++++++------- .../components/Persona/PersonaCoin.base.tsx | 81 ++--- .../components/Persona/PersonaCoin.styles.ts | 6 +- .../src/components/Persona/PersonaCoin.tsx | 8 +- .../Persona/PersonaPresence.styles.ts | 83 ----- .../components/Persona/PersonaPresence.tsx | 43 ++- .../src/components/Persona/index.ts | 1 + 9 files changed, 368 insertions(+), 326 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index 0304915b6bff2..aba0e5a2f6e58 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { BaseComponent, - css, divProperties, getNativeProps, IRenderFunction @@ -50,17 +49,19 @@ export class PersonaBase extends BaseComponent { className, coinProps, coinSize, - imageUrl, + getStyles, imageAlt, imageInitials, + imageShouldFadeIn, + imageShouldStartVisible, + imageUrl, initialsColor, + onPhotoLoadingStateChange, + onRenderCoin, presence, primaryText, - imageShouldFadeIn, - imageShouldStartVisible, showSecondaryText, - onPhotoLoadingStateChange, - onRenderCoin + theme, } = this.props; const personaCoinProps = { @@ -79,24 +80,35 @@ export class PersonaBase extends BaseComponent { onRenderCoin }; + const classNames = getClassNames(getStyles!, { + theme: theme!, + className, + // isDarkText, + // isReadOnly, + // isSelectable, + showSecondaryText, + presence, + size, + }); + const divProps = getNativeProps(this.props, divProperties); const personaDetails = ( -
+
{ this._renderElement( this.props.primaryText, - css('ms-Persona-primaryText', styles.primaryText), + classNames.primaryText, onRenderPrimaryText) } { this._renderElement( this.props.secondaryText, - css('ms-Persona-secondaryText', styles.secondaryText), + classNames.secondaryText, onRenderSecondaryText) } { this._renderElement( this.props.tertiaryText, - css('ms-Persona-tertiaryText', styles.tertiaryText), + classNames.tertiaryText, onRenderTertiaryText) } { this._renderElement( this.props.optionalText, - css('ms-Persona-optionalText', styles.optionalText), + classNames.optionalText, onRenderOptionalText) } { this.props.children }
@@ -105,15 +117,7 @@ export class PersonaBase extends BaseComponent { return (
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 0c079dca1b889..01dac435c900a 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -86,13 +86,13 @@ export const getStyles = ( color: palette.neutralSecondary, fontWeight: FontWeights.regular, fontSize: FontSizes.small, - whiteSpace: 'nowrap', }; return ({ root: [ 'ms-Persona', normalize, + isSize10 && 'IS_SIZE_10', { color: palette.neutralPrimary, fontSize: FontSizes.medium, @@ -259,21 +259,21 @@ export const getStyles = ( display: 'none', } } - }, + } + ], - showSecondaryText && { - height: '36px', + isSize24 && showSecondaryText && { + height: '36px', - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - height: '18px', - lineHeight: '16px', - overflowX: 'hidden', - } + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + height: '18px', + lineHeight: '16px', + overflowX: 'hidden', } } - ], + }, /** * Modifier: Size 28 Persona @@ -317,21 +317,21 @@ export const getStyles = ( display: 'none', } } - }, + } + ], - showSecondaryText && { - height: '32px', + isSize28 && showSecondaryText && { + height: '32px', - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - lineHeight: '16px', - height: '16px', - overflowX: 'hidden', - } + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + lineHeight: '16px', + height: '16px', + overflowX: 'hidden', } } - ], + }, /** * Modifier: Size 32 Persona @@ -365,19 +365,19 @@ export const getStyles = ( display: 'none', } } - }, + } + ], - showSecondaryText && { - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - height: '16px', - lineHeight: '16px', - overflowX: 'hidden', - } + isSize32 && showSecondaryText && { + selectors: { + '$primaryText, $secondaryText': { + display: 'block', + height: '16px', + lineHeight: '16px', + overflowX: 'hidden', } } - ], + }, /** * Modifier: Size 40 Persona @@ -821,5 +821,47 @@ export const getStyles = ( 'ms-Persona-textContent', noWrap ], + + presence: [ + 'ms-Persona-presence', + { + backgroundColor: colorPresenceAvailable, + position: 'absolute', + height: personaPresenceSize12, + width: personaPresenceSize12, + borderRadius: '50%', + top: 'auto', + right: `-${personaPresenceBorder}`, + bottom: `-${personaPresenceBorder}`, + border: `${personaPresenceBorder} solid ${palette.white}`, + textAlign: 'center', + boxSizing: 'content-box', + MsHighContrastAdjust: 'none', + + selectors: { + [HighContrastSelector]: { + borderColor: 'Window', + color: 'Window', + backgroundColor: 'WindowText', + } + } + } + ], + + presenceIcon: [ + 'ms-Persona-presenceIcon', + { + color: palette.white, + fontSize: '6px', + lineHeight: personaPresenceSize12, + verticalAlign: 'top', + + selectors: { + [HighContrastSelector]: { + color: 'Window', + } + } + } + ], }); }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 308e9a3a6c0bc..fad72ff300fcd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; import { PersonaBase } from './Persona.base'; import { PersonaCoinBase } from './PersonaCoin.base'; +import { PersonaPresenceBase } from './PersonaPresence'; import { ImageLoadState } from '../../Image'; import { IStyle, ITheme } from '../../Styling'; import { IStyleFunction } from '../../Utilities'; @@ -248,148 +249,219 @@ export interface IPersonaStyleProps { * Custom class name. */ className?: string; - size?: PersonaSize; - presence?: PersonaPresence; - extraLarge?: boolean; - isDarkText?: boolean; - isReadOnly?: boolean; - isSelectable?: boolean; - showSecondaryText?: boolean; -} - -export interface IPersonaStyles { - root: IStyle; - placeholder: IStyle; - details: IStyle; - primaryText: IStyle; - secondaryText: IStyle; - tertiaryText: IStyle; - optionalText: IStyle; - textContent: IStyle; -} - -export interface IPersonaCoinProps extends React.Props { - /** - * Gets the component ref. - */ - componentRef?: (component: IPersonaCoinProps) => void; - - /** - * Call to provide customized styling that will layer on top of the variant rules - */ - getStyles?: IStyleFunction; - - /** - * Theme provided by HOC. - */ - theme?: ITheme; - - /** - * Additional css class to apply to the PersonaCoin - * @defaultvalue undefined - */ - className?: string; - - /** - * Optional HTML element props for Persona coin. - */ - coinProps?: React.HTMLAttributes; /** * Optional custom persona coin size in pixel. */ coinSize?: number; - /** - * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. - */ - imageUrl?: string; - - /** - * Optional custom renderer for the coin - */ - onRenderCoin?: IRenderFunction; - - /** - * Optional custom renderer for the initials - */ - onRenderInitials?: IRenderFunction; - /** * Decides the size of the control. * @defaultvalue PersonaSize.size48 */ size?: PersonaSize; -} -export interface IPersonaCoinStyleProps { /** - * Theme. - */ - theme: ITheme; - - /** - * Custom class name. - */ - className?: string; - - /** - * Decides the size of the control. - * @defaultvalue PersonaSize.size48 - */ - size?: PersonaSize; -} - -export interface IPersonaCoinStyles { - coin: IStyle; - imageArea: IStyle; - image: IStyle; - initials: IStyle; - size10NoPresenceIcon: IStyle; -} - -export interface IPersonaPresenceProps { - /** - * Gets the component ref. - */ - componentRef?: (component: IPersonaPresenceProps) => void; - - /** - * Call to provide customized styling that will layer on top of the variant rules + * Presence of the person to display - will not display presence if undefined. + * @defaultvalue PersonaPresence.none */ - getStyles?: IStyleFunction; + presence?: PersonaPresence; - /** - * Theme provided by HOC. + /* + * If true, show the secondary text line regardless of the size of the persona */ - theme?: ITheme; + showSecondaryText?: boolean; - /** - * Additional css class to apply to the PersonaPresence - * @defaultvalue undefined - */ - className?: string; + isDarkText?: boolean; + isReadOnly?: boolean; + isSelectable?: boolean; + // extraLarge?: boolean; } -export interface IPersonaPresenceStyleProps { - /** - * Theme. - */ - theme: ITheme; - - /** - * Custom class name. - */ - className?: string; - - /** - * Presence of the person to display - will not display presence if undefined. - * @defaultvalue PersonaPresence.none - */ - presence?: PersonaPresence; +export interface IPersonaStyles { + root?: IStyle; + placeholder?: IStyle; + details?: IStyle; + primaryText?: IStyle; + secondaryText?: IStyle; + tertiaryText?: IStyle; + optionalText?: IStyle; + textContent?: IStyle; + coin?: IStyle; + imageArea?: IStyle; + image?: IStyle; + initials?: IStyle; + size10NoPresenceIcon?: IStyle; + presence?: IStyle; + presenceIcon?: IStyle; } -export interface IPersonaPresenceStyles { - presense: IStyle; - presenseIcon: IStyle; -} \ No newline at end of file +// export interface IPersonaCoinProps extends React.Props { +// /** +// * Gets the component ref. +// */ +// componentRef?: (component: IPersonaCoinProps) => void; + +// /** +// * Call to provide customized styling that will layer on top of the variant rules +// */ +// getStyles?: IStyleFunction; + +// /** +// * Theme provided by HOC. +// */ +// theme?: ITheme; + +// /** +// * Additional css class to apply to the PersonaCoin +// * @defaultvalue undefined +// */ +// className?: string; + +// /** +// * Optional HTML element props for Persona coin. +// */ +// coinProps?: React.HTMLAttributes; + +// /** +// * Optional custom persona coin size in pixel. +// */ +// coinSize?: number; + +// /** +// * Alt text for the image to use. Defaults to an empty string. +// */ +// imageAlt?: string; + +// /** +// * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. +// */ +// imageUrl?: string; + +// /** +// * If true, adds the css class 'is-fadeIn' to the image. +// */ +// imageShouldFadeIn?: boolean; + +// /** +// * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until +// * it is successfully loaded. This disables imageShouldFadeIn. +// * @defaultvalue false +// */ +// imageShouldStartVisible?: boolean; + +// /** +// * The user's initials to display in the image area when there is no image. +// * @defaultvalue [Derived from primaryText] +// */ +// imageInitials?: string; + +// /** +// * Optional callback for when loading state of the photo changes +// */ +// onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void; + +// /** +// * Optional custom renderer for the coin +// */ +// onRenderCoin?: IRenderFunction; + +// /** +// * Optional custom renderer for the initials +// */ +// onRenderInitials?: IRenderFunction; + +// /** +// * Presence of the person to display - will not display presence if undefined. +// * @defaultvalue PersonaPresence.none +// */ +// presence?: PersonaPresence; + +// /** +// * Primary text to display, usually the name of the person. +// */ +// primaryText?: string; + +// /** +// * Decides the size of the control. +// * @defaultvalue PersonaSize.size48 +// */ +// size?: PersonaSize; +// } + +// export interface IPersonaCoinStyleProps { +// /** +// * Theme. +// */ +// theme: ITheme; + +// /** +// * Custom class name. +// */ +// className?: string; + +// /** +// * Decides the size of the control. +// * @defaultvalue PersonaSize.size48 +// */ +// size?: PersonaSize; +// } + +// export interface IPersonaCoinStyles { +// coin: IStyle; +// imageArea: IStyle; +// image: IStyle; +// initials: IStyle; +// size10NoPresenceIcon: IStyle; +// } + +// export interface IPersonaPresenceProps extends React.Props { +// /** +// * Gets the component ref. +// */ +// componentRef?: (component: IPersonaPresenceProps) => void; + +// /** +// * Call to provide customized styling that will layer on top of the variant rules +// */ +// getStyles?: IStyleFunction; + +// /** +// * Theme provided by HOC. +// */ +// theme?: ITheme; + +// /** +// * Optional custom persona coin size in pixel. +// */ +// coinSize?: number; + +// /** +// * Presence of the person to display - will not display presence if undefined. +// * @defaultvalue PersonaPresence.none +// */ +// presence?: PersonaPresence; +// } + +// export interface IPersonaPresenceStyleProps { +// /** +// * Theme. +// */ +// theme: ITheme; + +// /** +// * Custom class name. +// */ +// className?: string; + +// /** +// * Presence of the person to display - will not display presence if undefined. +// * @defaultvalue PersonaPresence.none +// */ +// presence?: PersonaPresence; +// } + +// export interface IPersonaPresenceStyles { +// presense: IStyle; +// presenseIcon: IStyle; +// } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx index 9d1092e4b75eb..59eedd0a2dfbb 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx @@ -7,13 +7,13 @@ import { getInitials, getNativeProps, getRTL, + IClassNames, } from '../../Utilities'; import { PersonaPresence } from './PersonaPresence'; import { IPersonaProps, - IPersonaCoinProps, - IPersonaCoinStyleProps, - IPersonaCoinStyles, + IPersonaStyleProps, + IPersonaStyles, PersonaPresence as PersonaPresenceEnum, PersonaSize, } from './Persona.types'; @@ -28,7 +28,7 @@ import { import { mergeStyles } from '../../Styling'; import { initialsColorPropToColorCode } from './PersonaInitialsColor'; -const getClassNames = classNamesFunction(); +const getClassNames = classNamesFunction(); const SIZE_TO_PIXELS: { [key: number]: number } = { [PersonaSize.tiny]: 20, @@ -49,27 +49,6 @@ const SIZE_TO_PIXELS: { [key: number]: number } = { [PersonaSize.size100]: 100 }; -// export const PERSONACOIN_SIZE: { [key: number]: string } = { -// // All non-numerically named sizes are deprecated, use the numerically named classes below -// [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsSize10, -// [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsSize24, -// [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsSize28, -// [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSize40, -// [PersonaSize.regular]: '', -// [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsSize72, -// [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsSize100, - -// [PersonaSize.size10]: 'ms-Persona--size10 ' + styles.rootIsSize10, -// [PersonaSize.size16]: 'ms-Persona--size16 ' + styles.rootIsSize16, -// [PersonaSize.size24]: 'ms-Persona--size24 ' + styles.rootIsSize24, -// [PersonaSize.size28]: 'ms-Persona--size28 ' + styles.rootIsSize28, -// [PersonaSize.size32]: 'ms-Persona--size32 ' + styles.rootIsSize32, -// [PersonaSize.size40]: 'ms-Persona--size40 ' + styles.rootIsSize40, -// [PersonaSize.size48]: 'ms-Persona--size48 ' + styles.rootIsSize48, -// [PersonaSize.size72]: 'ms-Persona--size72 ' + styles.rootIsSize72, -// [PersonaSize.size100]: 'ms-Persona--size100 ' + styles.rootIsSize100 -// }; - export interface IPersonaState { isImageLoaded?: boolean; isImageError?: boolean; @@ -77,31 +56,42 @@ export interface IPersonaState { // export class PersonaCoinBase extends React.Component { @customizable('PersonaCoin', ['theme']) -export class PersonaCoinBase extends BaseComponent { +export class PersonaCoinBase extends BaseComponent { public static defaultProps: IPersonaProps = { primaryText: '', size: PersonaSize.size48, presence: PersonaPresenceEnum.none, - imageAlt: '' + imageAlt: '', + coinProps: { + className: '', + }, }; - constructor(props: IPersonaCoinProps) { + private _classNames: IClassNames; + + constructor(props: IPersonaProps) { super(props); this.state = { isImageLoaded: false, isImageError: false }; + + this._classNames = getClassNames(this.props.getStyles!, { + theme: this.props.theme!, + className: this.props.coinProps!.className!, + size: this.props.size, + }); } public render() { const { coinProps, coinSize, - getStyles, imageUrl, onRenderCoin = this._onRenderCoin, onRenderInitials = this._onRenderInitials, + presence, theme, } = this.props; @@ -109,21 +99,15 @@ export class PersonaCoinBase extends BaseComponent { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? (
{ @@ -131,12 +115,11 @@ export class PersonaCoinBase extends BaseComponent
) : - (this.props.presence ? - : - + : ) } @@ -170,14 +151,14 @@ export class PersonaCoinBase extends BaseComponent { + props: IPersonaStyleProps +): IPersonaStyles => { const { className, theme, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 03918d47e11de..ad6cee4fb0f68 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -1,13 +1,13 @@ import { styled } from '../../Utilities'; import { - IPersonaCoinProps, - IPersonaCoinStyleProps, - IPersonaCoinStyles + IPersonaProps, + IPersonaStyleProps, + IPersonaStyles } from './Persona.types'; import { PersonaCoinBase } from './PersonaCoin.base'; import { getStyles } from './PersonaCoin.styles'; -export const PersonaCoin = styled( +export const PersonaCoin = styled( PersonaCoinBase, 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.styles.ts deleted file mode 100644 index 34993d4e50954..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { IPersonaPresenceStyleProps, IPersonaPresenceStyles } from './Persona.types'; -import { - HighContrastSelector, -} from '../../Styling'; - -export const getStyles = ( - props: IPersonaPresenceStyleProps -): IPersonaPresenceStyles => { - const { - className, - theme, - presence: presenceEnum - } = props; - - const { palette, semanticColors } = theme; - - // Skype presence colors - const colorPresenceAvailable = '#7FBA00'; - const colorPresenceAway = '#FCD116'; - const colorPresenceBusy = '#E81123'; - const colorPresenceDndBackground = '#E81123'; - const colorPresenceDndLine = '#FFFFFF'; - const colorPresenceOffline = '#93ABBD'; - const colorPresenceOutOfOffice = palette.magenta; - - // Other presence colors - const colorPresenceBlockedBackground = '#DEDEDE'; - const colorPresenceBlockedLine = '#C72D25'; - const colorPresenceBusyStripeLight = '#E57A79'; - const colorPresenceBusyStripeDark = '#D00E0D'; - const colorPresenceBusyAverage = '#D93B3B'; - - // Presence Sizes - const personaPresenceSize6 = '6px'; - const personaPresenceSize8 = '8px'; - const personaPresenceSize12 = '12px'; - const personaPresenceSize20 = '20px'; - const personaPresenceSize28 = '28px'; - const personaPresenceBorder = '2px'; - - return ({ - presense: [ - 'ms-Persona-presence', - { - backgroundColor: colorPresenceAvailable, - position: 'absolute', - height: personaPresenceSize12, - width: personaPresenceSize12, - borderRadius: '50%', - top: 'auto', - right: `-${personaPresenceBorder}`, - bottom: `-${personaPresenceBorder}`, - border: `${personaPresenceBorder} solid ${palette.white}`, - textAlign: 'center', - boxSizing: 'content-box', - MsHighContrastAdjust: 'none', - - selectors: { - [HighContrastSelector]: { - borderColor: 'Window', - color: 'Window', - backgroundColor: 'WindowText', - }, - - '$presenseIcon': { - color: palette.white, - fontSize: '6px', - lineHeight: personaPresenceSize12, - verticalAlign: 'top', - - selectors: { - [HighContrastSelector]: { - color: 'Window', - } - } - } - } - } - ], - - presenseIcon: ['ms-Persona-presenceIcon'], - }); -}; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index cbc4adc36ab51..b0eebd71e59cc 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -1,40 +1,60 @@ import * as React from 'react'; -import { css } from '../../Utilities'; +import { + BaseComponent, + classNamesFunction, + customizable, + styled, +} from '../../Utilities'; import { Icon } from '../../Icon'; import { IPersonaProps, - PersonaPresence as PersonaPresenceEnum + IPersonaStyleProps, + IPersonaStyles, + PersonaPresence as PersonaPresenceEnum, } from './Persona.types'; -import * as stylesImport from './Persona.scss'; -const styles: any = stylesImport; +import { getStyles } from './Persona.styles'; + const coinSizeFontScaleFactor = 6; const coinSizePresenceScaleFactor = 3; const presenceMaxSize = 40; const presenceFontMaxSize = 20; -export class PersonaPresence extends React.Component { +const getClassNames = classNamesFunction(); + +@customizable('PersonaPresence', ['theme']) +export class PersonaPresenceBase extends BaseComponent { constructor(props: IPersonaProps) { super(props); } public render(): JSX.Element | null { - const { presence, coinSize } = this.props; + const { + coinSize, + presence, + theme, + } = this.props; + const presenceHeightWidth = coinSize && (coinSize / coinSizePresenceScaleFactor < presenceMaxSize ? coinSize / coinSizePresenceScaleFactor : presenceMaxSize); const presenceFontSize = coinSize && (coinSize / coinSizeFontScaleFactor < presenceFontMaxSize ? coinSize / coinSizeFontScaleFactor : presenceFontMaxSize); const coinSizeWithPresenceIconStyle = coinSize ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth + 'px' } : undefined; const coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined; + const classNames = getClassNames(getStyles!, { + theme: theme!, + presence, + }); + if (presence === PersonaPresenceEnum.none) { return null; } return (
@@ -65,4 +85,9 @@ export class PersonaPresence extends React.Component { return userPresence; } } -} \ No newline at end of file +} + +export const PersonaPresence = styled( + PersonaPresenceBase, + getStyles +); diff --git a/packages/office-ui-fabric-react/src/components/Persona/index.ts b/packages/office-ui-fabric-react/src/components/Persona/index.ts index 26d2f1fddaa4e..7d372784c6a7b 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/index.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts @@ -3,3 +3,4 @@ export * from './Persona.base'; export * from './Persona.types'; export * from './PersonaConsts'; export * from './PersonaCoin'; +export * from './PersonaCoin.base'; From 9b8c8be0668e2ed5e8dd5629f757f2ae3d5e5175 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:02:06 -0700 Subject: [PATCH 11/68] Get styles 99% accurate. --- .../src/components/Persona/Persona.styles.ts | 747 +++--------------- .../components/Persona/PersonaCoin.styles.ts | 336 ++++---- .../Persona/PersonaPresence.styles.ts | 332 ++++++++ 3 files changed, 605 insertions(+), 810 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 01dac435c900a..50167121bf6c7 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -1,4 +1,9 @@ -import { IPersonaStyleProps, IPersonaStyles, PersonaPresence, PersonaSize } from './Persona.types'; +import { + IPersonaStyleProps, + IPersonaStyles, + PersonaPresence, + PersonaSize +} from './Persona.types'; import { FontSizes, FontWeights, @@ -8,16 +13,12 @@ import { noWrap, zIndex, } from '../../Styling'; -import { optionalText } from 'office-ui-fabric-react/lib/components/Persona/Persona.scss'; export const getStyles = ( props: IPersonaStyleProps ): IPersonaStyles => { const { className, - isDarkText, - isReadOnly, - isSelectable, showSecondaryText, presence, size, @@ -26,6 +27,8 @@ export const getStyles = ( const { palette } = theme; + const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; + // Persona presence conditionals const isAvailable = presence === PersonaPresence.online; const isAway = presence === PersonaPresence.away; @@ -45,22 +48,6 @@ export const getStyles = ( const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; - // Skype presence colors - const colorPresenceAvailable = '#7FBA00'; - const colorPresenceAway = '#FCD116'; - const colorPresenceBusy = '#E81123'; - const colorPresenceDndBackground = '#E81123'; - const colorPresenceDndLine = '#FFFFFF'; - const colorPresenceOffline = '#93ABBD'; - const colorPresenceOutOfOffice = palette.magenta; - - // Other presence colors - const colorPresenceBlockedBackground = '#DEDEDE'; - const colorPresenceBlockedLine = '#C72D25'; - const colorPresenceBusyStripeLight = '#E57A79'; - const colorPresenceBusyStripeDark = '#D00E0D'; - const colorPresenceBusyAverage = '#D93B3B'; - // Persona Sizes const personaSize10 = '20px'; const personaSize16 = '16px'; @@ -68,20 +55,10 @@ export const getStyles = ( const personaSize28 = '28px'; const personaSize32 = '32px'; const personaSize40 = '40px'; - const personaSize48 = '48px'; + const personaSize48 = '48px'; // default const personaSize72 = '72px'; const personaSize100 = '100px'; - // Presence Sizes - const personaPresenceSize6 = '6px'; - const personaPresenceSize8 = '8px'; - const personaPresenceSize12 = '12px'; - const personaPresenceSize20 = '20px'; - const personaPresenceSize28 = '28px'; - const personaPresenceBorder = '2px'; - - const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; - const sharedTextStyles: IStyle = { color: palette.neutralSecondary, fontWeight: FontWeights.regular, @@ -92,13 +69,13 @@ export const getStyles = ( root: [ 'ms-Persona', normalize, - isSize10 && 'IS_SIZE_10', { color: palette.neutralPrimary, fontSize: FontSizes.medium, fontWeight: FontWeights.regular, position: 'relative', height: personaSize48, + minWidth: personaSize48, display: 'flex', alignItems: 'center', @@ -117,428 +94,87 @@ export const getStyles = ( } }, - /** - * Modifier: Size 10 Persona - */ isSize10 && [ 'ms-Persona--size10', { height: personaSize10, minWidth: personaSize10, - - selectors: { - '$presence': { - right: 'auto', - top: '7px', - left: 0, - border: 0, - height: personaPresenceSize8, - width: personaPresenceSize8, - - selectors: { - [HighContrastSelector]: { - top: '9px', - border: '1px solid WindowText', - }, - - '$presenceIcon': { - display: 'none', - } - } - }, - - '$details': { - paddingLeft: '17px', - }, - - '$primaryText': { - fontSize: FontSizes.small, - lineHeight: personaSize10, - }, - - '$secondaryText': { - display: 'none', - } - } } ], - /** - * Modifier: Size 10 Persona with read only state - * - * This variant includes a semicolon, and is - * most often presented within a People Picker. - */ - isSize10 && isReadOnly && { - padding: 0, - backgroundColor: 'transparent', - - selectors: { - '$primaryText:after': { - content: ';', - } - } - }, - - /** - * Modifier: Size 16 Persona - */ isSize16 && [ 'ms-Persona--size16', { height: personaSize16, minWidth: personaSize16, - - selectors: { - '$placeholder': { - fontSize: '18px', - top: '4px', - }, - - '$presence': { - height: personaPresenceSize6, - width: personaPresenceSize6, - borderWidth: '1.5px', - }, - - '$presenceIcon': { - display: 'none', - }, - - '$primaryText': { - fontSize: FontSizes.medium, - lineHeight: personaSize28, - }, - - '$secondaryText': { - display: 'none', - } - } } ], - /** - * Modifier: Size 24 Persona - */ isSize24 && [ 'ms-Persona--size24', { height: personaSize24, minWidth: personaSize24, - - selectors: { - '$placeholder': { - fontSize: '18px', - top: '4px', - }, - - '$presence': { - height: personaPresenceSize8, - width: personaPresenceSize8, - - selectors: { - '&:after': { - display: 'none', - } - } - }, - - '$presenceIcon': { - display: 'none', - }, - - '$details': { - padding: '0 12px', - }, - - '$primaryText': { - fontSize: FontSizes.medium, - }, - - '$secondaryText': { - display: 'none', - } - } } ], isSize24 && showSecondaryText && { height: '36px', - - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - height: '18px', - lineHeight: '16px', - overflowX: 'hidden', - } - } }, - /** - * Modifier: Size 28 Persona - */ isSize28 && [ 'ms-Persona--size28', { height: personaSize28, minWidth: personaSize28, - - selectors: { - '$placeholder': { - fontSize: '18px', - top: '4px', - }, - - '$presence': { - height: personaPresenceSize8, - width: personaPresenceSize8, - - selectors: { - '&:after': { - display: 'none', - } - } - }, - - '$presenceIcon': { - display: 'none', - }, - - '$details': { - padding: '0 12px', - }, - - '$primaryText': { - fontSize: FontSizes.medium, - }, - - '$secondaryText': { - display: 'none', - } - } } ], isSize28 && showSecondaryText && { height: '32px', - - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - lineHeight: '16px', - height: '16px', - overflowX: 'hidden', - } - } }, - /** - * Modifier: Size 32 Persona - */ isSize32 && [ 'ms-Persona--size32', { height: personaSize32, minWidth: personaSize32, - - selectors: { - '$placeholder': { - fontSize: '28px', - top: '6px', - }, - - '$presence': { - height: personaPresenceSize8, - width: personaPresenceSize8, - }, - - '$presenceIcon': { - display: 'none', - }, - - '$primaryText': { - fontSize: FontSizes.medium, - }, - - '$secondaryText': { - display: 'none', - } - } } ], - isSize32 && showSecondaryText && { - selectors: { - '$primaryText, $secondaryText': { - display: 'block', - height: '16px', - lineHeight: '16px', - overflowX: 'hidden', - } - } - }, - - /** - * Modifier: Size 40 Persona - */ isSize40 && [ 'ms-Persona--size40', { height: personaSize40, minWidth: personaSize40, - - selectors: { - '$placeholder': { - fontSize: '38px', - top: '5px', - }, - - '$primaryText': { - fontSize: FontSizes.medium, - } - } } ], - /** - * Modifier: Size 72 Persona - */ + isSize48 && 'ms-Persona--size48', + isSize72 && [ 'ms-Persona--size72', { height: personaSize72, - maxWidth: personaSize72, - - selectors: { - '$placeholder': { - fontSize: '67px', - top: '10px', - }, - - '$presence': { - height: personaPresenceSize20, - width: personaPresenceSize20, - }, - - '$presenceIcon': { - lineHeight: personaPresenceSize20, - fontSize: FontSizes.small, - }, - - '$primaryText': { - fontSize: FontSizes.xLarge, - }, - - '$secondaryText': { - fontSize: FontSizes.medium, - }, - - '$tertiaryText': { - display: 'block', - } - } + minWidth: personaSize72, } ], - /** - * Modifier: Size 100 Persona - */ isSize100 && [ 'ms-Persona--size100', { height: personaSize100, - maxWidth: personaSize100, - - selectors: { - '$placeholder': { - fontSize: '95px', - top: '12px', - }, - - '$presence': { - height: personaPresenceSize28, - width: personaPresenceSize28, - }, - - '$presenceIcon': { - fontSize: FontSizes.medium, - lineHeight: personaPresenceSize28, - }, - - '$primaryText': { - fontSize: FontSizes.xLarge, - fontWeight: FontWeights.semilight, - }, - - '$secondaryText': { - fontSize: FontSizes.medium, - }, - - '$tertiaryText, $optionalText': { - display: 'block', - } - } - } - ], - - /** - * Modifier: Persona with darker text - * - * Note: Typically applied when the component has a colored background. - */ - isDarkText && [ - 'ms-Persona--DarkText', - { - selectors: { - '$primaryText': { - color: palette.neutralDark, - }, - - '$secondaryText, $tertiaryText, $optionalText': { - color: palette.neutralPrimary, - } - } + minWidth: personaSize100, } ], /** - * Modifier: Selectable Persona - */ - isSelectable && [ - 'ms-Persona--Selected', - { - cursor: 'pointer', - padding: '0 10px', - } - ], - - isSelectable && !isSize100 && [ - { - selectors: { - '&:hover, &:focus': { - backgroundColor: palette.themeLighter, - outline: '1px solid transparent', - } - } - } - ], - - /** - * === Presence indicator variants. === - */ - - /** - * Modifier: Persona with available presence + * Modifiers: presence */ isAvailable && [ - 'ms-Persona--online', + 'ms-Persona--available', { selectors: { - '$presence': { - backgroundColor: colorPresenceAvailable, - }, - [HighContrastSelector]: { backgroundColor: 'WindowText', }, @@ -549,216 +185,17 @@ export const getStyles = ( } } ], - - /** - * Modifier: Persona with away presence - */ - isAway && [ - 'ms-Persona--away', - { - selectors: { - '$presence': { - backgroundColor: colorPresenceAway, - - selectors: { - [HighContrastSelector]: { - backgroundColor: 'WindowText', - } - } - }, - - '$presenceIcon': { - position: 'relative', - left: '1px', - } - } - } - ], - - /** - * Modifier: Persona with blocked presence - */ - isBlocked && [ - 'ms-Persona--blocked', - { - selectors: { - '$presence': { - backgroundColor: palette.white, - - selectors: { - '&:before': { - content: '""', - width: '100%', - height: '100%', - position: 'absolute', - top: 0, - left: 0, - boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, - borderRadius: '50%', - }, - - '&:after': { - content: '""', - width: '100%', - height: '2px', - backgroundColor: colorPresenceBusyAverage, - transform: 'rotate(-45deg)', - position: 'absolute', - top: '40%', - left: 0, - }, - - [HighContrastSelector]: { - color: palette.contrastBlackDisabled, - backgroundColor: 'Window', - - selectors: { - '&:before': { - boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, - }, - - '&:after': { - backgroundColor: palette.contrastBlackDisabled, - } - } - }, - - [HighContrastBWSelector]: { - color: palette.contrastWhiteDisabled, - - selectors: { - '&:before': { - boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, - }, - - '&:after': { - backgroundColor: palette.contrastWhiteDisabled, - } - } - } - } - } - } - } - ], - - isBlocked && isSize72 && [ - { - selectors: { - '$presence': { - selectors: { - '&:after': { - top: '9px', - } - } - } - } - } - ], - - isBlocked && isSize100 && [ - { - selectors: { - '$presence': { - selectors: { - '&:after': { - top: '13px', - } - } - } - } - } - ], - - /** - * Modifier: Persona with busy presence - */ - isBusy && [ - 'ms-Persona--Busy', - { - selectors: { - '$presence': { - backgroundColor: colorPresenceBusyAverage, - - selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } - } - } - } - } - ], - - /** - * Modifier: Persona with do not disturb presence - */ - isDoNotDisturb && [ - 'ms-Persona--DoNotDisturb', - { - selectors: { - '$presence': { - backgroundColor: colorPresenceDndBackground, - - selectors: { - [HighContrastSelector]: { - color: palette.black, - backgroundColor: palette.contrastBlackDisabled, - - selectors: { - '&:before': { - backgroundColor: palette.contrastBlackDisabled, - }, - - '&:after': { - backgroundColor: palette.contrastBlackDisabled, - } - } - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } - } - } - } - } - ], - - /** - * Modifier: Persona with offline presence - */ - isOffline && [ - 'ms-Persona--Offline', - { - selectors: { - '$presence': { - backgroundColor: colorPresenceOffline, - - selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, - boxShadow: `0 0 0 1px ${palette.white} inset`, - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.white, - boxShadow: `0 0 0 1px ${palette.black} inset`, - } - } - } - } - } - ], + isAway && 'ms-Persona--away', + isBlocked && 'ms-Persona--blocked', + isBusy && 'ms-Persona--busy', + isDoNotDisturb && 'ms-Persona--donotdisturb', + isOffline && 'ms-Persona--offline', className, ], placeholder: [ + 'ms-Persona-placeholder', { color: palette.white, position: 'absolute', @@ -767,7 +204,32 @@ export const getStyles = ( fontSize: '47px', top: '9px', zIndex: zIndex.middle, - } + }, + + (isSize16 || isSize24 || isSize28) && { + fontSize: '18px', + top: '4px', + }, + + isSize32 && { + fontSize: '28px', + top: '6px', + }, + + isSize40 && { + fontSize: '38px', + top: '5px', + }, + + isSize72 && { + fontSize: '67px', + top: '10px', + }, + + isSize100 && { + fontSize: '95px', + top: '12px', + }, ], details: [ @@ -780,6 +242,18 @@ export const getStyles = ( display: 'flex', flexDirection: 'column', justifyContent: 'space-around', + }, + + isSize10 && { + paddingLeft: '17px', + }, + + (isSize24 || isSize28) && { + padding: '0 12px', + }, + + isSize28 && { + padding: '0 12px', } ], @@ -790,13 +264,62 @@ export const getStyles = ( color: palette.neutralPrimary, fontWeight: FontWeights.regular, fontSize: FontSizes.large, + }, + + showSecondaryText && { + height: '16px', + lineHeight: '16px', + overflowX: 'hidden', + }, + + isSize10 && { + fontSize: FontSizes.small, + lineHeight: personaSize10, + }, + + (isSize16 || isSize24 || isSize28 || isSize32 || isSize40) && { + fontSize: FontSizes.medium, + }, + + isSize16 && { + lineHeight: personaSize28, + }, + + isSize24 && showSecondaryText && { height: '18px' }, + + isSize72 && { + fontSize: FontSizes.xLarge, + }, + + isSize100 && { + fontSize: FontSizes.xLarge, + fontWeight: FontWeights.semilight, } ], secondaryText: [ 'ms-Persona-secondaryText', noWrap, - sharedTextStyles + sharedTextStyles, + + (isSize10 || isSize16 || isSize24 || isSize28 || isSize32) && { + display: 'none', + }, + + isSize24 && showSecondaryText && { + height: '18px', + }, + + (isSize72 || isSize100) && { + fontSize: FontSizes.medium, + }, + + showSecondaryText && { + display: 'block', + height: '16px', + lineHeight: '16px', + overflowX: 'hidden', + } ], tertiaryText: [ @@ -805,6 +328,10 @@ export const getStyles = ( sharedTextStyles, { display: 'none', + }, + + (isSize72 || isSize100) && { + display: 'block', } ], @@ -814,6 +341,10 @@ export const getStyles = ( sharedTextStyles, { display: 'none', + }, + + isSize100 && { + display: 'block', } ], @@ -821,47 +352,5 @@ export const getStyles = ( 'ms-Persona-textContent', noWrap ], - - presence: [ - 'ms-Persona-presence', - { - backgroundColor: colorPresenceAvailable, - position: 'absolute', - height: personaPresenceSize12, - width: personaPresenceSize12, - borderRadius: '50%', - top: 'auto', - right: `-${personaPresenceBorder}`, - bottom: `-${personaPresenceBorder}`, - border: `${personaPresenceBorder} solid ${palette.white}`, - textAlign: 'center', - boxSizing: 'content-box', - MsHighContrastAdjust: 'none', - - selectors: { - [HighContrastSelector]: { - borderColor: 'Window', - color: 'Window', - backgroundColor: 'WindowText', - } - } - } - ], - - presenceIcon: [ - 'ms-Persona-presenceIcon', - { - color: palette.white, - fontSize: '6px', - lineHeight: personaPresenceSize12, - verticalAlign: 'top', - - selectors: { - [HighContrastSelector]: { - color: 'Window', - } - } - } - ], }); }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts index 5c8599ebdc7c0..04e387ba354d7 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -1,4 +1,8 @@ -import { IPersonaStyleProps, IPersonaStyles, PersonaSize } from './Persona.types'; +import { + IPersonaCoinStyleProps, + IPersonaCoinStyles, + PersonaSize, +} from './Persona.types'; import { HighContrastSelector, FontSizes, @@ -6,12 +10,12 @@ import { } from '../../Styling'; export const getStyles = ( - props: IPersonaStyleProps -): IPersonaStyles => { + props: IPersonaCoinStyleProps +): IPersonaCoinStyles => { const { className, - theme, size, + theme, } = props; const { palette } = theme; @@ -40,176 +44,16 @@ export const getStyles = ( return ({ coin: [ 'ms-Persona-coin', - { - // Insert css properties - - }, - - /** - * Modifier: Size 10 Persona - */ - isSize10 && [ - 'ms-Persona--size10', - { - selectors: { - '$imageArea': { - overflow: 'visible', - background: 'transparent', - height: 0, - width: 0, - } - } - } - ], - - /** - * Modifier: Size 16 Persona - */ - isSize16 && [ - 'ms-Persona--size16', - { - selectors: { - '$imageArea, $image': { - height: personaSize16, - width: personaSize16, - }, - - '$initials': { - fontSize: FontSizes.xSmall, - height: personaSize16, - lineHeight: personaSize16, - } - } - } - ], - - /** - * Modifier: Size 24 Persona - */ - isSize24 && [ - 'ms-Persona--size24', - { - selectors: { - '$imageArea, $image': { - height: personaSize24, - width: personaSize24, - }, - - '$initials': { - fontSize: FontSizes.xSmall, - height: personaSize24, - lineHeight: personaSize24, - } - } - } - ], - - /** - * Modifier: Size 28 Persona - */ - isSize28 && [ - 'ms-Persona--size28', - { - selectors: { - '$imageArea, $image': { - height: personaSize28, - width: personaSize28, - }, - - '$initials': { - fontSize: FontSizes.xSmall, - height: personaSize28, - lineHeight: personaSize28, - } - } - } - ], - - /** - * Modifier: Size 32 Persona - */ - isSize32 && [ - 'ms-Persona--size32', - { - selectors: { - '$imageArea, $image': { - height: personaSize32, - width: personaSize32, - }, - - '$initials': { - fontSize: FontSizes.medium, - height: personaSize32, - lineHeight: personaSize32, - } - } - } - ], - - /** - * Modifier: Size 40 Persona - */ - isSize40 && [ - 'ms-Persona--size40', - { - selectors: { - '$imageArea, $image': { - height: personaSize40, - width: personaSize40, - }, - - '$initials': { - fontSize: FontSizes.medium, - height: personaSize40, - lineHeight: personaSize40, - } - } - } - ], - - /** - * Modifier: Size 72 Persona - */ - isSize72 && [ - 'ms-Persona--size72', - { - selectors: { - '$imageArea, $image': { - height: personaSize72, - width: personaSize72, - }, - - '$initials': { - fontSize: FontSizes.xxLarge, - height: personaSize72, - lineHeight: personaSize72, - } - } - } - ], - - /** - * Modifier: Size 100 Persona - */ - isSize100 && [ - 'ms-Persona--size100', - { - selectors: { - '$imageArea, $image': { - height: personaSize100, - width: personaSize100, - }, - - '$initials': { - fontSize: FontSizes.superLarge, - height: personaSize100, - lineHeight: personaSize100, - } - } - } - ], - - className, + isSize10 && 'ms-Persona--size10', + isSize16 && 'ms-Persona--size16', + isSize24 && 'ms-Persona--size24', + isSize28 && 'ms-Persona--size28', + isSize32 && 'ms-Persona--size32', + isSize40 && 'ms-Persona--size40', + isSize48 && 'ms-Persona--size48', + isSize72 && 'ms-Persona--size72', + isSize100 && 'ms-Persona--size100', + className ], size10NoPresenceIcon: { @@ -229,12 +73,54 @@ export const getStyles = ( height: personaSize48, width: personaSize48, - selectors: { - '$image': { - border: 0, - } - } - } + // selectors: { + // '$image': { + // border: 0, + // } + // } + }, + + isSize10 && { + overflow: 'visible', + background: 'transparent', + height: 0, + width: 0, + }, + + isSize16 && { + height: personaSize16, + width: personaSize16, + }, + + isSize24 && { + height: personaSize24, + width: personaSize24, + }, + + isSize28 && { + height: personaSize28, + width: personaSize28, + }, + + isSize32 && { + height: personaSize32, + width: personaSize32, + }, + + isSize40 && { + height: personaSize40, + width: personaSize40, + }, + + isSize72 && { + height: personaSize72, + width: personaSize72, + }, + + isSize100 && { + height: personaSize100, + width: personaSize100, + }, ], image: [ @@ -246,6 +132,7 @@ export const getStyles = ( left: 0, width: '100%', height: '100%', + border: 0, borderRadius: '50%', perspective: '1px', @@ -255,7 +142,49 @@ export const getStyles = ( display: 'none', } } - } + }, + + isSize10 && { + overflow: 'visible', + background: 'transparent', + height: 0, + width: 0, + }, + + isSize16 && { + height: personaSize16, + width: personaSize16, + }, + + isSize24 && { + height: personaSize24, + width: personaSize24, + }, + + isSize28 && { + height: personaSize28, + width: personaSize28, + }, + + isSize32 && { + height: personaSize32, + width: personaSize32, + }, + + isSize40 && { + height: personaSize40, + width: personaSize40, + }, + + isSize72 && { + height: personaSize72, + width: personaSize72, + }, + + isSize100 && { + height: personaSize100, + width: personaSize100, + }, ], initials: [ @@ -277,6 +206,51 @@ export const getStyles = ( backgroundColor: 'Window !important', } } + }, + + (isSize16 || isSize24 || isSize28) && { + fontSize: FontSizes.xSmall, + }, + + isSize16 && { + height: personaSize16, + lineHeight: personaSize16, + }, + + isSize24 && { + height: personaSize24, + lineHeight: personaSize24, + }, + + isSize28 && { + height: personaSize28, + lineHeight: personaSize28, + }, + + (isSize32 || isSize40) && { + fontSize: FontSizes.medium, + }, + + isSize32 && { + height: personaSize32, + lineHeight: personaSize32, + }, + + isSize40 && { + height: personaSize40, + lineHeight: personaSize40, + }, + + isSize72 && { + fontSize: FontSizes.xxLarge, + height: personaSize72, + lineHeight: personaSize72, + }, + + isSize100 && { + fontSize: FontSizes.superLarge, + height: personaSize100, + lineHeight: personaSize100, } ] }); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts new file mode 100644 index 0000000000000..8cf0baad1d85a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -0,0 +1,332 @@ +import { + IPersonaPresenceStyleProps, + IPersonaPresenceStyles, + PersonaPresence, + PersonaSize, +} from './Persona.types'; +import { + FontSizes, + HighContrastSelector, +} from '../../Styling'; + +export const getStyles = ( + props: IPersonaPresenceStyleProps +): IPersonaPresenceStyles => { + const { + className, + theme, + presence, + size, + } = props; + + const { palette } = theme; + + const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; + + // Persona presence conditionals + const isAvailable = presence === PersonaPresence.online; + const isAway = presence === PersonaPresence.away; + const isBlocked = presence === PersonaPresence.blocked; + const isBusy = presence === PersonaPresence.busy; + const isDoNotDisturb = presence === PersonaPresence.dnd; + const isOffline = presence === PersonaPresence.offline; + + // Persona size conditionals + const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; + const isSize16 = size === PersonaSize.size16; + const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; + const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; + const isSize32 = size === PersonaSize.size32; + const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; + const isSize48 = size === PersonaSize.size48; + const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; + const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; + + // Skype presence colors + const colorPresenceAvailable = '#7FBA00'; + const colorPresenceAway = '#FCD116'; + const colorPresenceBusy = '#E81123'; + const colorPresenceDndBackground = '#E81123'; + const colorPresenceDndLine = '#FFFFFF'; + const colorPresenceOffline = '#93ABBD'; + // const colorPresenceOutOfOffice = palette.magenta; + + // Other presence colors + // const colorPresenceBlockedBackground = '#DEDEDE'; + // const colorPresenceBlockedLine = '#C72D25'; + // const colorPresenceBusyStripeLight = '#E57A79'; + // const colorPresenceBusyStripeDark = '#D00E0D'; + const colorPresenceBusyAverage = '#D93B3B'; + + // Presence Sizes + const personaPresenceSize6 = '6px'; + const personaPresenceSize8 = '8px'; + const personaPresenceSize12 = '12px'; + const personaPresenceSize20 = '20px'; + const personaPresenceSize28 = '28px'; + const personaPresenceBorder = '2px'; + + return ({ + presence: [ + 'ms-Persona-presence', + { + backgroundColor: colorPresenceAvailable, + position: 'absolute', + height: personaPresenceSize12, + width: personaPresenceSize12, + borderRadius: '50%', + top: 'auto', + right: `-${personaPresenceBorder}`, + bottom: `-${personaPresenceBorder}`, + border: `${personaPresenceBorder} solid ${palette.white}`, + textAlign: 'center', + boxSizing: 'content-box', + MsHighContrastAdjust: 'none', + + selectors: { + [HighContrastSelector]: { + borderColor: 'Window', + color: 'Window', + backgroundColor: 'WindowText', + } + } + }, + + isSize10 && { + right: 'auto', + top: '7px', + left: 0, + border: 0, + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + [HighContrastSelector]: { + top: '9px', + border: '1px solid WindowText', + } + } + }, + + isSize16 && { + height: personaPresenceSize6, + width: personaPresenceSize6, + borderWidth: '1.5px', + }, + + isSize24 && { + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + '&:after': { + display: 'none', + } + } + }, + + isSize28 && { + height: personaPresenceSize8, + width: personaPresenceSize8, + + selectors: { + '&:after': { + display: 'none', + } + } + }, + + isSize32 && { + height: personaPresenceSize8, + width: personaPresenceSize8, + }, + + isSize72 && { + height: personaPresenceSize20, + width: personaPresenceSize20, + }, + + isSize100 && { + height: personaPresenceSize28, + width: personaPresenceSize28, + }, + + isAvailable && { + backgroundColor: colorPresenceAvailable, + }, + + isAway && { + backgroundColor: colorPresenceAway, + + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + } + } + }, + + isBlocked && { + backgroundColor: palette.white, + + selectors: { + '&:before': { + content: '""', + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, + borderRadius: '50%', + }, + + '&:after': { + content: '""', + width: '100%', + height: '2px', + backgroundColor: colorPresenceBusyAverage, + transform: 'rotate(-45deg)', + position: 'absolute', + top: '40%', + left: 0, + }, + + [HighContrastSelector]: { + color: palette.contrastBlackDisabled, + backgroundColor: 'Window', + + selectors: { + '&:before': { + boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, + }, + + '&:after': { + backgroundColor: palette.contrastBlackDisabled, + } + } + }, + + [HighContrastBWSelector]: { + color: palette.contrastWhiteDisabled, + + selectors: { + '&:before': { + boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, + }, + + '&:after': { + backgroundColor: palette.contrastWhiteDisabled, + } + } + } + } + }, + + isBlocked && isSize72 && { + selectors: { + '&:after': { + top: '9px', + } + } + }, + + isBlocked && isSize100 && { + selectors: { + '&:after': { + top: '13px', + } + } + }, + + isBusy && { + backgroundColor: colorPresenceBusyAverage, + + selectors: { + [HighContrastSelector]: { + backgroundColor: palette.contrastBlackDisabled, + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, + } + } + }, + + isDoNotDisturb && { + backgroundColor: colorPresenceDndBackground, + + selectors: { + [HighContrastSelector]: { + color: palette.black, + backgroundColor: palette.contrastBlackDisabled, + + selectors: { + '&:before': { + backgroundColor: palette.contrastBlackDisabled, + }, + + '&:after': { + backgroundColor: palette.contrastBlackDisabled, + } + } + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, + } + } + }, + + isOffline && { + backgroundColor: colorPresenceOffline, + + selectors: { + [HighContrastSelector]: { + backgroundColor: palette.contrastBlackDisabled, + boxShadow: `0 0 0 1px ${palette.white} inset`, + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.white, + boxShadow: `0 0 0 1px ${palette.black} inset`, + } + } + }, + ], + + presenceIcon: [ + 'ms-Persona-presenceIcon', + { + color: palette.white, + fontSize: '6px', + lineHeight: personaPresenceSize12, + verticalAlign: 'top', + + selectors: { + [HighContrastSelector]: { + color: 'Window', + } + } + }, + + (isSize10 || isSize16 || isSize24 || isSize28 || isSize32) && { + display: 'none', + }, + + isSize72 && { + fontSize: FontSizes.small, + lineHeight: personaPresenceSize20, + }, + + isSize100 && { + fontSize: FontSizes.medium, + lineHeight: personaPresenceSize28, + }, + + isAway && { + position: 'relative', + left: '1px', + }, + ] + }); +}; From e7d223d88c414c57bd0fcff18ad61ac8ee3c908f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:03:11 -0700 Subject: [PATCH 12/68] Update types to shared. --- .../components/ActivityItem/ActivityItem.tsx | 4 +- .../ActivityItem/ActivityItem.types.ts | 4 +- .../src/components/Facepile/Facepile.types.ts | 4 +- .../src/components/Persona/Persona.types.ts | 393 +++++++----------- 4 files changed, 155 insertions(+), 250 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx index 70259d77f39ec..2766aebd22e37 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx @@ -6,7 +6,7 @@ import { BaseComponent } from '../../Utilities'; import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types'; import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames'; import { getStyles } from './ActivityItem.styles'; -import { PersonaSize, PersonaCoin, IPersonaProps } from '../../Persona'; +import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona'; export class ActivityItem extends BaseComponent { private _classNames: IActivityItemClassNames; @@ -91,7 +91,7 @@ export class ActivityItem extends BaseComponent { // If activityPersonas is an array of persona props, build the persona cluster element. private _onRenderPersonaArray = (props: IActivityItemProps): JSX.Element | null => { let personaElement: JSX.Element | null = null; - const activityPersonas = props.activityPersonas as Array; + const activityPersonas = props.activityPersonas as Array; if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) { const personaList: Array = []; const showSize16Personas = (activityPersonas.length > 1 || props.isCompact); diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts index 8a054fe144979..b20ecbaa06298 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { IStyle } from '../../Styling'; import { IRenderFunction } from '../../Utilities'; -import { IPersonaProps } from '../../Persona'; +import { IPersonaSharedProps } from '../../Persona'; // Please keep alphabetized export interface IActivityItemProps extends React.AllHTMLAttributes { @@ -24,7 +24,7 @@ export interface IActivityItemProps extends React.AllHTMLAttributes /** * If activityIcon is not set, then the persona props in this array will be used as the icon for the this activity item. */ - activityPersonas?: Array; + activityPersonas?: Array; /** * An element containing the text of comments or @mention messages. If no comments, commentText, or onRenderComments are included, no comments are shown. diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts index 2b1ee1f35d51f..ed9706c3dea15 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { Facepile } from './Facepile'; import { IButtonProps } from '../Button/index'; import { - IPersonaProps, + IPersonaSharedProps, PersonaInitialsColor, PersonaSize } from '../Persona/index'; @@ -56,7 +56,7 @@ export interface IFacepileProps extends React.Props { overflowButtonType?: OverflowButtonType; /** Method to access properties on the underlying Persona control */ - getPersonaProps?: (persona: IFacepilePersona) => IPersonaProps; + getPersonaProps?: (persona: IFacepilePersona) => IPersonaSharedProps; /** * Optional class for Facepile root element. diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index fad72ff300fcd..9d3ed5c80ee86 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { IRenderFunction } from '../../Utilities'; import { PersonaBase } from './Persona.base'; -import { PersonaCoinBase } from './PersonaCoin.base'; +import { PersonaCoinBase } from './PersonaCoin'; import { PersonaPresenceBase } from './PersonaPresence'; import { ImageLoadState } from '../../Image'; import { IStyle, ITheme } from '../../Styling'; @@ -11,13 +11,7 @@ export interface IPersona { } -export interface IPersonaProps extends React.HTMLAttributes { - /** - * Optional callback to access the IPersona interface. Use this instead of ref for accessing - * the public methods and properties of the component. - */ - componentRef?: (component: IPersona) => void; - +export interface IPersonaSharedProps extends React.HTMLAttributes { /** * Primary text to display, usually the name of the person. */ @@ -37,7 +31,7 @@ export interface IPersonaProps extends React.HTMLAttributes { /** * Optional custom renderer for the coin */ - onRenderCoin?: IRenderFunction; + onRenderCoin?: IRenderFunction; /** * If true, adds the css class 'is-fadeIn' to the image. @@ -70,7 +64,7 @@ export interface IPersonaProps extends React.HTMLAttributes { /** * Optional custom renderer for the initials */ - onRenderInitials?: IRenderFunction; + onRenderInitials?: IRenderFunction; /** * Optional callback for when loading state of the photo changes @@ -124,11 +118,6 @@ export interface IPersonaProps extends React.HTMLAttributes { */ hidePersonaDetails?: boolean; - /** - * Additional CSS class(es) to apply to the Persona - */ - className?: string; - /* * If true, show the secondary text line regardless of the size of the persona */ @@ -144,15 +133,158 @@ export interface IPersonaProps extends React.HTMLAttributes { */ coinProps?: React.HTMLAttributes; + /** + * Theme provided by HOC. + */ + theme?: ITheme; +} + +export interface IPersonaProps extends IPersonaSharedProps { + /** + * Optional callback to access the IPersona interface. Use this instead of ref for accessing + * the public methods and properties of the component. + */ + componentRef?: (component: IPersona) => void; + + /** + * Additional CSS class(es) to apply to the Persona + */ + className?: string; + /** * Call to provide customized styling that will layer on top of variant rules */ getStyles?: IStyleFunction; +} +export interface IPersonaStyleProps { /** - * Theme provided by HOC. + * Theme. */ - theme?: ITheme; + theme: ITheme; + + /** + * Custom class name. + */ + className?: string; + + /** + * Optional custom persona coin size in pixel. + */ + coinSize?: number; + + /** + * Decides the size of the control. + * @defaultvalue PersonaSize.size48 + */ + size?: PersonaSize; + + /** + * Presence of the person to display - will not display presence if undefined. + * @defaultvalue PersonaPresence.none + */ + presence?: PersonaPresence; + + /* + * If true, show the secondary text line regardless of the size of the persona + */ + showSecondaryText?: boolean; +} + +export interface IPersonaStyles { + root: IStyle; + placeholder: IStyle; + details: IStyle; + primaryText: IStyle; + secondaryText: IStyle; + tertiaryText: IStyle; + optionalText: IStyle; + textContent: IStyle; +} + +export interface IPersonaCoinProps extends IPersonaSharedProps { + /** + * Gets the component ref. + */ + componentRef?: (component: IPersonaCoinProps) => void; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; + + /** + * Additional css class to apply to the PersonaCoin + * @defaultvalue undefined + */ + className?: string; +} + +export interface IPersonaCoinStyleProps { + /** + * Theme. + */ + theme: ITheme; + + /** + * Custom class name. + */ + className?: string; + + /** + * Decides the size of the control. + * @defaultvalue PersonaSize.size48 + */ + size?: PersonaSize; +} + +export interface IPersonaCoinStyles { + coin: IStyle; + imageArea: IStyle; + image: IStyle; + initials: IStyle; + size10NoPresenceIcon: IStyle; +} + +export interface IPersonaPresenceProps extends IPersonaSharedProps { + /** + * Gets the component ref. + */ + componentRef?: (component: IPersonaPresenceProps) => void; + + /** + * Call to provide customized styling that will layer on top of the variant rules + */ + getStyles?: IStyleFunction; +} + +export interface IPersonaPresenceStyleProps { + /** + * Theme. + */ + theme: ITheme; + + /** + * Custom class name. + */ + className?: string; + + /** + * Presence of the person to display - will not display presence if undefined. + * @defaultvalue PersonaPresence.none + */ + presence?: PersonaPresence; + + /** + * Decides the size of the control. + * @defaultvalue PersonaSize.size48 + */ + size?: PersonaSize; +} + +export interface IPersonaPresenceStyles { + presence: IStyle; + presenceIcon: IStyle; } export enum PersonaSize { @@ -238,230 +370,3 @@ export enum PersonaInitialsColor { */ transparent = 15, } - -export interface IPersonaStyleProps { - /** - * Theme. - */ - theme: ITheme; - - /** - * Custom class name. - */ - className?: string; - - /** - * Optional custom persona coin size in pixel. - */ - coinSize?: number; - - /** - * Decides the size of the control. - * @defaultvalue PersonaSize.size48 - */ - size?: PersonaSize; - - /** - * Presence of the person to display - will not display presence if undefined. - * @defaultvalue PersonaPresence.none - */ - presence?: PersonaPresence; - - /* - * If true, show the secondary text line regardless of the size of the persona - */ - showSecondaryText?: boolean; - - isDarkText?: boolean; - isReadOnly?: boolean; - isSelectable?: boolean; - // extraLarge?: boolean; -} - -export interface IPersonaStyles { - root?: IStyle; - placeholder?: IStyle; - details?: IStyle; - primaryText?: IStyle; - secondaryText?: IStyle; - tertiaryText?: IStyle; - optionalText?: IStyle; - textContent?: IStyle; - coin?: IStyle; - imageArea?: IStyle; - image?: IStyle; - initials?: IStyle; - size10NoPresenceIcon?: IStyle; - presence?: IStyle; - presenceIcon?: IStyle; -} - -// export interface IPersonaCoinProps extends React.Props { -// /** -// * Gets the component ref. -// */ -// componentRef?: (component: IPersonaCoinProps) => void; - -// /** -// * Call to provide customized styling that will layer on top of the variant rules -// */ -// getStyles?: IStyleFunction; - -// /** -// * Theme provided by HOC. -// */ -// theme?: ITheme; - -// /** -// * Additional css class to apply to the PersonaCoin -// * @defaultvalue undefined -// */ -// className?: string; - -// /** -// * Optional HTML element props for Persona coin. -// */ -// coinProps?: React.HTMLAttributes; - -// /** -// * Optional custom persona coin size in pixel. -// */ -// coinSize?: number; - -// /** -// * Alt text for the image to use. Defaults to an empty string. -// */ -// imageAlt?: string; - -// /** -// * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. -// */ -// imageUrl?: string; - -// /** -// * If true, adds the css class 'is-fadeIn' to the image. -// */ -// imageShouldFadeIn?: boolean; - -// /** -// * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until -// * it is successfully loaded. This disables imageShouldFadeIn. -// * @defaultvalue false -// */ -// imageShouldStartVisible?: boolean; - -// /** -// * The user's initials to display in the image area when there is no image. -// * @defaultvalue [Derived from primaryText] -// */ -// imageInitials?: string; - -// /** -// * Optional callback for when loading state of the photo changes -// */ -// onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void; - -// /** -// * Optional custom renderer for the coin -// */ -// onRenderCoin?: IRenderFunction; - -// /** -// * Optional custom renderer for the initials -// */ -// onRenderInitials?: IRenderFunction; - -// /** -// * Presence of the person to display - will not display presence if undefined. -// * @defaultvalue PersonaPresence.none -// */ -// presence?: PersonaPresence; - -// /** -// * Primary text to display, usually the name of the person. -// */ -// primaryText?: string; - -// /** -// * Decides the size of the control. -// * @defaultvalue PersonaSize.size48 -// */ -// size?: PersonaSize; -// } - -// export interface IPersonaCoinStyleProps { -// /** -// * Theme. -// */ -// theme: ITheme; - -// /** -// * Custom class name. -// */ -// className?: string; - -// /** -// * Decides the size of the control. -// * @defaultvalue PersonaSize.size48 -// */ -// size?: PersonaSize; -// } - -// export interface IPersonaCoinStyles { -// coin: IStyle; -// imageArea: IStyle; -// image: IStyle; -// initials: IStyle; -// size10NoPresenceIcon: IStyle; -// } - -// export interface IPersonaPresenceProps extends React.Props { -// /** -// * Gets the component ref. -// */ -// componentRef?: (component: IPersonaPresenceProps) => void; - -// /** -// * Call to provide customized styling that will layer on top of the variant rules -// */ -// getStyles?: IStyleFunction; - -// /** -// * Theme provided by HOC. -// */ -// theme?: ITheme; - -// /** -// * Optional custom persona coin size in pixel. -// */ -// coinSize?: number; - -// /** -// * Presence of the person to display - will not display presence if undefined. -// * @defaultvalue PersonaPresence.none -// */ -// presence?: PersonaPresence; -// } - -// export interface IPersonaPresenceStyleProps { -// /** -// * Theme. -// */ -// theme: ITheme; - -// /** -// * Custom class name. -// */ -// className?: string; - -// /** -// * Presence of the person to display - will not display presence if undefined. -// * @defaultvalue PersonaPresence.none -// */ -// presence?: PersonaPresence; -// } - -// export interface IPersonaPresenceStyles { -// presense: IStyle; -// presenseIcon: IStyle; -// } \ No newline at end of file From b6525fe4b7ddb02278bf1e3e4372ab4d02983860 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:03:32 -0700 Subject: [PATCH 13/68] Update exports --- packages/office-ui-fabric-react/src/PersonaCoin.ts | 4 +--- .../office-ui-fabric-react/src/components/Persona/index.ts | 2 -- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/PersonaCoin.ts b/packages/office-ui-fabric-react/src/PersonaCoin.ts index 62003eef0c6e0..f74dace95a2bb 100644 --- a/packages/office-ui-fabric-react/src/PersonaCoin.ts +++ b/packages/office-ui-fabric-react/src/PersonaCoin.ts @@ -1,3 +1 @@ -export * from './components/Persona/PersonaCoin'; -export * from './components/Persona/Persona.types'; -export * from './components/Persona/PersonaConsts'; +export * from './components/Persona/index'; diff --git a/packages/office-ui-fabric-react/src/components/Persona/index.ts b/packages/office-ui-fabric-react/src/components/Persona/index.ts index 7d372784c6a7b..354ad123f26cf 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/index.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts @@ -1,6 +1,4 @@ export * from './Persona'; export * from './Persona.base'; export * from './Persona.types'; -export * from './PersonaConsts'; export * from './PersonaCoin'; -export * from './PersonaCoin.base'; From 5370ee88ae9550e8f468adf4f4642ee3fbd1852c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:04:14 -0700 Subject: [PATCH 14/68] Export PersonaCoinBase from PersonaCoin.tsx --- .../components/Persona/PersonaCoin.base.tsx | 199 ---------------- .../src/components/Persona/PersonaCoin.tsx | 219 +++++++++++++++++- 2 files changed, 212 insertions(+), 206 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx deleted file mode 100644 index 59eedd0a2dfbb..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.base.tsx +++ /dev/null @@ -1,199 +0,0 @@ -import * as React from 'react'; -import { - BaseComponent, - classNamesFunction, - customizable, - divProperties, - getInitials, - getNativeProps, - getRTL, - IClassNames, -} from '../../Utilities'; -import { PersonaPresence } from './PersonaPresence'; -import { - IPersonaProps, - IPersonaStyleProps, - IPersonaStyles, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, -} from './Persona.types'; -import { - Icon -} from '../../Icon'; -import { - Image, - ImageFit, - ImageLoadState -} from '../../Image'; -import { mergeStyles } from '../../Styling'; -import { initialsColorPropToColorCode } from './PersonaInitialsColor'; - -const getClassNames = classNamesFunction(); - -const SIZE_TO_PIXELS: { [key: number]: number } = { - [PersonaSize.tiny]: 20, - [PersonaSize.extraExtraSmall]: 24, - [PersonaSize.extraSmall]: 28, - [PersonaSize.small]: 40, - [PersonaSize.regular]: 48, - [PersonaSize.large]: 72, - [PersonaSize.extraLarge]: 100, - - [PersonaSize.size24]: 24, - [PersonaSize.size28]: 28, - [PersonaSize.size10]: 20, - [PersonaSize.size32]: 32, - [PersonaSize.size40]: 40, - [PersonaSize.size48]: 48, - [PersonaSize.size72]: 72, - [PersonaSize.size100]: 100 -}; - -export interface IPersonaState { - isImageLoaded?: boolean; - isImageError?: boolean; -} - -// export class PersonaCoinBase extends React.Component { -@customizable('PersonaCoin', ['theme']) -export class PersonaCoinBase extends BaseComponent { - public static defaultProps: IPersonaProps = { - primaryText: '', - size: PersonaSize.size48, - presence: PersonaPresenceEnum.none, - imageAlt: '', - coinProps: { - className: '', - }, - }; - - private _classNames: IClassNames; - - constructor(props: IPersonaProps) { - super(props); - - this.state = { - isImageLoaded: false, - isImageError: false - }; - - this._classNames = getClassNames(this.props.getStyles!, { - theme: this.props.theme!, - className: this.props.coinProps!.className!, - size: this.props.size, - }); - } - - public render() { - const { - coinProps, - coinSize, - imageUrl, - onRenderCoin = this._onRenderCoin, - onRenderInitials = this._onRenderInitials, - presence, - theme, - } = this.props; - - const size = this.props.size as PersonaSize; - const divProps = getNativeProps(this.props, divProperties); - const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined; - - return ( -
- { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? ( -
- { - !this.state.isImageLoaded && - (!imageUrl || this.state.isImageError) && - ( - - ) - } - { onRenderCoin(this.props, this._onRenderCoin) } - -
- ) : - (this.props.presence - ? - : - ) - } - { this.props.children } -
- ); - } - - private _onRenderCoin = (props: IPersonaProps): JSX.Element | null => { - const { - coinSize, - imageUrl, - imageAlt, - imageShouldFadeIn, - imageShouldStartVisible, - } = this.props; - - const size = this.props.size as PersonaSize; - - return ( - { - ); - } - - private _onRenderInitials = (props: IPersonaProps): JSX.Element => { - let { imageInitials } = props; - const { primaryText } = props; - - const isRTL = getRTL(); - - imageInitials = imageInitials || getInitials(primaryText, isRTL); - - return ( - imageInitials !== '' ? - { imageInitials } : - - ); - } - - private _onPhotoLoadingStateChange = (loadState: ImageLoadState) => { - this.setState({ - isImageLoaded: loadState === ImageLoadState.loaded, - isImageError: loadState === ImageLoadState.error - }); - - if (this.props.onPhotoLoadingStateChange) { - this.props.onPhotoLoadingStateChange(loadState); - } - } -} \ 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.tsx index ad6cee4fb0f68..ce4b3aae41cb0 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -1,13 +1,218 @@ -import { styled } from '../../Utilities'; +import * as React from 'react'; import { - IPersonaProps, - IPersonaStyleProps, - IPersonaStyles + BaseComponent, + classNamesFunction, + customizable, + divProperties, + getInitials, + getNativeProps, + getRTL, + styled, +} from '../../Utilities'; +import { PersonaPresence } from './PersonaPresence'; +import { + IPersonaCoinProps, + IPersonaCoinStyleProps, + IPersonaCoinStyles, + IPersonaPresenceProps, + PersonaPresence as PersonaPresenceEnum, + PersonaSize, } from './Persona.types'; -import { PersonaCoinBase } from './PersonaCoin.base'; +import { + Icon +} from '../../Icon'; +import { + Image, + ImageFit, + ImageLoadState +} from '../../Image'; +import { mergeStyles } from '../../Styling'; +import { initialsColorPropToColorCode } from './PersonaInitialsColor'; import { getStyles } from './PersonaCoin.styles'; -export const PersonaCoin = styled( +const getClassNames = classNamesFunction(); + +const SIZE_TO_PIXELS: { [key: number]: number } = { + [PersonaSize.tiny]: 20, + [PersonaSize.extraExtraSmall]: 24, + [PersonaSize.extraSmall]: 28, + [PersonaSize.small]: 40, + [PersonaSize.regular]: 48, + [PersonaSize.large]: 72, + [PersonaSize.extraLarge]: 100, + + [PersonaSize.size24]: 24, + [PersonaSize.size28]: 28, + [PersonaSize.size10]: 20, + [PersonaSize.size32]: 32, + [PersonaSize.size40]: 40, + [PersonaSize.size48]: 48, + [PersonaSize.size72]: 72, + [PersonaSize.size100]: 100 +}; + +export interface IPersonaState { + isImageLoaded?: boolean; + isImageError?: boolean; +} + +@customizable('PersonaCoin', ['theme']) +export class PersonaCoinBase extends BaseComponent { + public static defaultProps: IPersonaCoinProps = { + primaryText: '', + size: PersonaSize.size48, + presence: PersonaPresenceEnum.none, + imageAlt: '', + coinProps: { + className: '', + }, + }; + + constructor(props: IPersonaCoinProps) { + super(props); + + this.state = { + isImageLoaded: false, + isImageError: false + }; + } + + public render() { + const { + coinProps, + coinSize, + getStyles: getStylesProp, + imageUrl, + onRenderCoin = this._onRenderCoin, + onRenderInitials = this._onRenderInitials, + presence, + theme, + } = this.props; + + const size = this.props.size as PersonaSize; + const divProps = getNativeProps(this.props, divProperties); + const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined; + + const personaPresenceProps: IPersonaPresenceProps = { + coinSize, + presence, + theme, + size, + }; + + const classNames = getClassNames(getStylesProp! || getStyles!, { + theme: theme!, + className: coinProps!.className, + size, + }); + + return ( +
+ { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? ( +
+ { + !this.state.isImageLoaded && + (!imageUrl || this.state.isImageError) && + ( + + ) + } + { onRenderCoin(this.props, this._onRenderCoin) } + +
+ ) : + (this.props.presence + ? + : + ) + } + { this.props.children } +
+ ); + } + + private _onRenderCoin = (props: IPersonaCoinProps): JSX.Element | null => { + const { + coinSize, + getStyles: getStylesProp, + imageUrl, + imageAlt, + imageShouldFadeIn, + imageShouldStartVisible, + theme, + } = this.props; + + const size = this.props.size as PersonaSize; + + const classNames = getClassNames(getStylesProp! || getStyles!, { + theme: theme!, + size + }); + + return ( + { + ); + } + + private _onRenderInitials = (props: IPersonaCoinProps): JSX.Element => { + let { imageInitials } = props; + const { primaryText } = props; + + const isRTL = getRTL(); + + imageInitials = imageInitials || getInitials(primaryText, isRTL); + + return ( + imageInitials !== '' ? + { imageInitials } : + + ); + } + + private _onPhotoLoadingStateChange = (loadState: ImageLoadState) => { + this.setState({ + isImageLoaded: loadState === ImageLoadState.loaded, + isImageError: loadState === ImageLoadState.error + }); + + if (this.props.onPhotoLoadingStateChange) { + this.props.onPhotoLoadingStateChange(loadState); + } + } +} + +export const PersonaCoin = styled( PersonaCoinBase, getStyles -); +); \ No newline at end of file From bd78c17226a87a08653a248c24dc84415a7e8a42 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:04:52 -0700 Subject: [PATCH 15/68] Finish PersonaPresenceBase --- .../src/components/Persona/PersonaPresence.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index b0eebd71e59cc..8033a7230006c 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -7,23 +7,23 @@ import { } from '../../Utilities'; import { Icon } from '../../Icon'; import { - IPersonaProps, - IPersonaStyleProps, - IPersonaStyles, + IPersonaPresenceProps, + IPersonaPresenceStyleProps, + IPersonaPresenceStyles, PersonaPresence as PersonaPresenceEnum, } from './Persona.types'; -import { getStyles } from './Persona.styles'; +import { getStyles } from './PersonaPresence.styles'; const coinSizeFontScaleFactor = 6; const coinSizePresenceScaleFactor = 3; const presenceMaxSize = 40; const presenceFontMaxSize = 20; -const getClassNames = classNamesFunction(); +const getClassNames = classNamesFunction(); @customizable('PersonaPresence', ['theme']) -export class PersonaPresenceBase extends BaseComponent { - constructor(props: IPersonaProps) { +export class PersonaPresenceBase extends BaseComponent { + constructor(props: IPersonaPresenceProps) { super(props); } @@ -32,6 +32,7 @@ export class PersonaPresenceBase extends BaseComponent { coinSize, presence, theme, + size, } = this.props; const presenceHeightWidth = coinSize && (coinSize / coinSizePresenceScaleFactor < presenceMaxSize ? coinSize / coinSizePresenceScaleFactor : presenceMaxSize); @@ -42,6 +43,7 @@ export class PersonaPresenceBase extends BaseComponent { const classNames = getClassNames(getStyles!, { theme: theme!, presence, + size, }); if (presence === PersonaPresenceEnum.none) { @@ -87,7 +89,7 @@ export class PersonaPresenceBase extends BaseComponent { } } -export const PersonaPresence = styled( +export const PersonaPresence = styled( PersonaPresenceBase, getStyles ); From 59a4ce39d4bcc326bb09123d47972a517bfba589 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:05:18 -0700 Subject: [PATCH 16/68] Cleanup and adjust types --- .../src/components/Persona/Persona.base.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index aba0e5a2f6e58..a33e7eda8a20a 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -9,6 +9,7 @@ import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip import { PersonaCoin } from './PersonaCoin'; import { IPersonaProps, + IPersonaSharedProps, PersonaPresence as PersonaPresenceEnum, PersonaSize, IPersonaStyleProps, @@ -64,28 +65,25 @@ export class PersonaBase extends BaseComponent { theme, } = this.props; - const personaCoinProps = { + const personaCoinProps: IPersonaSharedProps = { coinProps, coinSize, - imageUrl, imageAlt, imageInitials, + imageShouldFadeIn, + imageShouldStartVisible, + imageUrl, initialsColor, + onPhotoLoadingStateChange, + onRenderCoin, presence, primaryText, - imageShouldFadeIn, - imageShouldStartVisible, size, - onPhotoLoadingStateChange, - onRenderCoin }; const classNames = getClassNames(getStyles!, { theme: theme!, className, - // isDarkText, - // isReadOnly, - // isSelectable, showSecondaryText, presence, size, From e0f5ea3a7e5d0a817ef7684b7f61fd75bdc4908c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:05:43 -0700 Subject: [PATCH 17/68] Update test for decorated Persona --- .../src/components/Facepile/Facepile.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx index 8127da0ffca43..3fc6b70cf06a3 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx @@ -176,7 +176,8 @@ describe('Facepile', () => { expect(wrapper.find(PersonaCoin).length).toEqual(facepilePersonas.length); wrapper.find(PersonaCoin).forEach((node) => { - expect(node.dive().hasClass('ms-Persona--size24')).toBeTruthy(); + // Need multiple Dives since PersonaCoin is decorated + expect(node.dive().dive().dive().hasClass('ms-Persona--size24')).toBeTruthy(); }); // Test small size renders @@ -188,7 +189,8 @@ describe('Facepile', () => { expect(wrapper.find(PersonaCoin).length).toEqual(facepilePersonas.length); wrapper.find(PersonaCoin).forEach((node) => { - expect(node.dive().hasClass('ms-Persona--size40')).toBeTruthy(); + // Need multiple Dives since PersonaCoin is decorated + expect(node.dive().dive().dive().hasClass('ms-Persona--size40')).toBeTruthy(); }); }); From 1eed7114e90f9b74577a03bfc1f1e38b7d637b7a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:05:58 -0700 Subject: [PATCH 18/68] Delete sass files --- .../src/components/Persona/Persona.scss | 687 ------------------ .../src/components/Persona/PersonaCoin.scss | 207 ------ 2 files changed, 894 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/Persona/Persona.scss delete mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss b/packages/office-ui-fabric-react/src/components/Persona/Persona.scss deleted file mode 100644 index 24f15f0e191a9..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss +++ /dev/null @@ -1,687 +0,0 @@ -@import '../../common/common'; - -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// -// Office UI Fabric -// -------------------------------------------------- -// Persona styles - -// Skype presence colors -$ms-color-presence-available: #7FBA00; -$ms-color-presence-away: #FCD116; -$ms-color-presence-busy: #E81123; -$ms-color-presence-dnd-background: #E81123; -$ms-color-presence-dnd-line: #FFFFFF; -$ms-color-presence-offline: #93ABBD; -$ms-color-presence-out-of-office: $ms-color-magenta; - -// Other presence colors -$ms-color-presence-blocked-background: #DEDEDE; -$ms-color-presence-blocked-line: #C72D25; -$ms-color-presence-busy-stripe-light: #E57A79; -$ms-color-presence-busy-stripe-dark: #D00E0D; -$ms-color-presence-busy-average: #D93B3B; - -// Persona Sizes -$ms-Persona-size10: 20px; -$ms-Persona-size16: 16px; -$ms-Persona-size24: 24px; -$ms-Persona-size28: 28px; -$ms-Persona-size32: 32px; -$ms-Persona-size40: 40px; -$ms-Persona-size48: 48px; -$ms-Persona-size72: 72px; -$ms-Persona-size100: 100px; - -// Presence Sizes -$ms-Persona-presenceSize6: 6px; -$ms-Persona-presenceSize8: 8px; -$ms-Persona-presenceSize12: 12px; -$ms-Persona-presenceSize20: 20px; -$ms-Persona-presenceSize28: 28px; -$ms-Persona-presenceBorder: 2px; - -.root { - @include ms-normalize; - color: $ms-color-neutralPrimary; - font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; - position: relative; - height: $ms-Persona-size48; - display: flex; - align-items: center; - - .contextualHost { - display: none; - } - - &:hover { - .primaryText { - color: $ms-color-neutralDark; - } - } -} - -//= Note: The doughboy placeholder is being deprecated. -// The initials color block (.ms-Persona-initials) will be used going forward -// as a fallback when the persona does not have an image. -.placeholder { - color: $ms-color-white; - position: absolute; - right: 0; - left: 0; - font-size: 47px; - top: 9px; - z-index: $ms-zIndex-middle; -} - -.presence { - background-color: $ms-color-presence-available; - position: absolute; - height: $ms-Persona-presenceSize12; - width: $ms-Persona-presenceSize12; - border-radius: 50%; - top: auto; - @include ms-right(-$ms-Persona-presenceBorder); - bottom: -$ms-Persona-presenceBorder; - border: $ms-Persona-presenceBorder solid $ms-color-white; - text-align: center; - box-sizing: content-box; - // Setting -ms-high-contrast-adjust to none Overrides the default behaviors of high contrast more in the Edge browser. - -ms-high-contrast-adjust: none; - // This is a temporary local fix and should be removed once Fabric Core 6.0 is released. - - @include high-contrast { - border-color: Window; - color: Window; - background-color: WindowText; - } - - .presenceIcon { - color: $ms-color-white; - font-size: 6px; - line-height: $ms-Persona-presenceSize12; - vertical-align: top; - - @include high-contrast { - color: Window; - } - } -} - -.details { - @include padding(0, 24px, 0, 16px); - min-width: 0; - width: 100%; - @include text-align(left); - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.primaryText, -.secondaryText, -.tertiaryText, -.optionalText, -.textContent { - @include ms-no-wrap(); -} - -.primaryText { - color: $ms-color-neutralPrimary; - font-weight: $ms-font-weight-regular; - font-size: $ms-font-size-l; -} - -.secondaryText, -.tertiaryText, -.optionalText { - color: $ms-color-neutralSecondary; - font-weight: $ms-font-weight-regular; - font-size: $ms-font-size-s; - white-space: nowrap; -} - -.tertiaryText, -.optionalText { - display: none; // Hidden on default persona -} - - -//== Modifier: Size 10 Persona -// -.root.rootIsSize10 { - height: $ms-Persona-size10; - min-width: $ms-Persona-size10; -} - -.rootIsSize10 { - - .presence { - @include ms-right(auto); - top: 7px; - @include ms-left(0); - border: 0; - height: $ms-Persona-presenceSize8; - width: $ms-Persona-presenceSize8; - - @include high-contrast { - top: 9px; - border: 1px solid WindowText; - } - - .presenceIcon { - display: none; - } - } - - .details { - @include ms-padding-left(17px); - } - - .primaryText { - font-size: $ms-font-size-s; - line-height: $ms-Persona-size10; - } - - .secondaryText { - display: none; - } -} - -//== Modifier: Size 10 Persona with read only state -// -// This variant includes a semicolon, and is -// most often presented within a People Picker. -.root.rootIsSize10.rootIsReadonly { - padding: 0; - background-color: transparent; - - .primaryText:after { - content: ';'; - } -} - -//== Modifier: Size 16 Persona -// -.root.rootIsSize16 { - height: $ms-Persona-size16; - min-width: $ms-Persona-size16; -} - -.rootIsSize16 { - - .placeholder { - font-size: 18px; - top: 4px; - } - - .presence { - height: $ms-Persona-presenceSize6; - width: $ms-Persona-presenceSize6; - border-width: 1.5px; - } - - .presenceIcon { - display: none; - } - - .primaryText { - font-size: $ms-font-size-m; - line-height: $ms-Persona-size28; - } - - .secondaryText { - display: none; - } -} - -//== Modifier: Size 24 Persona -// -.root.rootIsSize24 { - height: $ms-Persona-size24; - min-width: $ms-Persona-size24; -} - -.rootIsSize24 { - - .placeholder { - font-size: 18px; - top: 4px; - } - - .presence { - height: $ms-Persona-presenceSize8; - width: $ms-Persona-presenceSize8; - - &:after { - display: none; - } - } - - .presenceIcon { - display: none; - } - - .details { - padding: 0 12px; - } - - .primaryText { - font-size: $ms-font-size-m; - } - - .secondaryText { - display: none; - } - - &.showSecondaryText { - height: 36px; - - .primaryText, - .secondaryText { - display: block; - height: 18px; - line-height: 16px; - overflow-x: hidden; - } - } -} - -//== Modifier: Size 28 Persona -// -.root.rootIsSize28 { - height: $ms-Persona-size28; - min-width: $ms-Persona-size28; -} - -.rootIsSize28 { - - .placeholder { - font-size: 18px; - top: 4px; - } - - .presence { - height: $ms-Persona-presenceSize8; - width: $ms-Persona-presenceSize8; - - &:after { - display: none; - } - } - - .presenceIcon { - display: none; - } - - .details { - padding: 0 12px; - } - - .primaryText { - font-size: $ms-font-size-m; - } - - .secondaryText { - display: none; - } - - &.showSecondaryText { - height: 32px; - - .primaryText, - .secondaryText { - display: block; - line-height: 16px; - height: 16px; - overflow-x: hidden; - } - } -} - - -//== Modifier: Size 32 Persona -// -.root.rootIsSize32 { - height: $ms-Persona-size32; - min-width: $ms-Persona-size32; -} - -.rootIsSize32 { - - .placeholder { - font-size: 28px; - top: 6px; - } - - .presence { - height: $ms-Persona-presenceSize8; - width: $ms-Persona-presenceSize8; - } - - .presenceIcon { - display: none; - } - - .primaryText { - font-size: $ms-font-size-m; - } - - .secondaryText { - display: none; - } - - &.showSecondaryText { - .primaryText, - .secondaryText { - display: block; - height: 16px; - line-height: 16px; - overflow-x: hidden; - } - } -} - - -//== Modifier: Size 40 Persona -// -.root.rootIsSize40 { - height: $ms-Persona-size40; - min-width: $ms-Persona-size40; -} - -.rootIsSize40 { - - .placeholder { - font-size: 38px; - top: 5px; - } - - .primaryText { - font-size: $ms-font-size-m; - } -} - - -//== Modifier: Size 72 Persona -// -.root.rootIsSize72 { - height: $ms-Persona-size72; - min-width: $ms-Persona-size72; -} - -.rootIsSize72 { - - .placeholder { - font-size: 67px; - top: 10px; - } - - .presence { - height: $ms-Persona-presenceSize20; - width: $ms-Persona-presenceSize20; - } - - .presenceIcon { - line-height: $ms-Persona-presenceSize20; - font-size: $ms-font-size-s; - } - - .primaryText { - font-size: $ms-font-size-xl; - } - - .secondaryText { - font-size: $ms-font-size-m; - } - - .tertiaryText { - display: block; - } -} - - -//== Modifier: Size 100 Persona -// -.root.rootIsSize100 { - height: $ms-Persona-size100; - min-width: $ms-Persona-size100; -} - -.rootIsSize100 { - - .placeholder { - font-size: 95px; - top: 12px; - } - - .presence { - height: $ms-Persona-presenceSize28; - width: $ms-Persona-presenceSize28; - } - - .presenceIcon { - line-height: $ms-Persona-presenceSize28; - font-size: $ms-font-size-m; - } - - .primaryText { - font-size: $ms-font-size-xl; - font-weight: $ms-font-weight-semilight; - } - - .secondaryText { - font-size: $ms-font-size-m; - } - - .tertiaryText, - .optionalText { - display: block; // Show tertiary and optional text - } -} - - -//== Modifier: Persona with darker text -// -// Note: Typically applied when the component has a colored background. -.root.rootIsDarkText { - .primaryText { - color: $ms-color-neutralDark; - } - - .secondaryText, - .tertiaryText, - .optionalText { - color: $ms-color-neutralPrimary; - } -} - - -//== Modifier: Selectable Persona -// -.root.rootIsSelectable { - cursor: pointer; - padding: 0 10px; - - &:not(.rootExtraLarge) { - &:hover, - &:focus { - background-color: $ms-color-themeLighter; - outline: 1px solid transparent; - } - } -} - - -//== Presence indicator variants. - -//== Modifier: Persona with available presence -// -.root.rootIsAvailable { - .presence { - background-color: $ms-color-presence-available; - - @include high-contrast { - background-color: WindowText; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteDisabled; - } - } -} - - -//== Modifier: Persona with away presence -// -.root.rootIsAway { - .presence { - background-color: $ms-color-presence-away; - - @include high-contrast { - background-color: WindowText; - } - } - - .presenceIcon { - position: relative; - @include ms-left(1px); - } -} - - -//== Modifier: Persona with blocked presence -// -.root.rootIsBlocked { - .presence { - background-color: $ms-color-white; - - &::before { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - @include ms-left(0); - box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset; - border-radius: 50%; - } - - &::after { - content: ''; - width: 100%; - height: 2px; - background-color: $ms-color-presence-busy-average; - transform: rotate(-45deg); - position: absolute; - // Using 40% as the top position of the cross bar element causes it to render in the correct position, even on very small persona sizes. - top: 40%; - @include ms-left(0); - } - - @include high-contrast { - color: $ms-color-contrastBlackDisabled; - background-color: Window; - - &::before { - box-shadow: 0 0 0 2px $ms-color-contrastBlackDisabled inset; - } - - &::after { - background-color: $ms-color-contrastBlackDisabled; - } - } - - @media screen and (-ms-high-contrast: black-on-white) { - color: $ms-color-contrastWhiteDisabled; - - &::before { - box-shadow: 0 0 0 2px $ms-color-contrastWhiteDisabled inset; - } - - &::after { - background-color: $ms-color-contrastWhiteDisabled; - } - } - } - - &.rootIsSize72 { - .presence { - &::after { - top: 9px; - } - } - } - - &.rootIsSize100 { - .presence { - &::after { - top: 13px; - } - } - } -} - - -//== Modifier: Persona with busy presence -// -.root.rootIsBusy { - .presence { - background-color: $ms-color-presence-busy-average; - - @include high-contrast { - background-color: $ms-color-contrastBlackDisabled; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteDisabled; - } - } -} - - -//== Modifier: Persona with do not disturb presence -// -.root.rootIsDoNotDisturb { - .presence { - background-color: $ms-color-presence-dnd-background; - - @include high-contrast { - color: $ms-color-black; - background-color: $ms-color-contrastBlackDisabled; - - &::before { - background-color: $ms-color-contrastBlackDisabled; - } - - &::after { - background-color: $ms-color-contrastBlackDisabled; - } - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-contrastWhiteDisabled; - } - } -} - - -//== Modifier: Persona with offline presence -// -.root.rootIsOffline { - .presence { - background-color: $ms-color-presence-offline; - - @include high-contrast { - background-color: $ms-color-contrastBlackDisabled; - box-shadow: 0 0 0 1px $ms-color-white inset; - } - - @media screen and (-ms-high-contrast: black-on-white) { - background-color: $ms-color-white; - box-shadow: 0 0 0 1px $ms-color-black inset; - } - } -} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss deleted file mode 100644 index 132c5af27cec1..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss +++ /dev/null @@ -1,207 +0,0 @@ -@import '../../common/common'; - -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// -// Office UI Fabric -// -------------------------------------------------- -// Persona Coin styles - -// Persona Sizes -$ms-Persona-size10: 20px; -$ms-Persona-size16: 16px; -$ms-Persona-size24: 24px; -$ms-Persona-size28: 28px; -$ms-Persona-size32: 32px; -$ms-Persona-size40: 40px; -$ms-Persona-size48: 48px; -$ms-Persona-size72: 72px; -$ms-Persona-size100: 100px; - -.imageArea { - position: relative; - text-align: center; - flex: 0 0 auto; - height: $ms-Persona-size48; - width: $ms-Persona-size48; - - .image { - border: 0px; - } -} - -.initials { - border-radius: 50%; - color: $ms-color-white; - font-size: $ms-font-size-l; - font-weight: $ms-font-weight-regular; - line-height: 46px; - height: $ms-Persona-size48; - - @include high-contrast { - border: 1px solid WindowText; - -ms-high-contrast-adjust: none; - color: WindowText; - box-sizing: border-box; - // Using important to override all of the more specific initialsIsColor rules - background-color: Window !important; - } -} - -.image { - @include ms-margin-right(10px); - position: absolute; - top: 0; - @include ms-left(0); - width: 100%; - height: 100%; - border-radius: 50%; - perspective: 1px; -} - -.image[src=""] { - display: none; -} - -//== Modifier: Size 10 Persona - -.rootIsSize10 { - .imageArea { - overflow: visible; - background: transparent; - height: 0; - width: 0; - } - -} - -.size10NoPresenceIcon { - font-size: 10px; - position: absolute; - top: 5px; - @include ms-right(auto); - @include ms-left(0); -} - -//== Modifier: Size 16 Persona - -.rootIsSize16 { - .imageArea, - .image { - height: $ms-Persona-size16; - width: $ms-Persona-size16; - } - - .initials { - font-size: $ms-font-size-xs; - height: $ms-Persona-size16; - line-height: $ms-Persona-size16; - } - -} - -//== Modifier: Size 24 Persona - -.rootIsSize24 { - .imageArea, - .image { - height: $ms-Persona-size24; - width: $ms-Persona-size24; - } - - .initials { - font-size: $ms-font-size-xs; - height: $ms-Persona-size24; - line-height: $ms-Persona-size24; - } - -} - -//== Modifier: Size 28 Persona - -.rootIsSize28 { - .imageArea, - .image { - height: $ms-Persona-size28; - width: $ms-Persona-size28; - } - - .initials { - font-size: $ms-font-size-xs; - height: $ms-Persona-size28; - line-height: $ms-Persona-size28; - } - -} - - -//== Modifier: Size 32 Persona - -.rootIsSize32 { - .imageArea, - .image { - height: $ms-Persona-size32; - width: $ms-Persona-size32; - } - - .initials { - font-size: $ms-font-size-m; - height: $ms-Persona-size32; - line-height: $ms-Persona-size32; - } - -} - - -//== Modifier: Size 40 Persona - -.rootIsSize40 { - .imageArea, - .image { - height: $ms-Persona-size40; - width: $ms-Persona-size40; - } - - .initials { - font-size: $ms-font-size-m; - height: $ms-Persona-size40; - line-height: $ms-Persona-size40; - } - -} - - -//== Modifier: Size 72 Persona - -.rootIsSize72 { - .imageArea, - .image { - height: $ms-Persona-size72; - width: $ms-Persona-size72; - } - - .initials { - font-size: $ms-font-size-xxl; - height: $ms-Persona-size72; - line-height: 70px; - } - -} - - -//== Modifier: Size 100 Persona - -.rootIsSize100 { - .imageArea, - .image { - height: $ms-Persona-size100; - width: $ms-Persona-size100; - } - - .initials { - font-size: $ms-font-size-su; - height: $ms-Persona-size100; - line-height: 96px; - } - -} From 16350cdb19676c782cc7f2e2ee665f260424664b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:06:29 -0700 Subject: [PATCH 19/68] Delete PersonaConsts file (logic is now in styles files) --- .../src/components/Persona/PersonaConsts.ts | 36 ------------------- 1 file changed, 36 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts deleted file mode 100644 index e2df04104471b..0000000000000 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { - PersonaPresence, - PersonaSize -} from './Persona.types'; -import * as stylesImport from './Persona.scss'; -const styles: any = stylesImport; - -export const PERSONA_SIZE: { [key: number]: string } = { - // All non-numerically named sizes are deprecated, use the numerically named classes below - [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsSize10, - [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsSize24, - [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsSize28, - [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSize40, - [PersonaSize.regular]: '', - [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsSize72, - [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsSize100, - - [PersonaSize.size10]: 'ms-Persona--size10 ' + styles.rootIsSize10, - [PersonaSize.size16]: 'ms-Persona--size16 ' + styles.rootIsSize16, - [PersonaSize.size24]: 'ms-Persona--size24 ' + styles.rootIsSize24, - [PersonaSize.size28]: 'ms-Persona--size28 ' + styles.rootIsSize28, - [PersonaSize.size32]: 'ms-Persona--size32 ' + styles.rootIsSize32, - [PersonaSize.size40]: 'ms-Persona--size40 ' + styles.rootIsSize40, - [PersonaSize.size48]: 'ms-Persona--size48 ' + styles.rootIsSize48, - [PersonaSize.size72]: 'ms-Persona--size72 ' + styles.rootIsSize72, - [PersonaSize.size100]: 'ms-Persona--size100 ' + styles.rootIsSize100 -}; - -export const PERSONA_PRESENCE: { [key: number]: string } = { - [PersonaPresence.offline]: 'ms-Persona--offline ' + styles.rootIsOffline, - [PersonaPresence.online]: 'ms-Persona--online ', - [PersonaPresence.away]: 'ms-Persona--away ' + styles.rootIsAway, - [PersonaPresence.dnd]: 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb, - [PersonaPresence.blocked]: 'ms-Persona--blocked ' + styles.rootIsBlocked, - [PersonaPresence.busy]: 'ms-Persona--busy ' + styles.rootIsBusy -}; \ No newline at end of file From e1d9fc33e454da8b3966bdcebcdb3f2713e7b1ad Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 15:07:18 -0700 Subject: [PATCH 20/68] Update Snapshots --- .../__snapshots__/ActivityItem.test.tsx.snap | 321 +++++++++++++++++- .../__snapshots__/DocumentCard.test.tsx.snap | 40 ++- .../__snapshots__/Facepile.test.tsx.snap | 94 ++++- .../__snapshots__/Persona.test.tsx.snap | 253 +++++++++++++- 4 files changed, 666 insertions(+), 42 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 10a242fb6db7b..190aa685e9789 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -53,7 +53,10 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` } >
@@ -86,7 +110,19 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 16px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 16px; + } + &[src=""] { + display: none; } style={ Object { @@ -284,7 +320,10 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` } >
@@ -317,7 +377,19 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 16px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 16px; + } + &[src=""] { + display: none; } style={ Object { @@ -353,7 +425,10 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
@@ -442,7 +561,19 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 16px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 16px; + } + &[src=""] { + display: none; } style={ Object { @@ -549,12 +680,23 @@ exports[`ActivityItem renders with a single persona correctly 1`] = ` } >
@@ -575,7 +730,19 @@ exports[`ActivityItem renders with a single persona correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 32px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 32px; + } + &[src=""] { + display: none; } style={ Object { @@ -793,12 +960,23 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` } >
@@ -819,7 +1010,19 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 16px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 16px; + } + &[src=""] { + display: none; } style={ Object { @@ -855,12 +1058,23 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
@@ -930,7 +1180,19 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 16px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 16px; + } + &[src=""] { + display: none; } style={ Object { @@ -966,12 +1228,23 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
@@ -62,7 +86,19 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 32px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 32px; + } + &[src=""] { + display: none; } style={ Object { diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index 1ece2b465d1fc..f5ce6f13c88d0 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -27,11 +27,22 @@ exports[`Facepile renders Facepile correctly 1`] = ` title="Annie Lindqvist" >
@@ -233,7 +303,19 @@ exports[`Facepile renders Facepile correctly 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 32px; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 32px; + } + &[src=""] { + display: none; } style={ Object { diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap index 0353479d3e09e..dc3a6bf7501c5 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap @@ -2,16 +2,55 @@ exports[`Persona renders Persona correctly with image 1`] = `
@@ -86,16 +190,55 @@ exports[`Persona renders Persona correctly with image 1`] = ` exports[`Persona renders Persona correctly with initials 1`] = `
@@ -116,7 +272,19 @@ exports[`Persona renders Persona correctly with initials 1`] = ` ms-Image ms-Persona-image { + border-radius: 50%; + border: 0px; + height: 100%; + left: 0px; + margin-right: 10px; overflow: hidden; + perspective: 1px; + position: absolute; + top: 0px; + width: 100%; + } + &[src=""] { + display: none; } style={ Object { @@ -152,10 +320,33 @@ exports[`Persona renders Persona correctly with initials 1`] = `
From c1c972f2365d3bb05c2a5001b3234cbb4416c5fb Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 16:45:55 -0700 Subject: [PATCH 21/68] Add black-on-white media query --- packages/styling/src/styles/CommonStyles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styling/src/styles/CommonStyles.ts b/packages/styling/src/styles/CommonStyles.ts index 6e338dc9a6a36..335aa44980b4d 100644 --- a/packages/styling/src/styles/CommonStyles.ts +++ b/packages/styling/src/styles/CommonStyles.ts @@ -1,4 +1,5 @@ export const HighContrastSelector = '@media screen and (-ms-high-contrast: active)'; +export const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; export const ScreenWidthMinSmall = 320; export const ScreenWidthMinMedium = 480; From e0cea163f58c279d7bc7cd401a2db2171752ac53 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 16:50:53 -0700 Subject: [PATCH 22/68] Fix high contrast styles, remove unused styles and consts --- .../src/components/Persona/Persona.styles.ts | 19 +---- .../components/Persona/PersonaCoin.styles.ts | 13 ---- .../Persona/PersonaPresence.styles.ts | 77 ++++++++++++------- 3 files changed, 49 insertions(+), 60 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 50167121bf6c7..b5281a8082281 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -7,7 +7,6 @@ import { import { FontSizes, FontWeights, - HighContrastSelector, IStyle, normalize, noWrap, @@ -27,8 +26,6 @@ export const getStyles = ( const { palette } = theme; - const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; - // Persona presence conditionals const isAvailable = presence === PersonaPresence.online; const isAway = presence === PersonaPresence.away; @@ -171,26 +168,12 @@ export const getStyles = ( /** * Modifiers: presence */ - isAvailable && [ - 'ms-Persona--available', - { - selectors: { - [HighContrastSelector]: { - backgroundColor: 'WindowText', - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.white, - } - } - } - ], + isAvailable && 'ms-Persona--online', isAway && 'ms-Persona--away', isBlocked && 'ms-Persona--blocked', isBusy && 'ms-Persona--busy', isDoNotDisturb && 'ms-Persona--donotdisturb', isOffline && 'ms-Persona--offline', - className, ], diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts index 04e387ba354d7..0b2ddc0053068 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -72,12 +72,6 @@ export const getStyles = ( flex: '0 0 auto', height: personaSize48, width: personaSize48, - - // selectors: { - // '$image': { - // border: 0, - // } - // } }, isSize10 && { @@ -135,13 +129,6 @@ export const getStyles = ( border: 0, borderRadius: '50%', perspective: '1px', - - // Remove this and use conditional render to hide instead - selectors: { - '&[src=""]': { - display: 'none', - } - } }, isSize10 && { diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 8cf0baad1d85a..3389161325f7b 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -7,6 +7,7 @@ import { import { FontSizes, HighContrastSelector, + HighContrastBWSelector, } from '../../Styling'; export const getStyles = ( @@ -21,8 +22,6 @@ export const getStyles = ( const { palette } = theme; - const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; - // Persona presence conditionals const isAvailable = presence === PersonaPresence.online; const isAway = presence === PersonaPresence.away; @@ -52,10 +51,6 @@ export const getStyles = ( // const colorPresenceOutOfOffice = palette.magenta; // Other presence colors - // const colorPresenceBlockedBackground = '#DEDEDE'; - // const colorPresenceBlockedLine = '#C72D25'; - // const colorPresenceBusyStripeLight = '#E57A79'; - // const colorPresenceBusyStripeDark = '#D00E0D'; const colorPresenceBusyAverage = '#D93B3B'; // Presence Sizes @@ -153,6 +148,12 @@ export const getStyles = ( isAvailable && { backgroundColor: colorPresenceAvailable, + + selectors: { + [HighContrastSelector]: { + backgroundColor: 'WindowText', + }, + } }, isAway && { @@ -178,6 +179,16 @@ export const getStyles = ( left: 0, boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, borderRadius: '50%', + + selectors: { + [HighContrastSelector]: { + boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, + }, + + [HighContrastBWSelector]: { + boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, + } + } }, '&:after': { @@ -189,35 +200,25 @@ export const getStyles = ( position: 'absolute', top: '40%', left: 0, - }, - - [HighContrastSelector]: { - color: palette.contrastBlackDisabled, - backgroundColor: 'Window', selectors: { - '&:before': { - boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, + [HighContrastSelector]: { + backgroundColor: palette.contrastBlackDisabled, }, - '&:after': { - backgroundColor: palette.contrastBlackDisabled, + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, } } }, + [HighContrastSelector]: { + color: palette.contrastBlackDisabled, + backgroundColor: 'Window', + }, + [HighContrastBWSelector]: { color: palette.contrastWhiteDisabled, - - selectors: { - '&:before': { - boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, - }, - - '&:after': { - backgroundColor: palette.contrastWhiteDisabled, - } - } } } }, @@ -256,21 +257,39 @@ export const getStyles = ( backgroundColor: colorPresenceDndBackground, selectors: { - [HighContrastSelector]: { - color: palette.black, + '&:before': { backgroundColor: palette.contrastBlackDisabled, selectors: { - '&:before': { + [HighContrastSelector]: { backgroundColor: palette.contrastBlackDisabled, }, - '&:after': { + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, + } + } + }, + + '&:after': { + backgroundColor: palette.contrastBlackDisabled, + + selectors: { + [HighContrastSelector]: { backgroundColor: palette.contrastBlackDisabled, + }, + + [HighContrastBWSelector]: { + backgroundColor: palette.contrastWhiteDisabled, } } }, + [HighContrastSelector]: { + color: palette.black, + backgroundColor: palette.contrastBlackDisabled, + }, + [HighContrastBWSelector]: { backgroundColor: palette.contrastWhiteDisabled, } From f387c7e594d10b4b226b067624d600768b2acfaa Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 17:51:19 -0700 Subject: [PATCH 23/68] Organize and cleanup --- .../src/components/Persona/Persona.base.tsx | 14 ++++++------- .../src/components/Persona/Persona.styles.ts | 4 ++-- .../src/components/Persona/PersonaCoin.tsx | 20 +++++++++---------- 3 files changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index a33e7eda8a20a..3c1556c9dc6c2 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -1,24 +1,22 @@ import * as React from 'react'; import { BaseComponent, + classNamesFunction, + customizable, divProperties, getNativeProps, - IRenderFunction + IRenderFunction, } from '../../Utilities'; import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip'; import { PersonaCoin } from './PersonaCoin'; import { IPersonaProps, IPersonaSharedProps, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, IPersonaStyleProps, IPersonaStyles, + PersonaPresence as PersonaPresenceEnum, + PersonaSize, } from './Persona.types'; -import { - classNamesFunction, - customizable, -} from '../../Utilities'; const getClassNames = classNamesFunction(); @@ -38,10 +36,10 @@ export class PersonaBase extends BaseComponent { public render() { const { hidePersonaDetails, + onRenderOptionalText, onRenderPrimaryText, onRenderSecondaryText, onRenderTertiaryText, - onRenderOptionalText, } = this.props; const size = this.props.size as PersonaSize; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index b5281a8082281..e1a538165ea84 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -18,8 +18,8 @@ export const getStyles = ( ): IPersonaStyles => { const { className, - showSecondaryText, presence, + showSecondaryText, size, theme, } = props; @@ -81,7 +81,7 @@ export const getStyles = ( display: 'none', }, - '&:hover': { + ':hover': { selectors: { '$primaryText': { color: palette.neutralDark, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index ce4b3aae41cb0..893fb27d9eba4 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -9,15 +9,8 @@ import { getRTL, styled, } from '../../Utilities'; +import { mergeStyles } from '../../Styling'; import { PersonaPresence } from './PersonaPresence'; -import { - IPersonaCoinProps, - IPersonaCoinStyleProps, - IPersonaCoinStyles, - IPersonaPresenceProps, - PersonaPresence as PersonaPresenceEnum, - PersonaSize, -} from './Persona.types'; import { Icon } from '../../Icon'; @@ -26,7 +19,14 @@ import { ImageFit, ImageLoadState } from '../../Image'; -import { mergeStyles } from '../../Styling'; +import { + IPersonaCoinProps, + IPersonaCoinStyleProps, + IPersonaCoinStyles, + IPersonaPresenceProps, + PersonaPresence as PersonaPresenceEnum, + PersonaSize, +} from './Persona.types'; import { initialsColorPropToColorCode } from './PersonaInitialsColor'; import { getStyles } from './PersonaCoin.styles'; @@ -77,7 +77,7 @@ export class PersonaCoinBase extends BaseComponent Date: Tue, 27 Mar 2018 17:51:42 -0700 Subject: [PATCH 24/68] Remove ampersands for High Contrast nesting bug workaround. --- .../Persona/PersonaPresence.styles.ts | 90 +++++++++---------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 3389161325f7b..94b3c1f18a65a 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -114,7 +114,7 @@ export const getStyles = ( width: personaPresenceSize8, selectors: { - '&:after': { + ':after': { display: 'none', } } @@ -125,7 +125,7 @@ export const getStyles = ( width: personaPresenceSize8, selectors: { - '&:after': { + ':after': { display: 'none', } } @@ -170,7 +170,7 @@ export const getStyles = ( backgroundColor: palette.white, selectors: { - '&:before': { + ':before': { content: '""', width: '100%', height: '100%', @@ -179,19 +179,9 @@ export const getStyles = ( left: 0, boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, borderRadius: '50%', - - selectors: { - [HighContrastSelector]: { - boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, - }, - - [HighContrastBWSelector]: { - boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, - } - } }, - '&:after': { + ':after': { content: '""', width: '100%', height: '2px', @@ -200,32 +190,42 @@ export const getStyles = ( position: 'absolute', top: '40%', left: 0, + }, + + [HighContrastSelector]: { + color: palette.contrastBlackDisabled, + backgroundColor: 'Window', selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, + ':before': { + boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, }, - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, + ':after': { + backgroundColor: palette.contrastBlackDisabled, } } }, - [HighContrastSelector]: { - color: palette.contrastBlackDisabled, - backgroundColor: 'Window', - }, - [HighContrastBWSelector]: { color: palette.contrastWhiteDisabled, + + selectors: { + ':before': { + boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, + }, + + ':after': { + backgroundColor: palette.contrastWhiteDisabled, + } + } } } }, isBlocked && isSize72 && { selectors: { - '&:after': { + ':after': { top: '9px', } } @@ -233,7 +233,7 @@ export const getStyles = ( isBlocked && isSize100 && { selectors: { - '&:after': { + ':after': { top: '13px', } } @@ -257,41 +257,41 @@ export const getStyles = ( backgroundColor: colorPresenceDndBackground, selectors: { - '&:before': { + ':before, :after': { backgroundColor: palette.contrastBlackDisabled, + }, - selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } - } + ':after': { + backgroundColor: palette.contrastBlackDisabled, }, - '&:after': { + [HighContrastSelector]: { + color: palette.black, backgroundColor: palette.contrastBlackDisabled, selectors: { - [HighContrastSelector]: { + ':before': { backgroundColor: palette.contrastBlackDisabled, }, - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } + ':after': { + backgroundColor: palette.contrastBlackDisabled, + }, } }, - [HighContrastSelector]: { - color: palette.black, - backgroundColor: palette.contrastBlackDisabled, - }, - [HighContrastBWSelector]: { backgroundColor: palette.contrastWhiteDisabled, + + selectors: { + ':before': { + backgroundColor: palette.contrastWhiteDisabled, + }, + + ':after': { + backgroundColor: palette.contrastWhiteDisabled, + }, + } } } }, From a3409768499926df3980cde7f970412c56b6708d Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 17:52:21 -0700 Subject: [PATCH 25/68] Move Persona render funtion types from IPersonaSharedProps to IPersonaProps --- .../src/components/Persona/Persona.types.ts | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 9d3ed5c80ee86..3cfec256b718b 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -17,11 +17,6 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { */ primaryText?: string; - /** - * Optional custom renderer for the primary text. - */ - onRenderPrimaryText?: IRenderFunction; - /** * Decides the size of the control. * @defaultvalue PersonaSize.size48 @@ -88,31 +83,16 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { */ secondaryText?: string; - /** - * Optional custom renderer for the secondary text. - */ - onRenderSecondaryText?: IRenderFunction; - /** * Tertiary text to display, usually the status of the user. */ tertiaryText?: string; - /** - * Optional custom renderer for the tertiary text. - */ - onRenderTertiaryText?: IRenderFunction; - /** * Optional text to display, usually a custom message set. */ optionalText?: string; - /** - * Optional custom renderer for the optional text. - */ - onRenderOptionalText?: IRenderFunction; - /** * Whether to not render persona details, and just render the persona image/initials. */ @@ -155,6 +135,26 @@ export interface IPersonaProps extends IPersonaSharedProps { * Call to provide customized styling that will layer on top of variant rules */ getStyles?: IStyleFunction; + + /** + * Optional custom renderer for the primary text. + */ + onRenderPrimaryText?: IRenderFunction; + + /** + * Optional custom renderer for the secondary text. + */ + onRenderSecondaryText?: IRenderFunction; + + /** + * Optional custom renderer for the tertiary text. + */ + onRenderTertiaryText?: IRenderFunction; + + /** + * Optional custom renderer for the optional text. + */ + onRenderOptionalText?: IRenderFunction; } export interface IPersonaStyleProps { From bee04139209abe4b6605852ddfeb62e85ca2552e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 17:52:43 -0700 Subject: [PATCH 26/68] Enable getStyles as prop --- .../src/components/Persona/PersonaPresence.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index 8033a7230006c..9fb06d5050342 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -30,9 +30,10 @@ export class PersonaPresenceBase extends BaseComponent Date: Tue, 27 Mar 2018 17:59:57 -0700 Subject: [PATCH 27/68] Fix conflicts --- .../src/components/Persona/Persona.types.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 7aa53898e4ad4..3efb588111136 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -11,17 +11,7 @@ export interface IPersona { } -<<<<<<< HEAD export interface IPersonaSharedProps extends React.HTMLAttributes { -======= -export interface IPersonaProps extends React.HTMLAttributes { - /** - * Optional callback to access the IPersona interface. Use this instead of ref for accessing - * the public methods and properties of the component. - */ - componentRef?: (component: IPersona | null) => void; - ->>>>>>> master /** * Primary text to display, usually the name of the person. */ @@ -134,7 +124,7 @@ export interface IPersonaProps extends IPersonaSharedProps { * Optional callback to access the IPersona interface. Use this instead of ref for accessing * the public methods and properties of the component. */ - componentRef?: (component: IPersona) => void; + componentRef?: (component: IPersona | null) => void; /** * Additional CSS class(es) to apply to the Persona From 0bcb20aed64694fca262ca6129277e4344ae13e7 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 27 Mar 2018 18:14:04 -0700 Subject: [PATCH 28/68] Update snapshots --- .../__snapshots__/ActivityItem.test.tsx.snap | 27 ------------------- .../__snapshots__/DocumentCard.test.tsx.snap | 3 --- .../__snapshots__/Facepile.test.tsx.snap | 9 ------- .../__snapshots__/Persona.test.tsx.snap | 6 ----- 4 files changed, 45 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 190aa685e9789..92e845561e3e3 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -121,9 +121,6 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -388,9 +385,6 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -467,9 +461,6 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -572,9 +563,6 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -741,9 +729,6 @@ exports[`ActivityItem renders with a single persona correctly 1`] = ` top: 0px; width: 32px; } - &[src=""] { - display: none; - } style={ Object { "height": 32, @@ -1021,9 +1006,6 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -1093,9 +1075,6 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -1191,9 +1170,6 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, @@ -1263,9 +1239,6 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` top: 0px; width: 16px; } - &[src=""] { - display: none; - } style={ Object { "height": undefined, diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap index bd2c4b779bace..fdf003019ddac 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap @@ -97,9 +97,6 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = ` top: 0px; width: 32px; } - &[src=""] { - display: none; - } style={ Object { "height": 32, diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index f5ce6f13c88d0..2b9df764edbf0 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -61,9 +61,6 @@ exports[`Facepile renders Facepile correctly 1`] = ` top: 0px; width: 32px; } - &[src=""] { - display: none; - } style={ Object { "height": 32, @@ -142,9 +139,6 @@ exports[`Facepile renders Facepile correctly 1`] = ` top: 0px; width: 32px; } - &[src=""] { - display: none; - } style={ Object { "height": 32, @@ -314,9 +308,6 @@ exports[`Facepile renders Facepile correctly 1`] = ` top: 0px; width: 32px; } - &[src=""] { - display: none; - } style={ Object { "height": 32, diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap index dc3a6bf7501c5..2378e87c1c1ce 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap @@ -69,9 +69,6 @@ exports[`Persona renders Persona correctly with image 1`] = ` top: 0px; width: 100%; } - &[src=""] { - display: none; - } style={ Object { "height": 48, @@ -283,9 +280,6 @@ exports[`Persona renders Persona correctly with initials 1`] = ` top: 0px; width: 100%; } - &[src=""] { - display: none; - } style={ Object { "height": 48, From c6d114b953922c6200fd1aefeaecad5e9331e503 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 10:35:25 -0700 Subject: [PATCH 29/68] Fix all ":after" elements getting styles applied. --- .../src/components/Persona/PersonaPresence.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 94b3c1f18a65a..08b501ed3243d 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -257,7 +257,7 @@ export const getStyles = ( backgroundColor: colorPresenceDndBackground, selectors: { - ':before, :after': { + ':before': { backgroundColor: palette.contrastBlackDisabled, }, From 6f5637282b77fd18d2e77f75baa0a9c38c3b85eb Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 11:49:07 -0700 Subject: [PATCH 30/68] Remove redundant styles --- .../src/components/Persona/Persona.styles.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index e1a538165ea84..949a18178fd62 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -233,10 +233,6 @@ export const getStyles = ( (isSize24 || isSize28) && { padding: '0 12px', - }, - - isSize28 && { - padding: '0 12px', } ], From 0b36bb107f7792a04933266bff01c917b77e279b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 11:49:43 -0700 Subject: [PATCH 31/68] Make secondaryText default height const --- .../src/components/Persona/Persona.styles.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 949a18178fd62..ac26024cdf1d7 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -56,6 +56,8 @@ export const getStyles = ( const personaSize72 = '72px'; const personaSize100 = '100px'; + const showSecondaryTextDefaultHeight = '16px'; + const sharedTextStyles: IStyle = { color: palette.neutralSecondary, fontWeight: FontWeights.regular, @@ -246,8 +248,8 @@ export const getStyles = ( }, showSecondaryText && { - height: '16px', - lineHeight: '16px', + height: showSecondaryTextDefaultHeight, + lineHeight: showSecondaryTextDefaultHeight, overflowX: 'hidden', }, @@ -295,8 +297,8 @@ export const getStyles = ( showSecondaryText && { display: 'block', - height: '16px', - lineHeight: '16px', + height: showSecondaryTextDefaultHeight, + lineHeight: showSecondaryTextDefaultHeight, overflowX: 'hidden', } ], From 4e35d9355d45d410c7ab1ebf4821ac37c8bf0c20 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 11:52:17 -0700 Subject: [PATCH 32/68] Increase readability --- .../src/components/Persona/Persona.types.ts | 4 +-- .../components/Persona/PersonaCoin.styles.ts | 2 +- .../src/components/Persona/PersonaCoin.tsx | 2 +- .../Persona/PersonaPresence.styles.ts | 33 ++++++++----------- 4 files changed, 18 insertions(+), 23 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 3efb588111136..aa523dd3d2632 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -114,7 +114,7 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { coinProps?: React.HTMLAttributes; /** - * Theme provided by HOC. + * Theme provided by High Order Component. */ theme?: ITheme; } @@ -243,7 +243,7 @@ export interface IPersonaCoinStyles { imageArea: IStyle; image: IStyle; initials: IStyle; - size10NoPresenceIcon: IStyle; + size10WithoutPresenceIcon: IStyle; } export interface IPersonaPresenceProps extends IPersonaSharedProps { diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts index 0b2ddc0053068..5677a7cf33b90 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -56,7 +56,7 @@ export const getStyles = ( className ], - size10NoPresenceIcon: { + size10WithoutPresenceIcon: { fontSize: '10px', position: 'absolute', top: '5px', diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 893fb27d9eba4..836edfce15e60 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -143,7 +143,7 @@ export class PersonaCoinBase extends BaseComponent : ) } diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 08b501ed3243d..6f77b7220de42 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -41,17 +41,12 @@ export const getStyles = ( const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; - // Skype presence colors - const colorPresenceAvailable = '#7FBA00'; - const colorPresenceAway = '#FCD116'; - const colorPresenceBusy = '#E81123'; - const colorPresenceDndBackground = '#E81123'; - const colorPresenceDndLine = '#FFFFFF'; - const colorPresenceOffline = '#93ABBD'; - // const colorPresenceOutOfOffice = palette.magenta; - - // Other presence colors - const colorPresenceBusyAverage = '#D93B3B'; + // Presence colors + const presenceColorAvailable = '#7FBA00'; + const presenceColorAway = '#FCD116'; + const presenceColorBusy = '#D93B3B'; + const presenceColorDnd = '#E81123'; + const presenceColorOffline = '#93ABBD'; // Presence Sizes const personaPresenceSize6 = '6px'; @@ -65,7 +60,7 @@ export const getStyles = ( presence: [ 'ms-Persona-presence', { - backgroundColor: colorPresenceAvailable, + backgroundColor: presenceColorAvailable, position: 'absolute', height: personaPresenceSize12, width: personaPresenceSize12, @@ -147,7 +142,7 @@ export const getStyles = ( }, isAvailable && { - backgroundColor: colorPresenceAvailable, + backgroundColor: presenceColorAvailable, selectors: { [HighContrastSelector]: { @@ -157,7 +152,7 @@ export const getStyles = ( }, isAway && { - backgroundColor: colorPresenceAway, + backgroundColor: presenceColorAway, selectors: { [HighContrastSelector]: { @@ -177,7 +172,7 @@ export const getStyles = ( position: 'absolute', top: 0, left: 0, - boxShadow: `0 0 0 2px ${colorPresenceBusyAverage} inset`, + boxShadow: `0 0 0 2px ${presenceColorBusy} inset`, borderRadius: '50%', }, @@ -185,7 +180,7 @@ export const getStyles = ( content: '""', width: '100%', height: '2px', - backgroundColor: colorPresenceBusyAverage, + backgroundColor: presenceColorBusy, transform: 'rotate(-45deg)', position: 'absolute', top: '40%', @@ -240,7 +235,7 @@ export const getStyles = ( }, isBusy && { - backgroundColor: colorPresenceBusyAverage, + backgroundColor: presenceColorBusy, selectors: { [HighContrastSelector]: { @@ -254,7 +249,7 @@ export const getStyles = ( }, isDoNotDisturb && { - backgroundColor: colorPresenceDndBackground, + backgroundColor: presenceColorDnd, selectors: { ':before': { @@ -297,7 +292,7 @@ export const getStyles = ( }, isOffline && { - backgroundColor: colorPresenceOffline, + backgroundColor: presenceColorOffline, selectors: { [HighContrastSelector]: { From 80275c21afcbd3c3068c52b08719837279068ea0 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 11:59:36 -0700 Subject: [PATCH 33/68] Add newlines between props --- packages/styling/src/interfaces/IPalette.ts | 3 +++ packages/styling/src/interfaces/ISemanticColors.ts | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/packages/styling/src/interfaces/IPalette.ts b/packages/styling/src/interfaces/IPalette.ts index 4e4ac3dee6dc9..db2668d306d18 100644 --- a/packages/styling/src/interfaces/IPalette.ts +++ b/packages/styling/src/interfaces/IPalette.ts @@ -247,14 +247,17 @@ export interface IPalette { * Color code for contrast black disabled. */ contrastBlackDisabled: string; + /** * Color code for contrast white disabled. */ contrastWhiteDisabled: string; + /** * Color code for contrast black selected. */ contrastBlackSelected: string; + /** * Color code for contrast white selected. */ diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 2574465261467..97a04c912217e 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -186,14 +186,17 @@ export interface ISemanticColors { * Background of a standard button */ buttonBackground: string; + /** * Background of a hovered standard button */ buttonBackgroundHovered: string; + /** * Background of a checked standard button; e.g. bold/italicize/underline text button in toolbar */ buttonBackgroundChecked: string; + /** * Background of a checked and hovered standard button; e.g. bold/italicize/underline text button in toolbar */ @@ -208,6 +211,7 @@ export interface ISemanticColors { * Color of text in a standard button */ buttonText: string; + /** * Color of text in a hovered standard button */ @@ -216,6 +220,7 @@ export interface ISemanticColors { * Color of text in a checked standard button */ buttonTextChecked: string; + /** * Color of text in a checked and hovered standard button */ From e022670604460f6f7a0616fcd81a5d678bf68120 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 12:05:41 -0700 Subject: [PATCH 34/68] Remove bang from getClassNames(getStyles) to allow null. --- .../src/components/Persona/Persona.base.tsx | 2 +- .../src/components/Persona/PersonaCoin.tsx | 2 +- .../src/components/Persona/PersonaPresence.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index 3c1556c9dc6c2..c4e557b424cd9 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -79,7 +79,7 @@ export class PersonaBase extends BaseComponent { size, }; - const classNames = getClassNames(getStyles!, { + const classNames = getClassNames(getStyles, { theme: theme!, className, showSecondaryText, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 836edfce15e60..d092c5eafbbf6 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -100,7 +100,7 @@ export class PersonaCoinBase extends BaseComponent Date: Wed, 28 Mar 2018 12:10:13 -0700 Subject: [PATCH 35/68] Add some more comments and some more cleaning --- .../src/components/Persona/PersonaCoin.tsx | 89 ++++++++++--------- .../components/Persona/PersonaPresence.tsx | 5 +- 2 files changed, 51 insertions(+), 43 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index d092c5eafbbf6..48819f06ddf00 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -56,6 +56,7 @@ export interface IPersonaState { isImageError?: boolean; } +// Export themeable PersonaCoinBase @customizable('PersonaCoin', ['theme']) export class PersonaCoinBase extends BaseComponent { public static defaultProps: IPersonaCoinProps = { @@ -64,7 +65,7 @@ export class PersonaCoinBase extends BaseComponent - { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? ( -
- { - !this.state.isImageLoaded && - (!imageUrl || this.state.isImageError) && - ( - - ) - } - { onRenderCoin(this.props, this._onRenderCoin) } - -
- ) : - (this.props.presence - ? - : + { + !this.state.isImageLoaded && + (!imageUrl || this.state.isImageError) && + ( + + ) + } + { onRenderCoin(this.props, this._onRenderCoin) } + +
+ ) : ( // Otherwise, render just PersonaPresence. + this.props.presence + ? + : // Just render Contact Icon if there isn't a Presence prop. + - ) + /> + ) } { this.props.children }
@@ -194,9 +200,9 @@ export class PersonaCoinBase extends BaseComponent{ imageInitials } : - + imageInitials !== '' + ? { imageInitials } + : ); } @@ -206,12 +212,11 @@ export class PersonaCoinBase extends BaseComponent( PersonaCoinBase, getStyles diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index 35f0fca7394ee..ac278b547f2fb 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -21,6 +21,7 @@ const presenceFontMaxSize = 20; const getClassNames = classNamesFunction(); +// Export themeable PersonaPresenceBase @customizable('PersonaPresence', ['theme']) export class PersonaPresenceBase extends BaseComponent { constructor(props: IPersonaPresenceProps) { @@ -30,7 +31,7 @@ export class PersonaPresenceBase extends BaseComponent( PersonaPresenceBase, getStyles From 95e2ea64b702e4970e599460224fa9b841e18b1e Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 12:27:04 -0700 Subject: [PATCH 36/68] External personaSize and personaPresenceSize --- .../src/components/Persona/Persona.styles.ts | 52 ++++----- .../components/Persona/PersonaCoin.styles.ts | 101 ++++++++---------- .../src/components/Persona/PersonaConsts.tsx | 28 +++++ .../Persona/PersonaPresence.styles.ts | 53 ++++----- 4 files changed, 118 insertions(+), 116 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index ac26024cdf1d7..25269b12c0ac5 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -12,6 +12,7 @@ import { noWrap, zIndex, } from '../../Styling'; +import { personaSize } from './PersonaConsts'; export const getStyles = ( props: IPersonaStyleProps @@ -45,17 +46,6 @@ export const getStyles = ( const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; - // Persona Sizes - const personaSize10 = '20px'; - const personaSize16 = '16px'; - const personaSize24 = '24px'; - const personaSize28 = '28px'; - const personaSize32 = '32px'; - const personaSize40 = '40px'; - const personaSize48 = '48px'; // default - const personaSize72 = '72px'; - const personaSize100 = '100px'; - const showSecondaryTextDefaultHeight = '16px'; const sharedTextStyles: IStyle = { @@ -73,8 +63,8 @@ export const getStyles = ( fontSize: FontSizes.medium, fontWeight: FontWeights.regular, position: 'relative', - height: personaSize48, - minWidth: personaSize48, + height: personaSize.size48, + minWidth: personaSize.size48, display: 'flex', alignItems: 'center', @@ -96,24 +86,24 @@ export const getStyles = ( isSize10 && [ 'ms-Persona--size10', { - height: personaSize10, - minWidth: personaSize10, + height: personaSize.size10, + minWidth: personaSize.size10, } ], isSize16 && [ 'ms-Persona--size16', { - height: personaSize16, - minWidth: personaSize16, + height: personaSize.size16, + minWidth: personaSize.size16, } ], isSize24 && [ 'ms-Persona--size24', { - height: personaSize24, - minWidth: personaSize24, + height: personaSize.size24, + minWidth: personaSize.size24, } ], @@ -124,8 +114,8 @@ export const getStyles = ( isSize28 && [ 'ms-Persona--size28', { - height: personaSize28, - minWidth: personaSize28, + height: personaSize.size28, + minWidth: personaSize.size28, } ], @@ -136,16 +126,16 @@ export const getStyles = ( isSize32 && [ 'ms-Persona--size32', { - height: personaSize32, - minWidth: personaSize32, + height: personaSize.size32, + minWidth: personaSize.size32, } ], isSize40 && [ 'ms-Persona--size40', { - height: personaSize40, - minWidth: personaSize40, + height: personaSize.size40, + minWidth: personaSize.size40, } ], @@ -154,16 +144,16 @@ export const getStyles = ( isSize72 && [ 'ms-Persona--size72', { - height: personaSize72, - minWidth: personaSize72, + height: personaSize.size72, + minWidth: personaSize.size72, } ], isSize100 && [ 'ms-Persona--size100', { - height: personaSize100, - minWidth: personaSize100, + height: personaSize.size100, + minWidth: personaSize.size100, } ], @@ -255,7 +245,7 @@ export const getStyles = ( isSize10 && { fontSize: FontSizes.small, - lineHeight: personaSize10, + lineHeight: personaSize.size10, }, (isSize16 || isSize24 || isSize28 || isSize32 || isSize40) && { @@ -263,7 +253,7 @@ export const getStyles = ( }, isSize16 && { - lineHeight: personaSize28, + lineHeight: personaSize.size28, }, isSize24 && showSecondaryText && { height: '18px' }, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts index 5677a7cf33b90..ab725a2eb1e60 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -8,6 +8,7 @@ import { FontSizes, FontWeights, } from '../../Styling'; +import { personaSize } from './PersonaConsts'; export const getStyles = ( props: IPersonaCoinStyleProps @@ -31,16 +32,6 @@ export const getStyles = ( const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; - // Persona Sizes - const personaSize16 = '16px'; - const personaSize24 = '24px'; - const personaSize28 = '28px'; - const personaSize32 = '32px'; - const personaSize40 = '40px'; - const personaSize48 = '48px'; - const personaSize72 = '72px'; - const personaSize100 = '100px'; - return ({ coin: [ 'ms-Persona-coin', @@ -70,8 +61,8 @@ export const getStyles = ( position: 'relative', textAlign: 'center', flex: '0 0 auto', - height: personaSize48, - width: personaSize48, + height: personaSize.size48, + width: personaSize.size48, }, isSize10 && { @@ -82,38 +73,38 @@ export const getStyles = ( }, isSize16 && { - height: personaSize16, - width: personaSize16, + height: personaSize.size16, + width: personaSize.size16, }, isSize24 && { - height: personaSize24, - width: personaSize24, + height: personaSize.size24, + width: personaSize.size24, }, isSize28 && { - height: personaSize28, - width: personaSize28, + height: personaSize.size28, + width: personaSize.size28, }, isSize32 && { - height: personaSize32, - width: personaSize32, + height: personaSize.size32, + width: personaSize.size32, }, isSize40 && { - height: personaSize40, - width: personaSize40, + height: personaSize.size40, + width: personaSize.size40, }, isSize72 && { - height: personaSize72, - width: personaSize72, + height: personaSize.size72, + width: personaSize.size72, }, isSize100 && { - height: personaSize100, - width: personaSize100, + height: personaSize.size100, + width: personaSize.size100, }, ], @@ -139,38 +130,38 @@ export const getStyles = ( }, isSize16 && { - height: personaSize16, - width: personaSize16, + height: personaSize.size16, + width: personaSize.size16, }, isSize24 && { - height: personaSize24, - width: personaSize24, + height: personaSize.size24, + width: personaSize.size24, }, isSize28 && { - height: personaSize28, - width: personaSize28, + height: personaSize.size28, + width: personaSize.size28, }, isSize32 && { - height: personaSize32, - width: personaSize32, + height: personaSize.size32, + width: personaSize.size32, }, isSize40 && { - height: personaSize40, - width: personaSize40, + height: personaSize.size40, + width: personaSize.size40, }, isSize72 && { - height: personaSize72, - width: personaSize72, + height: personaSize.size72, + width: personaSize.size72, }, isSize100 && { - height: personaSize100, - width: personaSize100, + height: personaSize.size100, + width: personaSize.size100, }, ], @@ -182,7 +173,7 @@ export const getStyles = ( fontSize: FontSizes.large, fontWeight: FontWeights.regular, lineHeight: '46px', - height: personaSize48, + height: personaSize.size48, selectors: { [HighContrastSelector]: { @@ -200,18 +191,18 @@ export const getStyles = ( }, isSize16 && { - height: personaSize16, - lineHeight: personaSize16, + height: personaSize.size16, + lineHeight: personaSize.size16, }, isSize24 && { - height: personaSize24, - lineHeight: personaSize24, + height: personaSize.size24, + lineHeight: personaSize.size24, }, isSize28 && { - height: personaSize28, - lineHeight: personaSize28, + height: personaSize.size28, + lineHeight: personaSize.size28, }, (isSize32 || isSize40) && { @@ -219,25 +210,25 @@ export const getStyles = ( }, isSize32 && { - height: personaSize32, - lineHeight: personaSize32, + height: personaSize.size32, + lineHeight: personaSize.size32, }, isSize40 && { - height: personaSize40, - lineHeight: personaSize40, + height: personaSize.size40, + lineHeight: personaSize.size40, }, isSize72 && { fontSize: FontSizes.xxLarge, - height: personaSize72, - lineHeight: personaSize72, + height: personaSize.size72, + lineHeight: personaSize.size72, }, isSize100 && { fontSize: FontSizes.superLarge, - height: personaSize100, - lineHeight: personaSize100, + height: personaSize.size100, + lineHeight: personaSize.size100, } ] }); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx new file mode 100644 index 0000000000000..5c9a3bd2aabca --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { + PersonaPresence, + PersonaSize, +} from './Persona.types'; + +// Persona Sizes +export namespace personaSize { + export const size10 = '20px'; + export const size16 = '16px'; + export const size24 = '24px'; + export const size28 = '28px'; + export const size32 = '32px'; + export const size40 = '40px'; + export const size48 = '48px'; + export const size72 = '72px'; + export const size100 = '100px'; +} + +// Persona Presence Sizes +export namespace personaPresenceSize { + export const size6 = '6px'; + export const size8 = '8px'; + export const size12 = '12px'; + export const size20 = '20px'; + export const size28 = '28px'; + export const border = '2px'; +} diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 6f77b7220de42..923954e1fe6fd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -9,6 +9,7 @@ import { HighContrastSelector, HighContrastBWSelector, } from '../../Styling'; +import { personaPresenceSize } from './PersonaConsts'; export const getStyles = ( props: IPersonaPresenceStyleProps @@ -48,27 +49,19 @@ export const getStyles = ( const presenceColorDnd = '#E81123'; const presenceColorOffline = '#93ABBD'; - // Presence Sizes - const personaPresenceSize6 = '6px'; - const personaPresenceSize8 = '8px'; - const personaPresenceSize12 = '12px'; - const personaPresenceSize20 = '20px'; - const personaPresenceSize28 = '28px'; - const personaPresenceBorder = '2px'; - return ({ presence: [ 'ms-Persona-presence', { backgroundColor: presenceColorAvailable, position: 'absolute', - height: personaPresenceSize12, - width: personaPresenceSize12, + height: personaPresenceSize.size12, + width: personaPresenceSize.size12, borderRadius: '50%', top: 'auto', - right: `-${personaPresenceBorder}`, - bottom: `-${personaPresenceBorder}`, - border: `${personaPresenceBorder} solid ${palette.white}`, + right: `-${personaPresenceSize.border}`, + bottom: `-${personaPresenceSize.border}`, + border: `${personaPresenceSize.border} solid ${palette.white}`, textAlign: 'center', boxSizing: 'content-box', MsHighContrastAdjust: 'none', @@ -87,8 +80,8 @@ export const getStyles = ( top: '7px', left: 0, border: 0, - height: personaPresenceSize8, - width: personaPresenceSize8, + height: personaPresenceSize.size8, + width: personaPresenceSize.size8, selectors: { [HighContrastSelector]: { @@ -99,14 +92,14 @@ export const getStyles = ( }, isSize16 && { - height: personaPresenceSize6, - width: personaPresenceSize6, + height: personaPresenceSize.size6, + width: personaPresenceSize.size6, borderWidth: '1.5px', }, isSize24 && { - height: personaPresenceSize8, - width: personaPresenceSize8, + height: personaPresenceSize.size8, + width: personaPresenceSize.size8, selectors: { ':after': { @@ -116,8 +109,8 @@ export const getStyles = ( }, isSize28 && { - height: personaPresenceSize8, - width: personaPresenceSize8, + height: personaPresenceSize.size8, + width: personaPresenceSize.size8, selectors: { ':after': { @@ -127,18 +120,18 @@ export const getStyles = ( }, isSize32 && { - height: personaPresenceSize8, - width: personaPresenceSize8, + height: personaPresenceSize.size8, + width: personaPresenceSize.size8, }, isSize72 && { - height: personaPresenceSize20, - width: personaPresenceSize20, + height: personaPresenceSize.size20, + width: personaPresenceSize.size20, }, isSize100 && { - height: personaPresenceSize28, - width: personaPresenceSize28, + height: personaPresenceSize.size28, + width: personaPresenceSize.size28, }, isAvailable && { @@ -313,7 +306,7 @@ export const getStyles = ( { color: palette.white, fontSize: '6px', - lineHeight: personaPresenceSize12, + lineHeight: personaPresenceSize.size12, verticalAlign: 'top', selectors: { @@ -329,12 +322,12 @@ export const getStyles = ( isSize72 && { fontSize: FontSizes.small, - lineHeight: personaPresenceSize20, + lineHeight: personaPresenceSize.size20, }, isSize100 && { fontSize: FontSizes.medium, - lineHeight: personaPresenceSize28, + lineHeight: personaPresenceSize.size28, }, isAway && { From d0d16ace4c7e470d8b73bfb02cfabf78aac0877b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 13:04:04 -0700 Subject: [PATCH 37/68] Reintroduce PersonaConsts for use in styles files.- personaSize namespace- personaPresenceSize namespace- sizeBoolean function- presenceBoolean function --- .../src/components/Persona/Persona.styles.ts | 98 ++++++++----------- .../components/Persona/PersonaCoin.styles.ts | 85 ++++++++-------- .../src/components/Persona/PersonaConsts.tsx | 21 ++++ .../Persona/PersonaPresence.styles.ts | 66 +++++-------- .../src/components/Persona/index.ts | 1 + 5 files changed, 129 insertions(+), 142 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 25269b12c0ac5..e6215262942d2 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -12,39 +12,25 @@ import { noWrap, zIndex, } from '../../Styling'; -import { personaSize } from './PersonaConsts'; +import { + personaSize, + presenceBoolean, + sizeBoolean, +} from './PersonaConsts'; export const getStyles = ( props: IPersonaStyleProps ): IPersonaStyles => { const { className, - presence, showSecondaryText, - size, theme, } = props; const { palette } = theme; - // Persona presence conditionals - const isAvailable = presence === PersonaPresence.online; - const isAway = presence === PersonaPresence.away; - const isBlocked = presence === PersonaPresence.blocked; - const isBusy = presence === PersonaPresence.busy; - const isDoNotDisturb = presence === PersonaPresence.dnd; - const isOffline = presence === PersonaPresence.offline; - - // Persona size conditionals - const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; - const isSize16 = size === PersonaSize.size16; - const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; - const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; - const isSize32 = size === PersonaSize.size32; - const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; - const isSize48 = size === PersonaSize.size48; - const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; - const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; + const size = sizeBoolean(props.size as PersonaSize); + const presence = presenceBoolean(props.presence as PersonaPresence); const showSecondaryTextDefaultHeight = '16px'; @@ -83,7 +69,7 @@ export const getStyles = ( } }, - isSize10 && [ + size.isSize10 && [ 'ms-Persona--size10', { height: personaSize.size10, @@ -91,7 +77,7 @@ export const getStyles = ( } ], - isSize16 && [ + size.isSize16 && [ 'ms-Persona--size16', { height: personaSize.size16, @@ -99,7 +85,7 @@ export const getStyles = ( } ], - isSize24 && [ + size.isSize24 && [ 'ms-Persona--size24', { height: personaSize.size24, @@ -107,11 +93,11 @@ export const getStyles = ( } ], - isSize24 && showSecondaryText && { + size.isSize24 && showSecondaryText && { height: '36px', }, - isSize28 && [ + size.isSize28 && [ 'ms-Persona--size28', { height: personaSize.size28, @@ -119,11 +105,11 @@ export const getStyles = ( } ], - isSize28 && showSecondaryText && { + size.isSize28 && showSecondaryText && { height: '32px', }, - isSize32 && [ + size.isSize32 && [ 'ms-Persona--size32', { height: personaSize.size32, @@ -131,7 +117,7 @@ export const getStyles = ( } ], - isSize40 && [ + size.isSize40 && [ 'ms-Persona--size40', { height: personaSize.size40, @@ -139,9 +125,9 @@ export const getStyles = ( } ], - isSize48 && 'ms-Persona--size48', + size.isSize48 && 'ms-Persona--size48', - isSize72 && [ + size.isSize72 && [ 'ms-Persona--size72', { height: personaSize.size72, @@ -149,7 +135,7 @@ export const getStyles = ( } ], - isSize100 && [ + size.isSize100 && [ 'ms-Persona--size100', { height: personaSize.size100, @@ -160,12 +146,12 @@ export const getStyles = ( /** * Modifiers: presence */ - isAvailable && 'ms-Persona--online', - isAway && 'ms-Persona--away', - isBlocked && 'ms-Persona--blocked', - isBusy && 'ms-Persona--busy', - isDoNotDisturb && 'ms-Persona--donotdisturb', - isOffline && 'ms-Persona--offline', + presence.isAvailable && 'ms-Persona--online', + presence.isAway && 'ms-Persona--away', + presence.isBlocked && 'ms-Persona--blocked', + presence.isBusy && 'ms-Persona--busy', + presence.isDoNotDisturb && 'ms-Persona--donotdisturb', + presence.isOffline && 'ms-Persona--offline', className, ], @@ -181,27 +167,27 @@ export const getStyles = ( zIndex: zIndex.middle, }, - (isSize16 || isSize24 || isSize28) && { + (size.isSize16 || size.isSize24 || size.isSize28) && { fontSize: '18px', top: '4px', }, - isSize32 && { + size.isSize32 && { fontSize: '28px', top: '6px', }, - isSize40 && { + size.isSize40 && { fontSize: '38px', top: '5px', }, - isSize72 && { + size.isSize72 && { fontSize: '67px', top: '10px', }, - isSize100 && { + size.isSize100 && { fontSize: '95px', top: '12px', }, @@ -219,11 +205,11 @@ export const getStyles = ( justifyContent: 'space-around', }, - isSize10 && { + size.isSize10 && { paddingLeft: '17px', }, - (isSize24 || isSize28) && { + (size.isSize24 || size.isSize28) && { padding: '0 12px', } ], @@ -243,26 +229,26 @@ export const getStyles = ( overflowX: 'hidden', }, - isSize10 && { + size.isSize10 && { fontSize: FontSizes.small, lineHeight: personaSize.size10, }, - (isSize16 || isSize24 || isSize28 || isSize32 || isSize40) && { + (size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40) && { fontSize: FontSizes.medium, }, - isSize16 && { + size.isSize16 && { lineHeight: personaSize.size28, }, - isSize24 && showSecondaryText && { height: '18px' }, + size.isSize24 && showSecondaryText && { height: '18px' }, - isSize72 && { + size.isSize72 && { fontSize: FontSizes.xLarge, }, - isSize100 && { + size.isSize100 && { fontSize: FontSizes.xLarge, fontWeight: FontWeights.semilight, } @@ -273,15 +259,15 @@ export const getStyles = ( noWrap, sharedTextStyles, - (isSize10 || isSize16 || isSize24 || isSize28 || isSize32) && { + (size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && { display: 'none', }, - isSize24 && showSecondaryText && { + size.isSize24 && showSecondaryText && { height: '18px', }, - (isSize72 || isSize100) && { + (size.isSize72 || size.isSize100) && { fontSize: FontSizes.medium, }, @@ -301,7 +287,7 @@ export const getStyles = ( display: 'none', }, - (isSize72 || isSize100) && { + (size.isSize72 || size.isSize100) && { display: 'block', } ], @@ -314,7 +300,7 @@ export const getStyles = ( display: 'none', }, - isSize100 && { + size.isSize100 && { display: 'block', } ], diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts index ab725a2eb1e60..3765b3b6e8ee2 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.styles.ts @@ -8,42 +8,35 @@ import { FontSizes, FontWeights, } from '../../Styling'; -import { personaSize } from './PersonaConsts'; +import { + personaSize, + sizeBoolean, +} from './PersonaConsts'; export const getStyles = ( props: IPersonaCoinStyleProps ): IPersonaCoinStyles => { const { className, - size, theme, } = props; const { palette } = theme; - // Persona size conditionals - const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; - const isSize16 = size === PersonaSize.size16; - const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; - const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; - const isSize32 = size === PersonaSize.size32; - const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; - const isSize48 = size === PersonaSize.size48; - const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; - const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; + const size = sizeBoolean(props.size as PersonaSize); return ({ coin: [ 'ms-Persona-coin', - isSize10 && 'ms-Persona--size10', - isSize16 && 'ms-Persona--size16', - isSize24 && 'ms-Persona--size24', - isSize28 && 'ms-Persona--size28', - isSize32 && 'ms-Persona--size32', - isSize40 && 'ms-Persona--size40', - isSize48 && 'ms-Persona--size48', - isSize72 && 'ms-Persona--size72', - isSize100 && 'ms-Persona--size100', + size.isSize10 && 'ms-Persona--size10', + size.isSize16 && 'ms-Persona--size16', + size.isSize24 && 'ms-Persona--size24', + size.isSize28 && 'ms-Persona--size28', + size.isSize32 && 'ms-Persona--size32', + size.isSize40 && 'ms-Persona--size40', + size.isSize48 && 'ms-Persona--size48', + size.isSize72 && 'ms-Persona--size72', + size.isSize100 && 'ms-Persona--size100', className ], @@ -65,44 +58,44 @@ export const getStyles = ( width: personaSize.size48, }, - isSize10 && { + size.isSize10 && { overflow: 'visible', background: 'transparent', height: 0, width: 0, }, - isSize16 && { + size.isSize16 && { height: personaSize.size16, width: personaSize.size16, }, - isSize24 && { + size.isSize24 && { height: personaSize.size24, width: personaSize.size24, }, - isSize28 && { + size.isSize28 && { height: personaSize.size28, width: personaSize.size28, }, - isSize32 && { + size.isSize32 && { height: personaSize.size32, width: personaSize.size32, }, - isSize40 && { + size.isSize40 && { height: personaSize.size40, width: personaSize.size40, }, - isSize72 && { + size.isSize72 && { height: personaSize.size72, width: personaSize.size72, }, - isSize100 && { + size.isSize100 && { height: personaSize.size100, width: personaSize.size100, }, @@ -122,44 +115,44 @@ export const getStyles = ( perspective: '1px', }, - isSize10 && { + size.isSize10 && { overflow: 'visible', background: 'transparent', height: 0, width: 0, }, - isSize16 && { + size.isSize16 && { height: personaSize.size16, width: personaSize.size16, }, - isSize24 && { + size.isSize24 && { height: personaSize.size24, width: personaSize.size24, }, - isSize28 && { + size.isSize28 && { height: personaSize.size28, width: personaSize.size28, }, - isSize32 && { + size.isSize32 && { height: personaSize.size32, width: personaSize.size32, }, - isSize40 && { + size.isSize40 && { height: personaSize.size40, width: personaSize.size40, }, - isSize72 && { + size.isSize72 && { height: personaSize.size72, width: personaSize.size72, }, - isSize100 && { + size.isSize100 && { height: personaSize.size100, width: personaSize.size100, }, @@ -186,46 +179,46 @@ export const getStyles = ( } }, - (isSize16 || isSize24 || isSize28) && { + (size.isSize16 || size.isSize24 || size.isSize28) && { fontSize: FontSizes.xSmall, }, - isSize16 && { + size.isSize16 && { height: personaSize.size16, lineHeight: personaSize.size16, }, - isSize24 && { + size.isSize24 && { height: personaSize.size24, lineHeight: personaSize.size24, }, - isSize28 && { + size.isSize28 && { height: personaSize.size28, lineHeight: personaSize.size28, }, - (isSize32 || isSize40) && { + (size.isSize32 || size.isSize40) && { fontSize: FontSizes.medium, }, - isSize32 && { + size.isSize32 && { height: personaSize.size32, lineHeight: personaSize.size32, }, - isSize40 && { + size.isSize40 && { height: personaSize.size40, lineHeight: personaSize.size40, }, - isSize72 && { + size.isSize72 && { fontSize: FontSizes.xxLarge, height: personaSize.size72, lineHeight: personaSize.size72, }, - isSize100 && { + size.isSize100 && { fontSize: FontSizes.superLarge, height: personaSize.size100, lineHeight: personaSize.size100, diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx index 5c9a3bd2aabca..19b2042deccb0 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.tsx @@ -26,3 +26,24 @@ export namespace personaPresenceSize { export const size28 = '28px'; export const border = '2px'; } + +export const sizeBoolean = (size: PersonaSize) => ({ + isSize10: size === PersonaSize.size10 || size === PersonaSize.tiny, + isSize16: size === PersonaSize.size16, + isSize24: size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall, + isSize28: size === PersonaSize.size28 || size === PersonaSize.extraSmall, + isSize32: size === PersonaSize.size32, + isSize40: size === PersonaSize.size40 || size === PersonaSize.small, + isSize48: size === PersonaSize.size48, + isSize72: size === PersonaSize.size72 || size === PersonaSize.large, + isSize100: size === PersonaSize.size100 || size === PersonaSize.extraLarge, +}); + +export const presenceBoolean = (presence: PersonaPresence) => ({ + isAvailable: presence === PersonaPresence.online, + isAway: presence === PersonaPresence.away, + isBlocked: presence === PersonaPresence.blocked, + isBusy: presence === PersonaPresence.busy, + isDoNotDisturb: presence === PersonaPresence.dnd, + isOffline: presence === PersonaPresence.offline, +}); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 923954e1fe6fd..14fec46b0fe4c 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -9,7 +9,11 @@ import { HighContrastSelector, HighContrastBWSelector, } from '../../Styling'; -import { personaPresenceSize } from './PersonaConsts'; +import { + personaPresenceSize, + presenceBoolean, + sizeBoolean, +} from './PersonaConsts'; export const getStyles = ( props: IPersonaPresenceStyleProps @@ -17,30 +21,12 @@ export const getStyles = ( const { className, theme, - presence, - size, } = props; const { palette } = theme; - // Persona presence conditionals - const isAvailable = presence === PersonaPresence.online; - const isAway = presence === PersonaPresence.away; - const isBlocked = presence === PersonaPresence.blocked; - const isBusy = presence === PersonaPresence.busy; - const isDoNotDisturb = presence === PersonaPresence.dnd; - const isOffline = presence === PersonaPresence.offline; - - // Persona size conditionals - const isSize10 = size === PersonaSize.size10 || size === PersonaSize.tiny; - const isSize16 = size === PersonaSize.size16; - const isSize24 = size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall; - const isSize28 = size === PersonaSize.size28 || size === PersonaSize.extraSmall; - const isSize32 = size === PersonaSize.size32; - const isSize40 = size === PersonaSize.size40 || size === PersonaSize.small; - const isSize48 = size === PersonaSize.size48; - const isSize72 = size === PersonaSize.size72 || size === PersonaSize.large; - const isSize100 = size === PersonaSize.size100 || size === PersonaSize.extraLarge; + const size = sizeBoolean(props.size as PersonaSize); + const presence = presenceBoolean(props.presence as PersonaPresence); // Presence colors const presenceColorAvailable = '#7FBA00'; @@ -75,7 +61,7 @@ export const getStyles = ( } }, - isSize10 && { + size.isSize10 && { right: 'auto', top: '7px', left: 0, @@ -91,13 +77,13 @@ export const getStyles = ( } }, - isSize16 && { + size.isSize16 && { height: personaPresenceSize.size6, width: personaPresenceSize.size6, borderWidth: '1.5px', }, - isSize24 && { + size.isSize24 && { height: personaPresenceSize.size8, width: personaPresenceSize.size8, @@ -108,7 +94,7 @@ export const getStyles = ( } }, - isSize28 && { + size.isSize28 && { height: personaPresenceSize.size8, width: personaPresenceSize.size8, @@ -119,22 +105,22 @@ export const getStyles = ( } }, - isSize32 && { + size.isSize32 && { height: personaPresenceSize.size8, width: personaPresenceSize.size8, }, - isSize72 && { + size.isSize72 && { height: personaPresenceSize.size20, width: personaPresenceSize.size20, }, - isSize100 && { + size.isSize100 && { height: personaPresenceSize.size28, width: personaPresenceSize.size28, }, - isAvailable && { + presence.isAvailable && { backgroundColor: presenceColorAvailable, selectors: { @@ -144,7 +130,7 @@ export const getStyles = ( } }, - isAway && { + presence.isAway && { backgroundColor: presenceColorAway, selectors: { @@ -154,7 +140,7 @@ export const getStyles = ( } }, - isBlocked && { + presence.isBlocked && { backgroundColor: palette.white, selectors: { @@ -211,7 +197,7 @@ export const getStyles = ( } }, - isBlocked && isSize72 && { + presence.isBlocked && size.isSize72 && { selectors: { ':after': { top: '9px', @@ -219,7 +205,7 @@ export const getStyles = ( } }, - isBlocked && isSize100 && { + presence.isBlocked && size.isSize100 && { selectors: { ':after': { top: '13px', @@ -227,7 +213,7 @@ export const getStyles = ( } }, - isBusy && { + presence.isBusy && { backgroundColor: presenceColorBusy, selectors: { @@ -241,7 +227,7 @@ export const getStyles = ( } }, - isDoNotDisturb && { + presence.isDoNotDisturb && { backgroundColor: presenceColorDnd, selectors: { @@ -284,7 +270,7 @@ export const getStyles = ( } }, - isOffline && { + presence.isOffline && { backgroundColor: presenceColorOffline, selectors: { @@ -316,21 +302,21 @@ export const getStyles = ( } }, - (isSize10 || isSize16 || isSize24 || isSize28 || isSize32) && { + (size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && { display: 'none', }, - isSize72 && { + size.isSize72 && { fontSize: FontSizes.small, lineHeight: personaPresenceSize.size20, }, - isSize100 && { + size.isSize100 && { fontSize: FontSizes.medium, lineHeight: personaPresenceSize.size28, }, - isAway && { + presence.isAway && { position: 'relative', left: '1px', }, diff --git a/packages/office-ui-fabric-react/src/components/Persona/index.ts b/packages/office-ui-fabric-react/src/components/Persona/index.ts index 354ad123f26cf..c10c0f10b7b51 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/index.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts @@ -2,3 +2,4 @@ export * from './Persona'; export * from './Persona.base'; export * from './Persona.types'; export * from './PersonaCoin'; +export * from './PersonaConsts'; From 0956686de939e749a4f5671526598fef0ff1bffd Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 14:41:02 -0700 Subject: [PATCH 38/68] Cut down on repeating styles --- .../Persona/PersonaPresence.styles.ts | 46 +++---------------- 1 file changed, 6 insertions(+), 40 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 14fec46b0fe4c..bca23726ee4bd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -66,8 +66,6 @@ export const getStyles = ( top: '7px', left: 0, border: 0, - height: personaPresenceSize.size8, - width: personaPresenceSize.size8, selectors: { [HighContrastSelector]: { @@ -77,16 +75,18 @@ export const getStyles = ( } }, + (size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) && { + height: personaPresenceSize.size8, + width: personaPresenceSize.size8, + }, + size.isSize16 && { height: personaPresenceSize.size6, width: personaPresenceSize.size6, borderWidth: '1.5px', }, - size.isSize24 && { - height: personaPresenceSize.size8, - width: personaPresenceSize.size8, - + (size.isSize24 || size.isSize28) && { selectors: { ':after': { display: 'none', @@ -94,22 +94,6 @@ export const getStyles = ( } }, - size.isSize28 && { - height: personaPresenceSize.size8, - width: personaPresenceSize.size8, - - selectors: { - ':after': { - display: 'none', - } - } - }, - - size.isSize32 && { - height: personaPresenceSize.size8, - width: personaPresenceSize.size8, - }, - size.isSize72 && { height: personaPresenceSize.size20, width: personaPresenceSize.size20, @@ -231,14 +215,6 @@ export const getStyles = ( backgroundColor: presenceColorDnd, selectors: { - ':before': { - backgroundColor: palette.contrastBlackDisabled, - }, - - ':after': { - backgroundColor: palette.contrastBlackDisabled, - }, - [HighContrastSelector]: { color: palette.black, backgroundColor: palette.contrastBlackDisabled, @@ -256,16 +232,6 @@ export const getStyles = ( [HighContrastBWSelector]: { backgroundColor: palette.contrastWhiteDisabled, - - selectors: { - ':before': { - backgroundColor: palette.contrastWhiteDisabled, - }, - - ':after': { - backgroundColor: palette.contrastWhiteDisabled, - }, - } } } }, From bbe5f2d774390b9c85a2b3335894457414e2f684 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 16:57:16 -0700 Subject: [PATCH 39/68] Remove deprecated Placeholder className (not used) --- .../src/components/Persona/Persona.styles.ts | 38 ------------------- .../src/components/Persona/Persona.types.ts | 1 - 2 files changed, 39 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index e6215262942d2..2be2bbc957154 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -155,44 +155,6 @@ export const getStyles = ( className, ], - placeholder: [ - 'ms-Persona-placeholder', - { - color: palette.white, - position: 'absolute', - right: '0', - left: '0', - fontSize: '47px', - top: '9px', - zIndex: zIndex.middle, - }, - - (size.isSize16 || size.isSize24 || size.isSize28) && { - fontSize: '18px', - top: '4px', - }, - - size.isSize32 && { - fontSize: '28px', - top: '6px', - }, - - size.isSize40 && { - fontSize: '38px', - top: '5px', - }, - - size.isSize72 && { - fontSize: '67px', - top: '10px', - }, - - size.isSize100 && { - fontSize: '95px', - top: '12px', - }, - ], - details: [ 'ms-Persona-details', { diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index ebb2ac54751c5..f648abe9acb12 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -200,7 +200,6 @@ export interface IPersonaStyleProps { export interface IPersonaStyles { root: IStyle; - placeholder: IStyle; details: IStyle; primaryText: IStyle; secondaryText: IStyle; From 43c3b23b0541f904e19d6cd222ff23d70f9fc35a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 16:58:46 -0700 Subject: [PATCH 40/68] Remove zIndex API. --- .../src/components/Persona/Persona.styles.ts | 1 - packages/styling/src/styles/zIndex.ts | 14 -------------- 2 files changed, 15 deletions(-) delete mode 100644 packages/styling/src/styles/zIndex.ts diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts index 2be2bbc957154..afcdcf15bdc54 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts @@ -10,7 +10,6 @@ import { IStyle, normalize, noWrap, - zIndex, } from '../../Styling'; import { personaSize, diff --git a/packages/styling/src/styles/zIndex.ts b/packages/styling/src/styles/zIndex.ts deleted file mode 100644 index 2b075c4a34f5d..0000000000000 --- a/packages/styling/src/styles/zIndex.ts +++ /dev/null @@ -1,14 +0,0 @@ -export namespace zIndex { - // large ranges - export const z0 = 0; - export const z1 = 100; - export const z2 = 200; - export const z3 = 300; - export const z4 = 400; - export const z5 = 500; - - // small ranges - export const back = 0; - export const middle = 5; - export const front = 10; -} \ No newline at end of file From 92ac11e09efd4f037da5a1ee7d74ec1325f6b466 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 28 Mar 2018 17:35:21 -0700 Subject: [PATCH 41/68] Use className from coinProps if it exists, otherwise fall back to className from props. --- .../src/components/Persona/PersonaCoin.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 0586eb427a5bd..b6c78a09dfa75 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -64,9 +64,6 @@ export class PersonaCoinBase extends BaseComponent Date: Wed, 28 Mar 2018 17:44:13 -0700 Subject: [PATCH 42/68] Update ActivityItem snapshot --- .../__snapshots__/ActivityItem.test.tsx.snap | 57 ++++++++++++++++--- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 92e845561e3e3..96924eb107ee6 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -56,7 +56,13 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: inline-block; + min-width: 8px; + overflow: visible; + width: 8px; + } size={8} style={ Object { @@ -320,7 +326,13 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: inline-block; + min-width: 8px; + overflow: visible; + width: 8px; + } size={8} style={ Object { @@ -422,7 +434,13 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: inline-block; + min-width: 8px; + overflow: visible; + width: 8px; + } size={8} style={ Object { @@ -498,7 +516,13 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: inline-block; + min-width: 8px; + overflow: visible; + width: 8px; + } size={8} style={ Object { @@ -671,7 +695,10 @@ exports[`ActivityItem renders with a single persona correctly 1`] = ` className= ms-Persona-coin ms-Persona--size32 - + ms-ActivityItem-activityPersona + { + display: block; + } size={11} style={undefined} > @@ -948,7 +975,10 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: block; + } size={8} style={undefined} > @@ -1043,7 +1073,10 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: block; + } size={8} style={undefined} > @@ -1112,7 +1145,10 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: block; + } size={8} style={undefined} > @@ -1207,7 +1243,10 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` className= ms-Persona-coin ms-Persona--size16 - + ms-ActivityItem-activityPersona + { + display: block; + } size={8} style={undefined} > From b7f708306932befc5254ee740ae07e7de0c57b50 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 29 Mar 2018 09:52:45 -0700 Subject: [PATCH 43/68] finish removing zIndex --- packages/styling/src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styling/src/styles/index.ts b/packages/styling/src/styles/index.ts index 7e67038bdb64c..7811a7c5b2d2a 100644 --- a/packages/styling/src/styles/index.ts +++ b/packages/styling/src/styles/index.ts @@ -14,4 +14,3 @@ export { } from './theme'; export * from './CommonStyles'; export * from './GeneralStyles'; -export * from './zIndex'; From 0e73517063cec8aec47fa50a50052b8f528d144c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 16:47:06 -0700 Subject: [PATCH 44/68] Add showIcon prop --- .../src/components/Persona/Persona.base.tsx | 2 ++ .../src/components/Persona/Persona.types.ts | 5 +++++ .../src/components/Persona/PersonaCoin.tsx | 4 +++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index e28ed24c120b4..eed1040068f3e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -60,6 +60,7 @@ export class PersonaBase extends BaseComponent { onRenderCoin, presence, primaryText, + showIcon, showSecondaryText, theme, } = this.props; @@ -78,6 +79,7 @@ export class PersonaBase extends BaseComponent { onRenderCoin, presence, primaryText, + showIcon, size, }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index f648abe9acb12..4bd4b548b1137 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -120,6 +120,11 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { */ coinProps?: React.HTMLAttributes; + /** + * Force render presence icon at size 32 or under + */ + showIcon?: boolean; + /** * Theme provided by High Order Component. */ diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index b6c78a09dfa75..eebdb99b73c54 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -85,6 +85,7 @@ export class PersonaCoinBase extends BaseComponent Date: Tue, 3 Apr 2018 16:47:39 -0700 Subject: [PATCH 45/68] Remove display: none styles from presenceIcon --- .../src/components/Persona/PersonaPresence.styles.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index bca23726ee4bd..897de463b9640 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -268,10 +268,6 @@ export const getStyles = ( } }, - (size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && { - display: 'none', - }, - size.isSize72 && { fontSize: FontSizes.small, lineHeight: personaPresenceSize.size20, From a8038cd8f8d0d346e5eac3efe379fabfbb55c09b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 16:51:06 -0700 Subject: [PATCH 46/68] Modify coinSize related consts to adhere to IStyleSet. Add renderIcon boolean for sizes 32 and under = false. --- .../src/components/Persona/PersonaPresence.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index ac278b547f2fb..d5641e3eb3b04 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -5,13 +5,16 @@ import { customizable, styled, } 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'; const coinSizeFontScaleFactor = 6; @@ -33,20 +36,23 @@ export class PersonaPresenceBase extends BaseComponent 32 : true); + + const presenceHeightWidth: string = coinSize ? (coinSize / coinSizePresenceScaleFactor < presenceMaxSize ? coinSize / coinSizePresenceScaleFactor + 'px' : presenceMaxSize + 'px') : ''; + const presenceFontSize: string = coinSize ? (coinSize / coinSizeFontScaleFactor < presenceFontMaxSize ? coinSize / coinSizeFontScaleFactor + 'px' : presenceFontMaxSize + 'px') : ''; + const coinSizeWithPresenceIconStyle = coinSize ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth } : undefined; const coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined; // Use getStyles from props, or fall back to getStyles from styles file. const classNames = getClassNames(getStylesProp || getStyles, { theme: theme!, presence, - size, + size: this.props.size, }); if (presence === PersonaPresenceEnum.none) { From 3f1c860ed544fe61da3a150c3f2d60fd84810aed Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 16:52:10 -0700 Subject: [PATCH 47/68] Split Icon into private render method to conditionally render. --- .../src/components/Persona/PersonaPresence.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index d5641e3eb3b04..149b0e2de3ed6 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -64,15 +64,19 @@ export class PersonaPresenceBase extends BaseComponent - + { renderIcon && this._onRenderIcon(classNames.presenceIcon, coinSizeWithPresenceIconStyle) }
); } + private _onRenderIcon = (className?: string, styles?: IStyleSet): JSX.Element => ( + + ) + private _determineIcon = (): string | undefined => { const { presence } = this.props; From b611433695e9fe854282f14417dd6f0b009b2540 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 17:05:58 -0700 Subject: [PATCH 48/68] Remove showIcon prop. --- .../src/components/Persona/Persona.base.tsx | 2 -- .../src/components/Persona/Persona.types.ts | 5 ----- .../src/components/Persona/PersonaCoin.tsx | 2 -- .../src/components/Persona/PersonaPresence.tsx | 2 +- 4 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index eed1040068f3e..e28ed24c120b4 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -60,7 +60,6 @@ export class PersonaBase extends BaseComponent { onRenderCoin, presence, primaryText, - showIcon, showSecondaryText, theme, } = this.props; @@ -79,7 +78,6 @@ export class PersonaBase extends BaseComponent { onRenderCoin, presence, primaryText, - showIcon, size, }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index 4bd4b548b1137..f648abe9acb12 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -120,11 +120,6 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { */ coinProps?: React.HTMLAttributes; - /** - * Force render presence icon at size 32 or under - */ - showIcon?: boolean; - /** * Theme provided by High Order Component. */ diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index eebdb99b73c54..2ed528761e3d7 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -85,7 +85,6 @@ export class PersonaCoinBase extends BaseComponent 32 : true); + const renderIcon = !(size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && (coinSize ? coinSize > 32 : true); const presenceHeightWidth: string = coinSize ? (coinSize / coinSizePresenceScaleFactor < presenceMaxSize ? coinSize / coinSizePresenceScaleFactor + 'px' : presenceMaxSize + 'px') : ''; const presenceFontSize: string = coinSize ? (coinSize / coinSizeFontScaleFactor < presenceFontMaxSize ? coinSize / coinSizeFontScaleFactor + 'px' : presenceFontMaxSize + 'px') : ''; From 3d4f956fa2719d59be05153601f9f3418c6fbde8 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Tue, 3 Apr 2018 17:29:55 -0700 Subject: [PATCH 49/68] Change to const --- apps/vr-tests/src/stories/PeoplePicker.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx index 799c7efd2b5c0..a91503d3788fc 100644 --- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx +++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx @@ -60,9 +60,9 @@ const suggestionProps = { suggestionsContainerAriaLabel: 'Suggested contacts' }; -let getTextFromItem = (persona: IPersonaProps): string => persona.primaryText as string; +const getTextFromItem = (persona: IPersonaProps): string => persona.primaryText as string; -let getPeople = () => people; +const getPeople = () => people; // Pickers that are 'disabled' are added before the Screener decorator because css classes for suggestion items won't exist storiesOf('PeoplePicker', module) From 79465096a96498fb8558879930b7c641d91145b9 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 4 Apr 2018 13:44:51 -0700 Subject: [PATCH 50/68] npm run change output --- .../mergeStyles-persona-part2_2018-04-04-20-44.json | 11 +++++++++++ .../mergeStyles-persona-part2_2018-04-04-20-44.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json create mode 100644 common/changes/office-ui-fabric-react/mergeStyles-persona-part2_2018-04-04-20-44.json diff --git a/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json b/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json new file mode 100644 index 0000000000000..81c1dd27804c3 --- /dev/null +++ b/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Add some contrast colors to palette. Add HighContrastBWSelector. Add noWrap style set.", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mergeStyles-persona-part2_2018-04-04-20-44.json b/common/changes/office-ui-fabric-react/mergeStyles-persona-part2_2018-04-04-20-44.json new file mode 100644 index 0000000000000..9cfa8908d33de --- /dev/null +++ b/common/changes/office-ui-fabric-react/mergeStyles-persona-part2_2018-04-04-20-44.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Convert Persona and PersonaCoin and PersonaPresence to mergeStyles. Create IPersonaSharedProps for props that apply to Persona and PersonaCoin and PersonaPresence. Other refactors.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-jojanz@microsoft.com" +} \ No newline at end of file From 3af9b4574fbce986e4fa84bb97d6c6995d93df36 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 4 Apr 2018 17:11:34 -0700 Subject: [PATCH 51/68] Fix ImageFitStyles for both RTL and LTR --- .../src/components/Image/Image.styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts index 6c7b4bb62b0a2..bff0a259dbe23 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts @@ -25,8 +25,8 @@ export const getStyles = ( } = props; const ImageFitStyles: IStyle = { - position: 'relative', - left: '50%', + position: 'absolute', + left: '50% /* @noflip */', top: '50%', transform: 'translate(-50%,-50%)' // @todo test RTL renders transform: translate(50%,-50%); }; @@ -44,6 +44,9 @@ export const getStyles = ( width: '100%' } ], + (isCenter || isContain || isCover) && { + position: 'relative', + }, className ], image: [ From fc62a9f4338cfa97d5c58a72bc8a5b4c473c4a25 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 4 Apr 2018 18:07:13 -0700 Subject: [PATCH 52/68] Use semantic color --- .../src/components/Persona/PersonaPresence.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 897de463b9640..fa20c420dd10c 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -23,7 +23,7 @@ export const getStyles = ( theme, } = props; - const { palette } = theme; + const { palette, semanticColors } = theme; const size = sizeBoolean(props.size as PersonaSize); const presence = presenceBoolean(props.presence as PersonaPresence); @@ -47,7 +47,7 @@ export const getStyles = ( top: 'auto', right: `-${personaPresenceSize.border}`, bottom: `-${personaPresenceSize.border}`, - border: `${personaPresenceSize.border} solid ${palette.white}`, + border: `${personaPresenceSize.border} solid ${semanticColors.bodyBackground}`, textAlign: 'center', boxSizing: 'content-box', MsHighContrastAdjust: 'none', From 8b1cb9ef468062e6d28f9dcfedc5f87a82c2b847 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 4 Apr 2018 18:10:49 -0700 Subject: [PATCH 53/68] Use border instead of box-shadow --- .../src/components/Persona/PersonaPresence.styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index fa20c420dd10c..53ecf0227db11 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -135,8 +135,9 @@ export const getStyles = ( position: 'absolute', top: 0, left: 0, - boxShadow: `0 0 0 2px ${presenceColorBusy} inset`, + border: `${personaPresenceSize.border} solid ${presenceColorBusy}`, borderRadius: '50%', + boxSizing: 'border-box', }, ':after': { @@ -156,7 +157,7 @@ export const getStyles = ( selectors: { ':before': { - boxShadow: `0 0 0 2px ${palette.contrastBlackDisabled} inset`, + borderColor: 'WindowText', }, ':after': { From 3ab73961f7e019a028d59db896384d29ad9de215 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Wed, 4 Apr 2018 18:44:36 -0700 Subject: [PATCH 54/68] Update snapshots --- .../__snapshots__/ActivityItem.test.tsx.snap | 36 +++++++++---------- .../__snapshots__/DocumentCard.test.tsx.snap | 4 +-- .../__snapshots__/Facepile.test.tsx.snap | 12 +++---- .../__snapshots__/Persona.test.tsx.snap | 8 ++--- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 96924eb107ee6..080d69cf5cce9 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -145,9 +145,9 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -415,9 +415,9 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -497,9 +497,9 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -605,9 +605,9 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -774,9 +774,9 @@ exports[`ActivityItem renders with a single persona correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -1054,9 +1054,9 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -1126,9 +1126,9 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -1224,9 +1224,9 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -1296,9 +1296,9 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap index fdf003019ddac..00c8653a6fba9 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap @@ -115,9 +115,9 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index 2b9df764edbf0..a75223fb0d25f 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -79,9 +79,9 @@ exports[`Facepile renders Facepile correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -157,9 +157,9 @@ exports[`Facepile renders Facepile correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -326,9 +326,9 @@ exports[`Facepile renders Facepile correctly 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap index 2378e87c1c1ce..975ea5b243841 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap @@ -87,9 +87,9 @@ exports[`Persona renders Persona correctly with image 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; @@ -298,9 +298,9 @@ exports[`Persona renders Persona correctly with initials 1`] = ` { display: block; height: auto; - left: 50%; + left: 50% /* @noflip */; opacity: 0; - position: relative; + position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; From cb4782e807507f0ad2e6501d6371591d0d2cbb06 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 5 Apr 2018 13:58:10 -0700 Subject: [PATCH 55/68] Remove new contrast colors and selector --- packages/styling/src/interfaces/IPalette.ts | 20 ------------------- packages/styling/src/styles/CommonStyles.ts | 1 - packages/styling/src/styles/DefaultPalette.ts | 4 ---- 3 files changed, 25 deletions(-) diff --git a/packages/styling/src/interfaces/IPalette.ts b/packages/styling/src/interfaces/IPalette.ts index db2668d306d18..95aa41a0a1b7f 100644 --- a/packages/styling/src/interfaces/IPalette.ts +++ b/packages/styling/src/interfaces/IPalette.ts @@ -242,24 +242,4 @@ export interface IPalette { * Color code for greenLight. */ greenLight: string; - - /** - * Color code for contrast black disabled. - */ - contrastBlackDisabled: string; - - /** - * Color code for contrast white disabled. - */ - contrastWhiteDisabled: string; - - /** - * Color code for contrast black selected. - */ - contrastBlackSelected: string; - - /** - * Color code for contrast white selected. - */ - contrastWhiteSelected: string; } diff --git a/packages/styling/src/styles/CommonStyles.ts b/packages/styling/src/styles/CommonStyles.ts index 335aa44980b4d..6e338dc9a6a36 100644 --- a/packages/styling/src/styles/CommonStyles.ts +++ b/packages/styling/src/styles/CommonStyles.ts @@ -1,5 +1,4 @@ export const HighContrastSelector = '@media screen and (-ms-high-contrast: active)'; -export const HighContrastBWSelector = '@media screen and (-ms-high-contrast: black-on-white)'; export const ScreenWidthMinSmall = 320; export const ScreenWidthMinMedium = 480; diff --git a/packages/styling/src/styles/DefaultPalette.ts b/packages/styling/src/styles/DefaultPalette.ts index 772a0287820c9..f0f277e8f6e78 100644 --- a/packages/styling/src/styles/DefaultPalette.ts +++ b/packages/styling/src/styles/DefaultPalette.ts @@ -50,8 +50,4 @@ export const DefaultPalette: IPalette = { greenDark: '#004b1c', green: '#107c10', greenLight: '#bad80a', - contrastBlackDisabled: '#00ff00', - contrastWhiteDisabled: '#600000', - contrastBlackSelected: '#1AEBFF', - contrastWhiteSelected: '#37006E', }; From 40d5236f553c4bf727b96c783e67e5e378cb9d68 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 5 Apr 2018 15:33:07 -0700 Subject: [PATCH 56/68] Add backgroundClip to IRawStyleBase --- packages/merge-styles/src/IRawStyleBase.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts index c0a2414ee3dcd..3f705ca0d63ce 100644 --- a/packages/merge-styles/src/IRawStyleBase.ts +++ b/packages/merge-styles/src/IRawStyleBase.ts @@ -293,6 +293,16 @@ export interface IRawStyleBase extends IRawFontStyle { */ backgroundBlendMode?: ICSSRule | string; + /** + * The background-clip CSS property specifies if an element's + * background, whether a or an , extends + * underneath its border. + * + * The `text` value is experimental and should not be used + * in production code. + */ + backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text'; + /** * Sets the background color of an element. */ From c006bf9da8852ac9868af4d51547b0a1b49bc986 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 5 Apr 2018 16:52:44 -0700 Subject: [PATCH 57/68] Major cleanup: - Remove redundant code - Switch to system fonts only - Switch High Contrast colors to agreed new color scheme. - Available presence is now Highlight - All other presence are WindowText - Use semanticColors instead of palette colors - Remove HighContrastBWSelector - Blocked status match Fabric toolkit --- .../Persona/PersonaPresence.styles.ts | 122 +++--------------- 1 file changed, 20 insertions(+), 102 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 53ecf0227db11..0bb039718ff57 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -7,7 +7,6 @@ import { import { FontSizes, HighContrastSelector, - HighContrastBWSelector, } from '../../Styling'; import { personaPresenceSize, @@ -23,7 +22,7 @@ export const getStyles = ( theme, } = props; - const { palette, semanticColors } = theme; + const { semanticColors } = theme; const size = sizeBoolean(props.size as PersonaSize); const presence = presenceBoolean(props.presence as PersonaPresence); @@ -39,7 +38,6 @@ export const getStyles = ( presence: [ 'ms-Persona-presence', { - backgroundColor: presenceColorAvailable, position: 'absolute', height: personaPresenceSize.size12, width: personaPresenceSize.size12, @@ -55,7 +53,6 @@ export const getStyles = ( selectors: { [HighContrastSelector]: { borderColor: 'Window', - color: 'Window', backgroundColor: 'WindowText', } } @@ -86,14 +83,6 @@ export const getStyles = ( borderWidth: '1.5px', }, - (size.isSize24 || size.isSize28) && { - selectors: { - ':after': { - display: 'none', - } - } - }, - size.isSize72 && { height: personaPresenceSize.size20, width: personaPresenceSize.size20, @@ -109,23 +98,18 @@ export const getStyles = ( selectors: { [HighContrastSelector]: { - backgroundColor: 'WindowText', + backgroundColor: 'Highlight', }, } }, presence.isAway && { backgroundColor: presenceColorAway, - - selectors: { - [HighContrastSelector]: { - backgroundColor: 'WindowText', - } - } }, - presence.isBlocked && { - backgroundColor: palette.white, + presence.isBlocked && [ + { + backgroundColor: semanticColors.bodyBackground, selectors: { ':before': { @@ -140,124 +124,58 @@ export const getStyles = ( boxSizing: 'border-box', }, - ':after': { + // Only show :after at larger sizes + ':after': (size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100) ? { content: '""', width: '100%', - height: '2px', + height: personaPresenceSize.border, backgroundColor: presenceColorBusy, transform: 'rotate(-45deg)', position: 'absolute', top: '40%', left: 0, - }, + } : undefined, [HighContrastSelector]: { - color: palette.contrastBlackDisabled, - backgroundColor: 'Window', - - selectors: { - ':before': { - borderColor: 'WindowText', - }, - - ':after': { - backgroundColor: palette.contrastBlackDisabled, - } - } - }, - - [HighContrastBWSelector]: { - color: palette.contrastWhiteDisabled, + backgroundColor: 'WindowText', selectors: { ':before': { - boxShadow: `0 0 0 2px ${palette.contrastWhiteDisabled} inset`, + width: `calc(100% - ${personaPresenceSize.border})`, + height: `calc(100% - ${personaPresenceSize.border})`, + top: parseFloat(personaPresenceSize.border) / 2 + 'px', + left: parseFloat(personaPresenceSize.border) / 2 + 'px', + borderColor: 'Window', }, ':after': { - backgroundColor: palette.contrastWhiteDisabled, - } + width: `calc(100% - ${parseFloat(personaPresenceSize.border) * 2}px)`, + left: personaPresenceSize.border, + backgroundColor: 'Window', } - } } }, - - presence.isBlocked && size.isSize72 && { - selectors: { - ':after': { - top: '9px', - } - } - }, - - presence.isBlocked && size.isSize100 && { - selectors: { - ':after': { - top: '13px', - } } }, + ], presence.isBusy && { backgroundColor: presenceColorBusy, - - selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, }, - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } - } - }, - presence.isDoNotDisturb && { backgroundColor: presenceColorDnd, - - selectors: { - [HighContrastSelector]: { - color: palette.black, - backgroundColor: palette.contrastBlackDisabled, - - selectors: { - ':before': { - backgroundColor: palette.contrastBlackDisabled, - }, - - ':after': { - backgroundColor: palette.contrastBlackDisabled, - }, - } - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.contrastWhiteDisabled, - } - } }, presence.isOffline && { backgroundColor: presenceColorOffline, - - selectors: { - [HighContrastSelector]: { - backgroundColor: palette.contrastBlackDisabled, - boxShadow: `0 0 0 1px ${palette.white} inset`, - }, - - [HighContrastBWSelector]: { - backgroundColor: palette.white, - boxShadow: `0 0 0 1px ${palette.black} inset`, - } - } }, ], presenceIcon: [ 'ms-Persona-presenceIcon', { - color: palette.white, + color: semanticColors.bodyBackground, fontSize: '6px', lineHeight: personaPresenceSize.size12, verticalAlign: 'top', From 93d4aed3262e3f533d93adcc392c561be2a0335c Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 5 Apr 2018 18:36:04 -0700 Subject: [PATCH 58/68] Add backgroundClip to lessen bleed on Edge. --- .../Persona/PersonaPresence.styles.ts | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts index 0bb039718ff57..28fd5f19caf78 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.styles.ts @@ -48,6 +48,7 @@ export const getStyles = ( border: `${personaPresenceSize.border} solid ${semanticColors.bodyBackground}`, textAlign: 'center', boxSizing: 'content-box', + backgroundClip: 'content-box', MsHighContrastAdjust: 'none', selectors: { @@ -111,57 +112,57 @@ export const getStyles = ( { backgroundColor: semanticColors.bodyBackground, - selectors: { - ':before': { - content: '""', - width: '100%', - height: '100%', - position: 'absolute', - top: 0, - left: 0, - border: `${personaPresenceSize.border} solid ${presenceColorBusy}`, - borderRadius: '50%', - boxSizing: 'border-box', - }, + selectors: { + ':before': { + content: '""', + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + border: `${personaPresenceSize.border} solid ${presenceColorBusy}`, + borderRadius: '50%', + boxSizing: 'border-box', + }, // Only show :after at larger sizes ':after': (size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100) ? { - content: '""', - width: '100%', + content: '""', + width: '100%', height: personaPresenceSize.border, - backgroundColor: presenceColorBusy, - transform: 'rotate(-45deg)', - position: 'absolute', - top: '40%', - left: 0, + backgroundColor: presenceColorBusy, + transform: 'translateY(-50%) rotate(-45deg)', + position: 'absolute', + top: '50%', + left: 0, } : undefined, - [HighContrastSelector]: { + [HighContrastSelector]: { backgroundColor: 'WindowText', - selectors: { - ':before': { + selectors: { + ':before': { width: `calc(100% - ${personaPresenceSize.border})`, height: `calc(100% - ${personaPresenceSize.border})`, top: parseFloat(personaPresenceSize.border) / 2 + 'px', left: parseFloat(personaPresenceSize.border) / 2 + 'px', borderColor: 'Window', - }, + }, - ':after': { + ':after': { width: `calc(100% - ${parseFloat(personaPresenceSize.border) * 2}px)`, left: personaPresenceSize.border, backgroundColor: 'Window', - } - } - }, - } - }, + } + } + }, + } + }, ], presence.isBusy && { backgroundColor: presenceColorBusy, - }, + }, presence.isDoNotDisturb && { backgroundColor: presenceColorDnd, From a3dcb2f8edd1a8ac755f6cfd651721a50da27dc0 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Thu, 5 Apr 2018 18:40:22 -0700 Subject: [PATCH 59/68] Remove some added features from changelog --- .../styling/mergeStyles-persona-part2_2018-04-04-20-44.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json b/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json index 81c1dd27804c3..8f0f63f7bf353 100644 --- a/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json +++ b/common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "@uifabric/styling", - "comment": "Add some contrast colors to palette. Add HighContrastBWSelector. Add noWrap style set.", + "comment": "Add noWrap style set.", "type": "minor" } ], From e853fd9eae9c1b83ea09e99e68e783a2e9fa73e6 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 6 Apr 2018 14:21:31 -0700 Subject: [PATCH 60/68] remove display property --- packages/styling/src/styles/GeneralStyles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styling/src/styles/GeneralStyles.ts b/packages/styling/src/styles/GeneralStyles.ts index 826f1686f1533..71e63dc5082cd 100644 --- a/packages/styling/src/styles/GeneralStyles.ts +++ b/packages/styling/src/styles/GeneralStyles.ts @@ -10,7 +10,6 @@ export const normalize: IRawStyle = { }; export const noWrap: IRawStyle = { - display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', From 146d607a7b50e3f9f074396316234338720cc041 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 6 Apr 2018 14:21:41 -0700 Subject: [PATCH 61/68] Better documentation --- packages/merge-styles/src/IRawStyleBase.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts index 3f705ca0d63ce..67952762bdd8b 100644 --- a/packages/merge-styles/src/IRawStyleBase.ts +++ b/packages/merge-styles/src/IRawStyleBase.ts @@ -294,12 +294,12 @@ export interface IRawStyleBase extends IRawFontStyle { backgroundBlendMode?: ICSSRule | string; /** - * The background-clip CSS property specifies if an element's - * background, whether a or an , extends - * underneath its border. + * The background-clip CSS property specifies if an element's background, whether a + * or an , extends underneath its border. * - * The `text` value is experimental and should not be used - * in production code. + * \* Does not work in IE + * + * \* The `text` value is experimental and should not be used in production code. */ backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text'; From 34146e88f525e0a9b4be2f23baeb1c59c199ed33 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 6 Apr 2018 15:22:16 -0700 Subject: [PATCH 62/68] More documentation --- .../src/components/Persona/Persona.base.tsx | 4 ++++ .../src/components/Persona/Persona.tsx | 4 ++++ .../src/components/Persona/Persona.types.ts | 8 ++++---- .../src/components/Persona/PersonaCoin.tsx | 9 +++++++-- .../src/components/Persona/PersonaPresence.tsx | 9 +++++++-- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index e28ed24c120b4..b723aa4a152ac 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -20,6 +20,10 @@ import { const getClassNames = classNamesFunction(); +/** + * Persona with no default styles. + * [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling) + */ @customizable('Persona', ['theme']) export class PersonaBase extends BaseComponent { public static defaultProps: IPersonaProps = { diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx index 89d1f91649fc8..c5a680f33d361 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx @@ -7,6 +7,10 @@ import { import { PersonaBase } from './Persona.base'; import { getStyles } from './Persona.styles'; +/** + * Personas are used for rendering an individual's avatar, presence and details. + * They are used within the PeoplePicker components. + */ export const Persona = styled( PersonaBase, getStyles diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts index f648abe9acb12..c9baa333da78e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts @@ -121,7 +121,7 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { coinProps?: React.HTMLAttributes; /** - * Theme provided by High Order Component. + * Theme provided by High-Order Component. */ theme?: ITheme; } @@ -166,7 +166,7 @@ export interface IPersonaProps extends IPersonaSharedProps { export interface IPersonaStyleProps { /** - * Theme. + * Theme provided by High-Order Component. */ theme: ITheme; @@ -228,7 +228,7 @@ export interface IPersonaCoinProps extends IPersonaSharedProps { export interface IPersonaCoinStyleProps { /** - * Theme. + * Theme provided by High-Order Component. */ theme: ITheme; @@ -266,7 +266,7 @@ export interface IPersonaPresenceProps extends IPersonaSharedProps { export interface IPersonaPresenceStyleProps { /** - * Theme. + * Theme provided by High-Order Component. */ theme: ITheme; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 2ed528761e3d7..08ff543197c29 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -56,7 +56,10 @@ export interface IPersonaState { isImageError?: boolean; } -// Export themeable PersonaCoinBase +/** + * PersonaCoin with no default styles. Use the `getStyles` API to add + * your own styles. + */ @customizable('PersonaCoin', ['theme']) export class PersonaCoinBase extends BaseComponent { public static defaultProps: IPersonaCoinProps = { @@ -217,7 +220,9 @@ export class PersonaCoinBase extends BaseComponent( PersonaCoinBase, getStyles diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index e2c9b45bf724f..aed00c04de2bd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -24,7 +24,10 @@ const presenceFontMaxSize = 20; const getClassNames = classNamesFunction(); -// Export themeable PersonaPresenceBase +/** + * PersonaPresence with no default styles. Use the `getStyles` API to add + * your own styles. + */ @customizable('PersonaPresence', ['theme']) export class PersonaPresenceBase extends BaseComponent { constructor(props: IPersonaPresenceProps) { @@ -102,7 +105,9 @@ export class PersonaPresenceBase extends BaseComponent( PersonaPresenceBase, getStyles From c3bfbc7c16aa1b7abd8825e902fb2f48a99aabf4 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 6 Apr 2018 15:23:28 -0700 Subject: [PATCH 63/68] nit --- .../src/components/Persona/PersonaCoin.tsx | 4 ++-- .../src/components/Persona/PersonaPresence.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 08ff543197c29..959779d684ef1 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -57,8 +57,8 @@ export interface IPersonaState { } /** - * PersonaCoin with no default styles. Use the `getStyles` API to add - * your own styles. + * PersonaCoin with no default styles. + * [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling) */ @customizable('PersonaCoin', ['theme']) export class PersonaCoinBase extends BaseComponent { diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index aed00c04de2bd..eda1c34141f2e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -25,8 +25,8 @@ const presenceFontMaxSize = 20; const getClassNames = classNamesFunction(); /** - * PersonaPresence with no default styles. Use the `getStyles` API to add - * your own styles. + * PersonaPresence with no default styles. + * [Use the `getStyles` API to add your own styles.](https://github.com/OfficeDev/office-ui-fabric-react/wiki/Styling) */ @customizable('PersonaPresence', ['theme']) export class PersonaPresenceBase extends BaseComponent { From e6edd590f9cc8dc296010a7dea80bf5409b4ec27 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Fri, 6 Apr 2018 16:10:14 -0700 Subject: [PATCH 64/68] Update snapshot --- .../components/Persona/__snapshots__/Persona.test.tsx.snap | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap index 975ea5b243841..5d2506121ceb5 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap @@ -123,7 +123,6 @@ exports[`Persona renders Persona correctly with image 1`] = ` ms-Persona-primaryText { color: #333333; - display: block; font-size: 17px; font-weight: 400; overflow: hidden; @@ -147,7 +146,6 @@ exports[`Persona renders Persona correctly with image 1`] = ` ms-Persona-secondaryText { color: #666666; - display: block; font-size: 12px; font-weight: 400; overflow: hidden; @@ -334,7 +332,6 @@ exports[`Persona renders Persona correctly with initials 1`] = ` ms-Persona-primaryText { color: #333333; - display: block; font-size: 17px; font-weight: 400; overflow: hidden; @@ -358,7 +355,6 @@ exports[`Persona renders Persona correctly with initials 1`] = ` ms-Persona-secondaryText { color: #666666; - display: block; font-size: 12px; font-weight: 400; overflow: hidden; From 09d8c4d809cbd1617f9a2fd4a9350fa016d4d521 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Sat, 7 Apr 2018 15:05:24 -0700 Subject: [PATCH 65/68] revert --- .../mergeStyles-persona-part2_2018-04-07-22-05.json | 11 +++++++++++ packages/styling/src/interfaces/ISemanticColors.ts | 5 ----- 2 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 common/changes/@uifabric/merge-styles/mergeStyles-persona-part2_2018-04-07-22-05.json diff --git a/common/changes/@uifabric/merge-styles/mergeStyles-persona-part2_2018-04-07-22-05.json b/common/changes/@uifabric/merge-styles/mergeStyles-persona-part2_2018-04-07-22-05.json new file mode 100644 index 0000000000000..65fc763eb1989 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/mergeStyles-persona-part2_2018-04-07-22-05.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "Add backgroundClip property definition.", + "type": "minor" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "jordancjanzen@gmail.com" +} \ No newline at end of file diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 97a04c912217e..2574465261467 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -186,17 +186,14 @@ export interface ISemanticColors { * Background of a standard button */ buttonBackground: string; - /** * Background of a hovered standard button */ buttonBackgroundHovered: string; - /** * Background of a checked standard button; e.g. bold/italicize/underline text button in toolbar */ buttonBackgroundChecked: string; - /** * Background of a checked and hovered standard button; e.g. bold/italicize/underline text button in toolbar */ @@ -211,7 +208,6 @@ export interface ISemanticColors { * Color of text in a standard button */ buttonText: string; - /** * Color of text in a hovered standard button */ @@ -220,7 +216,6 @@ export interface ISemanticColors { * Color of text in a checked standard button */ buttonTextChecked: string; - /** * Color of text in a checked and hovered standard button */ From e78c886c4154f98aba6f7fd3b8e210040663a540 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Sat, 7 Apr 2018 15:19:15 -0700 Subject: [PATCH 66/68] Bump bundlesize .1kB --- scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/package.json b/scripts/package.json index 20e157a6b477c..53b7e7757babd 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -49,7 +49,7 @@ "bundlesize": [ { "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js", - "maxSize": "45.5 kB" + "maxSize": "45.6 kB" } ] } \ No newline at end of file From 2a02099a471bd90472deec06b1a64c3664cd30f5 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Sat, 7 Apr 2018 15:50:45 -0700 Subject: [PATCH 67/68] Remove fallback --- .../src/components/Persona/PersonaCoin.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx index 959779d684ef1..5da9f432237f9 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx @@ -103,7 +103,7 @@ export class PersonaCoinBase extends BaseComponent Date: Sat, 7 Apr 2018 15:51:24 -0700 Subject: [PATCH 68/68] Remove fallback --- .../src/components/Persona/PersonaPresence.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx index eda1c34141f2e..37a471843a46a 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx @@ -52,7 +52,7 @@ export class PersonaPresenceBase extends BaseComponent