How do I enable the enter animation for the TextInput error message?

[nigellima]

Hey, guys. Thanks for this awesome lib.

So, in the Usage section for the Form, the TextInput we have this gif which shows an example of an error message sliding up and down when the input validation happens. However, this animation seems to not be enabled by default. How do I enable that nice transition?

Gif: https://www.carbondesignsystem.com/components/form/usage#form-validation
Reproduction: https://codesandbox.io/s/cold-moon-ms19p?file=/index.js. In this reproduction sandbox you can notice that the message just appears without the sliding down transition

Package versions:
"carbon-components": "^10.11.2",
"carbon-components-react": "^7.11.3",

[jnm2377]

Hey @nigellima unfortunately we don't have any implementation of validation animations. Based on my experience with our other animation for components, I'd say you probably want to mess around with adding css transitions to the validation outline styles. For icon animation, usually we end up using css keyframes to animate. A good example of one is our checkmark fill in our feedback form (video included below). You can see how we do that here: https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Checkmark.module.scss

Screen.Recording.2021-08-12.at.1.49.13.PM.mov