More CSS tweaks

- Fix `disabled`+`invalid` to hide invalid underline (transparent) - tweak `euiFormControlDefaultShadow` to allow more granular CSS - it's possible I should just rewrite this whole mixin at this point? :| - Update delimited styles to smoothly transition background color for disabled/readonly bgs (to match the inputs)
elastic · Aug 13, 2024 · f2d8e9f · f2d8e9f
1 parent 78c1c29
commit f2d8e9f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
@@ -101,6 +101,7 @@ describe('euiFormControlStyles', () => {
           -webkit-text-fill-color: #98A2B3;
           background-color: #eef1f7;
           cursor: not-allowed;
+          --euiFormControlStateColor: transparent;
 
           
         &::-webkit-input-placeholder { 
@@ -186,11 +187,8 @@ describe('euiFormControlStyles', () => {
 
         
             
-          
           border: none;
           box-shadow: inset 0 0 0 1px rgba(32,38,47,0.1);
-        
-          
           background-color: #f9fbfd;
           background-repeat: no-repeat;
           background-size: 0% 100%;
@@ -200,7 +198,6 @@ describe('euiFormControlStyles', () => {
             transparent 2px,
             transparent 100%
           );
-
           @media screen and (prefers-reduced-motion: no-preference) {
             transition:
               background-image 150ms ease-in,

diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
@@ -234,7 +234,14 @@ export const euiFormControlDefaultShadow = (
   {
     withBorder = true,
     withBackground = true,
-  }: { withBorder?: boolean; withBackground?: boolean } = {}
+    withBackgroundColor = withBackground,
+    withBackgroundAnimation = withBackground,
+  }: {
+    withBorder?: boolean;
+    withBackground?: boolean;
+    withBackgroundColor?: boolean;
+    withBackgroundAnimation?: boolean;
+  } = {}
 ) => {
   const { euiTheme } = euiThemeContext;
   const form = euiFormVariables(euiThemeContext);
@@ -243,10 +250,13 @@ export const euiFormControlDefaultShadow = (
   const border = `
     border: none;
     box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${form.borderColor};
-  `;
+  `.trim();
 
-  const backgroundGradient = `
+  const backgroundColor = `
     background-color: ${form.backgroundColor};
+  `.trim();
+
+  const backgroundGradient = `
     background-repeat: no-repeat;
     background-size: 0% 100%;
     background-image: linear-gradient(to top,
@@ -255,17 +265,22 @@ export const euiFormControlDefaultShadow = (
       transparent ${euiTheme.border.width.thick},
       transparent 100%
     );
+  `.trim();
 
+  const backgroundAnimation = `
     ${euiCanAnimate} {
       transition:
         background-image ${form.animationTiming},
         background-size ${form.animationTiming},
         background-color ${form.animationTiming};
-    }`;
+    }
+  `.trim();
 
   return `
     ${withBorder ? border : ''}
+    ${withBackgroundColor ? backgroundColor : ''}
     ${withBackground ? backgroundGradient : ''}
+    ${withBackgroundAnimation ? backgroundAnimation : ''}
   `;
 };
 
@@ -297,6 +312,7 @@ export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => {
     -webkit-text-fill-color: ${form.controlDisabledColor};
     background-color: ${form.backgroundDisabledColor};
     cursor: not-allowed;
+    --euiFormControlStateColor: transparent;
 
     ${euiPlaceholderPerBrowser(`
       color: ${form.controlDisabledColor};

diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
@@ -21,8 +21,15 @@ export const euiFormControlLayoutDelimitedStyles = (
   euiThemeContext: UseEuiTheme
 ) => {
   return {
-    // Appended onto existing  `euiFormControlLayout` styles
-    delimited: css``,
+    // Appended onto existing `euiFormControlLayout` styles
+    delimited: css(
+      // Transition smoothly between disabled/readOnly background color changes
+      euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: false,
+        withBackground: false,
+        withBackgroundAnimation: true,
+      })
+    ),
     disabled: css(euiFormControlDisabledStyles(euiThemeContext)),
     readOnly: css(euiFormControlReadOnlyStyles(euiThemeContext)),
 
@@ -32,7 +39,11 @@ export const euiFormControlLayoutDelimitedStyles = (
         display: flex;
       `,
       invalid: css(
-        euiFormControlDefaultShadow(euiThemeContext, { withBorder: false }),
+        euiFormControlDefaultShadow(euiThemeContext, {
+          withBorder: false,
+          withBackgroundColor: false,
+          withBackgroundAnimation: false,
+        }),
         euiFormControlInvalidStyles(euiThemeContext)
       ),
     },