Skip to content
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.

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

EUI: Reset CSS #15134

Closed
wants to merge 14 commits into from
Closed

EUI: Reset CSS #15134

wants to merge 14 commits into from

Conversation

cjcenizal
Copy link
Contributor

@cjcenizal cjcenizal commented Nov 23, 2017

I've extracted the commits from #14948 which load the EUI CSS (thereby using its reset), and removing the Bootstrap, UI Framework, and custom reset CSS. Depends upon elastic/eui#153.

We'll need to complete the partial audit below and fix the regressions we find.

Partial audit

Here are a few of the visual regressions incurred by the CSS reset changes.

Notifications

  • Notifications are missing padding around their edges, causing text to appear misaligned vertically and buttons to be flush against the top and bottom edges.

image

Timepicker

  • Timepicker buttons don't have a pointer cursor when hovered, probably because they're a elements with no href attribute.
  • The spacing also looks like it got tighter, causing the "collapse" button to get uncomfortably close to the "Absolute" button.

image

Query bar

  • The "Add filter" button doesn't have a pointer cursor when hovered.

image

Discover

  • The "Selected fields" label is too close to the index pattern title.
  • The "Available fields" element become too short, causing the gear button on the right side to overflow.
  • The link ("143" in the screenshot) is missing link styles.
  • The vertical spacing of the values and progress bars looks too tight.

image

  • When expanded, the labels are too close to the Available Fields inputs.

image

  • In "Single document" view, the tabs lack pointer cursors when hovered, possibly because they're a elements without href attributes.

  • Note: this applies to the tabs in an expanded row of the doc table, too.

image

Visualize

  • The title is too close to the search bar in the Visualize Wizard.
  • The sr-only accessibility class has been deleted, which means all elements previously hidden by it are now visible. We can fix this by replacing this class with euiScreenReaderOnly instead.

image

  • The sidebar tabs lack pointer cursors when hovered, possibly because they're a elements without href attributes.

image

  • The spacing between "Select bucket types" and the menu is too tight.

image

@cjcenizal cjcenizal added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. v7.0.0 labels Nov 23, 2017
@cjcenizal cjcenizal mentioned this pull request Nov 30, 2017
9 tasks
@cjcenizal
Copy link
Contributor Author

Closing in favor of a branch on the original repo: https://github.com/elastic/kibana/tree/eui/reset-css

And this issue: #15315

@cjcenizal cjcenizal closed this Nov 30, 2017
@cjcenizal cjcenizal deleted the eui/reset-css branch November 30, 2017 19:32
@cjcenizal cjcenizal mentioned this pull request Dec 8, 2017
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. v7.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant