Deprecate Bootstrap buttons (#11352) (#11400)

* Migrate Console to kuiButton.

* Convert angular-bootstrap Timepicker and Tabs components to use kuiButtons.

* Convert Timelion to use kuiButtons.

* Convert Visualize and visTypes to use kuiButtons.
- Convert Heatmap vistype to use kuiButtons.
- Convert Visualize editor, AggTypes controls, and Heatmap options to use kuiButtons.
- Convert VisType control rows_or_columns to kuiButton.
- Adjust formatting of kuiButtons in AggTypes controls and Heatmap options.
- Convert Visualization save prompt to use kuiButtons.
- Convert visualize legend to use kuiButtons.
- Convert Visualize Spy to use kuiSelect instead of Bootstrap buttons.

* Convert Notify to use kuiButtons.
- Fix appearance of Notifier countdown.

* - Convert Dashboard to use kuiButtons and kuiMenuButtons.
- Convert Dashboard save panel to use KuiButtons.

* Convert Discover sidebar to use kuiButtons, and have an improved UX and accessibility.
- Convert Discover field chooser to use kuiButtons.
- Convert Discover no-results to use kuiButtons.
- Convert Discover save panel to use KuiButtons.

* Convert filter bar to use kuiButtons.

* Convert fatal splash screen to use UI Framework components.

* Convert number list to use kuiButtons.

* Convert stringify color editor to use kuiButtons.

* Convert timepicker directive to use kuiButtons.

* Convert Index Pattern Management to use kuiButtons.
- Convert Index Pattern Management field editor to use kuiButtons.
- Remove unnecessary ng-class from Create Index Pattern submit button.

* Remove unused global_config.html partial.

* Fix functional tests.
- Rename discover-save-search-btn test subject selector to discoverSaveSearchButton.
- Convert Notifier tests to use kuiButtons.
- Convert functional tests to use test subject selectors instead of relying on btn classes.
- Update HeaderPage and VisualizePage page objects to refer to timePickerGoButton.
- Fix broken functional tests for Discover, Visualize, and Settings.
- Fix failing Discover scripted fields tests.

* Fix visual bugs with FieldChooser string, Notifier buttons, and NumberList.

* Fix Number List so the 'remove' buttons are small.

* Fix FieldEditor to have space between Popularity input and dec/increment buttons.

* Update FieldChooser string partial to have padding around 'Visualize' button.

src/core_plugins/console/public/src/directives/history.html

@@ -21,9 +21,9 @@
 </div>
 
 <div class="history-footer">
- <button class="btn btn-danger" ng-click="history.clear()">Clear</button>
+ <button class="kuiButton kuiButton--danger" ng-click="history.clear()">Clear</button>
  <button
- class="btn btn-primary"
+ class="kuiButton kuiButton--primary"
  ng-disabled="!history.selectedReq"
  ng-click="history.restore()">
  Apply

src/core_plugins/console/public/src/directives/settings.html

@@ -58,14 +58,16 @@
  <div class="settings-footer">
  <button
  ng-click="kbnTopNav.close()"
- class="btn btn-default">
+ class="kuiButton kuiButton--hollow"
+ >
  Cancel
  </button>
  <button
  type="submit"
  ng-disabled="settingsForm.$invalid"
- class="btn btn-primary"
- data-test-subj="settings-save-button">
+ class="kuiButton kuiButton--primary"
+ data-test-subj="settings-save-button"
+ >
  Save
  </button>
  </div>

src/core_plugins/console/public/src/directives/welcome.html

@@ -23,4 +23,11 @@
  <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
 </ul>
 
-<button type="button" class="btn-primary" data-test-subj="help-close-button" ng-click="kbnTopNav.close()">Get to work</button>
+<button
+ type="button"
+ class="kuiButton kuiButton--primary"
+ data-test-subj="help-close-button"
+ ng-click="kbnTopNav.close()"
+>
+ Get to work
+</button>

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -129,7 +129,8 @@
  <button
  type="button"
  ng-click="removeRange($index)"
- class="btn btn-danger btn-xs">
+ class="kuiButton kuiButton--danger kuiButton--small"
+ >
  <i class="fa fa-times"></i>
  </button>
  </td>
@@ -143,11 +144,12 @@
  </p>
  </div>
 
- <div
+ <button
  ng-click="addRange()"
- class="sidebar-item-button primary">
+ class="kuiButton kuiButton--primary kuiButton--fullWidth"
+ >
  Add Range
- </div>
+ </button>
  <div class="text text-center text-info">Note: colors can be changed in the legend</div>
  </div>
  </div>

src/core_plugins/kbn_vislib_vis_types/public/controls/rows_or_columns.html

@@ -1,18 +1,18 @@
 <div class="form-group">
- <div class="btn-group">
+ <div class="kuiButtonGroup">
  <button
  type="button"
- class="btn btn-xs btn-default"
+ class="kuiButton kuiButton--basic kuiButton--small"
  ng-model="agg.params.row"
  btn-radio="true">
  Rows
  </button>
  <button
  type="button"
- class="btn btn-xs btn-default"
+ class="kuiButton kuiButton--basic kuiButton--small"
  ng-model="agg.params.row"
  btn-radio="false">
  Columns
  </button>
  </div>
-</div>
+</div>

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

@@ -61,12 +61,12 @@
 
  <div ng-show="getShouldShowEditHelp()" class="text-center start-screen">
  <h2>This dashboard is empty. Let's fill it up!</h2>
- <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit <a href="#/visualize" title="Visualize">"Visualize"</a> to create your first visualization.</p>
+ <p>Click the <a class="kuiButton kuiButton--primary kuiButton--small" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit <a href="#/visualize" title="Visualize">"Visualize"</a> to create your first visualization.</p>
  </div>
 
  <div ng-show="getShouldShowViewHelp()" class="text-center start-screen">
  <h2>This dashboard is empty. Let's fill it up!</h2>
- <p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="kbnTopNav.click('edit');" aria-label="Edit">Edit</a> button in the menu bar above to start working on your new dashboard.
+ <p>Click the <a class="kuiButton kuiButton--primary kuiButton--small" ng-click="kbnTopNav.click('edit');" aria-label="Edit">Edit</a> button in the menu bar above to start working on your new dashboard.
  </div>
 
  <dashboard-grid
@@ -83,16 +83,17 @@ <h2>This dashboard is empty. Let's fill it up!</h2>
  data-shared-items-count="{{panels.length}}"
  ></dashboard-grid>
 
- <dashboard-panel ng-if="hasExpandedPanel()"
- panel="expandedPanel"
- is-full-screen-mode="!chrome.getVisible()"
- is-expanded="true"
- dashboard-view-mode="dashboardViewMode"
- get-vis-click-handler="getFilterBarClickHandler"
- get-vis-brush-handler="getBrushEvent"
- save-state="saveState"
- create-child-ui-state="createChildUiState"
- toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)">
- </dashboard-panel>
+ <dashboard-panel
+ ng-if="hasExpandedPanel()"
+ panel="expandedPanel"
+ is-full-screen-mode="!chrome.getVisible()"
+ is-expanded="true"
+ dashboard-view-mode="dashboardViewMode"
+ get-vis-click-handler="getFilterBarClickHandler"
+ get-vis-brush-handler="getBrushEvent"
+ save-state="saveState"
+ create-child-ui-state="createChildUiState"
+ toggle-expand="toggleExpandPanel(expandedPanel.panelIndex)"
+ ></dashboard-panel>
 
 </dashboard-app>

