Some random fixes and more icons

CHANGELOG.md

@@ -3,13 +3,23 @@
 - Added `EuiDelayHide` component. [#412](https://github.com/elastic/eui/pull/412)
 - Decreased overall size of checkbox, radio, and switches as well as better styles for the different states. ([#407](https://github.com/elastic/eui/pull/407))
 - `EuiFilePicker` added for `input type="file"` needs. ([#402](https://github.com/elastic/eui/pull/402))
+-  Add `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))
+-  Added icons: `eye`, `eyeClosed`, `grab`, `heatmap`, `vector` ([#427](https://github.com/elastic/eui/pull/427))
 
 **Bug fixes**
 
 - Fix appearance of checked checkeboxes and radios in IE ([#407](https://github.com/elastic/eui/pull/407))
 - Fix disabled vs enabled appearance of checked checkeboxes and radios ([#407](https://github.com/elastic/eui/pull/407))
 - Fix disabled & checked state of switches ([#407](https://github.com/elastic/eui/pull/407))
 - Fix EuiCard content alignment when content is short. ([#415](https://github.com/elastic/eui/pull/415))
+- Only apply the `$euiCodeBlockSelectedBackgroundColor` variable  if it is a color ([#427](https://github.com/elastic/eui/pull/427))
+- No margins for `<hr>` ([#427](https://github.com/elastic/eui/pull/427))
+- Fixed `<EuiButton>` truncation ([#427](https://github.com/elastic/eui/pull/427))
+
+**Breaking changes**
+
+- Default `<button />` is now `text-align: left` ([#427](https://github.com/elastic/eui/pull/427))
+- Changed `EuiAccordion`’s `onToggleOpen` to `onToggle` ([#427](https://github.com/elastic/eui/pull/427))
 
 # [`0.0.21`](https://github.com/elastic/eui/tree/v0.0.21)
 

src-docs/src/views/accordion/accordion_form.js

@@ -43,7 +43,7 @@ const repeatableForm = (
 
 const buttonContent = (
   <div>
-    <EuiFlexGroup gutterSize="s">
+    <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiIcon type="logoWebhook" size="m" />
       </EuiFlexItem>

src-docs/src/views/button/button_example.js

@@ -41,6 +41,10 @@ import ButtonAsLink from './button_as_link';
 const buttonAsLinkSource = require('!!raw-loader!./button_as_link');
 const buttonAsLinkHtml = renderToHtml(ButtonAsLink);
 
+import ButtonLoading from './button_loading';
+const buttonLoadingSource = require('!!raw-loader!./button_loading');
+const buttonLoadingHtml = renderToHtml(ButtonLoading);
+
 export const ButtonExample = {
   title: 'Button',
   sections: [{
@@ -87,6 +91,23 @@ export const ButtonExample = {
       </p>
     ),
     demo: <ButtonWithIcon />,
+  }, {
+    title: 'Loading state',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: buttonLoadingSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: buttonLoadingHtml,
+    }],
+    text: (
+      <p>
+        Setting the <EuiCode>isLoading</EuiCode> prop to true will add the loading spinner or
+        swap the existing icon for the loading spinner and set the button to disabled. It is good
+        practice to also rename the button to &quot;Loading&hellip;&quot;.
+      </p>
+    ),
+    demo: <ButtonLoading />,
   }, {
     title: 'ButtonEmpty',
     source: [{

src-docs/src/views/button/button_loading.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup gutterSize="s" alignItems="center" wrap>
+    <EuiFlexItem grow={false}>
+      <EuiButton isLoading={true}>
+        Loading&hellip;
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <EuiButton fill isLoading={true}>
+        Loading&hellip;
+      </EuiButton>
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <EuiButton fill isLoading={true} iconType="check" iconSide="right">
+        Loading&hellip;
+      </EuiButton>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/icon/icons.js

@@ -38,15 +38,19 @@ const iconTypes = [
   'exit',
   'expand',
   'exportAction',
+  'eye',
+  'eyeClosed',
   'faceHappy',
   'faceNeutral',
   'faceSad',
   'fullScreen',
   'gear',
+  'grab',
   'grid',
+  'heatmap',
   'help',
-  'importAction',
   'iInCircle',
+  'importAction',
   'indexClose',
   'indexEdit',
   'indexFlush',
@@ -61,8 +65,8 @@ const iconTypes = [
   'logstashFilter',
   'logstashIf',
   'logstashInput',
-  'logstashQueue',
   'logstashOutput',
+  'logstashQueue',
   'mapMarker',
   'merge',
   'minusInCircle',
@@ -92,6 +96,7 @@ const iconTypes = [
   'tear',
   'trash',
   'user',
+  'vector',
   'wrench',
 ];
 

src/components/accordion/_accordion_form.scss

@@ -16,7 +16,7 @@
 }
 
 .euiAccordionForm__button {
-  padding: $euiSize;
+  padding: $euiSize $euiSize $euiSize 0;
 
   &:hover {
     text-decoration: none;

src/components/accordion/accordion.js

@@ -21,10 +21,10 @@ export class EuiAccordion extends Component {
       isOpen: props.initialIsOpen,
     };
 
-    this.onToggleOpen = this.onToggleOpen.bind(this);
+    this.onToggle = this.onToggle.bind(this);
   }
 
-  onToggleOpen() {
+  onToggle() {
     const currentState = this.state.isOpen;
     const height = this.childContent.clientHeight;
     this.setState({
@@ -93,7 +93,7 @@ export class EuiAccordion extends Component {
             <button
               aria-controls={id}
               aria-expanded={!!this.state.isOpen}
-              onClick={this.onToggleOpen}
+              onClick={this.onToggle}
               className={buttonClasses}
             >
               <EuiFlexGroup gutterSize="s" alignItems="center">

src/components/button/__snapshots__/button.test.js.snap

@@ -10,7 +10,9 @@ exports[`EuiButton is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span>
+    <span
+      class="euiButton__text"
+    >
       Content
     </span>
   </span>
@@ -25,7 +27,9 @@ exports[`EuiButton props color danger is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -38,7 +42,9 @@ exports[`EuiButton props color ghost is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -51,7 +57,9 @@ exports[`EuiButton props color primary is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -64,7 +72,9 @@ exports[`EuiButton props color secondary is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -77,7 +87,9 @@ exports[`EuiButton props color warning is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -90,7 +102,9 @@ exports[`EuiButton props fill is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -105,7 +119,9 @@ exports[`EuiButton props href secures the rel attribute when the target is _blan
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </a>
 `;
@@ -137,7 +153,9 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
         />
       </g>
     </svg>
-    <span>
+    <span
+      class="euiButton__text"
+    >
       Content
     </span>
   </span>
@@ -171,7 +189,9 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
         />
       </g>
     </svg>
-    <span>
+    <span
+      class="euiButton__text"
+    >
       Content
     </span>
   </span>
@@ -205,7 +225,9 @@ exports[`EuiButton props iconType is rendered 1`] = `
         />
       </g>
     </svg>
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -219,7 +241,28 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiButton props isLoading is rendered 1`] = `
+<button
+  class="euiButton euiButton--primary"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiButton__content"
+  >
+    <div
+      class="euiLoadingSpinner euiLoadingSpinner--medium"
+    />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -232,7 +275,9 @@ exports[`EuiButton props size l is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;
@@ -245,7 +290,9 @@ exports[`EuiButton props size s is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <span />
+    <span
+      class="euiButton__text"
+    />
   </span>
 </button>
 `;

src/components/button/_button.scss

@@ -12,6 +12,11 @@
     padding: 0 ($euiSize - $euiSizeXS);
   }
 
+  .euiButton__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   &.euiButton--small {
     height: $euiButtonHeightSmall;
   }
@@ -88,7 +93,6 @@ $buttonTypes: (
         color: #FFF;
       }
 
-
       &:hover, &:focus {
         background-color: darken($color, 5%);
         border-color: darken($color, 5%);

src/components/button/_index.scss

@@ -14,8 +14,6 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 80%);
   transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
 
   &:hover:not(:disabled) {