EUI: Reset CSS #2 (elastic#15657)

* Add EUI v0.0.7 as a dependency. - Add support for using dark theme EUI CSS in Dashboard. - Set light theme as the default. - Add comments to chrome.jade about role of theme node. - Add (WTFPL OR MIT) to acceptable licenses. * Remove old reset CSS. - Remove naked element selectors from base.less. - Remove Bootstrap resets. - Remove UI Framework reset. - Remove unused reset styles from UI Framework. * Fix CSS regressions caused by removal of CSS reset. - Replace usage of sr-only with euiScreenReaderOnly. - Apply euiButtonEmpty classes to the 'Add a filter' button. - Fix Notification padding and layout. - Apply euiTabs styles to Timepicker mode tabs. - Fix layout of Available Fields heading in Discover. - Add padding to Popular Fields container in Discover. - Push down Selected Fields heading in Discover sidebar. - Fix appearance of links in Discover sidebar. - Fix height of pills in Filter Bar. * Fix timepicker tests. - Remove kbn-accessible-click from timepicker buttons. * Fix functional tests. - Use byCssSelector inside of testSubjects.find. - Delete flaky view_edit.js test: 'when time changed is stored with dashboard'. - Delete flaky view_edit.js test: 'and preserves edits on cancel > when time changed is stored with dashboard'. - Delete flake Gauge Chart tests. EUI changed the font size, and the text within the gauges doesn't render when the window is too small.
thomasneirynck · Dec 19, 2017 · b0e25a9 · b0e25a9
1 parent 1ade6d7
commit b0e25a9
Show file tree

Hide file tree

Showing 34 changed files with 132 additions and 1,225 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "2.3.0",
+    "@elastic/eui": "0.0.7",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.3.1",
     "@elastic/test-subj-selector": "0.2.1",
@@ -95,7 +96,7 @@
     "babel-plugin-transform-async-generator-functions": "6.24.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-define": "1.3.0",
-    "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-polyfill": "6.20.0",
     "babel-preset-env": "1.4.0",
     "babel-preset-react": "6.22.0",

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/core_plugins/kibana/public/dashboard/dashboard_app.js
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
+import { applyTheme } from 'ui/theme';
 
 import 'ui/query_bar';
 
