Add new components to UI Framework. (#9462)

- Icon, Link, Button, TextInput, CheckBox, Table, ControlledTable, ToolBar, ToolBarFooter. - Update Local Nav to use classes with kui prefix. - Add PostCSS loader to UI Framework webpack.
elastic · Dec 15, 2016 · 2f93b18 · 2f93b18
1 parent 8fe6204
commit 2f93b18
Show file tree

Hide file tree

Showing 110 changed files with 1,918 additions and 764 deletions.
diff --git a/package.json b/package.json
@@ -146,6 +146,7 @@
     "node-sass": "3.8.0",
     "node-uuid": "1.4.7",
     "pegjs": "0.9.0",
+    "postcss-loader": "1.2.0",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "request": "2.61.0",

diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">Help</div>
+<div class="kuiLocalDropdownTitle">Help</div>
 
 <tabset>
   <tab heading="Request format">

diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">History</div>
+<div class="kuiLocalDropdownTitle">History</div>
 
 <div class="history-body">
   <ul class="list-group history-reqs">

diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,9 +1,9 @@
-<div class="localDropdownTitle">Settings</div>
+<div class="kuiLocalDropdownTitle">Settings</div>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
   <div class="form-group">
-    <div class="localDropdownHeader">
-      <div class="localDropdownHeader__label">Font Size</div>
+    <div class="kuiLocalDropdownHeader">
+      <div class="kuiLocalDropdownHeader__label">Font Size</div>
     </div>
 
     <div>
@@ -27,8 +27,8 @@
   </div>
 
   <div class="form-group">
-    <div class="localDropdownHeader">
-      <div class="localDropdownHeader__label">Autocomplete</div>
+    <div class="kuiLocalDropdownHeader">
+      <div class="kuiLocalDropdownHeader__label">Autocomplete</div>
     </div>
 
     <div class="checkbox">

diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,4 +1,4 @@
-<div class="localDropdownTitle">Welcome to Console</div>
+<div class="kuiLocalDropdownTitle">Welcome to Console</div>
 
 <p><strong>Quick intro to the UI</strong></p>
 

diff --git a/src/core_plugins/kibana/public/dashboard/index.html b/src/core_plugins/kibana/public/dashboard/index.html
@@ -6,7 +6,7 @@
       <!-- Title. -->
       <div
         data-transclude-slot="topLeftCorner"
-        class="localTitle"
+        class="kuiLocalTitle"
       >
         <span
           ng-show="dash.id"
@@ -24,7 +24,7 @@
         ng-submit="filterResults()"
       >
         <div class="typeahead" kbn-typeahead="dashboard">
-          <div class="localSearch">
+          <div class="kuiLocalSearch">
             <input
               parse-query
               input-focus
@@ -33,13 +33,13 @@
               placeholder="Filter..."
               aria-label="Filter input"
               type="text"
-              class="localSearchInput"
-              ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+              class="kuiLocalSearchInput"
+              ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
             >
             <button
               type="submit"
               aria-label="Filter Dashboards"
-              class="localSearchButton"
+              class="kuiLocalSearchButton"
               ng-disabled="queryInput.$invalid"
             >
               <span class="fa fa-search" aria-hidden="true"></span>

diff --git a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
@@ -1,2 +1,2 @@
-<div class="localDropdownTitle">Open Dashboard</div>
+<div class="kuiLocalDropdownTitle">Open Dashboard</div>
 <saved-object-finder type="dashboards"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/options.html b/src/core_plugins/kibana/public/dashboard/partials/options.html
@@ -1,5 +1,5 @@
 <form role="form">
-  <div class="localDropdownTitle">Options</div>
+  <div class="kuiLocalDropdownTitle">Options</div>
   <div class="input-group">
     <label>
       <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">

diff --git a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
@@ -2,7 +2,7 @@
   ng-switch="mode"
   ng-init="mode = 'visualization'"
 >
-  <div class="localDropdownTitle">Add Panels</div>
+  <div class="kuiLocalDropdownTitle">Add Panels</div>
 
   <ul class="nav nav-tabs">
     <li ng-class="{active: mode == 'visualization'}">

diff --git a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.save()"
 >
-  <div class="localDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
+  <div class="kuiLocalDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     id="dashboardTitle"
     type="text"
     ng-model="opts.dashboard.title"

diff --git a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
@@ -9,11 +9,11 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="localTabs">
+      <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
         <a
           ng-repeat="item in kbnDevToolsApp.devTools"
-          class="localTab"
-          ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+          class="kuiLocalTab"
+          ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
           kbn-href="{{::item.url}}"
         >
           {{::item.display}}

diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
@@ -4,13 +4,13 @@
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
       <!-- Breadcrumbs. -->
-      <div data-transclude-slot="topLeftCorner" class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <span ng-show="opts.savedSearch.id" class="localBreadcrumb__emphasis">
+      <div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
+        <div class="kuiLocalBreadcrumb">
+          <span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
             <span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle"></span>
             <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
           </span>
-          <span data-test-subj="discoverQueryHits" class="localBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
+          <span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
           <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
         </div>
       </div>
@@ -24,7 +24,7 @@
         ng-submit="fetch()"
       >
         <div class="typeahead" kbn-typeahead="discover">
-          <div class="localSearch">
+          <div class="kuiLocalSearch">
             <input
               parse-query
               input-focus
@@ -33,13 +33,13 @@
               placeholder="Search..."
               aria-label="Search input"
               type="text"
-              class="localSearchInput"
-              ng-class="{'localSearchInput-isInvalid': discoverSearch.$invalid}"
+              class="kuiLocalSearchInput"
+              ng-class="{'kuiLocalSearchInput-isInvalid': discoverSearch.$invalid}"
             >
             <button
               type="submit"
               aria-label="Search"
-              class="localSearchButton"
+              class="kuiLocalSearchButton"
               ng-disabled="discoverSearch.$invalid"
             >
               <span class="fa fa-search" aria-hidden="true"></span>

diff --git a/src/core_plugins/kibana/public/discover/partials/load_search.html b/src/core_plugins/kibana/public/discover/partials/load_search.html
@@ -1,4 +1,4 @@
 <form role="form" ng-submit="fetch()">
-  <div class="localDropdownTitle">Open Search</div>
+  <div class="kuiLocalDropdownTitle">Open Search</div>
   <saved-object-finder type="searches"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.saveDataSource()"
 >
-  <div class="localDropdownTitle">Save Search</div>
+  <div class="kuiLocalDropdownTitle">Save Search</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     id="SaveSearch"
     ng-model="opts.savedSearch.title"
     input-focus="select"

diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
@@ -10,15 +10,15 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="localTabs">
-        <span ng-if="!sectionName" class="localTab">
+      <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
+        <span ng-if="!sectionName" class="kuiLocalTab">
           {{::section.display}}
         </span>
         <a
           ng-if="sectionName"
           ng-repeat="item in section.items.inOrder"
-          class="localTab"
-          ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
+          class="kuiLocalTab"
+          ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': !item.url }"
           kbn-href="{{::item.url}}"
           data-test-subj="{{::item.name}}"
           tooltip="{{::item.tooltip}}"

diff --git a/src/core_plugins/kibana/public/visualize/editor/editor.html b/src/core_plugins/kibana/public/visualize/editor/editor.html
@@ -6,7 +6,7 @@
       <!-- Title. -->
       <div
         data-transclude-slot="topLeftCorner"
-        class="localTitle"
+        class="kuiLocalTitle"
       >
         <span
           ng-show="savedVis.id"
@@ -41,21 +41,21 @@
           class="fullWidth"
         >
           <div class="typeahead" kbn-typeahead="visualize">
-            <div class="localSearch">
+            <div class="kuiLocalSearch">
               <input
                 ng-model="state.query"
                 parse-query
                 input-focus
                 kbn-typeahead-input
                 placeholder="Search..."
                 type="text"
-                class="localSearchInput"
-                ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+                class="kuiLocalSearchInput"
+                ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
               >
               <button
                 type="submit"
                 aria-label="Search"
-                class="localSearchButton"
+                class="kuiLocalSearchButton"
                 ng-disabled="queryInput.$invalid"
               >
                 <span aria-hidden="true" class="fa fa-search"></span>

diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/load.html b/src/core_plugins/kibana/public/visualize/editor/panels/load.html
@@ -1,2 +1,2 @@
-<div class="localDropdownTitle">Open Visualization</div>
+<div class="kuiLocalDropdownTitle">Open Visualization</div>
 <saved-object-finder type="visualizations"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/save.html b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
@@ -2,9 +2,9 @@
   role="form"
   ng-submit="opts.doSave()"
 >
-  <div class="localDropdownTitle">Save Visualization</div>
+  <div class="kuiLocalDropdownTitle">Save Visualization</div>
   <input
-    class="localDropdownInput"
+    class="kuiLocalDropdownInput"
     input-focus="select"
     type="text"
     name="visTitle"

diff --git a/src/core_plugins/timelion/public/index.html b/src/core_plugins/timelion/public/index.html
@@ -4,7 +4,7 @@
     <!-- Transcluded elements. -->
     <div data-transclude-slots>
       <div data-transclude-slot="topLeftCorner">
-        <span class="localTitle" ng-show="opts.savedSheet.id">
+        <span class="kuiLocalTitle" ng-show="opts.savedSheet.id">
           {{opts.savedSheet.lastSavedTitle}}
           &nbsp;
           <span class="fa fa-bolt" ng-click="showStats = !showStats"></span>
@@ -23,23 +23,23 @@
         role="form"
         ng-submit="search()"
       >
-        <div class="localSearch timelionLocalSearch">
+        <div class="kuiLocalSearch timelionLocalSearch">
           <input
             input-focus
             ng-model="state.sheet[state.selected]"
             timelion-expression="{{state.sheet[state.selected]}}"
             placeholder="Expression..."
             aria-label="Expression input"
             type="text"
-            class="localSearchInput timelion-expression"
+            class="kuiLocalSearchInput timelion-expression"
           >
 
           <timelion-interval model="state.interval"></timelion-interval>
 
           <button
             type="submit"
             aria-label="Search"
-            class="localSearchButton"
+            class="kuiLocalSearchButton"
           >
             <span class="fa fa-play"></span>
           </button>

diff --git a/src/core_plugins/timelion/public/partials/docs/tutorial.html b/src/core_plugins/timelion/public/partials/docs/tutorial.html
@@ -146,10 +146,10 @@ <h2>Data: Transform <small>insert beat boxing</small></h2>
 </div>
 
 <div ng-show="section === 'functions'">
-  <div class="localDropdownTitle">
+  <div class="kuiLocalDropdownTitle">
     Function reference
   </div>
-  <div class="localDropdownHelpText">
+  <div class="kuiLocalDropdownHelpText">
     Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
   </div>
   <div class="timelionFunctionsDropdownContent">

diff --git a/src/core_plugins/timelion/public/partials/load_sheet.html b/src/core_plugins/timelion/public/partials/load_sheet.html
@@ -1,4 +1,4 @@
 <form role="form" ng-submit="fetch()">
-  <div class="localDropdownTitle">Open Sheet</div>
+  <div class="kuiLocalDropdownTitle">Open Sheet</div>
   <saved-object-finder type="timelion-sheet" use-local-management="true"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/timelion/public/partials/sheet_options.html b/src/core_plugins/timelion/public/partials/sheet_options.html
@@ -1,5 +1,5 @@
 <form role="form">
-  <div class="localDropdownTitle">Sheet options</div>
+  <div class="kuiLocalDropdownTitle">Sheet options</div>
   <div>
     <div class="form-group col-md-6">
       <label>Columns <small>Column count must divide evenly into 12</small></label>

diff --git a/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html b/src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
@@ -1,5 +1,5 @@
 <div ng-hide="!savedObject.id || savedObject.isSaving">
-  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="localDropdownWarning">
+  <div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="kuiLocalDropdownWarning">
     In previous versions of Kibana, changing the name of a {{savedObject.getDisplayName()}} would make a copy with the new name. Use the 'Save as a new {{savedObject.getDisplayName()}}' checkbox to do this now.
   </div>
   <label>

diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -1,26 +1,26 @@
 <div
-  class="localNav"
+  class="kuiLocalNav"
   ng-show="kbnTopNav.isVisible()"
   data-test-subj="top-nav"
 >
   <!-- Top row -->
-  <div class="localNavRow">
+  <div class="kuiLocalNavRow">
     <!-- Top left corner slot, e.g. breadcrumbs, title. -->
     <div
-      class="localNavRow__section"
+      class="kuiLocalNavRow__section"
       data-transclude-slot="topLeftCorner"
     ></div>
 
     <!-- Right-side: menu -->
-    <div class="localNavRow__section">
-      <div class="localMenu">
+    <div class="kuiLocalNavRow__section">
+      <div class="kuiLocalMenu">
         <div
-          class="localMenuItem"
+          class="kuiLocalMenuItem"
           ng-repeat="menuItem in kbnTopNav.menuItems"
           aria-label="{{::menuItem.description}}"
           aria-haspopup="{{!menuItem.hasFunction}}"
           aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
-          ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'localMenuItem-isDisabled': menuItem.disableButton()}"
+          ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'kuiLocalMenuItem-isDisabled': menuItem.disableButton()}"
           ng-click="kbnTopNav.handleClick(menuItem)"
           ng-bind="menuItem.label"
           tooltip="{{menuItem.tooltip()}}"
