Merge pull request react-bootstrap#855 from react-bootstrap/wip-overlays

Overlay Overhaul
michelgb · Jun 30, 2015 · 6e8fa57 · 6e8fa57
2 parents 1a4c5ec + 27d3e5d
commit 6e8fa57
Show file tree

Hide file tree

Showing 42 changed files with 1,667 additions and 575 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -165,3 +165,10 @@ body {
 .prop-table {
   background-color: white;
 }
+
+.bs-example.tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 5px 10px;
+
+}
diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -36,6 +36,7 @@
     "ModalTrigger",
     "OverlayTrigger",
     "OverlayMixin",
+    "Overlay",
     "PageHeader",
     "PageItem",
     "Pager",

diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js
@@ -9,28 +9,40 @@
  * }
  */
 
-const ContainedModal = React.createClass({
-  render() {
-    return (
-      <Modal {...this.props} title='Contained Modal' animation>
-        <div className='modal-body'>
-          Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
-    );
-  }
-});
-
 const Trigger = React.createClass({
+  getInitialState(){
+    return { show: false };
+  },
+
   render() {
+    let close = e => this.setState({ show: false});
+
     return (
       <div className='modal-container' style={{height: 200}}>
-        <ModalTrigger modal={<ContainedModal container={this} />} container={this}>
-          <Button bsStyle='primary' bsSize='large'>Launch contained modal</Button>
-        </ModalTrigger>
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={e => this.setState({ show: true})}
+        >
+          Launch contained modal
+        </Button>
+
+        <Modal
+          show={this.state.show}
+          onHide={close}
+          container={this}
+          aria-labelledby='contained-modal-title'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title'>Contained Modal</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </div>
     );
   }

diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
diff --git a/docs/examples/ModalDefaultSizing.js b/docs/examples/ModalDefaultSizing.js
@@ -1,8 +1,11 @@
 const MySmallModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='small' aria-labelledby='contained-modal-title-sm'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-sm'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <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>
@@ -13,10 +16,10 @@ const MySmallModal = React.createClass({
           <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.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
@@ -25,8 +28,11 @@ const MySmallModal = React.createClass({
 const MyLargeModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='large' aria-labelledby='contained-modal-title-lg'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <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>
@@ -37,24 +43,37 @@ const MyLargeModal = React.createClass({
           <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.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </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>
-);
+const App = React.createClass({
+  getInitialState(){
+    return { smShow: false, lgShow: false };
+  },
+  render(){
+    let smClose = e => this.setState({ smShow: false });
+    let lgClose = e => this.setState({ lgShow: false });
 
-React.render(overlayTriggerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ smShow: true })}>
+          Launch small demo modal
+        </Button>
+        <Button bsStyle='primary' onClick={()=>this.setState({ lgShow: true })}>
+          Launch large demo modal
+        </Button>
+
+        <MySmallModal show={this.state.smShow} onHide={smClose} />
+        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
+      </ButtonToolbar>
+    );
+  }
+});
+
+React.render(<App/>, mountNode);
diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
@@ -1,18 +1,25 @@
 const modalInstance = (
   <div className='static-modal'>
-    <Modal title='Modal title'
+    <Modal
       enforceFocus={false}
+      autoFocus={false}
       backdrop={false}
       animation={false}
       container={mountNode}
-      onRequestHide={function() {}}>
-      <div className='modal-body'>
+      onHide={function(){}}>
+
+      <Modal.Header closeButton>
+        <Modal.Title>Modal title</Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
         One fine body...
-      </div>
-      <div className='modal-footer'>
+      </Modal.Body>
+
+      <Modal.Footer>
         <Button>Close</Button>
         <Button bsStyle='primary'>Save changes</Button>
-      </div>
+      </Modal.Footer>
     </Modal>
   </div>
 );

diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js
@@ -1,42 +1,67 @@
-const MyModal = React.createClass({
+const Example = React.createClass({
+
+  getInitialState(){
+    return { showModal: false };
+  },
+
+  close(){
+    this.setState({ showModal: false });
+  },
+
+  open(){
+    this.setState({ showModal: true });
+  },
+
   render() {
+    let popover = <Popover title='popover'>very popover. such engagement</Popover>;
+    let tooltip = <Tooltip>wow.</Tooltip>;
+
     return (
-      <Modal {...this.props} title='Modal heading' animation={false}>
-        <div className='modal-body'>
-          <h4>Text in a modal</h4>
-          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
-          <h4>Popover in a modal</h4>
-          <p>TODO</p>
-
-          <h4>Tooltips in a modal</h4>
-          <p>TODO</p>
-
-          <hr />
-
-          <h4>Overflowing text to show scroll behavior</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>
+      <div>
+        <p>Click to get the full Modal experience!</p>
+
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={this.open}
+        >
+          Launch demo modal
+        </Button>
+
+        <Modal show={this.state.showModal} onHide={this.close}>
+          <Modal.Header closeButton>
+            <Modal.Title>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Text in a modal</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+
+            <h4>Popover in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={popover}><a href='#'>popover</a></OverlayTrigger> here</p>
+
+            <h4>Tooltips in a modal</h4>
+            <p>there is a <OverlayTrigger overlay={tooltip}><a href='#'>tooltip</a></OverlayTrigger> here</p>
+
+            <hr />
+
+            <h4>Overflowing text to show scroll behavior</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>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
-
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);