From c8d89297fb5798c20d43d4bc9407b32dfcbd3233 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 14:13:51 -0700 Subject: [PATCH 1/4] Passing specific props at end of get styles --- .../ActivityItem/ActivityItem.styles.ts | 17 ++++++++++------- .../components/ActivityItem/ActivityItem.tsx | 9 ++++++++- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts index e6fe80298c0e9..a5c9d8d1d3e9b 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts @@ -20,14 +20,17 @@ const ANIMATION_OUTER_DIMENSION = '28px'; const ANIMATION_BORDER_WIDTH = '4px'; export const getStyles = memoizeFunction(( - props: IActivityItemProps, theme: ITheme = getTheme(), - customStyles?: IActivityItemStyles + customStyles?: IActivityItemStyles, + animateBeaconSignal?: IActivityItemProps["animateBeaconSignal"], + beaconColorOne?: IActivityItemProps["beaconColorOne"], + beaconColorTwo?: IActivityItemProps["beaconColorTwo"], + isCompact?: IActivityItemProps["isCompact"] ): IActivityItemStyles => { const continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle( - props.beaconColorOne ? props.beaconColorOne : theme.palette.themePrimary, - props.beaconColorTwo ? props.beaconColorTwo : theme.palette.themeTertiary, + beaconColorOne ? beaconColorOne : theme.palette.themePrimary, + beaconColorTwo ? beaconColorTwo : theme.palette.themeTertiary, ANIMATION_INNER_DIMENSION, ANIMATION_OUTER_DIMENSION, ANIMATION_BORDER_WIDTH @@ -74,7 +77,7 @@ export const getStyles = memoizeFunction(( boxSizing: 'border-box', color: theme.palette.neutralSecondary }, - (props.isCompact && props.animateBeaconSignal) && fadeInAnimation + (isCompact && animateBeaconSignal) && fadeInAnimation ], pulsingBeacon: [ @@ -89,7 +92,7 @@ export const getStyles = memoizeFunction(( borderStyle: 'solid', opacity: 0 }, - (props.isCompact && props.animateBeaconSignal) && continuousPulseAnimation + (isCompact && animateBeaconSignal) && continuousPulseAnimation ], isCompactRoot: { @@ -170,7 +173,7 @@ export const getStyles = memoizeFunction(( { padding: '0 8px' }, - (props.isCompact && props.animateBeaconSignal) && slideInAnimation + (isCompact && animateBeaconSignal) && slideInAnimation ], activityText: { 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 7f11a08413276..8eae74257c376 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx @@ -129,6 +129,13 @@ export class ActivityItem extends BaseComponent { } private _getClassNames(props: IActivityItemProps): IActivityItemClassNames { - return getClassNames(getStyles(props, undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!); + return getClassNames(getStyles( + undefined, + props.styles, + props.animateBeaconSignal, + props.beaconColorOne, + props.beaconColorTwo, + props.isCompact + ), props.className!, props.activityPersonas!, props.isCompact!); } } From 513da1a55e1dcd27e7e61a2fc50dbbd6f511297e Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 14:21:32 -0700 Subject: [PATCH 2/4] Added change file --- .../activity-item-fix_2018-05-07-21-20.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json diff --git a/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json b/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json new file mode 100644 index 0000000000000..d0ac461a33608 --- /dev/null +++ b/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "office-ui-fabric-react", + "type": "none" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file From b7d71e5788169add7909bd707388d60faac1c4f5 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 14:31:13 -0700 Subject: [PATCH 3/4] Text for change file --- .../activity-item-fix_2018-05-07-21-20.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json b/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json index d0ac461a33608..9f1859b2bfc78 100644 --- a/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json +++ b/common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json @@ -1,7 +1,7 @@ { "changes": [ { - "comment": "", + "comment": "ActivityItem: Fix a previous breaking change in getStyles. Passing specific props at the end instead of general props at the beginning.", "packageName": "office-ui-fabric-react", "type": "none" } From d284907f33b53a1a0c369390691cdc72a41bf769 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 7 May 2018 19:40:50 -0700 Subject: [PATCH 4/4] Replace quotes --- .../src/components/ActivityItem/ActivityItem.styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts index a5c9d8d1d3e9b..438cb857a6bd2 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts @@ -22,10 +22,10 @@ const ANIMATION_BORDER_WIDTH = '4px'; export const getStyles = memoizeFunction(( theme: ITheme = getTheme(), customStyles?: IActivityItemStyles, - animateBeaconSignal?: IActivityItemProps["animateBeaconSignal"], - beaconColorOne?: IActivityItemProps["beaconColorOne"], - beaconColorTwo?: IActivityItemProps["beaconColorTwo"], - isCompact?: IActivityItemProps["isCompact"] + animateBeaconSignal?: IActivityItemProps['animateBeaconSignal'], + beaconColorOne?: IActivityItemProps['beaconColorOne'], + beaconColorTwo?: IActivityItemProps['beaconColorTwo'], + isCompact?: IActivityItemProps['isCompact'] ): IActivityItemStyles => { const continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle(