style(junior): add transition on feedback messages

1024pix · Nov 15, 2024 · 2fb40dc · 2fb40dc
1 parent 0037622
commit 2fb40dc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/junior/app/components/bubble.gjs b/junior/app/components/bubble.gjs
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import {tracked} from '@glimmer/tracking';
 import MarkdownToHtml from 'junior/components/markdown-to-html';
 import * as markdownConverter from 'junior/utils/markdown-converter';
 
@@ -22,7 +22,7 @@ export default class Bubble extends Component {
     return className;
   }
   get getDelayedClass() {
-    if (typeof this.args.shouldDisplayIn === 'number') {
+    if (typeof this.args.shouldDisplayIn === 'number' || this.args.withTransition) {
       return 'bubble-container__delayed';
     }
     return '';

diff --git a/junior/app/components/challenge/template.hbs b/junior/app/components/challenge/template.hbs
@@ -14,6 +14,7 @@
         @status="success"
         @oralization={{@oralization}}
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if (eq this.answer.result "ko")}}
@@ -22,10 +23,17 @@
         @oralization={{@oralization}}
         @status="error"
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if this.displayValidationWarning}}
-      <Bubble @message={{this.validationWarning}} @status="warning" aria-live="polite" @oralization={{@oralization}} />
+      <Bubble
+        @message={{this.validationWarning}}
+        @status="warning"
+        aria-live="polite"
+        @oralization={{@oralization}}
+        @withTransition={{true}}
+      />
     {{/if}}
   </RobotDialog>
   <Challenge::Item

diff --git a/junior/app/styles/components/bubble.scss b/junior/app/styles/components/bubble.scss
@@ -8,7 +8,7 @@
   }
 
   &__delayed {
-    transition: all 1s;
+    transition: all 2s;
   }
 }