Append/prepend style fixes

- fix missing css`` on append class - fix missing border-radius on append/prepend nodes that was less perceptible because of background color
elastic · Aug 10, 2024 · b4616f1 · b4616f1
1 parent af5978b
commit b4616f1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
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/...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/field_password/__snapshots__/field_password.test.tsx.snap b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
@@ -131,7 +131,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
@@ -346,7 +346,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div

diff --git a/...i/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/...i/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -306,7 +306,7 @@ exports[`EuiFormControlLayout props multiple appends are rendered 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
   />
   <div
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
@@ -346,7 +346,7 @@ exports[`EuiFormControlLayout props one append node is rendered 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
   />
   <div
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
@@ -363,7 +363,7 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
   class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
 >
   <div
-    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
+    class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
   />
   <div
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"

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
@@ -80,7 +80,7 @@ export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('border-top-right-radius', 'inherit')}
         ${logicalCSS('border-bottom-right-radius', 'inherit')}
       `,
-      appendOnly: `
+      appendOnly: css`
         ${logicalCSS('border-top-left-radius', 'inherit')}
         ${logicalCSS('border-bottom-left-radius', 'inherit')}
       `,
@@ -154,6 +154,9 @@ export const euiFormControlLayoutSideNodeStyles = (
       }
     `,
     append: css`
+      ${logicalCSS('border-top-right-radius', 'inherit')}
+      ${logicalCSS('border-bottom-right-radius', 'inherit')}
+
       & > ${buttons}, & > * > ${buttons} {
         ${logicalCSS('border-top-left-radius', 0)}
         ${logicalCSS('border-bottom-left-radius', 0)}
@@ -166,6 +169,9 @@ export const euiFormControlLayoutSideNodeStyles = (
       }
     `,
     prepend: css`
+      ${logicalCSS('border-top-left-radius', 'inherit')}
+      ${logicalCSS('border-bottom-left-radius', 'inherit')}
+
       & > ${buttons}, & > * > ${buttons} {
         ${logicalCSS('border-top-right-radius', 0)}
         ${logicalCSS('border-bottom-right-radius', 0)}