Themable Dialog animations #604
Conversation
Codecov Report
@@ Coverage Diff @@
## master #604 +/- ##
==========================================
+ Coverage 98.94% 98.94% +<.01%
==========================================
Files 42 42
Lines 3043 3044 +1
Branches 820 822 +2
==========================================
+ Hits 3011 3012 +1
Misses 32 32
Continue to review full report at Codecov.
|
| @@ -160,8 +159,8 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T | |||
| const { underlay } = this.properties; | |||
| return v('div', { | |||
| classes: [ this.theme(underlay ? css.underlayVisible : null), fixedCss.underlay ], | |||
| enterAnimation: animations.fadeIn, | |||
| exitAnimation: animations.fadeOut, | |||
| enterAnimation: this.theme(css.underlayEnter) || undefined, | |||
There was a problem hiding this comment.
We should probably update to SupportedClassName typings in framework/widget-core so this isn't necessary 😝
| @@ -172,8 +171,8 @@ export class DialogBase<P extends DialogProperties = DialogProperties> extends T | |||
| aria = {}, | |||
| closeable = true, | |||
| closeText, | |||
| enterAnimation = animations.fadeIn, | |||
| exitAnimation = animations.fadeOut, | |||
| enterAnimation = this.theme(css.enter) || undefined, | |||
There was a problem hiding this comment.
Another thought -- would it make sense to add enterAnimationActive and exitAnimationActive properties to support both transitions and animations for increased styling flexibility? Using keyframes for a simple opacity fade in/out seems overkill, although I suppose any given transition could be made into an animation. Your call.
Type: bug / feature
The following has been addressed in the PR:
Description:
Allows customization of animations via CSS
Resolves #578