EUI: Reset CSS #15486

cjcenizal · 2017-12-08T00:19:53Z

Replaces #15134.

This PR:

Adds EUI as a dependency, making the React components, JS services, and test helpers available
Adds the EUI CSS, including reset styles and component CSS
Removes the Bootstrap, UI Framework, and custom reset CSS
Adds supports for theming with EUI dark theme CSS using innerHTML

To-do:

Review XSS vulnerabilities with use of innerHTML
Review CSS and markup changes with each functional team
Review theming changes with Sharing team
Merge Add K6 overrides and more advanced theming system eui#191
Backport to 6.x

stacey-gammon

Dark theme looks good to me, except for modals, but I'm pretty sure that's an existing problem.

stacey-gammon · 2017-12-13T14:27:29Z

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -329,11 +330,13 @@ app.directive('dashboardApp', function ($injector) {
      function setDarkTheme() {
        chrome.removeApplicationClass(['theme-light']);
        chrome.addApplicationClass('theme-dark');


I'm guessing this is still needed because dashboard is a combination of non-eui elements and eui elements, so for the time being we keep both dark theme applications around?

Correct. KUI and EUI will live side-by-side as we gradually convert our UI to depend upon EUI.

Remove EUI dependency.

…e style node's CSS.

Small css fixes to adress reset changes with the introduction of EUI.

Small fix for checkbox spacing due to EUI reset.

cjcenizal · 2017-12-19T00:15:00Z

Closing in favor of #15657

cjcenizal added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc release_note:enhancement v6.2.0 v7.0.0 labels Dec 8, 2017

cjcenizal force-pushed the eui/reset-css branch from 41d1110 to d54538f Compare December 8, 2017 00:20

cjcenizal changed the title ~~Eui/reset css~~ EUI: Reset CSS Dec 8, 2017

cjcenizal mentioned this pull request Dec 8, 2017

EUIfying Kibana #15282

Closed

9 tasks

cjcenizal force-pushed the eui/reset-css branch from d54538f to 0d8cbb9 Compare December 11, 2017 23:22

cjcenizal mentioned this pull request Dec 12, 2017

EUI CSS visual regression guide #15564

Closed

cjcenizal force-pushed the eui/reset-css branch from 452a62d to 6210553 Compare December 13, 2017 01:16

stacey-gammon approved these changes Dec 13, 2017

View reviewed changes

cjcenizal added 18 commits December 15, 2017 08:26

Autoload eui_theme_light.css.

37a5731

Remove EUI dependency.

Remove naked element selectors from base.less.

4903b95

Remove Bootstrap resets.

cb4dd16

Remove UI Framework reset.

445c4cb

Remove unused reset styles from UI Framework.

4736b6f

Replace usage of sr-only with euiScreenReaderOnly.

ba8c345

Apply euiButtonEmpty classes to the 'Add a filter' button.

6df7ec0

Fix Notification padding and layout.

d67192f

Apply euiTabs styles to Timepicker mode tabs.

cf5c6a2

Fix layout of Available Fields heading in Discover.

c88650e

Add padding to Popular Fields container in Discover.

4e50801

Push down Selected Fields heading in Discover sidebar.

c57df5b

Fix appearance of links in Discover sidebar.

db9408d

Fix height of pills in Filter Bar.

01e5f66

Add support for using dark theme EUI CSS in Dashboard.

180d2a4

Remove commented-out CSS import.

11f27ac

Set light theme as the default.

f68781f

Fix bug with style-loader by using raw-loader and innerHTML to set th…

700017d

…e style node's CSS.

cjcenizal and others added 7 commits December 15, 2017 08:26

Remove commented-out code.

032368c

Add comments to chrome.jade about role of theme node.

41bf847

Add XSS note to themes.js.

6bb72a5

EUI css reset fixes

6bca9e9

Small css fixes to adress reset changes with the introduction of EUI.

Add EUI v0.0.5 as a dependency.

acb6de0

Label fix for EUI regression (#15605)

536e5a9

Small fix for checkbox spacing due to EUI reset.

Upgrade to EUI v0.0.6. Fix linting errors.

ecba3f8

cjcenizal force-pushed the eui/reset-css branch from 6c7ca80 to ecba3f8 Compare December 15, 2017 16:27

cjcenizal added 3 commits December 15, 2017 10:05

Add (WTFPL OR MIT) to acceptable licenses.

a3ce294

Use cssText instead of innerHTML to set theme styles.

8c43cf4

Set dark theme CSS string instead of an array containing the string.

f91b40e

cjcenizal force-pushed the eui/reset-css branch from 02d4b46 to f91b40e Compare December 15, 2017 19:02

cjcenizal added 7 commits December 15, 2017 13:51

Fix linting error.

aa6b14d

Remove kbn-accessible-click from timepicker buttons.

464ebc7

Fix tests for timepicker.

8fd6a73

Fix tests for timepicker... again.

e132de4

Set quiet temporarily to false.

5c2751c

Experiment: downgrade to 0.0.5 to see if tests pass.

f728530

Experiment: downgrade to 0.0.3 to see if tests pass.

407fd24

cjcenizal force-pushed the eui/reset-css branch from 988153c to 407fd24 Compare December 17, 2017 22:27

cjcenizal mentioned this pull request Dec 18, 2017

EUI: Reset CSS #2 #15657

Merged

cjcenizal closed this Dec 19, 2017

cjcenizal deleted the eui/reset-css branch December 19, 2017 00:15

cjcenizal mentioned this pull request Dec 19, 2017

EUI css reset fixes #15685

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EUI: Reset CSS #15486

EUI: Reset CSS #15486

cjcenizal commented Dec 8, 2017 •

edited

Loading

stacey-gammon left a comment

stacey-gammon Dec 13, 2017

cjcenizal Dec 14, 2017 •

edited

Loading

cjcenizal commented Dec 19, 2017

EUI: Reset CSS #15486

EUI: Reset CSS #15486

Conversation

cjcenizal commented Dec 8, 2017 • edited Loading

stacey-gammon left a comment

Choose a reason for hiding this comment

stacey-gammon Dec 13, 2017

Choose a reason for hiding this comment

cjcenizal Dec 14, 2017 • edited Loading

Choose a reason for hiding this comment

cjcenizal commented Dec 19, 2017

cjcenizal commented Dec 8, 2017 •

edited

Loading

cjcenizal Dec 14, 2017 •

edited

Loading