src/core_plugins/kibana/public/dashboard/panel/panel.html

@@ -3,31 +3,42 @@
  <span class="panel-title" title="{{::savedObj.title}}">
  {{::savedObj.title}}
  </span>
- <div class="btn-group">
- <a aria-label="Expand"
- data-test-subj="dashboardPanelExpandIcon"
- ng-click="toggleExpand()"
+ <div class="kuiMicroButtonGroup">
+ <a
+ class="kuiMicroButton"
+ aria-label="Expand"
+ data-test-subj="dashboardPanelExpandIcon"
+ ng-click="toggleExpand()"
  >
  <span class="fa" ng-class="{'fa-expand': !isExpanded, 'fa-compress': isExpanded}"></span>
  </a>
- <a aria-label="Edit"
- data-test-subj="dashboardPanelEditLink"
- ng-show="!isViewOnlyMode() && editUrl"
- ng-href="{{::editUrl}}"
+
+ <a
+ class="kuiMicroButton"
+ aria-label="Edit"
+ data-test-subj="dashboardPanelEditLink"
+ ng-show="!isViewOnlyMode() && editUrl"
+ ng-href="{{::editUrl}}"
  >
  <i aria-hidden="true" class="fa fa-pencil"></i>
  </a>
- <a aria-label="Move"
- data-test-subj="dashboardPanelMoveIcon"
- ng-show="!isViewOnlyMode() && !isExpanded"
- class="panel-move"
+
+ <a
+ class="kuiMicroButton"
+ aria-label="Move"
+ data-test-subj="dashboardPanelMoveIcon"
+ ng-show="!isViewOnlyMode() && !isExpanded"
+ class="panel-move"
  >
  <i aria-hidden="true" class="fa fa-arrows"></i>
  </a>
