Skip to content

Commit 5dccdd1

Browse files
donniebergdonnieberg
committed
Modify Modal so it does not have to render a header
1 parent 26cec9c commit 5dccdd1

File tree

2 files changed

+135
-138
lines changed

2 files changed

+135
-138
lines changed

‎components/SLDSModal/index.jsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -193,33 +193,38 @@ module.exports = React.createClass( {
193193
},
194194

195195
headerComponent() {
196-
let headingClasses = [], headerClasses = ['slds-modal__header'];
196+
let header;
197+
const hasHeader = this.props.title;
197198

198-
let closeButton;
199-
let button = (<SLDSButton label='Close' variant='icon' iconName='close' iconSize='large' inverse={true} className='slds-modal__close' onClick={this.closeModal} />);
199+
const headerClass = {
200+
['slds-modal__header']: hasHeader,
201+
[`slds-theme--${this.props.prompt}`]: this.isPrompt(),
202+
['slds-theme--alert-texture']: this.isPrompt(),
203+
};
200204

201-
if (this.isPrompt()) {
202-
headerClasses.push(`slds-theme--${this.props.prompt}`);
203-
headerClasses.push('slds-theme--alert-texture');
204-
headingClasses.push('slds-text-heading--small');
205-
}
206-
else if (!this.props.title) {
207-
headerClasses = [];
208-
closeButton = button;
209-
}
210-
else {
211-
headingClasses.push('slds-text-heading--medium')
212-
closeButton = button;
205+
const titleClass = {
206+
'slds-text-heading--small': this.isPrompt(),
207+
'slds-text-heading--medium': !this.isPrompt(),
208+
};
209+
210+
if(hasHeader) {
211+
header = (
212+
<div className={cx(headerClass)}>
213+
{this.props.toast}
214+
<h2 className={cx(titleClass)}>{this.props.title}</h2>
215+
{this.props.tagline ? <p className="slds-m-top--x-small">{this.props.tagline}</p>:null}
216+
<SLDSButton label='Close' variant='icon' iconName='close' iconSize='large' inverse={true} className='slds-modal__close' onClick={this.closeModal} />
217+
</div>
218+
)
219+
}else{
220+
header = (
221+
<div style={{position: 'relative'}}>
222+
<SLDSButton label='Close' variant='icon' iconName='close' iconSize='large' inverse={true} className='slds-modal__close' onClick={this.closeModal} />
223+
</div>
224+
)
213225
}
214226

215-
return (
216-
<div className={cx(headerClasses)} style={{position:'relative'}}>
217-
{this.props.toast}
218-
{this.renderTitle(headingClasses)}
219-
{this.renderTagline()}
220-
{closeButton}
221-
</div>
222-
);
227+
return header;
223228
},
224229

225230
componentDidUpdate (prevProps, prevState) {

‎demo/pages/HomePage/ModalSection.jsx‎

Lines changed: 107 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -55,146 +55,138 @@ module.exports = React.createClass( {
5555

5656
getModalContent () {
5757
return <div>
58-
<p>
59-
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.
58+
<p>
59+
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.
6060
</p>
61-
<p>
62-
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.
61+
<p>
62+
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.
6363
</p>
6464

65-
<SLDSLookup
66-
items={[
67-
{label:'Paddy\'s Pub'},
68-
{label:'Tyrell Corp'},
69-
{label:'Paper St. Soap Company'},
70-
{label:'Nakatomi Investments'},
71-
{label:'Acme Landscaping'},
72-
{label:'Acme Construction'}
73-
]}
74-
label="Accounts"
75-
type="account"
76-
modal={true}
77-
/>
65+
<SLDSLookup
66+
items={[
67+
{label:'Paddy\'s Pub'},
68+
{label:'Tyrell Corp'},
69+
{label:'Paper St. Soap Company'},
70+
{label:'Nakatomi Investments'},
71+
{label:'Acme Landscaping'},
72+
{label:'Acme Construction'}
73+
]}
74+
label="Accounts"
75+
type="account"
76+
modal={true}
77+
/>
7878

7979
<p>
80-
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.
81-
</p>
80+
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.
81+
</p>
8282
<p>
83-
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.
84-
</p>
83+
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.
84+
</p>
8585
<p>
86-
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.
87-
</p>
86+
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.
87+
</p>
8888
<p>
89-
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.
90-
</p>
89+
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.
90+
</p>
9191
<p>
92-
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.
93-
</p>
92+
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.
93+
</p>
9494
<p>
95-
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.
96-
</p>
95+
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.
96+
</p>
9797
<p>
98-
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.
99-
</p>
98+
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.
99+
</p>
100100

101101
<SLDSPicklistBase
102-
options={[
103-
{label:'A Option Option Super Super Long',value:'A0'},
104-
{label:'B Option',value:'B0'},
105-
{label:'C Option',value:'C0'},
106-
{label:'D Option',value:'D0'},
107-
{label:'E Option',value:'E0'},
108-
{label:'A1 Option',value:'A1'},
109-
{label:'B2 Option',value:'B1'},
110-
{label:'C2 Option',value:'C1'},
111-
{label:'D2 Option',value:'D1'},
112-
{label:'E2 Option Super Super Long',value:'E1'},
113-
114-
]}
115-
value='C0'
116-
label="Contacts"
117-
modal={true}
118-
placeholder = "Select a contact"
119-
onSelect={(value)=>{console.log('selected: ',value);}} />
102+
options={[
103+
{label:'A Option Option Super Super Long',value:'A0'},
104+
{label:'B Option',value:'B0'},
105+
{label:'C Option',value:'C0'},
106+
{label:'D Option',value:'D0'},
107+
{label:'E Option',value:'E0'},
108+
{label:'A1 Option',value:'A1'},
109+
{label:'B2 Option',value:'B1'},
110+
{label:'C2 Option',value:'C1'},
111+
{label:'D2 Option',value:'D1'},
112+
{label:'E2 Option Super Super Long',value:'E1'},
113+
114+
]}
115+
value='C0'
116+
label="Contacts"
117+
modal={true}
118+
placeholder = "Select a contact"
119+
onSelect={(value)=>{console.log('selected: ',value);}} />
120120
<p>With the Lightning Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.</p>
121121
<a href='http://www.google.com'>CLICK!</a>
122122
<p>
123-
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.
124-
</p>
123+
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.
124+
</p>
125125
<p>
126-
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.
127-
</p>
126+
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.
127+
</p>
128128
<p>
129-
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.
130-
</p>
129+
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.
130+
</p>
131131
<p>
132-
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.
133-
</p>
134-
</div>;
132+
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.
133+
</p>
134+
</div>;
135135
},
136136

137137
render() {
138138
return (
139139
<div className='slds-p-around--medium'>
140140

141-
<h3 id='modalSection' className='slds-text-heading--medium slds-truncate'>
142-
Modal
143-
</h3>
144-
<PrismCode className='language-markup'>
145-
{require("raw-loader!../../code-snippets/SLDSModal.txt")}
146-
</PrismCode>
147-
148-
<div className='slds-p-vertical--medium'>
149-
<h4 className="slds-text-heading--small ">Base</h4>
150-
<SLDSButton label='Open Modal' variant='brand' onClick={this.openModal} />
151-
<SLDSModal
152-
size='medium'
153-
directional={true}
154-
isOpen={this.state.modalIsOpen}
155-
title={<span>Lightning Design System: Style with Ease</span>}
156-
tagline={<span>The new design system framework from <a href="">Salesforce UX.</a></span>}
157-
footer={[
158-
<SLDSButton key='backBtn' label='Back' variant='neutral' onClick={this.closeModal} />,
159-
<SLDSButton key='nextBtn' label='Next' variant='brand' onClick={this.handleSubmitModal} />
160-
]}
161-
onRequestClose={this.closeModal}>
162-
{this.getModalContent()}
163-
</SLDSModal>
164-
165-
</div>
166-
167-
<div className='slds-p-vertical--medium'>
168-
<h4 className="slds-text-heading--small ">Base without Header</h4>
169-
<SLDSButton label='Open Modal' variant='brand' onClick={this.openNoHeader} />
170-
<SLDSModal
171-
size='medium'
172-
isOpen={this.state.noHeaderIsOpen}
173-
footer={[
174-
<SLDSButton key='backBtn' label='Back' variant='neutral' onClick={this.closeModal} />,
175-
<SLDSButton key='nextBtn' label='Next' variant='brand' onClick={this.handleSubmitModal} />
176-
]}
177-
onRequestClose={this.closeModal}>
178-
{this.getModalContent()}
179-
</SLDSModal>
180-
181-
</div>
182-
183-
<div className='slds-p-vertical--medium'>
184-
<h4 className="slds-text-heading--small">Prompt</h4>
185-
<SLDSButton label='Open Prompt' variant='neutral' onClick={this.togglePrompt} />
186-
<SLDSModal
187-
prompt='error'
188-
size='medium'
189-
isOpen={this.state.promptIsOpen}
190-
title={<span>Service Unavailable</span>}
191-
footer={[ <SLDSButton label='Got it' variant='neutral' onClick={this.togglePrompt} /> ]}
192-
>
193-
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
194-
</SLDSModal>
195-
</div>
196-
197-
</div>
141+
<h3 id='modalSection' className='slds-text-heading--medium slds-truncate'>
142+
Modal
143+
</h3>
144+
<PrismCode className='language-markup'>
145+
{require("raw-loader!../../code-snippets/SLDSModal.txt")}
146+
</PrismCode>
147+
148+
<div className='slds-p-vertical--medium'>
149+
<h4 className="slds-text-heading--small ">Base</h4>
150+
<SLDSButton label='Open Modal' variant='brand' onClick={this.openModal} />
151+
<SLDSModal
152+
size='medium'
153+
directional={true}
154+
isOpen={this.state.modalIsOpen}
155+
title={<span>Lightning Design System: Style with Ease</span>}
156+
tagline={<span>The new design system framework from <a href="">Salesforce UX.</a></span>}
157+
footer={[
158+
<SLDSButton key='backBtn' label='Back' variant='neutral' onClick={this.closeModal} />,
159+
<SLDSButton key='nextBtn' label='Next' variant='brand' onClick={this.handleSubmitModal} />
160+
]}
161+
onRequestClose={this.closeModal}>
162+
{this.getModalContent()}
163+
</SLDSModal>
164+
</div>
165+
166+
<div className='slds-p-vertical--medium'>
167+
<h4 className="slds-text-heading--small ">Base without Header</h4>
168+
<SLDSButton label='Open Modal' variant='brand' onClick={this.openNoHeader} />
169+
<SLDSModal
170+
size='large'
171+
isOpen={this.state.noHeaderIsOpen}
172+
onRequestClose={this.closeModal}>
173+
{this.getModalContent()}
174+
</SLDSModal>
175+
</div>
176+
177+
<div className='slds-p-vertical--medium'>
178+
<h4 className="slds-text-heading--small">Prompt</h4>
179+
<SLDSButton label='Open Prompt' variant='neutral' onClick={this.togglePrompt} />
180+
<SLDSModal
181+
prompt='error'
182+
size='medium'
183+
isOpen={this.state.promptIsOpen}
184+
title={<span>Service Unavailable</span>}
185+
footer={[ <SLDSButton label='Got it' variant='neutral' onClick={this.togglePrompt} /> ]}>
186+
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
187+
</SLDSModal>
188+
</div>
189+
</div>
198190
);
199191
}
200192

0 commit comments

Comments
 (0)