Repository navigation
Visualize sidebar design updates - #29658
Merged
Merged
Conversation
Contributor
|
Pinging @elastic/kibana-design |
Contributor
|
Pinging @elastic/kibana-app |
Contributor
💔 Build Failed |
snide
reviewed
Jan 30, 2019
snide
approved these changes
Jan 30, 2019
snide
left a comment
Contributor
There was a problem hiding this comment.
Some minor stuff I saw, but looks good.
Might be good to use our scrollbar for overflows
Contributor
Author
|
For the checkboxes, the one you pointed to is just a plain input with no class, and honestly, they are much more visible without the KUI class than with. I can let them be 😐 , or I can add the kui classes and update the kui style. |
Contributor
|
Let um be. |
Contributor
💚 Build Succeeded |
Contributor
Author
|
@elastic/kibana-security team, the ping was just because I removed a duplicate CSS dependency. https://github.com/elastic/kibana/pull/29658/files#diff-4df4d2a02df18f09095f6ada70d02217 |
- comment for image - euiScrollbar - euiBorderThick
cchaos
force-pushed
the
bootstrap-dark-mode-take-2
branch
from
January 31, 2019 21:05
f9f07f9 to
17faba9
Compare
Contributor
💚 Build Succeeded |
Contributor
Author
|
The last commit fixes #16435 |
1 task done
patrykkopycinski
pushed a commit
to patrykkopycinski/kibana
that referenced
this pull request
May 6, 2026
* Bring over all ui-select styles and convert color vars * Some bootstrap dark theming * Consolidating non-EUI form control styles * Update some tutorial pieces set to EUI * Fix up visualize editor sidebar as best as I can * PR feedback - comment for image - euiScrollbar - euiBorderThick * Fix advanced toggle test * Don’t show IE’s select arrow
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
3 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.
... and some Dark mode updates (#29417).
Form inputs
The main issue throughout visualize was that there are 4 differently styled inputs (text and selects) – bootstrap, ui-select, kui, EUI. Since they can't all be converted to EUI, I've tried to rectify the other three styles into a single style using a mixin.
So that these:
Now look like these:
This WILL effect all non-EUI inputs and selects.
Overall look:
I cleaned up some class usage and subsequent styles to try to consolidate the look of all sections and cleaned them up a bit.
Examples of before and after:
Issue fix
Fixes #12821
Hides play button instead of disabling it if there is an error:
Dark mode
The main one that was tricky as the
ui-selectdependency. I ended up just copy an pasting their CSS into our own SCSS file and changing all the colors to variables. I'm not worrying too much about any of the other hard-coded variables. Though the only thing that's annoying is that it's still loading the dependency's css file before our SASS.Anyone know how to remove that?
Example of dark mode:
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibility