From 5aef2270a5970a832f92e93a7d716968166c15c4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 13 Aug 2024 10:12:22 -0700
Subject: [PATCH] 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
---
 .../form_control_layout.styles.ts             | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

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
index dbe9ae52c5c..024158cfa75 100644
--- 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)}