- <a aria-label="Remove"
- data-test-subj="dashboardPanelRemoveIcon"
- ng-show="!isViewOnlyMode() && !isExpanded"
- ng-click="remove()"
+
+ <a
+ class="kuiMicroButton"
+ aria-label="Remove"
+ data-test-subj="dashboardPanelRemoveIcon"
+ ng-show="!isViewOnlyMode() && !isExpanded"
+ ng-click="remove()"
  >
  <i aria-hidden="true" class="fa fa-times"></i>
  </a>

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -120,14 +120,6 @@ dashboard-panel {
  background-color: @white;
  border: none;
 
- .btn-group {
- a {
- color: inherit;
- }
- white-space: nowrap;
- flex: 0 0 auto;
- }
-
  .panel-title {
  font-size: inherit;
 
@@ -148,16 +140,6 @@ dashboard-panel {
  .panel-move:hover {
  cursor: move;
  }
-
- a {
- color: @dashboard-panel-heading-link-color;
- border: none;
- background: none;
- padding: 0px 3px;
- &:hover {
- color: @dashboard-panel-heading-link-hover-color;
- }
- }
  }
 
  .visualize-show-spy {

src/core_plugins/kibana/public/dashboard/top_nav/save.html

@@ -27,7 +27,13 @@
  </label>
  </div>
 
- <button type="submit" ng-disabled="!model.title" class="btn btn-primary" aria-label="Save dashboard">
+ <button
+ data-test-subj="confirmSaveDashboardButton"
+ type="submit"
+ ng-disabled="!model.title"
+ class="kuiButton kuiButton--primary"
+ aria-label="Save dashboard"
+ >
  Save
  </button>
 </form>

src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html

@@ -1,15 +1,24 @@
-
- <li
- class="sidebar-item"
- attr-field="{{::field.name}}"
- data-test-subj="field-{{::field.name}}"
- >
- <div ng-click="toggleDetails(field)" class="sidebar-item-title">
- <field-name field="field"></field-name>
- <button
- ng-click="toggleDisplay(field)"
- ng-class="::field.display ? 'btn-danger' : 'btn-primary'"
- ng-bind="::field.display ? 'remove' : 'add'"
- class="btn btn-xs btn-primary discover-field-toggle" data-test-subj="fieldToggle-{{::field.name}}"></button>
- </div>
- </li>
+<li
+ class="sidebar-item"
+ attr-field="{{::field.name}}"
+>
+ <div
+ data-test-subj="field-{{::field.name}}"
+ ng-click="toggleDetails(field)"
+ class="sidebar-item-title discover-sidebar-item"
+ >
+ <field-name
+ class="discover-sidebar-item-label"
+ field="field"
+ ></field-name>
+ <div class="discover-sidebar-item-actions">
+ <button
+ ng-click="toggleDisplay(field)"
+ ng-class="::field.display ? 'kuiButton--danger' : 'kuiButton--primary'"
+ ng-bind="::field.display ? 'remove' : 'add'"
+ class="kuiButton kuiButton--small kuiButton--primary"
+ data-test-subj="fieldToggle-{{::field.name}}"
+ ></button>
+ </div>
+ </div>
+</li>

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

@@ -37,19 +37,22 @@ <h5>Selected Fields</h5>
 
  <div class="sidebar-list-header sidebar-item">
  <h5>Available Fields
- <i
+ <span
  ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
  ng-click="showFields = !showFields"
  aria-hidden="true"
- class="fa visible-xs visible-sm pull-right field-collapse-toggle" ></i>
+ class="fa visible-xs visible-sm pull-right field-collapse-toggle"
+ ></span>
+
  <button
- ng-class="{ 'btn-default': !filter.active, 'btn-success': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
- class="btn btn-xs btn-default pull-right discover-field-filter-toggle"
+ ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
+ class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
  ng-click="showFilter = !showFilter"
  aria-label="Field Settings"
  aria-haspopup="true"
- aria-expanded="{{showFilter}}">
- <i aria-hidden="true" class="fa fa-gear"></i>
+ aria-expanded="{{showFilter}}"
+ >
+ <span aria-hidden="true" class="kuiIcon fa-gear"></span>
  </button>
  </h5>
  </div>
@@ -99,12 +102,13 @@ <h5>Available Fields
  </label>
  </div>
  </form>
- <div
+ <button
  ng-click="filter.reset()"
  ng-disabled="!filter.active"
- class="sidebar-item-button danger ng-scope">
+ class="kuiButton kuiButton--danger kuiButton--fullWidth"
+ >
  Reset Filters
- </div>
+ </button>
  </div>
 
  <ul