Skip to content

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