[DO NOT MERGE][Visual Refresh] Input design changes #224382
Closed
mgadewoll wants to merge 10 commits intoelastic:mainfrom
Closed
[DO NOT MERGE][Visual Refresh] Input design changes #224382mgadewoll wants to merge 10 commits intoelastic:mainfrom
mgadewoll wants to merge 10 commits intoelastic:mainfrom
Conversation
Contributor
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
mgadewoll
force-pushed
the
eui/324-input-visual-refresh
branch
9 times, most recently
from
92f0724 to
3c485c9
Compare
mgadewoll
added
ci:project-deploy-elasticsearch
Contributor
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
mgadewoll
force-pushed
the
eui/324-input-visual-refresh
branch
3 times, most recently
from
c45ed60 to
6c2f6b6
Compare
mgadewoll
added
EUI Visual Refresh
ci:cloud-persist-deployment
jughosta
reviewed
Jul 4, 2025
Contributor
jughosta
left a comment
jughosta
left a comment
There was a problem hiding this comment.
Noticed some issues in Data View flyout in error state:
- the first input does not get red outline (same on main)
- the outline for the second input is missing smooth round borders
| expect(await logLevelBadge.getVisibleText()).to.be('debug'); | ||
| expect(await logLevelBadge.getComputedStyle('background-color')).to.be( | ||
| 'rgba(189, 215, 255, 1)' | ||
| 'rgba(232, 241, 255, 1)' |
Contributor
There was a problem hiding this comment.
Wonder why this color got changed. This grey does not provide enough contrast in comparison with the previous value.
Contributor
There was a problem hiding this comment.
We might want to keep the previous colors (hard code them?) in src/platform/packages/shared/kbn-discover-utils/src/data_types/logs/utils/get_log_level_color.ts for time being since we are discussing to change them in #225651
Contributor
There was a problem hiding this comment.
I'm not sure we should hardcode them since I think the colour tokens can be different in light/dark mode, and we shouldn't need to manually account for that in our app code. Let's see what EUI can offer as a solution here.
Contributor
Author
There was a problem hiding this comment.
@jughosta Do you know where/how this element could it be seen?
Contributor
There was a problem hiding this comment.
Hi @mgadewoll,
Thanks for looking into it! It appears on Discover only in Observability space.
This color is used for the row color indicators (on the left side of each row) and for log.level badge color.
Contributor
Author
There was a problem hiding this comment.
ℹ️ The previous color was wrong as the condition let the value to use the initially wrong color value. The update would still be expected.
Edit: 💭 This would mean that previously tests and actual app output were not in sync as the test used static values while the render should have ensured the colors to be correctly updated.
Contributor
Author
There was a problem hiding this comment.
ℹ️ This EUI PR fixes the wrong static color palette values.
Contributor
Author
There was a problem hiding this comment.
This grey does not provide enough contrast in comparison with the previous value.
@jughosta That's not a change that was introduced here. (it only surfaces because the tests had old values).
ℹ️ EuiDataGrid has recently received an update to the hover styling which wasn't added in this current EUI test release yet (I'll update this branch in a bit).
With that it will look like this:
We would suggest to use the subdued badge colors for the "DEBUG" log level instead (code): euiTheme.colors.backgroundLightText.
cc @ek-so
Contributor
There was a problem hiding this comment.
Either is okay with me, thanks!
Contributor
Author
There was a problem hiding this comment.
We won't update this here now as it's not related to the input changes. We'll leave it to the owning team to check if the suggestion works better 🙂
| <span | ||
| aria-label="Loading" | ||
| class="euiLoadingSpinner emotion-euiLoadingSpinner-s" | ||
| class="euiLoadingSpinner emotion-euiLoadingSpinner-m" |
Contributor
There was a problem hiding this comment.
Couple of issues to address:
- add spacing before the counters
- hide the double border
Contributor
Author
There was a problem hiding this comment.
Contributor
Author
|
@jughosta Thanks for the review!
This is an issue on implementation side and it's not introduced by the input changes. The issue is that only the EuiFormRow has the
I can reproduce this issue also on EUI side. We'll fix it there 👍 |
mgadewoll
force-pushed
the
eui/324-input-visual-refresh
branch
from
6c2f6b6 to
1fe2718
Compare
Contributor
- includes visual refresh input updates
- triggered by updated initial option for EuiColorVisStore to ensure Borealis values
mgadewoll
force-pushed
the
eui/324-input-visual-refresh
branch
from
fd001dc to
64235d8
Compare
jughosta
added a commit
that referenced
this pull request
Jul 8, 2025
## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing #224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" />
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 8, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 8, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 8, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 8, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 8, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" /> (cherry picked from commit 7483b8c)
kibanamachine
added a commit
that referenced
this pull request
Jul 8, 2025
…6822) (#226933) # Backport This will backport the following commits from `main` to `9.0`: - [[Discover] Fix invalid input highlight in Data View flyout (#226822)](#226822) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2025-07-08T07:45:57Z","message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:all-open","v9.2.0"],"title":"[Discover] Fix invalid input highlight in Data View flyout","number":226822,"url":"https://github.com/elastic/kibana/pull/226822","mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226822","number":226822,"mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Jul 8, 2025
…6822) (#226934) # Backport This will backport the following commits from `main` to `9.1`: - [[Discover] Fix invalid input highlight in Data View flyout (#226822)](#226822) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2025-07-08T07:45:57Z","message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:all-open","v9.2.0"],"title":"[Discover] Fix invalid input highlight in Data View flyout","number":226822,"url":"https://github.com/elastic/kibana/pull/226822","mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226822","number":226822,"mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Jul 8, 2025
…26822) (#226932) # Backport This will backport the following commits from `main` to `8.19`: - [[Discover] Fix invalid input highlight in Data View flyout (#226822)](#226822) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2025-07-08T07:45:57Z","message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:all-open","v9.2.0"],"title":"[Discover] Fix invalid input highlight in Data View flyout","number":226822,"url":"https://github.com/elastic/kibana/pull/226822","mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226822","number":226822,"mergeCommit":{"message":"[Discover] Fix invalid input highlight in Data View flyout (#226822)\n\n## Summary\n\nThis PR addresses the existing issue with invalid input highlights in\nData View flyout. `isInvalid` prop was missing\nhttps://github.com//pull/224382#issuecomment-3043839200\n\nBefore:\n<img width=\"939\" alt=\"Screenshot 2025-07-07 at 15 46 59\"\nsrc=\"https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4\"\n/>\n<img width=\"935\" alt=\"Screenshot 2025-07-07 at 15 49 32\"\nsrc=\"https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75\"\n/>\n\nAfter (notice the additional bottom outline in red):\n<img width=\"937\" alt=\"Screenshot 2025-07-07 at 15 46 27\"\nsrc=\"https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5\"\n/>\n<img width=\"929\" alt=\"Screenshot 2025-07-07 at 15 49 10\"\nsrc=\"https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4\"\n/>","sha":"7483b8c3dad456d5966edd08b6e43b5c49e80ec2"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
Member
|
/oblt-deploy |
Contributor
|
PR Project deployment started at: https://buildkite.com/elastic/kibana-deploy-project-from-pr/builds/505 |
Contributor
|
Cloud deployment initiated, see credentials at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/273 |
mgadewoll
force-pushed
the
eui/324-input-visual-refresh
branch
from
c5370ae to
ba084f2
Compare
Contributor
💔 Build Failed
Failed CI StepsMetrics [docs]Async chunks
Page load bundle
Unknown metric groupsESLint disabled line counts
Total ESLint disabled count
History
cc @mgadewoll |
This was referenced Jul 11, 2025
Contributor
Author
|
ℹ️ Implemented as part of #227945 |
mgadewoll
added a commit
that referenced
this pull request
Jul 21, 2025
`105.0.0` ⏩ `106.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| |  |  | |  |  | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| |  |  | |  |  | |  |  | |  |  | |  |  | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([#8800](elastic/eui#8800)) - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([#8800](elastic/eui#8800))
Bluefinger
pushed a commit
to Bluefinger/kibana
that referenced
this pull request
Jul 22, 2025
`105.0.0` ⏩ `106.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](elastic#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](elastic#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| |  |  | |  |  | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| |  |  | |  |  | |  |  | |  |  | |  |  | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([elastic#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([elastic#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([elastic#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([elastic#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([elastic#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([elastic#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([elastic#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([elastic#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([elastic#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([elastic#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([elastic#8800](elastic/eui#8800))
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
…26822) ## Summary This PR addresses the existing issue with invalid input highlights in Data View flyout. `isInvalid` prop was missing elastic#224382 (comment) Before: <img width="939" alt="Screenshot 2025-07-07 at 15 46 59" src="https://github.com/user-attachments/assets/35a29259-8607-42fd-9898-7af827549ba4" /> <img width="935" alt="Screenshot 2025-07-07 at 15 49 32" src="https://github.com/user-attachments/assets/e37acb28-18ef-4bf6-99b2-8fbb7b5e8c75" /> After (notice the additional bottom outline in red): <img width="937" alt="Screenshot 2025-07-07 at 15 46 27" src="https://github.com/user-attachments/assets/061f3aca-6941-4e26-bcb9-a5530c9555d5" /> <img width="929" alt="Screenshot 2025-07-07 at 15 49 10" src="https://github.com/user-attachments/assets/214a6269-16f5-42d4-be83-e28d49f338d4" />
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
`105.0.0` ⏩ `106.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](elastic#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](elastic#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| |  |  | |  |  | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| |  |  | |  |  | |  |  | |  |  | |  |  | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([elastic#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([elastic#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([elastic#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([elastic#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([elastic#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([elastic#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([elastic#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([elastic#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([elastic#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([elastic#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([elastic#8800](elastic/eui#8800))
crespocarlos
pushed a commit
to crespocarlos/kibana
that referenced
this pull request
Jul 25, 2025
`105.0.0` ⏩ `106.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes ### Visual Refresh: Input updates >[!IMPORTANT] This PR includes visual changes on input elements as part of the Visual Refresh project. These changes have been open for QA ahead of time on [this draft PR](elastic#224382). Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778. Additionally this PR adds the following changes related to Visual Refresh input updates: - adds newly introduced prop `colorModes` on **EuiSelectableTemplateSitewide** (elastic/eui#8806) to ensure expected output - updates styles for `in_table_search_control.tsx` to ensure correct visual output ([conversation](elastic#224382 (comment))) - updates color values in tests/snapshots ### What changes visibly? 🔗 See a more detailed overview of changes [here](https://docs.google.com/document/d/1pxfev-NQhvbyMCkIGDNgEC4XewnkV_N32p8aEyhvRHo/edit?usp=sharing). The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline. | before | after | |---|---| |  |  | |  |  | 1. General form layout and input element updates - updated text and border colors - visible hover states - updated state indicators (e.g. focus and invalid) - updated disabled, readonly, drag etc states - slightly updated paddings - increased icon size in compressed forms - added border between form control layout append/prepend elements and main form element 2. **EuiSelectableTemplateSitewide** - added prop `colorModes` to handle color modes for search and popover elements separately ### Which EUI components are affected? - EuiFieldText - EuiFieldNumber - EuiFielPassword - EuiFieldSearch - EuiTextarea - EuiSelect - EuiSuperSelect - EuiFilePicker - EuiDatePicker - EuiSuperDatePicker - EuiComboBox - EuiFormLabel - EuiFormErrorText - EuiFormControlLayout - EuiFormControlLayoutDelimited - EuiFormControlLayoutIcons - EuiSelectableTemplateSitewide ## Screenshots <details> <summary>View comparison screenshots</summary> | LIGHT | DARK | |---|---| |  |  | |  |  | |  |  | |  |  | |  |  | </details> ## Additional changes - fixes missing border due to wrong token usage in `filter_button_group.tsx` ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-05e15a78042cf7b418177c3ccde14623d1acad0b98a07e61780ac4d4a9caa60bR63)) - updates JSON token import paths ([change](https://github.com/elastic/kibana/compare/main...mgadewoll:eui/v106.0.0?expand=1#diff-a4c2ecff5ea550ffdce81da06e4ba26fdc4cfa48bc13b766a42b8388c03ebd7aR13)) - updates color values in tests/snapshots >[!NOTE] Color value changes in tests/snapshots are expected due to a previously missed change in the default initial colors for eui palettes to ensure Borealis colors for static usages. This surfaces specifically in tests as they are not connected to component renders. ## Package updates ### `@elastic/eui` #### [`v106.0.0`](https://github.com/elastic/eui/releases/v106.0.0) - Added `colorModes` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components ([elastic#8806](elastic/eui#8806)) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added new `refresh` design for input styles on form picker components: ([elastic#8778](elastic/eui#8778)) - `EuiComboBox` - `EuiFilePicker` - `EuiDatePicker` - `EuiSuperDatePicker` - Updated the font size of `xs` size `EuiButtonEmpty` to `14px` ([elastic#8778](elastic/eui#8778)) - Added a new `backgroundStyle` prop to the `EuiFlyoutChild` component. ([elastic#8847](elastic/eui#8847)) - Updates to `EuiFlyoutSessionProvider` ([elastic#8846](elastic/eui#8846)) * Remove the onUnmount callbacks from various flyout configurations * Consolidate unmount behavior with a single onUnmount prop at the provider level. * Removed onCloseFlyout and onCloseChildFlyout from the flyout render context. * Fixed the canGoBack logic in packages/eui/src/components/flyout/sessions/use_eui_flyout.ts. - Added new `refresh` design for input styles and form layout components: ([elastic#8767](elastic/eui#8767)) - `EuiFieldText` - `EuiFieldNumber` - `EuiFieldPassword` - `EuiFieldSearch` - `EuiTextarea` - `EuiSelect` - `EuiSuperSelect` - `EuiFormControlLayout` - `EuiFormControlLayoutDelimited` - `EuiFormControlLayoutIcons` - `EuiFormLabel` - `EuiFormErrorText` - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` **Bug fixes** - Fixed the screen reader output in `EuiProgress` when a node is passed in the `label` prop ([elastic#8856](elastic/eui#8856)) - Removed unnecessary `title` attributes for `label` and `valueText` in `EuiProgress` ([elastic#8856](elastic/eui#8856)) - Fixed wrong initialization options on `EUI_VIS_COLOR_STORE` which resulted in partially wrong initial color values for static `euiPalette{name}` functions (e.g. `euiPaletteForTemperature`) ([elastic#8844](elastic/eui#8844)) **Breaking changes** - Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. ([elastic#8806](elastic/eui#8806)) ### `@elastic/eui-theme-borealis` #### [`v3.3.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode ([elastic#8800](elastic/eui#8800)) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` - Updated values for tokens: ([elastic#8767](elastic/eui#8767)) - `colors.textWarning` - `colors.borderStrongPrimary` - `colors.borderStrongAccent` - `colors.borderStrongAccentSecondary` - `colors.borderStrongNeutral` - `colors.borderStrongSuccess` - `colors.borderStrongWarning` - `colors.borderStrongRisk` - `colors.borderStrongDanger` - `components.forms.backgroundReadOnly` ### `@elastic/eui-theme-common` ## [`v3.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-common/changelogs/CHANGELOG_2025.md?plain=1#L1) - Added semantic tokens: ([elastic#8767](elastic/eui#8767)) - `colors.borderInteractiveFormsHoverPlain` - `colors.borderInteractiveFormsHoverDanger` - Added component tokens: ([elastic#8767](elastic/eui#8767)) - `components.forms.backgroundDropping` - `components.forms.borderFocused` - `components.forms.borderInvalid` - `components.forms.borderHovered` - `components.forms.borderInvalidHovered` - `components.forms.borderAutofilledHovered` - `components.forms.clearButtonBackground` **Breaking changes** - Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects. ([elastic#8800](elastic/eui#8800))
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Important
DO NOT MERGE.
This is a testing PR for the Visual Refresh input design changes.
This PR introduces visual style changes to input and form layout elements as part of the Visual Refresh project to modernize the UI of our product.
Note
💻 Deployment
Changes
Almost all changes were done on EUI side. The changes to form elements were done in elastic/eui#8767 and elastic/eui#8778.
colorModeson EuiSelectableTemplateSitewide ([Visual Refresh][EuiSelectableTemplateSitewide] AddcolorModesprop eui#8806) to ensure expected outputWhat changes visibly?
🔗 See a more detailed overview of changes here.
The visually most noticeable change is the update of state indicators for focus and invalid. The indicator underline was changed to a full outline.
colorModesto handle color modes for search and popover elements separatelyWhich EUI components are affected?
Screenshots
View comparison screenshots