Create CollapseButton component class to standardize appearance of this button. (#11462) (#11605)

* Create CollapseButton component class to standardize appearance of this button.
* Fix positioning of LocalSearch icon.
* Update collapsible-sidebar directive and Discover page object to use test subject selector.
* Refactor 'closed' class assignment.

src/ui/public/collapsible_sidebar/collapsible_sidebar.js

@@ -13,7 +13,16 @@ uiModules
   return {
     restrict: 'C',
     link: function ($scope, $elem) {
-      const $collapser = $('<div class="sidebar-collapser"><div class="chevron-cont"></div></div>');
+      let isCollapsed = false;
+      const $collapser = $(
+        `<button
+          data-test-subj="collapseSideBarButton"
+          type="button"
+          class="kuiCollapseButton sidebar-collapser"
+        ></button>`
+      );
+      const $icon = $('<span class="kuiIcon fa-chevron-circle-left"></span>');
+      $collapser.append($icon);
       const $siblings = $elem.siblings();
 
       const siblingsClass = listOfWidthClasses.reduce(function (prev, className) {
@@ -21,15 +30,28 @@ uiModules
         return $siblings.hasClass(className) && className;
       }, false);
 
+      // If there is are only two elements we can assume the other one will take 100% of the width.
+      const hasSingleSibling = $siblings.length === 1 && siblingsClass;
+
       $collapser.on('click', function () {
-        $elem.toggleClass('closed');
+        if (isCollapsed) {
-        // if there is are only two elements we can assume the other one will take 100% of the width
+          isCollapsed = false;
-        if ($siblings.length === 1 && siblingsClass) {
+          $elem.removeClass('closed');
+          $icon.addClass('fa-chevron-circle-left');
+          $icon.removeClass('fa-chevron-circle-right');
+        } else {
+          isCollapsed = true;
+          $elem.addClass('closed');
+          $icon.removeClass('fa-chevron-circle-left');
+          $icon.addClass('fa-chevron-circle-right');
+        }
+
+        if (hasSingleSibling) {
           $siblings.toggleClass(siblingsClass + ' col-md-12');
         }
-      })
+      });
 
-      .appendTo($elem);
+      $collapser.appendTo($elem);
     }
   };
 });

src/ui/public/collapsible_sidebar/collapsible_sidebar.less

@@ -8,21 +8,8 @@
     position: absolute;
     top: 0;
     right: -(@collapser-width);
-    width: @collapser-width;
     cursor: pointer;
     z-index: -1;
