Merge branch '5.x' of github.com:elastic/kibana into 5.x

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

@@ -62,14 +62,20 @@
     </div>
 
     <!-- NoResults -->
-    <div ng-if="!listingController.items.length && listingController.filter" class="kuiPanel kuiPanel--centered">
+    <div
+      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
+      ng-if="!listingController.items.length && listingController.filter"
+    >
       <div class="kuiNoItems">
         No dashboards matched your search.
       </div>
     </div>
 
     <!-- PromptForItems -->
-    <div class="kuiPanel kuiPanel--centered" ng-if="!listingController.items.length && !listingController.filter">
+    <div
+      class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
+      ng-if="!listingController.items.length && !listingController.filter"
+    >
       <div class="kuiPromptForItems">
         <div class="kuiPromptForItems__message">
           Looks like you don&rsquo;t have any dashboards. Let&rsquo;s add some!

src/core_plugins/kibana/public/management/sections/indices/_indexed_fields.html

@@ -2,6 +2,7 @@
   columns="columns"
   rows="rows"
   per-page="perPage"
+  link-to-top="true"
   show-blank-rows="false">
 </paginated-table>
 

src/core_plugins/kibana/public/management/sections/indices/_scripted_fields.html

@@ -28,6 +28,7 @@
   columns="columns"
   rows="rows"
   per-page="perPage"
+  link-to-top="true"
   show-blank-rows="false">
 </paginated-table>
 

src/core_plugins/kibana/public/management/sections/indices/source_filters/source_filters.html

@@ -32,6 +32,7 @@
   <paginated-table
     columns="columns"
     rows="rows"
+    link-to-top="true"
     per-page="perPage"
     show-blank-rows="false">
   </paginated-table>

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -106,7 +106,10 @@
       </div>
 
       <!-- NoResults -->
-      <div class="kuiPanel kuiPanel--centered" ng-if="!service.data.length">
+      <div
+        class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
+        ng-if="!service.data.length"
+      >
         <div class="kuiNoItems">
           No {{service.title}} matched your search.
         </div>

src/ui/public/agg_table/agg_table.less

@@ -17,10 +17,10 @@ kbn-agg-table-group {
 
     tr:hover td {
       background-color: @table-row-hover-bg;
-    }
 
-    .cell-hover:hover {
-      background-color: @table-cell-hover-hover-bg;
+      .table-cell-filter {
+        background-color: @table-row-hover-bg;
+      }
     }
   }
 

src/ui/public/debounce/debounce.js

