fix(ie): Add demo class to resolve overflow issue on ie11 (#3814)

Author: brandonferrua

ui/components/docked-composer/base/example.jsx

@@ -242,7 +242,10 @@ const ComboboxListbox = props => (
 /// ////////////////////////////////////////
 
 export const Context = props => (
-  <div style={{ height: '500px', minWidth: '615px', overflowX: 'auto' }}>
+  <div
+    className="demo-only demo-only_viewport"
+    style={{ height: '500px', minWidth: '615px', overflowX: 'auto' }}
+  >
     {props.children}
   </div>
 );

ui/components/docked-form-footer/base/example.jsx

@@ -10,7 +10,9 @@ import _ from '../../../shared/helpers';
 const headingUniqueId = _.uniqueId('dialog-heading-id-');
 
 export const Context = props => (
-  <div style={{ height: '180px' }}>{props.children}</div>
+  <div className="demo-only demo-only_viewport" style={{ height: '180px' }}>
+    {props.children}
+  </div>
 );
 
 export default (

ui/components/docked-utility-bar/base/example.jsx

@@ -109,7 +109,9 @@ const PanelOpen = (
 /// ////////////////////////////////////////
 
 export const Context = props => (
-  <div style={{ height: '540px' }}>{props.children}</div>
+  <div className="demo-only demo-only_viewport" style={{ height: '540px' }}>
+    {props.children}
+  </div>
 );
 
 export default (

ui/components/list-builder/base/example.jsx

@@ -293,7 +293,7 @@ let FilteredItems = props => (
 ----------------------------------------------------------------------------- */
 
 export default (
-  <div className="demo-only" style={{ height: '640px' }}>
+  <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
     <Modal
       className="slds-modal_large slds-list-builder"
       aria-labelledby="id-of-modalheader-h2"
@@ -336,7 +336,7 @@ export let states = [
     id: 'items-selected',
     label: 'Items Selected',
     element: (
-      <div className="demo-only" style={{ height: '640px' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
         <Modal
           className="slds-modal_large"
           aria-labelledby="id-of-modalheader-h2"
@@ -381,7 +381,7 @@ export let states = [
     id: 'items-disabled',
     label: 'Items Disabled',
     element: (
-      <div className="demo-only" style={{ height: '640px' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
         <Modal
           className="slds-modal_large"
           aria-labelledby="id-of-modalheader-h2"
@@ -424,7 +424,7 @@ export let states = [
     id: 'items-default-selected',
     label: 'Items Default Selected',
     element: (
-      <div className="demo-only" style={{ height: '640px' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
         <Modal
           className="slds-modal_large"
           aria-labelledby="id-of-modalheader-h2"
@@ -469,7 +469,7 @@ export let examples = [
     id: 'two-column-with-hidden-header',
     label: 'Two Column with Hidden Header',
     element: (
-      <div className="demo-only" style={{ height: '640px' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
         <Modal
           className="slds-modal_large"
           aria-labelledby="id-of-modalheader-h2"
@@ -508,7 +508,7 @@ export let examples = [
     id: 'filtered',
     label: 'Filtered Results',
     element: (
-      <div className="demo-only" style={{ height: '640px' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '640px' }}>
         <Modal
           className="slds-modal_large"
           aria-labelledby="id-of-modalheader-h2"

ui/components/map/base/example.jsx

@@ -5,7 +5,9 @@ import React from 'react';
 import Map, { MapContainer } from '../';
 
 export const Context = props => (
-  <div style={{ height: '660px' }}>{props.children}</div>
+  <div className="demo-only demo-only_viewport" style={{ height: '660px' }}>
+    {props.children}
+  </div>
 );
 
 export default (

ui/components/modals/base/example.jsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 /// ///////////////////////////////////////////
 
 let Demo = props => (
-  <div className="demo-only" {...props}>
+  <div className="demo-only demo-only_viewport" {...props}>
     {props.children}
     <div className="slds-backdrop slds-backdrop_open" />
   </div>

ui/components/notifications/base/example.jsx

@@ -76,7 +76,7 @@ let Notification = props => {
 /// ///////////////////////////////////////////
 
 export default (
-  <div className="demo-only slds-is-relative" style={{ height: '4.5rem' }}>
+  <div className="demo-only demo-only_viewport" style={{ height: '4.5rem' }}>
     <NotificationContainer>
       <div
         aria-live="assertive"
@@ -100,7 +100,10 @@ export let examples = [
     id: 'task-notification',
     label: 'Task Notification',
     element: (
-      <div className="demo-only slds-is-relative" style={{ height: '4.5rem' }}>
+      <div
+        className="demo-only demo-only_viewport"
+        style={{ height: '4.5rem' }}
+      >
         <NotificationContainer>
           <div
             aria-live="assertive"
@@ -123,7 +126,7 @@ export let examples = [
     id: 'stacked-2',
     label: 'Stacked Notifications',
     element: (
-      <div className="demo-only slds-is-relative" style={{ height: '15rem' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '15rem' }}>
         <NotificationContainer>
           <div
             aria-live="assertive"
@@ -152,7 +155,7 @@ export let examples = [
     id: 'stacked-3',
     label: 'Three Stacked Notifications',
     element: (
-      <div className="demo-only slds-is-relative" style={{ height: '15rem' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '15rem' }}>
         <NotificationContainer>
           <div
             aria-live="assertive"
@@ -187,7 +190,7 @@ export let examples = [
     id: 'overflow-six',
     label: 'Six Stacked Notifications',
     element: (
-      <div className="demo-only slds-is-relative" style={{ height: '17rem' }}>
+      <div className="demo-only demo-only_viewport" style={{ height: '17rem' }}>
         <NotificationContainer>
           <div
             aria-live="assertive"

ui/components/spinners/base/example.jsx

@@ -37,7 +37,7 @@ export let Spinner = props => (
 /// ///////////////////////////////////////////
 
 export default (
-  <Demo>
+  <Demo className="demo-only demo-only_viewport">
     <Spinner className="slds-spinner_medium" />
   </Demo>
 );
@@ -84,7 +84,7 @@ export let examples = [
     description:
       'The spinner container may be used with a container with fixed positioning by adding the <code>.slds-is-fixed</code> class to the container. This may be needed if you are dynamically loading portions of a component after the spinner is showing.',
     element: (
-      <Demo className="demo--inverse">
+      <Demo className="demo-only demo-only_viewport demo--inverse">
         <SpinnerContainer className="slds-is-fixed">
           <Spinner className="slds-spinner_medium" />
         </SpinnerContainer>