Skip to content

Commit d7d85fd

Browse files
donniebergdonnieberg
committed
Merge pull request #51 from salesforce-ux/notifications
Notifications
2 parents 16c2fa7 + 636add9 commit d7d85fd

File tree

10 files changed

+86
-20
lines changed

10 files changed

+86
-20
lines changed

‎components/SLDSModal/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ module.exports = React.createClass( {
200200

201201
return (
202202
<div className={cx(headerClasses)}>
203+
{this.props.toast}
203204
<h2 className={cx(headingClasses)}>{this.props.title}</h2>
204205
{closeButton}
205206
</div>);

‎components/SLDSNotification/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ class SLDSNotification extends React.Component {
3333
<div className="slds-notify-container">
3434
<div className={this.getClassName()} role="alert">
3535
<SLDSButton
36-
label='Close'
36+
label='Dismiss Notification'
3737
variant='icon'
3838
iconName='close'
3939
iconSize='large'

‎components/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import SLDSLookup from './SLDSLookup';
2020
import SLDSModal from './SLDSModal';
2121
import SLDSModalTrigger from './SLDSModal/trigger';
2222
import SLDSIcons from './SLDSIcons';
23+
import SLDSNotification from './SLDSNotification';
2324

2425
module.exports = {
2526
SLDSPicklistBase: SLDSPicklistBase,
@@ -31,5 +32,6 @@ module.exports = {
3132
SLDSLookup: SLDSLookup,
3233
SLDSModal: SLDSModal,
3334
SLDSModalTrigger: SLDSModalTrigger,
34-
SLDSIcons: SLDSIcons
35+
SLDSIcons: SLDSIcons,
36+
SLDSNotification: SLDSNotification,
3537
};

‎demo/code-snippets/SLDSIcon.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
<SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>

‎demo/code-snippets/SLDSModal.txt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
<SLDSButton
3+
label='Open Modal'
4+
variant='brand'
5+
onClick={this.openModal}
6+
/>
7+
<SLDSModal
8+
isOpen={this.state.modalIsOpen}
9+
title={<span>Lightning Design System: Style with Ease</span>}
10+
footer={[
11+
<SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
12+
<SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
13+
]}
14+
onRequestClose={this.closeModal}>
15+
{this.getModalContent()}
16+
</SLDSModal>

‎demo/code-snippets/SLDSNotification.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
<SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
3+
4+
<SLDSModal
5+
isOpen={this.state.modalIsOpen}
6+
toast={<SLDSNotification variant='toast' theme='error' icon='warning' texture={true} content={errorMessage} />}
7+
title={<span>Lightning Design System: Style with Ease</span>}
8+
footer={[
9+
<SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
10+
<SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
11+
]}
12+
onRequestClose={this.closeModal}
13+
>
14+
{this.getModalContent()}
15+
</SLDSModal>

‎demo/pages/HomePage/IconSection.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ module.exports = React.createClass( {
4242
<h3 className='slds-text-heading--medium slds-truncate'>
4343
Utility Icon
4444
</h3>
45+
<PrismCode className='language-markup'>
46+
{require('raw-loader!../../code-snippets/SLDSIcon.txt')}
47+
</PrismCode>
4548
<div className='slds-p-vertical--large'>
4649
<div className='slds-input-has-icon slds-input-has-icon--left'>
4750
<SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>

‎demo/pages/HomePage/ModalSection.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
5151
Utilize our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.
5252
</p>
5353

54-
<SLDSLookup
54+
<SLDSLookup
5555
items={[
5656
{label:'Paddy\'s Pub'},
5757
{label:'Tyrell Corp'},
@@ -149,11 +149,9 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
149149
<h3 className='slds-text-heading--medium slds-truncate'>
150150
Modal
151151
</h3>
152-
{/*
153152
<PrismCode className='language-markup'>
154-
{require("raw-loader!../../code-snippets/SLDSLookupPage.txt")}
153+
{require("raw-loader!../../code-snippets/SLDSModal.txt")}
155154
</PrismCode>
156-
*/}
157155

158156
<div className='slds-p-vertical--large'>
159157
<SLDSButton

‎demo/pages/HomePage/NotificationSection.jsx‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,22 +74,51 @@ module.exports = React.createClass( {
7474

7575
render() {
7676
let message = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
77-
let errorMessage = 'Error';
77+
let errorMessage = 'There was a problem updating the record.';
78+
let toastStyle = { display: 'inline-block'};
7879
return (
7980

80-
<div className='slds-p-around--medium'>
81-
<h3 className='slds-text-heading--medium slds-truncate'>
82-
Notification
83-
</h3>
84-
<div className='slds-p-vertical--large'>
85-
1. Toasts
86-
<div className="demo-only">
87-
<SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
88-
</div>
89-
90-
2. Modal Toasts
81+
<div className='slds-p-around--medium'>
82+
<h3 className='slds-text-heading--medium slds-truncate'>
83+
Notification
84+
</h3>
85+
<h4>
86+
* All notifications are fixed and centered at the top of the screen.
87+
</h4>
88+
<PrismCode className='language-markup'>
89+
{require('raw-loader!../../code-snippets/SLDSNotification.txt')}
90+
</PrismCode>
91+
<div className='slds-p-vertical--medium'>
92+
<div className="slds-p-vertical--small">
93+
1. Toasts
94+
<br />
95+
<div className="demo-only" style={toastStyle}>
96+
{this.state.modalIsOpen ? null: <SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />}
97+
</div>
98+
</div>
99+
100+
<div className="slds-p-vertical--small">
101+
2. Modal Toasts
102+
<br />
103+
<SLDSButton
104+
label='Open Modal Toast'
105+
variant='brand'
106+
onClick={this.openModal} />
107+
<SLDSModal
108+
isOpen={this.state.modalIsOpen}
109+
toast={<SLDSNotification variant='toast' theme='error' icon='warning' texture={true} content={errorMessage} />}
110+
title={<span>Lightning Design System: Style with Ease</span>}
111+
footer={[
112+
<SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
113+
<SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
114+
]}
115+
onRequestClose={this.closeModal}>
116+
{this.getModalContent()}
117+
</SLDSModal>
91118
</div>
119+
92120
</div>
121+
</div>
93122

94123

95124
);

‎demo/pages/HomePage/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ module.exports = React.createClass( {
7272
<main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
7373
<div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
7474

75-
<NotificationSection/>
7675

7776
<ButtonSection/>
7877

@@ -86,6 +85,8 @@ module.exports = React.createClass( {
8685

8786
<ModalSection />
8887

88+
<NotificationSection/>
89+
8990
<DatePickerSingleSelectSection />
9091

9192
<IconSection />
@@ -94,7 +95,6 @@ module.exports = React.createClass( {
9495

9596
<DropdownBaseSection />
9697

97-
9898
</div>
9999
</main>
100100
</SLDSGrid>

0 commit comments

Comments
 (0)