feat: animate input width changes

elastic · Sep 8, 2023 · 6155757 · 6155757
1 parent d20ef3e
commit 6155757
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts b/src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiThemeComputed } from '@elastic/eui';
+import { EuiThemeComputed, euiCanAnimate } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 import add from '../assets/add.svg';
@@ -29,6 +29,10 @@ export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
   &:focus-within {
     flex-grow: 4;
   }
+
+  ${euiCanAnimate} {
+    transition: flex ${euiTheme.animation.extraFast};
+  }
 `;
 
 export const operationCss = (euiTheme: EuiThemeComputed) => css`