feat(popover): add warning and error variants (#3056)

* feat(popover): add warning and error variants

chore(popover): fix linter issues

* feat(popover): add nubbin colors

* chore(popover): add header id

* chore(popover): switch to error-dark

chore(popover): update snapshots

* chore(popover): change colors and padding

* feat(popover): add scrollable and flush modifiers

* chore(popover): remove tokens and update tests

* feat(popover): update scroll and create body classnames

chore(popover): switch to current color

* feat(popovers): change docked form footer example

* feat(popover): add new error popover to data table example

chore(popover): update popover tests

fix(popover): fix linter issues

* fix(popover): change popover id

* fix(popover): use correct icon

* chore(popover): clean up and update restriction rule

* fix(docked-form-footer): edit inline styles

Author: engai

ui/components/_index.scss

@@ -92,6 +92,9 @@
   'popovers/nubbins/index',
   'popovers/walkthrough/index',
   'popovers/einstein/index',
+  'popovers/error/index',
+  'popovers/warning/index',
+
 
   // Tooltips
   'tooltips/base/index',

ui/components/data-tables/index.jsx

@@ -573,7 +573,7 @@ export const ErrorTd = props => (
         }
       )}
       id={'error-0' + props.index}
-      symbol="warning"
+      symbol="ban"
       tabIndex={props.actionableMode && props.hasError ? null : '-1'}
       title={`Item ${props.index} has errors`}
     />
@@ -920,20 +920,6 @@ export const EditPopover = props => (
   </section>
 );
 
