Skip to content

[EuiSelectableTemplateSitewide] Fix border bug in Kibana when used in dark-themed EuiHeaders #8100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 7 commits into from
Oct 28, 2024
Merged

[EuiSelectableTemplateSitewide] Fix border bug in Kibana when used in dark-themed EuiHeaders #8100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e02d4dc
[REVERT ME] Update story showing bug
cee-chen Oct 24, 2024
6863b2c
[code cleanup] Create var object for selectable sitewide specific colors
cee-chen Oct 24, 2024
a1530d8
Fix sitewide template to always show border even without a prepend/ap…
cee-chen Oct 24, 2024
a3f90c6
[opinionated] Improve focus styles in light mode
cee-chen Oct 24, 2024
c9d2164
changelog
cee-chen Oct 24, 2024
d257082
Revert [REVERT ME]
cee-chen Oct 24, 2024
5207cd4
Revert "[opinionated] Improve focus styles in light mode"
cee-chen Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/8100.md
View file
Open in desktop
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
29 changes: 23 additions & 6 deletions packages/eui/src/components/header/header.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,16 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
? shade(euiTheme.colors.lightestShade, 0.5)
: shade(euiTheme.colors.darkestShade, 0.28);

// 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};

Expand Down Expand Up @@ -112,21 +122,28 @@ const euiHeaderDarkStyles = (euiThemeContext: UseEuiTheme) => {
.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 */
Expand Down