[EuiSelectableTemplateSitewide] Fix border bug in Kibana when used in…

… dark-themed EuiHeaders (#8100)
elastic · Oct 31, 2024 · 179d5f9 · 179d5f9
1 parent 81dd6b5
commit 179d5f9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/packages/eui/changelogs/upcoming/8100.md b/packages/eui/changelogs/upcoming/8100.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
@@ -95,6 +95,16 @@ const euiHeaderDarkStyles = (
   const borderColor =
     colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
 
+  // Specific color overrides for EuiSelectableTemplateSitewide
+  const selectableSitewide = {
+    color: euiTheme.colors.ghost,
+    borderColor: transparentize(euiTheme.colors.ghost, 0.3),
+    placeholderColor: makeHighContrastColor(
+      controlPlaceholderText,
+      8
+    )(backgroundColor),
+  };
+
   return `
     background-color: ${backgroundColor};
     ${logicalCSS('border-bottom-color', borderColor)}
@@ -128,21 +138,28 @@ const euiHeaderDarkStyles = (
     .euiSelectableTemplateSitewide .euiFormControlLayout {
       background-color: transparent;
 
+      input {
+        box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${
+    selectableSitewide.borderColor
+  };
+      }
+
       &--group {
-        border-color: ${transparentize(euiTheme.colors.ghost, 0.3)};
+        border-color: ${selectableSitewide.borderColor};
+
+        input {
+          box-shadow: none;
+        }
       }
 
       &:not(:focus-within) {
         /* Increase contrast of filled text to be more than placeholder text */
-        color: ${euiTheme.colors.ghost};
+        color: ${selectableSitewide.color};
 
         input {
           /* Increase contrast of placeholder text */
           &::placeholder {
-            color: ${makeHighContrastColor(
-              controlPlaceholderText,
-              8
-            )(backgroundColor)};
+            color: ${selectableSitewide.placeholderColor};
           }
 
           /* Inherit color from form control layout */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed `EuiSelectableTemplateSitewide`s within dark-themed `EuiHeader`s missing input borders