Skip to content

Commit

Permalink
[added] dialogClassName prop to modal to be able to pass custom css c…
Browse files Browse the repository at this point in the history 
…lass to modal-dialog div
  • Loading branch information
corevan authored and corevan committed May 19, 2015
1 parent f12ec59 commit dc7ef19
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 2 deletions.
3 changes: 3 additions & 0 deletions docs/assets/docs.css
View file
Expand Up @@ -1077,6 +1077,9 @@ h1[id] {
margin-right: auto;
margin-left: auto;
}
.custom-modal {
width: 90%;
}

/* Example dropdowns */
.bs-example > .dropdown > .dropdown-toggle {
Expand Down
37 changes: 37 additions & 0 deletions docs/examples/ModalCustomSizing.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 60 additions & 0 deletions docs/examples/ModalDefaultSizing.js
View file
@@ -0,0 +1,60 @@
const MySmallModal = React.createClass({
render() {
return (
<Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
<div className='modal-body'>
<h4>Wrapped Text</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div className='modal-footer'>
<Button onClick={this.props.onRequestHide}>Close</Button>
</div>
</Modal>
);
}
});

const MyLargeModal = React.createClass({
render() {
return (
<Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
<div className='modal-body'>
<h4>Wrapped Text</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div className='modal-footer'>
<Button onClick={this.props.onRequestHide}>Close</Button>
</div>
</Modal>
);
}
});

const overlayTriggerInstance = (
<ButtonToolbar>
<ModalTrigger modal={<MySmallModal />}>
<Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
</ModalTrigger>
<ModalTrigger modal={<MyLargeModal />}>
<Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
</ModalTrigger>
</ButtonToolbar>
);

React.render(overlayTriggerInstance, mountNode);
8 changes: 8 additions & 0 deletions docs/src/ComponentsPage.js
View file
Expand Up @@ -236,6 +236,14 @@ const ComponentsPage = React.createClass({
)}
</pre>
<ReactPlayground codeText={Samples.ModalContained} />

<h3 id='modal-default-sizing'>Sizing modals using standard Bootstrap props</h3>
<p>You can specify a bootstrap large or small modal by using the "bsSize" prop.</p>
<ReactPlayground codeText={Samples.ModalDefaultSizing} />

<h3 id='modal-custom-sizing'>Sizing modals using custom css</h3>
<p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
<ReactPlayground codeText={Samples.ModalCustomSizing} />
</div>

{/* Tooltip */}
Expand Down
2 changes: 2 additions & 0 deletions docs/src/Samples.js
View file
Expand Up @@ -33,6 +33,8 @@ export default {
ModalTrigger: require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
ModalOverlayMixin: require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),
ModalContained: require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
ModalDefaultSizing: require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
ModalCustomSizing: require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
TooltipBasic: require('fs').readFileSync(__dirname + '/../examples/TooltipBasic.js', 'utf8'),
TooltipPositioned: require('fs').readFileSync(__dirname + '/../examples/TooltipPositioned.js', 'utf8'),
TooltipInCopy: require('fs').readFileSync(__dirname + '/../examples/TooltipInCopy.js', 'utf8'),
Expand Down
5 changes: 3 additions & 2 deletions src/Modal.js
View file
Expand Up @@ -20,7 +20,8 @@ const Modal = React.createClass({
keyboard: React.PropTypes.bool,
closeButton: React.PropTypes.bool,
animation: React.PropTypes.bool,
onRequestHide: React.PropTypes.func.isRequired
onRequestHide: React.PropTypes.func.isRequired,
dialogClassName: React.PropTypes.string
},

getDefaultProps() {
Expand Down Expand Up @@ -55,7 +56,7 @@ const Modal = React.createClass({
className={classNames(this.props.className, classes)}
onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
ref="modal">
<div className={classNames(dialogClasses)}>
<div className={classNames(this.props.dialogClassName, dialogClasses)}>
<div className="modal-content">
{this.props.title ? this.renderHeader() : null}
{this.props.children}
Expand Down
12 changes: 12 additions & 0 deletions test/ModalSpec.js
View file
Expand Up @@ -85,4 +85,16 @@ describe('Modal', function () {
assert.ok(dialog.className.match(/\bmodal-sm\b/));
});

it('Should pass dialogClassName to the dialog', function () {
let noOp = function () {};
let instance = ReactTestUtils.renderIntoDocument(
<Modal dialogClassName="testCss" onRequestHide={noOp}>
<strong>Message</strong>
</Modal>
);

let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'modal-dialog');
assert.match(dialog.props.className, /\btestCss\b/);
});

});

0 comments on commit dc7ef19

Please sign in to comment.