test: disable animation on label, helper, required indicator (#9121)

vursen · web-flow · commit 89a524146b5e · 2025-05-13T09:22:34.000+03:00
diff --git a/packages/checkbox-group/test/visual/common.js b/packages/checkbox-group/test/visual/common.js
@@ -3,10 +3,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-checkbox-group',
   css`
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/checkbox/test/visual/common.js b/packages/checkbox/test/visual/common.js
@@ -3,9 +3,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-checkbox',
   css`
-    /* Show error message immediately */
-    [part='error-message'] {
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/combo-box/test/visual/common.js b/packages/combo-box/test/visual/common.js
@@ -9,10 +9,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/custom-field/test/visual/common.js b/packages/custom-field/test/visual/common.js
@@ -3,10 +3,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-custom-field vaadin-date-picker vaadin-number-field vaadin-text-field',
   css`
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/date-picker/test/visual/common.js b/packages/date-picker/test/visual/common.js
@@ -9,10 +9,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/date-time-picker/test/visual/common.js b/packages/date-time-picker/test/visual/common.js
@@ -8,10 +8,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/login/test/visual/common.js b/packages/login/test/visual/common.js
@@ -7,5 +7,21 @@ registerStyles(
     ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
+    }
   `,
 );
diff --git a/packages/multi-select-combo-box/test/visual/common.js b/packages/multi-select-combo-box/test/visual/common.js
@@ -9,10 +9,20 @@ registerStyles(
       caret-color: transparent !important;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/number-field/test/visual/common.js b/packages/number-field/test/visual/common.js
@@ -8,10 +8,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/password-field/test/visual/common.js b/packages/password-field/test/visual/common.js
@@ -0,0 +1,27 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-password-field',
+  css`
+    /* Hide caret */
+    :host([focused]) ::slotted(input) {
+      caret-color: transparent;
+    }
+
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
+    }
+  `,
+);
diff --git a/packages/password-field/test/visual/lumo/password-field.test.js b/packages/password-field/test/visual/lumo/password-field.test.js
@@ -1,6 +1,7 @@
 import { sendKeys } from '@vaadin/test-runner-commands';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/lumo/vaadin-password-field.js';
 
 describe('password-field', () => {
diff --git a/packages/password-field/test/visual/material/password-field.test.js b/packages/password-field/test/visual/material/password-field.test.js
@@ -1,6 +1,7 @@
 import { sendKeys } from '@vaadin/test-runner-commands';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/material/vaadin-password-field.js';
 
 describe('password-field', () => {
diff --git a/packages/radio-group/test/visual/common.js b/packages/radio-group/test/visual/common.js
@@ -3,10 +3,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-radio-group',
   css`
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/select/test/visual/common.js b/packages/select/test/visual/common.js
@@ -3,10 +3,20 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-select',
   css`
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/text-area/test/visual/common.js b/packages/text-area/test/visual/common.js
@@ -9,9 +9,16 @@ registerStyles(
     }
 
     /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    [part='label'],
+    [part='helper-text'],
+    [part='error-message'],
+    [part='required-indicator'] {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/text-field/test/visual/common.js b/packages/text-field/test/visual/common.js
@@ -8,10 +8,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
diff --git a/packages/time-picker/test/visual/common.js b/packages/time-picker/test/visual/common.js
@@ -9,10 +9,20 @@ registerStyles(
       caret-color: transparent;
     }
 
-    /* Show error message immediately */
-    [part='error-message'] {
-      animation: none !important;
-      transition: none !important;
+    /* Disable animation */
+    [part='label'],
+    [part$='button'],
+    [part='helper-text'],
+    [part='input-field'],
+    [part='error-message'],
+    [part='required-indicator'],
+    ::slotted(:is(input, textarea):placeholder-shown) {
+      &,
+      &::before,
+      &::after {
+        animation: none !important;
+        transition: none !important;
+      }
     }
   `,
 );
