Some random fixes (#546)

See PR fo full details.

CHANGELOG.md

@@ -3,10 +3,16 @@
 **Bug fixes**
 
 - Fixed `EuiToolTip` bug which caused the tooltip to hide when moving the mouse around inside of the trigger element ([#557](https://github.com/elastic/eui/pull/557))
+- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
+- Added ‘baseline’ as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
 
 # [`0.0.33`](https://github.com/elastic/eui/tree/v0.0.33)
 
 - Added initial sorting option to `EuiInMemoryTable` ([#547](https://github.com/elastic/eui/pull/547))
+- Horizontally scrolling `EuiTabs` ([#546](https://github.com/elastic/eui/pull/546))
+- Remove padding from both sides of `EuiEmptyButton` ([#546](https://github.com/elastic/eui/pull/546))
+- Added `disabled` prop to placeholder (ellipses) button in pagination ([#546](https://github.com/elastic/eui/pull/546))
+- Converted `.euiHeader__notification` into `EuiHeaderNotification` ([#546](https://github.com/elastic/eui/pull/546))
 
 **Bug fixes**
 

src-docs/src/views/header/header_user_menu.js

@@ -8,6 +8,7 @@ import {
   EuiFlexItem,
   EuiHeaderAlert,
   EuiHeaderSectionItemButton,
+  EuiHeaderNotification,
   EuiIcon,
   EuiLink,
   EuiText,
@@ -44,9 +45,7 @@ export default class extends Component {
           size="m"
         />
 
-        <span className="euiHeader__notification">
-          3
-        </span>
+        <EuiHeaderNotification>3</EuiHeaderNotification>
       </EuiHeaderSectionItemButton>
     );
 

src-docs/src/views/modal/confirm_modal.js

@@ -15,10 +15,14 @@ export class ConfirmModal extends Component {
 
     this.state = {
       isModalVisible: false,
+      isDestroyModalVisible: false,
     };
 
     this.closeModal = this.closeModal.bind(this);
     this.showModal = this.showModal.bind(this);
+
+    this.closeDestroyModal = this.closeDestroyModal.bind(this);
+    this.showDestroyModal = this.showDestroyModal.bind(this);
   }
 
   closeModal() {
@@ -29,6 +33,14 @@ export class ConfirmModal extends Component {
     this.setState({ isModalVisible: true });
   }
 
+  closeDestroyModal() {
+    this.setState({ isDestroyModalVisible: false });
+  }
+
+  showDestroyModal() {
+    this.setState({ isDestroyModalVisible: true });
+  }
+
   render() {
     let modal;
 
@@ -50,13 +62,41 @@ export class ConfirmModal extends Component {
       );
     }
 
+    let destroyModal;
+
+    if (this.state.isDestroyModalVisible) {
+      destroyModal = (
+        <EuiOverlayMask>
+          <EuiConfirmModal
+            title="Do this destructive thing"
+            onCancel={this.closeDestroyModal}
+            onConfirm={this.closeDestroyModal}
+            cancelButtonText="No, don't do it"
+            confirmButtonText="Yes, do it"
+            buttonColor="danger"
+            defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+          >
+            <p>You&rsquo;re about to destroy something.</p>
+            <p>Are you sure you want to do this?</p>
+          </EuiConfirmModal>
+        </EuiOverlayMask>
+      );
+    }
+
     return (
       <div>
         <EuiButton onClick={this.showModal}>
           Show ConfirmModal
         </EuiButton>
 
+        &nbsp;
+
+        <EuiButton onClick={this.showDestroyModal}>
+          Show dangerous ConfirmModal
+        </EuiButton>
+
         {modal}
+        {destroyModal}
       </div>
     );
   }

src-docs/src/views/modal/modal.js

@@ -102,14 +102,12 @@ export class Modal extends Component {
             <EuiModalFooter>
               <EuiButtonEmpty
                 onClick={this.closeModal}
-                size="s"
               >
                 Cancel
               </EuiButtonEmpty>
 
               <EuiButton
                 onClick={this.closeModal}
-                size="s"
                 fill
               >
                 Save

src-docs/src/views/modal/modal_example.js

@@ -54,27 +54,28 @@ export const ModalExample = {
     }],
     text: (
       <p>
-        Use the <EuiCode>EuiConfirmModal</EuiCode> to ask the user to confirm a decision,
-        typically one which is destructive and potentially regrettable.
+        Use the <EuiCode>EuiConfirmModal</EuiCode> to ask the user to confirm a decision.
+        The default type is a positive or neutral confirmation. To change the main button color
+        change the the <EuiCode>buttonColor</EuiCode> property to any of the button color options.
       </p>
     ),
     props: { EuiConfirmModal },
     demo: <ConfirmModal />,
+  }, {
+    title: 'Overflow overflow test',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: overflowTestSource,
     }, {
-      title: 'Overflow overflow test',
-      source: [{
-        type: GuideSectionTypes.JS,
-        code: overflowTestSource,
-      }, {
-        type: GuideSectionTypes.HTML,
-        code: overflowTestHtml,
-      }],
-      text: (
-        <p>
+      type: GuideSectionTypes.HTML,
+      code: overflowTestHtml,
+    }],
+    text: (
+      <p>
           This demo is to test long overflowing body content.
-        </p>
-      ),
-      props: { EuiConfirmModal },
-      demo: <OverflowTest />,
+      </p>
+    ),
+    props: { EuiConfirmModal },
+    demo: <OverflowTest />,
   }],
 };

src-docs/src/views/modal/overflow_test.js

@@ -125,14 +125,12 @@ export class OverflowTest extends Component {
             <EuiModalFooter>
               <EuiButtonEmpty
                 onClick={this.closeModal}
-                size="s"
               >
                 Cancel
               </EuiButtonEmpty>
 
               <EuiButton
                 onClick={this.closeModal}
-                size="s"
                 fill
               >
                 Save

src/components/button/button_empty/_button_empty.scss

@@ -85,15 +85,21 @@ $buttonTypes: (
 }
 
 .euiButtonEmpty--flushLeft {
+  margin-right: $euiSizeS;
+
   .euiButtonEmpty__content {
     border-left: none;
     padding-left: 0;
+    padding-right: 0;
   }
 }
 
 .euiButtonEmpty--flushRight {
+  margin-left: $euiSizeS;
+
   .euiButtonEmpty__content {
     border-right: none;
+    padding-left: 0;
     padding-right: 0;
   }
 }

src/components/flex/__snapshots__/flex_group.test.js.snap

@@ -12,6 +12,12 @@ exports[`EuiFlexGroup is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiFlexGroup props alignItems baseline is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--responsive"
+/>
+`;
+
 exports[`EuiFlexGroup props alignItems center is rendered 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"

src/components/flex/_flex_group.scss

@@ -69,6 +69,11 @@ $gutterTypes: (
   align-items: flex-end;
 }
 
+.euiFlexGroup--alignItemsBaseline {
+  align-items: baseline;
+}
+
+// Wrap
 .euiFlexGroup--wrap {
   flex-wrap: wrap;
 }

src/components/flex/flex_group.js

@@ -18,6 +18,7 @@ const alignItemsToClassNameMap = {
   flexStart: 'euiFlexGroup--alignItemsFlexStart',
   flexEnd: 'euiFlexGroup--alignItemsFlexEnd',
   center: 'euiFlexGroup--alignItemsCenter',
+  baseline: 'euiFlexGroup--alignItemsBaseline',
 };
 
 export const ALIGN_ITEMS = Object.keys(alignItemsToClassNameMap);

src/components/flyout/_flyout_header.scss

@@ -2,6 +2,5 @@
   flex-grow: 0;
   padding: $euiSizeL;
   padding-bottom: 0;
-  box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorEmptyShade;
-  z-index: 2;
+  @include euiOverflowShadowBottom;
 }

src/components/form/switch/_switch.scss

@@ -7,6 +7,7 @@
     padding-left: $euiSizeS;
     line-height: $euiSwitchHeight;
     font-size: $euiFontSizeS;
+    vertical-align: middle;
   }
 
   /**

src/components/header/__snapshots__/header_notification.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiHeaderNotification is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiHeaderNotification testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Content
+</span>
+`;

src/components/header/_header_notification.scss

@@ -0,0 +1,12 @@
+
+.euiHeaderNotification {
+  display: inline-block;
+  border-radius: $euiBorderRadius;
+  background: $euiHeaderNotificationBackgroundColor;
+  color: $euiColorEmptyShade;
+  font-size: $euiFontSizeXS;
+  line-height: $euiSize;
+  height: $euiSize;
+  min-width: $euiSize;
+  vertical-align: middle;
+}

src/components/header/_index.scss

@@ -11,6 +11,7 @@ $euiHeaderChildSize: $euiSizeXXL + $euiSizeL;
 @import 'header_popover';
 @import 'header_profile';
 @import 'header_logo';
+@import 'header_notification';
 @import 'header_alert/index';
 @import 'header_breadcrumbs/index';
 @import 'header_section/index';

src/components/header/header_notification.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const EuiHeaderNotification = ({ children, className, ...rest }) => {
+  const classes = classNames('euiHeaderNotification', className);
+
+  return (
+    <span
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+};

src/components/header/header_notification.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiHeaderNotification } from './header_notification';
+
+describe('EuiHeaderNotification', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiHeaderNotification {...requiredProps}>
+        Content
+      </EuiHeaderNotification>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});

src/components/header/index.js

@@ -16,6 +16,10 @@ export {
   EuiHeaderLogo,
 } from './header_logo';
 
+export {
+  EuiHeaderNotification,
+} from './header_notification';
+
 export {
   EuiHeaderSection,
   EuiHeaderSectionItem,

src/components/index.js

@@ -121,6 +121,7 @@ export {
   EuiHeaderBreadcrumbCollapsed,
   EuiHeaderBreadcrumbs,
   EuiHeaderLogo,
+  EuiHeaderNotification,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,

src/components/modal/__snapshots__/confirm_modal.test.js.snap

@@ -60,7 +60,7 @@ exports[`renders EuiConfirmModal 1`] = `
       class="euiModalFooter"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         data-test-subj="confirmModalCancelButton"
         type="button"
       >
@@ -73,7 +73,7 @@ exports[`renders EuiConfirmModal 1`] = `
         </span>
       </button>
       <button
-        class="euiButton euiButton--primary euiButton--small euiButton--fill"
+        class="euiButton euiButton--primary euiButton--fill"
         data-test-subj="confirmModalConfirmButton"
         type="button"
       >