@@ -329,11 +330,13 @@ app.directive('dashboardApp', function ($injector) {
       function setDarkTheme() {
         chrome.removeApplicationClass(['theme-light']);
         chrome.addApplicationClass('theme-dark');
+        applyTheme('dark');
       }
 
       function setLightTheme() {
         chrome.removeApplicationClass(['theme-dark']);
         chrome.addApplicationClass('theme-light');
+        applyTheme('light');
       }
 
       if ($route.current.params && $route.current.params[DashboardConstants.NEW_VISUALIZATION_ID_PARAM]) {

diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@@ -31,7 +31,7 @@
     </div>
   </div>
 
-  <div class="sidebar-list-header">
+  <div class="discover-sidebar-list-header sidebar-list-header">
     <h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">Selected Fields</h3>
   </div>
   <ul class="list-unstyled discover-selected-fields" >
@@ -46,15 +46,25 @@ <h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">Selected
     </discover-field>
   </ul>
 
-  <div class="sidebar-list-header sidebar-item">
-    <h3 class="sidebar-list-header-label" id="available_fields" tabindex="0">Available Fields
-      <span
-        ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
+  <div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium">
+    <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex="0">
+      Available Fields
+    </h3>
+
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <button
         ng-click="showFields = !showFields"
         aria-hidden="true"
-        class="fa visible-xs visible-sm pull-right field-collapse-toggle"
-      ></span>
-
+        class="kuiButton kuiButton--small visible-xs visible-sm pull-right field-collapse-toggle"
+      >
+        <span
+          aria-hidden="true"
+          class="kuiIcon"
+          ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
+        ></span>
+      </button>
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
       <button
         type="button"
         ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
@@ -66,7 +76,7 @@ <h3 class="sidebar-list-header-label" id="available_fields" tabindex="0">Availab
       >
         <span aria-hidden="true" class="kuiIcon fa-gear"></span>
       </button>
-    </h3>
+    </div>
   </div>
 
   <div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter">

diff --git a/...core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html b/...core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
@@ -4,7 +4,8 @@
       Top 5 values in
       <span ng-if="!field.details.error">
         <a
-          href=""
+          class="kuiLink"
+          kbn-accessible-click
           ng-show="!field.indexPattern.metaFields.includes(field.name) && !field.scripted"
           ng-click="onAddFilter('_exists_', field.name, '+')">
           {{::field.details.exists}}

diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less
@@ -5,6 +5,14 @@
   overflow-x: hidden;
 }
 
+  .discover-sidebar-list-header {
+    margin-top: 5px;
+  }
+
+  .discover-popular-fields {
+    padding-top: 10px;
+  }
+
   .discover-wrapper {
     padding-right: 0px !important;
     padding-left: @collapser-width;

diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -80,7 +80,7 @@ <h2 class="kuiSubTitle kuiVerticalRhythm">
           ></div>
 
           <span
-            class="sr-only"
+            class="euiScreenReaderOnly"
             aria-hidden="true"
             id="visDescription_{{ ::getVisTypeId(type) }}"
           >{{::getVisTypeTooltip(type)}}</span>

diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -11,6 +11,9 @@ import { KuiCodeEditor } from 'ui_framework/components';
 import _ from 'lodash';
 import 'brace/mode/markdown';
 import 'brace/theme/github';
+import {
+  EuiCodeBlock,
+} from '@elastic/eui';
 
 class MarkdownEditor extends Component {
   constructor(props) {
@@ -129,15 +132,14 @@ class MarkdownEditor extends Component {
             There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
             creating lists with data from a group by...
           </div>
-          <pre>
-            <code>
-              {`# All servers:
 
-{{#each _all}}
-- {{ label }} {{ last.formatted }}
-{{/each}}`}
-            </code>
-          </pre>
+          <EuiCodeBlock>
+            {`# All servers:
+
+            {{#each _all}}
+            - {{ label }} {{ last.formatted }}
+            {{/each}}`}
+          </EuiCodeBlock>
         </div>
       </div>
     );

diff --git a/src/ui/public/angular-bootstrap/alert/alert.html b/src/ui/public/angular-bootstrap/alert/alert.html
@@ -1,7 +1,7 @@
 <div class="alert" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissable' : null]" role="alert">
     <button ng-show="closeable" type="button" class="close" ng-click="close()">
         <span aria-hidden="true">&times;</span>
-        <span class="sr-only">Close</span>
+        <span class="euiScreenReaderOnly">Close</span>
     </button>
     <div ng-transclude></div>
 </div>
diff --git a/src/ui/public/angular-bootstrap/rating/rating.html b/src/ui/public/angular-bootstrap/rating/rating.html
@@ -1,5 +1,5 @@
 <span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}">
     <i ng-repeat="r in range track by $index" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')">
-        <span class="sr-only">({{ $index < value ? '*' : ' ' }})</span>
+        <span class="euiScreenReaderOnly">({{ $index < value ? '*' : ' ' }})</span>
     </i>
-</span>
+</span>
diff --git a/src/ui/public/autoload/styles.js b/src/ui/public/autoload/styles.js
@@ -1,6 +1,19 @@
+const theme = require('../theme');
+
 // Kibana UI Framework
 require('../../../../ui_framework/dist/ui_framework.css');
 
+// Elastic UI Framework, light theme
+const euiThemeLight = require('!!raw-loader!@elastic/eui/dist/eui_theme_light.css');
+theme.registerTheme('light', euiThemeLight);
+
+// Elastic UI Framework, dark theme
+const euiThemeDark = require('!!raw-loader!@elastic/eui/dist/eui_theme_dark.css');
+theme.registerTheme('dark', euiThemeDark);
+
+// Set default theme.
+theme.applyTheme('light');
+
 // All Kibana styles inside of the /styles dir
 const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/);
 context.keys().forEach(key => context(key));
diff --git a/src/ui/public/directives/__tests__/timepicker.js b/src/ui/public/directives/__tests__/timepicker.js
@@ -132,14 +132,14 @@ describe('timepicker directive', function () {
     });
 
     it('should highlight the right mode', function () {
-      expect($elem.find('.kbn-timepicker-modes .active').text().trim()).to.be('Quick');
+      expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim()).to.be('Quick');
 
       // Each of the 3 modes
       const modes = ['absolute', 'relative', 'quick'];
       _.each(modes, function (mode) {
         $scope.setMode(mode);
         $scope.$digest();
-        expect($elem.find('.kbn-timepicker-modes .active').text().trim().toLowerCase()).to.be(mode);
+        expect($elem.find('.kbn-timepicker-modes .euiTab-isSelected').text().trim().toLowerCase()).to.be(mode);
       });
     });
   });

