Skip to content

ActivityItem: fix getstyles #4802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lynamemi merged 4 commits into from
May 8, 2018
Merged

ActivityItem: fix getstyles #4802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8d8929
Passing specific props at end of get styles
lynamemi May 7, 2018
513da1a
Added change file
lynamemi May 7, 2018
b7d71e5
Text for change file
lynamemi May 7, 2018
d284907
Replace quotes
lynamemi May 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/activity-item-fix_2018-05-07-21-20.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"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"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
17 changes: 10 additions & 7 deletions packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -74,7 +77,7 @@ export const getStyles = memoizeFunction((
boxSizing: 'border-box',
color: theme.palette.neutralSecondary
},
(props.isCompact && props.animateBeaconSignal) && fadeInAnimation
(isCompact && animateBeaconSignal) && fadeInAnimation
],

pulsingBeacon: [
Expand All @@ -89,7 +92,7 @@ export const getStyles = memoizeFunction((
borderStyle: 'solid',
opacity: 0
},
(props.isCompact && props.animateBeaconSignal) && continuousPulseAnimation
(isCompact && animateBeaconSignal) && continuousPulseAnimation
],

isCompactRoot: {
Expand Down Expand Up @@ -170,7 +173,7 @@ export const getStyles = memoizeFunction((
{
padding: '0 8px'
},
(props.isCompact && props.animateBeaconSignal) && slideInAnimation
(isCompact && animateBeaconSignal) && slideInAnimation
],

activityText: {
Expand Down
9 changes: 8 additions & 1 deletion packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
}

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!);
}
}