-
-    .chevron-cont{
-      position: absolute;
-      left: 5px;
-      top: 5px;
-      color: @kibanaGray4;
-
-      &:before {
-        font-family: FontAwesome;
-        content: "\F137";
-      }
-    }
   }
 
   &.closed {

src/ui/public/styles/variables/for-theme.less

@@ -68,7 +68,7 @@
 @collapser-hover-border: @collapser-hover-bg;
 @collapser-hover-color: @kibanaGray7;
 
-@collapser-width: 12px;
+@collapser-width: 21px;
 
 
 // Dashboard ===================================================================

src/ui/public/vislib/styles/_legend.less

@@ -6,10 +6,8 @@ visualize-legend {
   flex-direction: row;
 }
 
-.legend-icon {
+.legend-collapse-button {
-  color: #BEBEBE;
+  align-self: flex-start;
-  font-size: 1.2em;
-  margin: 1px;
 }
 
 .legend-col-wrapper {
@@ -42,24 +40,6 @@ visualize-legend {
     width: 15px;
   }
 
-  .legend-toggle {
-    &:hover {
-      color: @sidebar-hover-color;
-    }
-
-    .vis-container--legend-top &,
-    .vis-container--legend-bottom & {
-      text-align: center;
-    }
-
-    padding-right: 5px;
-    font-size: 14px;
-  }
-
-  .column-labels {
-    text-align: right;
-  }
-
   .legend-ul {
     width: 150px;
     flex: 1 1 auto;

src/ui/public/visualize/spy.html

@@ -2,7 +2,8 @@
   <button
     data-test-subj="spyToggleButton"
     ng-click="toggleDisplay()"
-    class="kuiMicroButton visualize-show-spy-tab"
+    class="kuiCollapseButton visualize-show-spy-tab"
+    type="button"
   >
     <span
       class="kuiIcon"

src/ui/public/visualize/visualize_legend.html

@@ -1,7 +1,11 @@
 <div class="legend-col-wrapper" ng-if="labels.length">
-  <div ng-click="toggleLegend()" class="legend-toggle">
+  <button
-    <i class="legend-icon fa {{getToggleLegendClasses()}}"></i>
+    type="button"
-  </div>
+    ng-click="toggleLegend()"
+    class="kuiCollapseButton legend-collapse-button"
+  >
+    <span class="kuiIcon {{getToggleLegendClasses()}}"></span>
+  </button>
   <ul class="legend-ul" ng-show="open">
 
     <li

test/functional/page_objects/discover_page.js

@@ -222,8 +222,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
     }
 
     toggleSidebarCollapse() {
-      return getRemote().findDisplayedByCssSelector('.sidebar-collapser .chevron-cont')
+      return testSubjects.find('collapseSideBarButton').click();
-      .click();
     }
 
     getAllFieldNames() {

ui_framework/components/_mixins.scss

@@ -31,6 +31,25 @@
   }
 }
 
+/**
+ * 1. Override Bootstrap styles.
+ */
+@mixin collapseButton {
+  appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: $globalTextColor !important; /* 1 */
+  cursor: pointer;
+  opacity: 0.35;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 /**
  * 1. Links can't have a disabled attribute, so they can't support :disabled.
  */

ui_framework/components/collapse_button/_collapse_button.scss

@@ -0,0 +1,3 @@
+.kuiCollapseButton {
+  @include collapseButton;
+}

ui_framework/components/collapse_button/_index.scss

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

ui_framework/components/index.scss

@@ -24,6 +24,7 @@
 @import "bar/index";
 @import "button/index";
 @import "card/index";
+@import "collapse_button/index";
 @import "column/index";
 @import "event/index";
 @import "form/index";

ui_framework/components/local_nav/_local_dropdown.scss

@@ -9,25 +9,12 @@
   }
 }
 
-/**
- * 1. Override Bootstrap styles.
- */
 .kuiLocalDropdownCloseButton {
-  appearance: none;
+  @include collapseButton;
-  background-color: transparent;
+
-  padding: 4px;
-  border: none;
   position: absolute;
   top: 1px;
   right: 5px;
-  font-size: 16px;
-  color: $localNavTextColor !important; /* 1 */
-  cursor: pointer;
-  opacity: 0.35;
-
-  &:hover {
-    opacity: 1;
-  }
 
   @include darkTheme {
     color: $localNavTextColor--darkTheme !important; /* 1 */

ui_framework/components/local_nav/_local_search.scss

@@ -52,10 +52,14 @@
   border-radius: 0;
 }
 
+/**
+ * 1. Override inherited styles.
+ */
 .kuiLocalSearchButton {
   width: 43px;
   height: $localSearchHeight;
   font-size: $globalFontSize;
+  line-height: 0; /* 1 */
   color: $localSearchButtonTextColor;
   background-color: $localSearchButtonBackgroundColor;
   border: 0;

ui_framework/dist/ui_framework.css

@@ -1,6 +1,9 @@
 /**
  * 1. Enforce pointer when there's no href.
  */
+/**
+ * 1. Override Bootstrap styles.
+ */
 /**
  * 1. Links can't have a disabled attribute, so they can't support :disabled.
  */
@@ -537,6 +540,22 @@ body {
     margin-left: 0;
     border-left: 1px solid #E0E0E0; }
 
+.kuiCollapseButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  padding: 4px;
+  border: none;
+  line-height: 1;
+  font-size: 16px;
+  color: #2d2d2d !important;
+  /* 1 */
+  cursor: pointer;
+  opacity: 0.35; }
+  .kuiCollapseButton:hover {
+    opacity: 1; }
+
 /**
  * 1. If we use margins instead, columns get pushed to the next line.
  */
@@ -1474,9 +1493,6 @@ body {
   .theme-dark .kuiLocalDropdown {
     background-color: #525252; }
 
-/**
- * 1. Override Bootstrap styles.
- */
 .kuiLocalDropdownCloseButton {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1484,14 +1500,15 @@ body {
   background-color: transparent;
   padding: 4px;
   border: none;
-  position: absolute;
+  line-height: 1;
-  top: 1px;
-  right: 5px;
   font-size: 16px;
   color: #2d2d2d !important;
   /* 1 */
   cursor: pointer;
-  opacity: 0.35; }
+  opacity: 0.35;
+  position: absolute;
+  top: 1px;
+  right: 5px; }
   .kuiLocalDropdownCloseButton:hover {
     opacity: 1; }
   .theme-dark .kuiLocalDropdownCloseButton {
@@ -1867,10 +1884,15 @@ body {
     background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>');
     /* 1 */ }
 
+/**
+ * 1. Override inherited styles.
+ */
 .kuiLocalSearchButton {
   width: 43px;
   height: 30px;
   font-size: 14px;
+  line-height: 0;
+  /* 1 */
   color: #ffffff;
   background-color: #9c9c9c;
   border: 0;

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

@@ -15,6 +15,9 @@ import ButtonExample
 import CardExample
   from '../../views/card/card_example';
 
+import CollapseButtonExample
+  from '../../views/collapse_button/collapse_button_example';
+
 import ColumnExample
   from '../../views/column/column_example';
 
@@ -112,6 +115,9 @@ const components = [{
 }, {
   name: 'Column',
   component: ColumnExample,
+}, {
+  name: 'CollapseButton',
+  component: CollapseButtonExample,
 }, {
   name: 'Event',
   component: EventExample,

ui_framework/doc_site/src/views/collapse_button/collapse_button.html

@@ -0,0 +1,27 @@
+<button
+  type="button"
+  class="kuiCollapseButton"
+>
+  <div class="kuiIcon fa-chevron-circle-down"></div>
+</button>
+
+<button
+  type="button"
+  class="kuiCollapseButton"
+>
+  <div class="kuiIcon fa-chevron-circle-up"></div>
+</button>
+
+<button
+  type="button"
+  class="kuiCollapseButton"
+>
+  <div class="kuiIcon fa-chevron-circle-left"></div>
+</button>
+
+<button
+  type="button"
+  class="kuiCollapseButton"
+>
+  <div class="kuiIcon fa-chevron-circle-right"></div>
+</button>

ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+const collapseButtonHtml = require('./collapse_button.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="CollapseButton"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: collapseButtonHtml,
+      }]}
+    >
+      <GuideText>
+        Use this button to collapse and expand panels, drawers, sidebars, legends, and other
+        containers.
+      </GuideText>
+
+      <GuideDemo
+        html={collapseButtonHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);