@@ -13,7 +13,8 @@ module.service('debounce', ['$timeout', function ($timeout) {
     let result;
     options = _.defaults(options || {}, {
       leading: false,
-      trailing: true
+      trailing: true,
+      invokeApply: true,
     });
 
     function debounce() {
@@ -32,7 +33,7 @@ module.service('debounce', ['$timeout', function ($timeout) {
       if (timeout) {
         $timeout.cancel(timeout);
       }
-      timeout = $timeout(later, wait);
+      timeout = $timeout(later, wait, options.invokeApply);
 
       if (callNow) {
         result = func.apply(self, args);

src/ui/public/directives/__tests__/fixed_scroll.js

@@ -9,15 +9,16 @@ import Promise from 'bluebird';
 describe('FixedScroll directive', function () {
 
   let compile;
+  let flushPendingTasks;
   let trash = [];
 
   beforeEach(ngMock.module('kibana'));
-  beforeEach(ngMock.module(function ($provide) {
-    $provide.service('debounce', () => {
-      return targetFunction => targetFunction;
-    });
-  }));
-  beforeEach(ngMock.inject(function ($compile, $rootScope) {
+  beforeEach(ngMock.inject(function ($compile, $rootScope, $timeout) {
+
+    flushPendingTasks = function flushPendingTasks() {
+      $rootScope.$digest();
+      $timeout.flush();
+    };
 
     compile = function (ratioY, ratioX) {
       if (ratioX == null) ratioX = ratioY;
@@ -46,7 +47,7 @@ describe('FixedScroll directive', function () {
       }).appendTo($el);
 
       $compile($parent)($rootScope);
-      $rootScope.$digest();
+      flushPendingTasks();
 
       return {
         $container: $el,
@@ -97,7 +98,7 @@ describe('FixedScroll directive', function () {
 
       expect(off.callCount).to.be(0);
       els.$container.width(els.$container.prop('scrollWidth'));
-      els.$container.scope().$digest();
+      flushPendingTasks();
       expect(off.callCount).to.be(2);
       checkThisVals('$.fn.off', off);
 

src/ui/public/directives/paginate.js

@@ -41,9 +41,9 @@ uiModules.get('kibana')
       }
     },
     controllerAs: 'paginate',
-    controller: function ($scope) {
-      let self = this;
-      let ALL = 0;
+    controller: function ($scope, $document) {
+      const self = this;
+      const ALL = 0;
 
       self.sizeOptions = [
         { title: '10', value: 10 },
@@ -98,6 +98,10 @@ uiModules.get('kibana')
         }
       };
 
+      self.goToTop = function goToTop() {
+        $document.scrollTop(0);
+      };
+
       self.renderList = function () {
         $scope.pages = [];
         if (!$scope.list) return;

src/ui/public/directives/partials/table_cell_filter.html

@@ -0,0 +1,17 @@
+<td>
+  <span class="table-cell-filter">
+    <span
+      ng-click="clickHandler($event, false)"
+      class="fa fa-search-plus"
+      tooltip="Filter for value"
+      tooltip-append-to-body="1"
+    ></span>
+
+    <span
+      ng-click="clickHandler($event, true)"
+      class="fa fa-search-minus"
+      tooltip="Filter out value"
+      tooltip-append-to-body="1"
+    ></span>
+  </span>
+</td>

src/ui/public/directives/rows.js

@@ -3,7 +3,8 @@ import _ from 'lodash';
 import AggConfigResult from 'ui/vis/agg_config_result';
 import FilterBarFilterBarClickHandlerProvider from 'ui/filter_bar/filter_bar_click_handler';
 import uiModules from 'ui/modules';
-let module = uiModules.get('kibana');
+import tableCellFilterHtml from './partials/table_cell_filter.html';
+const module = uiModules.get('kibana');
 
 module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private) {
   let filterBarClickHandler = Private(FilterBarFilterBarClickHandlerProvider);
@@ -17,16 +18,16 @@ module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private
         // access to it here. This may become a problem with the switch to BigNumber
         if (_.isNumeric(contents)) $cell.addClass('numeric-value');
 
-        let createAggConfigResultCell = function (aggConfigResult) {
-          let $cell = $(document.createElement('td'));
-          let $state = getAppState();
-          let clickHandler = filterBarClickHandler($state);
+        const createAggConfigResultCell = function (aggConfigResult) {
+          const $cell = $(tableCellFilterHtml);
+
+          const $state = getAppState();
+          const clickHandler = filterBarClickHandler($state);
           $cell.scope = $scope.$new();
           $cell.addClass('cell-hover');
-          $cell.attr('ng-click', 'clickHandler($event)');
-          $cell.scope.clickHandler = function (event) {
+          $cell.scope.clickHandler = function (event, negate) {
             if ($(event.target).is('a')) return; // Don't add filter if a link was clicked
-            clickHandler({ point: { aggConfigResult: aggConfigResult } });
+            clickHandler({ point: { aggConfigResult: aggConfigResult }, negate });
           };
           return $compile($cell)($cell.scope);
         };
@@ -48,15 +49,15 @@ module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private
           }
 
           if (contents.scope) {
-            $cell = $compile($cell.html(contents.markup))(contents.scope);
+            $cell = $compile($cell.prepend(contents.markup))(contents.scope);
           } else {
-            $cell.html(contents.markup);
+            $cell.prepend(contents.markup);
           }
         } else {
           if (contents === '') {
-            $cell.html(' ');
+            $cell.prepend(' ');
           } else {
-            $cell.html(contents);
+            $cell.prepend(contents);
           }
         }
 

src/ui/public/doc_table/components/table_row.js

@@ -9,7 +9,8 @@ import noWhiteSpace from 'ui/utils/no_white_space';
 import openRowHtml from 'ui/doc_table/components/table_row/open.html';
 import detailsHtml from 'ui/doc_table/components/table_row/details.html';
 import uiModules from 'ui/modules';
-let module = uiModules.get('app/discover');
+import FilterManagerProvider from 'ui/filter_manager';
+const module = uiModules.get('app/discover');
 
 
 
@@ -24,9 +25,10 @@ let MIN_LINE_LENGTH = 20;
  * <tr ng-repeat="row in rows" kbn-table-row="row"></tr>
  * ```
  */
-module.directive('kbnTableRow', function ($compile) {
-  let cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html')));
-  let truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html')));
+module.directive('kbnTableRow', ['$compile', 'Private', function ($compile, Private) {
+  const cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html')));
+  const truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html')));
+  const filterManager = Private(FilterManagerProvider);
 
   return {
     restrict: 'A',
@@ -83,27 +85,44 @@ module.directive('kbnTableRow', function ($compile) {
         createSummaryRow($scope.row, $scope.row._id);
       });
 
+      $scope.inlineFilter = function inlineFilter($event, type) {
+        const column = $($event.target).data().column;
+        const field = $scope.indexPattern.fields.byName[column];
+        $scope.indexPattern.popularizeField(field, 1);
+        filterManager.add(field, $scope.flattenedRow[column], type, $scope.indexPattern.id);
+      };
+
       // create a tr element that lists the value for each *column*
       function createSummaryRow(row) {
-        let indexPattern = $scope.indexPattern;
+        const indexPattern = $scope.indexPattern;
+        $scope.flattenedRow = indexPattern.flattenHit(row);
 
         // We just create a string here because its faster.
         let newHtmls = [
           openRowHtml
         ];
 
+        const mapping = indexPattern.fields.byName;
         if (indexPattern.timeFieldName) {
           newHtmls.push(cellTemplate({
             timefield: true,
-            formatted: _displayField(row, indexPattern.timeFieldName)
+            formatted: _displayField(row, indexPattern.timeFieldName),
+            filterable: mapping[indexPattern.timeFieldName].filterable,
+            column: indexPattern.timeFieldName
           }));
         }
 
         $scope.columns.forEach(function (column) {
+          const isFilterable = $scope.flattenedRow[column] !== undefined
+            && mapping[column]
+            && mapping[column].filterable;
+
           newHtmls.push(cellTemplate({
             timefield: false,
             sourcefield: (column === '_source'),
-            formatted: _displayField(row, column, true)
+            formatted: _displayField(row, column, true),
+            filterable: isFilterable,
+            column
           }));
         });
 
@@ -128,7 +147,7 @@ module.directive('kbnTableRow', function ($compile) {
           // rebuild cells since we modified the children
           $cells = $el.children();
 
-          if (i === 0 && !reuse) {
+          if (!reuse) {
             $toggleScope = $scope.$new();
             $compile($target)($toggleScope);
           }
@@ -160,4 +179,4 @@ module.directive('kbnTableRow', function ($compile) {
       }
     }
   };
-});
+}]);

src/ui/public/doc_table/components/table_row/cell.html

@@ -10,4 +10,23 @@ if (timefield) {
 %>
 <td <%= attributes %>>
   <%= formatted %>
+  <span class="table-cell-filter">
+    <% if (filterable) { %>
+      <span
+        ng-click="inlineFilter($event, '+')"
+        class="fa fa-search-plus docTableRowFilterIcon"
+        data-column="<%- column %>"
+        tooltip="Filter for value"
+        tooltip-append-to-body="1"
+      ></span>
+
+      <span
+        ng-click="inlineFilter($event, '-')"
+        class="fa fa-search-minus docTableRowFilterIcon"
+        data-column="<%- column %>"
+        tooltip="Filter out value"
+        tooltip-append-to-body="1"
+      ></span>
+    <% } %>
+  </span>
 </td>

src/ui/public/doc_table/doc_table.less

@@ -18,6 +18,26 @@ doc-table {
     word-break: break-word;
   }
 
+  .discover-table-row {
+    td {
+      position: relative;
+
+      .table-cell-filter {
+        position: absolute;
+        background-color: @panel-bg;
+        white-space: nowrap;
+        right: 0;
+        display: none;
+      }
+
+      &:hover {
+        .table-cell-filter {
+          display: inline;
+        }
+      }
+    }
+  }
+
   .loading {
     opacity: @loading-opacity;
   }
@@ -31,3 +51,16 @@ doc-table {
     opacity: @loading-opacity;
   }
 }
+
+/**
+ * 1. Align icon with text in cell.
+ */
+.docTableRowFilterIcon {
+  font-size: 14px;
+  line-height: 1; /* 1 */
+  display: inline;
+
+  & + & {
+    margin-left: 5px;
+  }
+}

src/ui/public/fixed_scroll.js

@@ -110,14 +110,16 @@ uiModules
         const newWidth = $el.width();
 
         if (scrollWidth !== newScrollWidth || width !== newWidth) {
-          setup();
+          $scope.$apply(setup);
 
           scrollWidth = newScrollWidth;
           width = newWidth;
         }
       }
 
-      const debouncedCheckWidth = debounce(checkWidth, 100);
+      const debouncedCheckWidth = debounce(checkWidth, 100, {
+        invokeApply: false,
+      });
       $scope.$watch(debouncedCheckWidth);
 
       // cleanup when the scope is destroyed

src/ui/public/paginated_table/__tests__/index.js

@@ -47,12 +47,13 @@ describe('paginated table', function () {
     };
   };
 
-  const renderTable = function (cols, rows, perPage, sort, showBlankRows) {
+  const renderTable = function (cols, rows, perPage, sort, showBlankRows, linkToTop) {
     $scope.cols = cols || [];
     $scope.rows = rows || [];
     $scope.perPage = perPage || defaultPerPage;
     $scope.sort = sort || {};
     $scope.showBlankRows = showBlankRows;
+    $scope.linkToTop = linkToTop;
 
     const template = `
       <paginated-table
@@ -60,6 +61,7 @@ describe('paginated table', function () {
         rows="rows"
         per-page="perPage"
         sort="sort"
+        link-to-top="linkToTop"
         show-blank-rows="showBlankRows">`;
     $el = $compile(template)($scope);
 
@@ -127,6 +129,22 @@ describe('paginated table', function () {
       expect(tableRows.size()).to.be(rowCount);
     });
 
+    it('should not show link to top when not set', function () {
+      const data = makeData(5, 5);
+      renderTable(data.columns, data.rows, 10, null, false);
+
+      const linkToTop = $el.find('[data-test-subj="paginateControlsLinkToTop"]');
+      expect(linkToTop.size()).to.be(0);
+    });
+
+    it('should show link to top when set', function () {
+      const data = makeData(5, 5);
+      renderTable(data.columns, data.rows, 10, null, false, true);
+
+      const linkToTop = $el.find('[data-test-subj="paginateControlsLinkToTop"]');
+      expect(linkToTop.size()).to.be(1);
+    });
+
   });
 
   describe('sorting', function () {

src/ui/public/paginated_table/paginated_table.html

@@ -22,7 +22,6 @@
                 'fa-sort': paginatedTable.sort.columnIndex !== $index || paginatedTable.sort.direction === null
               }">
             </i>
-            <i aria-label="Click on a cell to filter" ng-if="col.filterable" class="fa fa-search" ng-click="$event.stopPropagation()" tooltip="Click on a cell to filter"></i>
           </th>
         </tr>
       </thead>

src/ui/public/paginated_table/paginated_table.js

@@ -14,6 +14,7 @@ uiModules
     scope: {
       rows: '=',
       columns: '=',
+      linkToTop: '=',
       perPage: '=?',
       showBlankRows: '=?',
       sortHandler: '=?',

src/ui/public/partials/paginate_controls.html

@@ -1,3 +1,12 @@
+<a
+  class="kuiLink"
+  ng-if="linkToTop"
+  ng-click="paginate.goToTop()"
+  data-test-subj="paginateControlsLinkToTop"
+>
+  Scroll to top
+</a>
+
 <div class="pagination-other-pages">
   <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
     <li ng-style="{'visibility':'hidden'}" ng-if="page.first">

src/ui/public/styles/base.less

@@ -253,7 +253,6 @@ kbn-table, .kbn-table {
       visibility: visible;
     }
   }
-
 }
 
 //== Generic Table
@@ -491,6 +490,16 @@ style-compile {
 
 .cell-hover {
   background-color: @table-cell-hover-bg;
+  position: relative;
+
+  .table-cell-filter {
+    position: absolute;
+    background-color: @table-cell-hover-bg;
+    white-space: nowrap;
+    right: 0;
+    top: 5px;
+    display: none;
+  }
 }
 
   .cell-hover-show {
@@ -499,8 +508,9 @@ style-compile {
   }
 
 .cell-hover:hover {
-  background-color: @table-cell-hover-hover-bg;
-  cursor: cell;
+  .table-cell-filter {
+    display: inline;
+  }
 
   .cell-hover-show {
     visibility: visible;

src/ui/public/styles/dark-theme.less

@@ -255,9 +255,10 @@
 
   .cell-hover {
     background-color: @table-cell-hover-bg;
-  }
-  .cell-hover:hover {
-    background-color: @table-cell-hover-hover-bg;
+
+    .table-cell-filter {
+      background-color: @table-cell-hover-bg;
+    }
   }
 
 
@@ -271,10 +272,10 @@
   .agg-table-paginated {
     tr:hover td {
       background-color: @table-row-hover-bg;
-    }
-
-    .cell-hover:hover {
-      background-color: @table-cell-hover-hover-bg;
+      
+      .table-cell-filter {
+        background-color: @table-row-hover-bg;
+      }
     }
   }
 
@@ -581,4 +582,15 @@
     background-color: @config-bg;
     color: @dark-button-font;
   }
+
+
+// /src/ui/public/doc_table/doc_table.less
+  .discover-table-row {
+    td {
+      .table-cell-filter {
+        background-color: @panel-bg;
+      }
+    }
+  }
 }
+

tasks/ui_framework.js

@@ -13,7 +13,7 @@ module.exports = function (grunt) {
 
   function uiFrameworkServerStart() {
     const serverCmd = {
-      cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server' : './node_modules/.bin/webpack-dev-server',
+      cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
       args: [
         '--config=ui_framework/doc_site/webpack.config.js',
         '--hot ',

ui_framework/components/action_item/_action_item.scss

@@ -0,0 +1,5 @@
+.kuiActionItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

ui_framework/components/action_item/_index.scss

@@ -0,0 +1 @@
+@import "action_item";

ui_framework/components/index.scss

@@ -235,6 +235,7 @@ body {
   font-family: $font;
 }
 
+@import "action_item/index";
 @import "bar/index";
 @import "button/index";
 @import "event/index";
@@ -246,6 +247,7 @@ body {
 @import "loading_items/index";
 @import "local_nav/index";
 @import "menu/index";
+@import "menu_button/index";
 @import "micro_button/index";
 @import "modal/index";
 @import "no_items/index";

ui_framework/components/menu_button/_index.scss

@@ -0,0 +1,2 @@
+@import "menu_button";
+@import "menu_button_group";

ui_framework/components/menu_button/_menu_button.scss

@@ -0,0 +1,87 @@
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Disable for Angular.
+ * 3. Make the button just tall enough to fit inside an Option Layout.
+ */
+.kuiMenuButton {
+  display: inline-block; /* 1 */
+  appearance: none;
+  cursor: pointer;
+  padding: 2px 10px; /* 3 */
+  font-size: 12px;
+  font-weight: 400;
+  line-height: $lineHeight;
+  text-decoration: none;
+  border: none;
+  border-radius: $buttonBorderRadius;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none; /* 2 */
+  }
+
+  &:active:enabled {
+    transform: translateY(1px);
+  }
+
+  &:focus {
+    @include focus;
+  }
+}
+
+.kuiMenuButton--iconText {
+  .kuiMenuButton__icon {
+    &:first-child {
+      margin-right: 4px;
+    }
+
+    &:last-child {
+      margin-left: 4px;
+    }
+  }
+}
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--basic {
+  color: #5a5a5a;
+  background-color: #ffffff;
+
+  // Goes before hover, so that hover can override it.
+  &:focus {
+    color: #5a5a5a !important; /* 1 */
+  }
+
+  &:hover:enabled,
+  &:active:enabled {
+    background-color: #F2F2F2;
+  }
+
+  &:disabled {
+    color: #9B9B9B;
+  }
+}
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--danger {
+  color: #D76051;
+  background-color: #ffffff;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: #FFFFFF !important; /* 1 */
+    background-color: #D76051;
+  }
+
+  &:disabled {
+    color: #9B9B9B;
+  }
+
+  &:focus {
+    @include focus($focusDangerColor);
+  }
+}

ui_framework/components/menu_button/_menu_button_group.scss

@@ -0,0 +1,7 @@
+.kuiMenuButtonGroup {
+  display: flex;
+
+  .kuiMenuButton + .kuiMenuButton {
+    margin-left: 4px;
+  }
+}

ui_framework/components/panel/_panel.scss

@@ -1,7 +1,9 @@
 .kuiPanel {
-  border-left: $tableBorder;
-  border-right: $tableBorder;
-  border-bottom: $tableBorder;
+  border: $tableBorder;
+}
+
+.kuiPanel--withHeader {
+  border-top: none;
 }
 
 .kuiPanel--centered {

ui_framework/dist/ui_framework.css

@@ -29,6 +29,20 @@
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif; }
 
+.kuiActionItem {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between; }
+
 .kuiBar {
   display: -webkit-box;
   display: -webkit-flex;
@@ -540,14 +554,23 @@ body {
   border-color: rgba(63, 168, 199, 0.25);
   /* 1 */ }
 
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--success {
   border-color: rgba(65, 117, 5, 0.25);
   /* 1 */ }
 
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--warning {
-  border-color: rgba(255, 172, 21, 0.25);
+  border-color: rgba(236, 152, 0, 0.25);
   /* 1 */ }
 
+/**
+ * 1. TODO: Pick a hex value instead of making these colors translucent.
+ */
 .kuiInfoPanel--error {
   border-color: rgba(216, 96, 81, 0.25);
   /* 1 */ }
@@ -1000,6 +1023,90 @@ body {
   .kuiMenuItem + .kuiMenuItem {
     border-top: 1px solid #E4E4E4; }
 
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Disable for Angular.
+ * 3. Make the button just tall enough to fit inside an Option Layout.
+ */
+.kuiMenuButton {
+  display: inline-block;
+  /* 1 */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  padding: 2px 10px;
+  /* 3 */
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-decoration: none;
+  border: none;
+  border-radius: 4px; }
+  .kuiMenuButton:disabled {
+    cursor: default;
+    pointer-events: none;
+    /* 2 */ }
+  .kuiMenuButton:active:enabled {
+    -webkit-transform: translateY(1px);
+            transform: translateY(1px); }
+  .kuiMenuButton:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #6EADC1;
+    /* 3 */ }
+
+.kuiMenuButton--iconText .kuiMenuButton__icon:first-child {
+  margin-right: 4px; }
+
+.kuiMenuButton--iconText .kuiMenuButton__icon:last-child {
+  margin-left: 4px; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--basic {
+  color: #5a5a5a;
+  background-color: #ffffff; }
+  .kuiMenuButton--basic:focus {
+    color: #5a5a5a !important;
+    /* 1 */ }
+  .kuiMenuButton--basic:hover:enabled, .kuiMenuButton--basic:active:enabled {
+    background-color: #F2F2F2; }
+  .kuiMenuButton--basic:disabled {
+    color: #9B9B9B; }
+
+/**
+ * 1. Override Bootstrap.
+ */
+.kuiMenuButton--danger {
+  color: #D76051;
+  background-color: #ffffff; }
+  .kuiMenuButton--danger:hover:enabled, .kuiMenuButton--danger:active:enabled {
+    color: #FFFFFF !important;
+    /* 1 */
+    background-color: #D76051; }
+  .kuiMenuButton--danger:disabled {
+    color: #9B9B9B; }
+  .kuiMenuButton--danger:focus {
+    z-index: 1;
+    /* 1 */
+    outline: none !important;
+    /* 2 */
+    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c;
+    /* 3 */ }
+
+.kuiMenuButtonGroup {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+  .kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
+    margin-left: 4px; }
+
 .kuiMicroButton {
   display: inline-block;
   /* 1 */
@@ -1116,9 +1223,10 @@ body {
   line-height: 1.5; }
 
 .kuiPanel {
-  border-left: 2px solid #E4E4E4;
-  border-right: 2px solid #E4E4E4;
-  border-bottom: 2px solid #E4E4E4; }
+  border: 2px solid #E4E4E4; }
+
+.kuiPanel--withHeader {
+  border-top: none; }
 
 .kuiPanel--centered {
   display: -webkit-box;

ui_framework/doc_site/src/services/routes/routes.js

@@ -1,6 +1,9 @@
 
 import Slugify from '../string/slugify';
 
+import ActionItemExample
+  from '../../views/action_item/action_item_example.jsx';
+
 import BarExample
   from '../../views/bar/bar_example.jsx';
 
@@ -31,6 +34,9 @@ import LocalNavExample
 import MenuExample
   from '../../views/menu/menu_example.jsx';
 
+import MenuButtonExample
+  from '../../views/menu_button/menu_button_example.jsx';
+
 import MicroButtonExample
   from '../../views/micro_button/micro_button_example.jsx';
 
@@ -60,6 +66,9 @@ import VerticalRhythmExample
 
 // Component route names should match the component name exactly.
 const components = [{
+  name: 'ActionItem',
+  component: ActionItemExample,
+}, {
   name: 'Bar',
   component: BarExample,
 }, {
@@ -89,6 +98,9 @@ const components = [{
 }, {
   name: 'Menu',
   component: MenuExample,
+}, {
+  name: 'MenuButton',
+  component: MenuButtonExample,
 }, {
   name: 'MicroButton',
   component: MicroButtonExample,

ui_framework/doc_site/src/views/action_item/action_item.html

@@ -0,0 +1,14 @@
+<div class="kuiActionItem">
+  <p class="kuiText">Item</p>
+  <div class="kuiMenuButtonGroup">
+    <button class="kuiMenuButton kuiMenuButton--basic">
+      Acknowledge
+    </button>
+    <button class="kuiMenuButton kuiMenuButton--basic">
+      Silence
+    </button>
+    <button class="kuiMenuButton kuiMenuButton--danger">
+      Delete
+    </button>
+  </div>
+</div>

ui_framework/doc_site/src/views/action_item/action_item_example.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'ActionItem',
+  html: require('./action_item.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'ActionItems in Menu',
+  html: require('./action_items_in_menu.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/action_item/action_items_in_menu.html

@@ -0,0 +1,52 @@
+<div class="kuiMenu kuiMenu--contained">
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item A</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item B</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiActionItem">
+      <p class="kuiText">Item C</p>
+      <div class="kuiMenuButtonGroup">
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Acknowledge
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--basic">
+          Silence
+        </button>
+        <button class="kuiMenuButton kuiMenuButton--danger">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/button/button_group_united.html

@@ -15,10 +15,10 @@
 <div class="kuiButtonGroup kuiButtonGroup--united">
   <button class="kuiButton kuiButton--basic kuiButton--iconText">
     <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
-    Back
+    <span>Back</span>
   </button>
   <button class="kuiButton kuiButton--basic kuiButton--iconText">
-    Next
+    <span>Next</span>
     <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
   </button>
 </div>

ui_framework/doc_site/src/views/button/button_with_icon.html

@@ -1,6 +1,13 @@
 <button class="kuiButton kuiButton--basic kuiButton--iconText">
   <span class="kuiButton__icon kuiIcon fa-gear"></span>
-  Settings
+  <span>Settings</span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiButton kuiButton--basic kuiButton--iconText">
+  <span>Next</span>
+  <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
 </button>
 
 <hr class="guideBreak">

ui_framework/doc_site/src/views/event/event_example.jsx

@@ -18,4 +18,4 @@ export default createExample([{
   ),
   html: require('./event_menu.html'),
   hasDarkTheme: false,
-},]);
+}]);

ui_framework/doc_site/src/views/event/event_menu.html

@@ -53,4 +53,3 @@
     </div>
   </div>
 </div>
-

ui_framework/doc_site/src/views/menu_button/menu_button_basic.html

@@ -0,0 +1,9 @@
+<button class="kuiMenuButton kuiMenuButton--basic">
+  Basic button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiMenuButton kuiMenuButton--basic">
+  Basic button, disabled
+</button>

ui_framework/doc_site/src/views/menu_button/menu_button_danger.html

@@ -0,0 +1,9 @@
+<button class="kuiMenuButton kuiMenuButton--danger">
+  Danger button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiMenuButton kuiMenuButton--danger">
+  Danger button, disabled
+</button>

ui_framework/doc_site/src/views/menu_button/menu_button_example.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Basic MenuButton',
+  html: require('./menu_button_basic.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Danger MenuButton',
+  html: require('./menu_button_danger.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'MenuButton with Icon',
+  description: (
+    <p>You can use a MenuButton with an Icon, with or without text.</p>
+  ),
+  html: require('./menu_button_with_icon.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'MenuButtonGroup',
+  html: require('./menu_button_group.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/menu_button/menu_button_group.html

@@ -0,0 +1,19 @@
+<div class="kuiMenuButtonGroup">
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Acknowledge
+  </button>
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Duplicate
+  </button>
+  <button class="kuiMenuButton kuiMenuButton--danger">
+    Delete
+  </button>
+</div>
+
+<hr class="guideBreak">
+
+<div class="kuiMenuButtonGroup">
+  <button class="kuiMenuButton kuiMenuButton--basic">
+    Button group with one button
+  </button>
+</div>

ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html

@@ -0,0 +1,17 @@
+<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
+  <span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
+  <span>Settings</span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
+  <span>Next</span>
+  <span class="kuiMenuButton__icon kuiIcon fa-chevron-right"></span>
+</button>
+
+<hr class="guideBreak">
+
+<button class="kuiMenuButton kuiMenuButton--basic">
+  <span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
+</button>

ui_framework/doc_site/src/views/panel/panel.html

@@ -1,10 +1,4 @@
 <div class="kuiPanel">
-  <div class="kuiPanelHeader">
-    <div class="kuiPanelHeader__title">
-      Panel title
-    </div>
-  </div>
-
   <div class="kuiPanelBody">
     <p>Content goes here</p>
   </div>

ui_framework/doc_site/src/views/panel/panel_example.jsx

@@ -8,4 +8,11 @@ export default createExample([{
   title: 'Panel',
   html: require('./panel.html'),
   hasDarkTheme: false,
+}, {
+  title: 'Panel with PanelHeader',
+  description: (
+    <p>The Panel requires a special class when used with a PanelHeader.</p>
+  ),
+  html: require('./panel_with_header.html'),
+  hasDarkTheme: false,
 }]);

ui_framework/doc_site/src/views/panel/panel_with_header.html

@@ -0,0 +1,11 @@
+<div class="kuiPanel kuiPanel--withHeader">
+  <div class="kuiPanelHeader">
+    <div class="kuiPanelHeader__title">
+      Panel title
+    </div>
+  </div>
+
+  <div class="kuiPanelBody">
+    <p>Content goes here</p>
+  </div>
+</div>

ui_framework/doc_site/src/views/table/controlled_table_loading_items.html

@@ -43,7 +43,7 @@
   </div>
 
   <!-- LoadingResults -->
-  <div class="kuiPanel kuiPanel--centered">
+  <div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
     <div class="kuiLoadingItems">
       Loading&hellip;
     </div>

ui_framework/doc_site/src/views/table/controlled_table_no_items.html

@@ -43,7 +43,7 @@
   </div>
 
   <!-- NoItems -->
-  <div class="kuiPanel kuiPanel--centered">
+  <div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
     <div class="kuiNoItems">
       No Items matched your search.
     </div>

ui_framework/doc_site/src/views/table/controlled_table_prompt_for_items.html

@@ -43,7 +43,7 @@
   </div>
 
   <!-- PromptForItems -->
-  <div class="kuiPanel kuiPanel--centered">
+  <div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
     <div class="kuiPromptForItems">
       <div class="kuiPromptForItems__message">
         Looks like you don&rsquo;t have any items. Let&rsquo;s add some!

ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_as_wrapper.html

@@ -1,5 +1,5 @@
 <div class="kuiVerticalRhythm">
-  <div class="kuiPanel">
+  <div class="kuiPanel kuiPanel--withHeader">
     <div class="kuiPanelHeader">
       <div class="kuiPanelHeader__title">
         Panel title
@@ -13,7 +13,7 @@
 </div>
 
 <div class="kuiVerticalRhythm">
-  <div class="kuiPanel">
+  <div class="kuiPanel kuiPanel--withHeader">
     <div class="kuiPanelHeader">
       <div class="kuiPanelHeader__title">
         Panel title
@@ -27,7 +27,7 @@
 </div>
 
 <div class="kuiVerticalRhythm">
-  <div class="kuiPanel">
+  <div class="kuiPanel kuiPanel--withHeader">
     <div class="kuiPanelHeader">
       <div class="kuiPanelHeader__title">
         Panel title

ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_on_component.html

@@ -1,4 +1,4 @@
-<div class="kuiPanel kuiVerticalRhythm">
+<div class="kuiPanel kuiPanel--withHeader kuiVerticalRhythm">
   <div class="kuiPanelHeader">
     <div class="kuiPanelHeader__title">
       Panel title
@@ -10,7 +10,7 @@
   </div>
 </div>
 
-<div class="kuiPanel kuiVerticalRhythm">
+<div class="kuiPanel kuiPanel--withHeader kuiVerticalRhythm">
   <div class="kuiPanelHeader">
     <div class="kuiPanelHeader__title">
       Panel title
@@ -22,7 +22,7 @@
   </div>
 </div>
 
-<div class="kuiPanel kuiVerticalRhythm">
+<div class="kuiPanel kuiPanel--withHeader kuiVerticalRhythm">
   <div class="kuiPanelHeader">
     <div class="kuiPanelHeader__title">
       Panel title