diff --git a/src/ui/public/filter_bar/filter_bar.html b/src/ui/public/filter_bar/filter_bar.html
@@ -42,14 +42,14 @@
       ng-show="showAddFilterButton()"
     >
       <div class="filter-description small">
-        <a
+        <button
           ng-click="addFilter()"
-          kbn-accessible-click
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
           data-test-subj="addFilter"
         >
           Add a filter
           <span class="fa fa-plus"></span>
-        </a>
+        </button>
       </div>
     </div>
 

diff --git a/src/ui/public/filter_bar/filter_bar.less b/src/ui/public/filter_bar/filter_bar.less
@@ -73,6 +73,7 @@ filter-bar {
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
+    line-height: 1.5;
   }
 
   .filter {

diff --git a/src/ui/public/notify/notify.less b/src/ui/public/notify/notify.less
@@ -35,7 +35,7 @@
   }
 
   .alert {
-    padding: 0 15px;
+    padding: 5px 15px;
     margin: 0;
     border-radius: 0;
     border: 0px;
@@ -55,7 +55,6 @@
 
   .toast-message {
     flex: 1 1 auto;
-    padding-top: 10px;
     .ellipsis();
     line-height: normal;
   }

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
@@ -6,17 +6,6 @@
 @import "./react-select";
 @import "./pui_react";
 
-html,
-body {
-  .flex-parent();
-  height: 100%;
-  margin: 0;
-}
-
-label > small {
-  font-weight: normal;
-}
-
 .small {
   font-size: 0.9em !important;
 }
@@ -52,11 +41,6 @@ label > small {
   font-family: @font-family-monospace;
 }
 
-code {
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
 ul.navbar-inline li {
   display: inline;
 }
@@ -123,15 +107,6 @@ notifications {
   margin-bottom: 0px!important;
 }
 
-a {
-  // overriden by next rule for a tags that actually have an href
-  cursor: default;
-}
-
-.link, [ng-click], [clip-copy], [href], [confirm-click] {
-  cursor: pointer;
-}
-
 .application,
 .app-container {
   > * {
@@ -236,16 +211,6 @@ kbn-table, .kbn-table {
   }
 }
 
-//== Generic Table
-table {
-  td .fa {
-    // font-awesome's override of the line-height usually doesn't
-    // cauase problems, but in the table it pushes the icon to the
-    // top of the row
-    line-height: @line-height-base;
-  }
-}
-
 //== SavedObjectFinder
 saved-object-finder,
 paginated-selectable-list {
@@ -358,10 +323,6 @@ input[type="checkbox"],
   }
 }
 
-textarea {
-  resize: vertical;
-}
-
 .field-collapse-toggle {
   color: @field-collapse-toggle-color;
   margin-left: 10px !important;
@@ -409,18 +370,6 @@ style-compile {
   }
 }
 
-mark, .mark {
-  background-color: @mark-bg;
-  border-radius: 2px;
-}
-
-fieldset {
-  margin: @form-group-margin-bottom;
-  padding: @form-group-margin-bottom;
-  border: 1px solid @input-border;
-  border-radius: @input-border-radius-base;
-}
-
 [fixed-scroll] {
   overflow-x: auto;
   padding-bottom: 0px;
@@ -499,6 +448,8 @@ fieldset {
 .kuiOptionLabel {
   font-weight: normal; // 1
   cursor: pointer;
+  display: inline-block;
+  margin-bottom: 10px;
 }
 
 .kuiFormPanel {