@@ -38,18 +38,18 @@
 
   <!-- Dropdown content, e.g. time-picker. -->
   <div
-    class="localDropdown"
+    class="kuiLocalDropdown"
     ng-show="kbnTopNav.rendered"
   >
-    <button class="localDropdownCloseButton" ng-click="kbnTopNav.close()">
+    <button class="kuiLocalDropdownCloseButton" ng-click="kbnTopNav.close()">
       <span class="fa fa-chevron-circle-up"></span>
     </button>
     <div id="template_wrapper">
       <!-- Content gets dynamically inserted here. -->
     </div>
   </div>
 
-  <div class="localNavRow localNavRow--secondary">
+  <div class="kuiLocalNavRow kuiLocalNavRow--secondary">
     <!-- Bottom row slot, e.g. tabs. -->
     <div data-transclude-slot="bottomRow"></div>
   </div>

diff --git a/src/ui/public/notify/partials/fatal_splash_screen.html b/src/ui/public/notify/partials/fatal_splash_screen.html
@@ -19,4 +19,4 @@ <h1>Oops!</h1>
   </center>
   <div id="fatal-splash-screen">
   </div>
-</div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ <h1>Oops!</h1> @@
       </center>
       <div id="fatal-splash-screen">
       </div>
-    </div>
+    </div>