Added side property to 'EuiGlobalToastList'

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `BREAKPOINTS` and `getBreakpoint` utilities [#3578](https://github.com/elastic/eui/pull/3578))
 - Added `'any'` option to the `step` prop of the `EuiFieldNumber` ([#3562](https://github.com/elastic/eui/pull/3562))
 - Moved all `EuiHeader` SASS variables to `global_styles` ([#3592](https://github.com/elastic/eui/pull/3592))
+- Added `side` prop to `EuiGlobalToastList` for choosing which window side to display toasts ([#3600](https://github.com/elastic/eui/pull/3600))
 - Default `titleSize` get's implicitly set to 'm' for `EuiEmptyPrompt` ([#3598](https://github.com/elastic/eui/pull/3598))
 
 **Bug fixes**

src/components/toast/__snapshots__/global_toast_list.test.tsx.snap

@@ -4,16 +4,111 @@ exports[`EuiGlobalToastList is rendered 1`] = `
 <div
   aria-label="aria-label"
   aria-live="polite"
-  class="euiGlobalToastList testClass1 testClass2"
+  class="euiGlobalToastList euiGlobalToastList--right testClass1 testClass2"
   data-test-subj="test subject string"
   role="region"
 />
 `;
 
+exports[`EuiGlobalToastList props side can be changed to left 1`] = `
+<div
+  aria-live="polite"
+  class="euiGlobalToastList euiGlobalToastList--left"
+  role="region"
+>
+  <div
+    class="euiToast euiToast--success euiGlobalToastListItem"
+    data-test-subj="a"
+    id="a"
+  >
+    <p
+      class="euiScreenReaderOnly"
+    >
+      A new notification appears
+    </p>
+    <div
+      aria-label="Notification"
+      class="euiToastHeader euiToastHeader--withBody"
+      data-test-subj="euiToastHeader"
+    >
+      <div
+        aria-hidden="true"
+        class="euiToastHeader__icon"
+        data-euiicon-type="check"
+      />
+      <span
+        class="euiToastHeader__title"
+      >
+        A
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        data-euiicon-type="cross"
+      />
+    </button>
+    <div
+      class="euiText euiText--small euiToastBody"
+    >
+      a
+    </div>
+  </div>
+  <div
+    class="euiToast euiToast--danger euiGlobalToastListItem"
+    data-test-subj="b"
+    id="b"
+  >
+    <p
+      class="euiScreenReaderOnly"
+    >
+      A new notification appears
+    </p>
+    <div
+      aria-label="Notification"
+      class="euiToastHeader euiToastHeader--withBody"
+      data-test-subj="euiToastHeader"
+    >
+      <div
+        aria-hidden="true"
+        class="euiToastHeader__icon"
+        data-euiicon-type="alert"
+      />
+      <span
+        class="euiToastHeader__title"
+      >
+        B
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        data-euiicon-type="cross"
+      />
+    </button>
+    <div
+      class="euiText euiText--small euiToastBody"
+    >
+      b
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiGlobalToastList props toasts is rendered 1`] = `
 <div
   aria-live="polite"
-  class="euiGlobalToastList"
+  class="euiGlobalToastList euiGlobalToastList--right"
   role="region"
 >
   <div

src/components/toast/_global_toast_list.scss

@@ -1,31 +1,49 @@
 /**
  * 1. Allow list to expand as items are added, but cap it at the screen height.
- * 2. Only show the scroll on hover. Generally, scrolling is bad for toasts.
- * 3. Allow some padding if a scroll shows up.
+ * 2. Allow some padding for shadow
  */
 .euiGlobalToastList {
   @include euiScrollBar;
-
   display: flex;
   flex-direction: column;
   align-items: stretch;
   position: fixed;
   z-index: $euiZToastList;
   bottom: 0;
-  right: 0;
-  width: $euiToastWidth + $euiSize + $euiSizeXL; /* 3 */
-  padding-right: $euiSize;
-  padding-left: $euiSizeXL;
+  width: $euiToastWidth + ($euiSize * 5); /* 2 */
   max-height: 100vh; /* 1 */
+  overflow-y: auto;
+
+  // Hide the scrollbar entirely
+  // sass-lint:disable-block no-misspelled-properties
+  scrollbar-width: none;
 
-  &:hover {
-    overflow-y: auto; /* 2 */
+  // sass-lint:disable-block no-vendor-prefixes
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
   }
+
+  // The top and bottom padding give heighto to the list creating a dead-zone effect
+  // when there's no toasts in the list, meaning you can't click anything beneath it.
+  // Only add the padding if there's content.
+  &:not(:empty) {
+    padding: $euiSize;
+  }
+}
+
+.euiGlobalToastList--right:not(:empty) {
+  right: 0;
+  padding-left: $euiSize * 4; /* 2 */
+}
+
+.euiGlobalToastList--left:not(:empty) {
+  left: 0;
+  padding-right: $euiSize * 4; /* 2 */
 }
 
 .euiGlobalToastListItem {
   margin-bottom: $euiSize;
-  margin-right: $euiSize;
   animation: $euiAnimSpeedNormal euiShowToast $euiAnimSlightResistance;
   opacity: 1;
 
@@ -37,6 +55,10 @@
     margin-top: auto; /* 1 */
   }
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &.euiGlobalToastListItem-isDismissed {
     transition: opacity $euiAnimSpeedNormal;
     opacity: 0;
@@ -59,9 +81,10 @@
   /**
    * 1. Mobile we make these 100%. Matching change happens on the item as well.
    */
-  .euiGlobalToastList {
+  .euiGlobalToastList:not(:empty) {
     left: 0;
     padding-left: $euiSize;
+    padding-right: $euiSize;
     width: 100%; /* 1 */
   }
 }

src/components/toast/global_toast_list.test.tsx

@@ -76,6 +76,39 @@ describe('EuiGlobalToastList', () => {
       });
     });
 
+    describe('side', () => {
+      test('can be changed to left', () => {
+        const toasts: Toast[] = [
+          {
+            title: 'A',
+            text: 'a',
+            color: 'success',
+            iconType: 'check',
+            'data-test-subj': 'a',
+            id: 'a',
+          },
+          {
+            title: 'B',
+            text: 'b',
+            color: 'danger',
+            iconType: 'alert',
+            'data-test-subj': 'b',
+            id: 'b',
+          },
+        ];
+
+        const component = render(
+          <EuiGlobalToastList
+            toasts={toasts}
+            dismissToast={() => {}}
+            toastLifeTimeMs={5}
+            side="left"
+          />
+        );
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('dismissToast', () => {
       test('is called when a toast is clicked', () => {
         const dismissToastSpy = jest.fn();

src/components/toast/global_toast_list.tsx

@@ -20,11 +20,20 @@
 import React, { Component, ReactChild } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps } from '../common';
+import { CommonProps, keysOf } from '../common';
 import { Timer } from '../../services/time';
 import { EuiGlobalToastListItem } from './global_toast_list_item';
 import { EuiToast, EuiToastProps } from './toast';
 
+type ToastSide = 'right' | 'left';
+
+const sideToClassNameMap: { [side in ToastSide]: string } = {
+  left: 'euiGlobalToastList--left',
+  right: 'euiGlobalToastList--right',
+};
+
+export const SIDES = keysOf(sideToClassNameMap);
+
 export const TOAST_FADE_OUT_MS = 250;
 
 export interface Toast extends EuiToastProps {
@@ -37,6 +46,10 @@ export interface EuiGlobalToastListProps extends CommonProps {
   toasts: Toast[];
   dismissToast: (this: EuiGlobalToastList, toast: Toast) => void;
   toastLifeTimeMs: number;
+  /**
+   * Determines which side of the browser window the toasts should appear
+   */
+  side?: ToastSide;
 }
 
 interface State {
@@ -69,6 +82,7 @@ export class EuiGlobalToastList extends Component<
 
   static defaultProps = {
     toasts: [],
+    side: 'right',
   };
 
   startScrollingToBottom() {
@@ -247,6 +261,7 @@ export class EuiGlobalToastList extends Component<
       toasts,
       dismissToast,
       toastLifeTimeMs,
+      side,
       ...rest
     } = this.props;
 
@@ -267,8 +282,11 @@ export class EuiGlobalToastList extends Component<
         </EuiGlobalToastListItem>
       );
     });
-
-    const classes = classNames('euiGlobalToastList', className);
+    const classes = classNames(
+      'euiGlobalToastList',
+      side ? sideToClassNameMap[side] : null,
+      className
+    );
 
     return (
       <div