Fix border-radius regression/lapse

- have to use border and not box-shadow/padding for `overflow: hidden` to work correctly - I think I missed this/f'd this up in the amsterdam overrides
elastic · Aug 13, 2024 · 4216c21 · 4216c21
1 parent f2d8e9f
commit 4216c21
Show file tree

Hide file tree

Showing 7 changed files with 5 additions and 16 deletions.
diff --git a/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...nce/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/...rence/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/...rence/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png
diff --git a/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/...ence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
diff --git a/...erence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/...erence/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png
diff --git a/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -15,7 +15,7 @@ import {
   mathWithUnits,
 } from '../../../global_styling';
 
-import { euiFormControlDefaultShadow, euiFormVariables } from '../form.styles';
+import { euiFormVariables } from '../form.styles';
 
 export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -45,14 +45,9 @@ export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => {
         display: flex;
         align-items: stretch;
 
-        /* Account for inner box-shadow style border */
-        padding: ${euiTheme.border.width.thin};
-        ${euiFormControlDefaultShadow(euiThemeContext, {
-          withBackground: false,
-        })}
+        border: ${euiTheme.border.width.thin} solid ${form.borderColor};
         background-color: ${form.backgroundColor};
-        /* Keep backgrounds inside border radius */
-        overflow: hidden;
+        overflow: hidden; /* Keep backgrounds inside border radius */
 
         /* Force the stretch of any children so they expand the full height of the control */
         > * {
@@ -144,14 +139,8 @@ export const euiFormControlLayoutSideNodeStyles = (
         ${logicalCSS('padding-right', euiTheme.size.s)}
       }
     `,
-    append: css`
-      ${logicalCSS('border-top-right-radius', 'inherit')}
-      ${logicalCSS('border-bottom-right-radius', 'inherit')}
-    `,
-    prepend: css`
-      ${logicalCSS('border-top-left-radius', 'inherit')}
-      ${logicalCSS('border-bottom-left-radius', 'inherit')}
-    `,
+    append: css``,
+    prepend: css``,
     uncompressed: `
       ${text} {
         ${logicalCSS('padding-horizontal', euiTheme.size.xs)}