ActivityItem: add pulsing beacon animation#4553
Conversation
| animationName: continuousPulse, | ||
| animationIterationCount: '1', | ||
| animationDuration: '.8s', | ||
| zIndex: 1000 |
There was a problem hiding this comment.
is there a way to do this without z-index? z-index can be deceptive unless you can guarantee your own stacking context
There was a problem hiding this comment.
I think I do need some z-index during the animation so that it animates over the icon / persona and the text. But it's only for within the Item itself so I lowered it. - I'll push that change once the master build is fixed.
|
|
||
| export class ActivityItem extends BaseComponent<IActivityItemProps, {}> { | ||
| public static defaultProps: Partial<IActivityItemProps> = { | ||
| beaconColorOne: '#00FFEC', |
There was a problem hiding this comment.
do we need themable colors for this or is it just a shine?
There was a problem hiding this comment.
verify this looks okay in a dark theme
There was a problem hiding this comment.
I got the colors from Coachmark - confirming with design what to do here.
There was a problem hiding this comment.
We switched to comparable theme colors. @phkuo how do you suggest testing dark theme? Is there a SP palette we can plug-in to the demo site?
| height: 36, | ||
| beaconColorOne: '#00FFEC', | ||
| beaconColorTwo: '#005EDD', | ||
| beaconColorOne: DefaultPalette.blueLight, |
There was a problem hiding this comment.
use one of the theme* colors, since blueLight won't really change theme-to-theme (and will be very different than the themePrimary below in many themes)
|
@phkuo The pulsing beacon now works in dark theme! Thanks for your help in testing that. I got rid of 'static default props' for beaconColorOne /Two and am handling the default fallback instead in styles.ts to get access to the theme object. |
| animationName: continuousPulse, | ||
| animationIterationCount: '1', | ||
| animationDuration: '.8s', | ||
| zIndex: 1000 |
There was a problem hiding this comment.
if this is within its own stacking context, then just set z-index to 2
There was a problem hiding this comment.
(because no other z-indexes elsewhere will matter)
…c-react into activity-item-animation
2 participants
Pull request checklist
$ npm run changeDescription of changes
Focus areas to test
(optional)