Skip to content
Permalink
Browse files

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
  • Loading branch information...
engai committed Feb 15, 2018
1 parent 0dec41e commit 60a628da00392b0ef89adf1779325de7910bc11c
@@ -92,6 +92,9 @@
'popovers/nubbins/index',
'popovers/walkthrough/index',
'popovers/einstein/index',
'popovers/error/index',
'popovers/warning/index',


// Tooltips
'tooltips/base/index',
@@ -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
@@ -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()
@@ -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>
)
}
Oops, something went wrong.

0 comments on commit 60a628d

Please sign in to comment.
You can’t perform that action at this time.