-/**
- * @name ErrorTooltip - Tooltip used to display a row error
- * @param {*} props
- */
-export const ErrorTooltip = props => (
-  <Tooltip
-    className="slds-nubbin_bottom-left slds-theme_error"
-    id="error-tooltip-01"
-    style={{ position: 'absolute', top: '-1rem', left: '0', width: 'auto' }}
-  >
-    Company encountered an error.
-  </Tooltip>
-);
-
 /**
  * @name ProductDataTableTr - Table row for advanced data table components
  * @param {*} props

ui/components/data-tables/inline-edit/example.jsx

@@ -8,10 +8,14 @@ import {
   InlineEditTableContainer as Container,
   AdvancedDataTable as Table,
   Thead,
-  InlineEditTr,
-  ErrorTooltip
+  InlineEditTr
 } from '../';
 
+import { Popover } from '../../popovers/base/example';
+import { FeedbackHeader } from '../../popovers/error/example';
+
+const headingUniqueId = _.uniqueId('dialog-heading-id-');
+
 const columns = [
   'Name',
   'Account Name',
@@ -52,6 +56,12 @@ const rows = [
   }
 ];
 
+let Demo = props => (
+  <div className="demo-only" {...props}>
+    {props.children}
+  </div>
+);
+
 export const InlineEditTable = () => (
   <Container>
     <Table isEditable style={{ width: '66.75rem' }}>
@@ -348,32 +358,52 @@ export let states = [
     id: 'row-error-focused',
     label: 'Error indicator - Focused (Actionable mode)',
     element: (
-      <Container>
-        <Table isEditable style={{ width: '66.75rem' }}>
-          <Thead
-            actionableMode
-            columns={columns}
-            hasErrorColumn
-            mainColumnWidth="8.75rem"
-          />
-          <tbody>
-            {_.times(rows.length, i => (
-              <InlineEditTr
-                key={i}
-                index={i + 1}
-                {...rows[i]}
-                actionableMode
-                focusableCell="error"
-                focusedCell="error"
-                showCellError
-                showRowError
-                showRowErrorTooltip
+      <Demo style={{ marginTop: '100px', marginLeft: '10px' }}>
+        <Container>
+          <Table isEditable style={{ width: '66.75rem' }}>
+            <Thead
+              actionableMode
+              columns={columns}
+              hasErrorColumn
+              mainColumnWidth="8.75rem"
+            />
+            <tbody>
+              {_.times(rows.length, i => (
+                <InlineEditTr
+                  key={i}
+                  index={i + 1}
+                  {...rows[i]}
+                  actionableMode
+                  focusableCell="error"
+                  focusedCell="error"
+                  showCellError
+                  showRowError
+                />
+              ))}
+            </tbody>
+          </Table>
+          <Popover
+            className="slds-popover_error slds-nubbin_bottom-left"
+            headingId={headingUniqueId}
+            popoverId="error-tooltip-01"
+            header={
+              <FeedbackHeader
+                headingId={headingUniqueId}
+                title="Resolve error"
+                symbol="ban"
               />
-            ))}
-          </tbody>
-        </Table>
-        <ErrorTooltip />
-      </Container>
+            }
+            style={{
+              position: 'absolute',
+              top: '-56px'
+            }}
+            closeButton
+            inverse
+          >
+            <p>Company encountered an error</p>
+          </Popover>
+        </Container>
+      </Demo>
     ),
     script: `
       document.getElementById('error-01').focus()

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

@@ -4,6 +4,11 @@
 import React from 'react';
 import ButtonIcon from '../../button-icons/';
 import SvgIcon from '../../../shared/svg-icon';
+import { Popover } from '../../popovers/base/example';
+import { FeedbackHeader } from '../../popovers/error/example';
+import _ from '../../../shared/helpers';
+
+const headingUniqueId = _.uniqueId('dialog-heading-id-');
 
 export const Context = props => (
   <div style={{ height: '180px' }}>{props.children}</div>
@@ -27,11 +32,11 @@ export let states = [
     element: (
       <div className="slds-docked-form-footer">
         <ButtonIcon
-          assistiveText="Review the Following Errors"
+          assistiveText="Resolve error"
           className="slds-button_icon slds-button_icon-error"
           iconClassName="slds-button__icon_large"
-          symbol="warning"
-          title="Review the Following Errors"
+          symbol="ban"
+          title="Resolve error"
         />
         <button type="button" className="slds-button slds-button_neutral">
           Cancel
@@ -48,48 +53,46 @@ export let states = [
     element: (
       <div className="slds-docked-form-footer">
         <ButtonIcon
-          assistiveText="Review the Following Errors"
+          assistiveText="Resolve error"
           className="slds-button_icon slds-button_icon-error"
           iconClassName="slds-button__icon_large"
-          symbol="warning"
-          title="Review the Following Errors"
+          symbol="ban"
+          title="Resolve error"
         />
         <button type="button" className="slds-button slds-button_neutral">
           Cancel
         </button>
         <button type="button" className="slds-button slds-button_brand">
           Save
         </button>
-        <section
-          className="slds-popover slds-nubbin_bottom-left slds-theme_error"
-          role="dialog"
-          aria-label="Contextual title of this dialog"
-          aria-describedby="dialog-description-01"
+        <Popover
+          className="slds-popover_error slds-nubbin_bottom-left"
+          headingId={headingUniqueId}
+          header={
+            <FeedbackHeader
+              headingId={headingUniqueId}
+              title="Resolve error"
+              symbol="ban"
+            />
+          }
+          closeButton
+          inverse
           style={{
             position: 'absolute',
             bottom: '56px',
             left: '50%',
-            marginLeft: '66px',
+            marginLeft: '62px',
             transform: 'translateX(-50%)'
           }}
         >
-          <ButtonIcon
-            className="slds-button_icon-inverse slds-button_icon-small slds-float_right slds-popover__close"
-            symbol="close"
-            assistiveText="Close"
-            title="Close"
-          />
-          <div
-            className="slds-popover__body slds-text-longform"
-            id="dialog-description-01"
-          >
-            <p>
-              Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
-              ullamco deserunt aute id consequat veniam incididunt duis in sint
-              irure nisi.
-            </p>
-          </div>
-        </section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.{' '}
+            <a href="javascript:void(0);" title="Learn More">
+              Learn More
+            </a>
+          </p>
+        </Popover>
       </div>
     )
   }