[changed] Deprecate OverlayTrigger positioning api and "manual" trigger

Positioning logic abstracted out and deprecated.
react-bootstrap · Jun 30, 2015 · 389cf3f · 389cf3f
1 parent 5eb8666
commit 389cf3f
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 311 deletions.
diff --git a/docs/examples/OverlayTrigger.js b/docs/examples/OverlayTrigger.js
@@ -0,0 +1,35 @@
+
+const Example = React.createClass({
+ render(){
+ const style = {
+ position: 'absolute',
+ backgroundColor: '#EEE',
+ border: '1px solid #CCC',
+ borderRadius: 3,
+ marginLeft: 5,
+ padding: 10
+ };
+
+ const overlay = (
+ <div style={style}>
+ <strong>Holy guacamole!</strong> Check this info.
+ </div>
+ );
+
+ return (
+ <div style={{ height: 100, position: 'relative' }}>
+ <OverlayTrigger
+ defaultOverlayShown={true}
+ placement="right"
+ trigger='click'
+ overlay={overlay}
+ container={this}
+ >
+ <Button>I am an Overlay target (click me)</Button>
+ </OverlayTrigger>
+ </div>
+ );
+ }
+});
+
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -306,49 +306,79 @@ const ComponentsPage = React.createClass({
 
  </div>
 
- {/* Tooltip */}
+ {/* overlays */}
  <div className='bs-docs-section'>
- <h1 id='tooltips' className='page-header'>Tooltips <small>Tooltip</small></h1>
- <h2 id='tooltips-examples'>Example tooltips</h2>
+ <h1 id='overlays' className='page-header'>Overlays <small>Overlay, Tooltip, Popover</small></h1>
 
- <p>Tooltip component.</p>
- <ReactPlayground codeText={Samples.TooltipBasic} />
+ <h2 id='overlays-examples'>Overlay</h2>
+ <p>
+ Overlays allow components to be rendered and positioned to the left, right, top, or bottom of another component.
+ They are perfect for simple tooltips or even more complicated popups.
+ </p>
+ <ReactPlayground codeText={Samples.Overlay} />
 
- <p>Positioned tooltip component.</p>
- <ReactPlayground codeText={Samples.TooltipPositioned} />
+ <h2 id='overlays-examples'>Overlay Trigger</h2>
+ <p>
+ Often you will want to show or hide and Overlay in response to an action by its target, such as hovering over a link.
+ Since this is such a common pattern we provide the <code>OverlayTrigger</code> component to reduce the amount of boilerplate
+ you need to write to implement this pattern.
+ </p>
+ <ReactPlayground codeText={Samples.OverlayTrigger} />
 
- <p>Positioned tooltip in copy.</p>
- <ReactPlayground codeText={Samples.TooltipInCopy} />
+ <h3 id='overlays-props'>Props</h3>
 
- <h3 id='tooltip-props'>Props</h3>
+ <h4>Overlay</h4>
+ <PropTable component='Overlay'/>
 
- <PropTable component='Tooltip'/>
+ <h4>OverlayTrigger</h4>
+ <PropTable component='OverlayTrigger'/>
 
- </div>
+ {/* Tooltip */}
+ <div className='bs-docs-section'>
+ <h2 id='tooltips' >Tooltip</h2>
+ <p>
+ You don't always need to create custom styling for your overlays. Bootstrap provides two great options out of the box.
+ Tooltips can be used inside an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>
+ </p>
+ <ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
 
- {/* Popover */}
- <div className='bs-docs-section'>
- <h1 id='popovers' className='page-header'>Popovers <small>Popover</small></h1>
- <h2 id='popovers-examples'>Example popovers</h2>
+ <p>Positioned tooltip component.</p>
+ <ReactPlayground codeText={Samples.TooltipPositioned} />
 
- <p>Popover component.</p>
- <ReactPlayground codeText={Samples.PopoverBasic} />
+  <p>Positioned tooltip in copy.</p>
+  <ReactPlayground codeText={Samples.TooltipInCopy} />
 
- <p>Positioned popover component.</p>
- <ReactPlayground codeText={Samples.PopoverPositioned} />
+  <h3 id='tooltips-props'>Props</h3>
+  <PropTable component='Tooltip'/>
 
- <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
- <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
+ </div>
+
+ {/* Popover */}
+ <div className='bs-docs-section'>
+ <h2 id='popovers'>Popovers</h2>
+
+ <p>
+ The Popover component, like the Tooltip can be used with an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>.
+ Unlike the Tooltip popovers are designed to display more reobust information about their targets.
+ </p>
+ <ReactPlayground codeText={Samples.PopoverBasic}/>
 
- <p>Popover component in container.</p>
- <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
+  <p>Positioned popover component.</p>
+  <ReactPlayground codeText={Samples.PopoverPositioned} />
 
- <p>Positioned popover components in scrolling container.</p>
- <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+  <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
+  <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
 
- <h3 id='popover-props'>Props</h3>
+ <p>Popover component in container.</p>
+ <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
 
- <PropTable component='Popover'/>
+ <p>Positioned popover components in scrolling container.</p>
+ <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+
+ <h3 id='popover-props'>Props</h3>
+
+ <PropTable component='Popover'/>
+ </div>
  </div>
 
  {/* Progress Bar */}
@@ -833,6 +863,7 @@ const ComponentsPage = React.createClass({
  </SubNav>
  <NavItem href='#panels' key={4}>Panels</NavItem>
  <NavItem href='#modals' key={5}>Modals</NavItem>
+ <NavItem href='#overlays' key={27}>Overlays</NavItem>
  <NavItem href='#tooltips' key={6}>Tooltips</NavItem>
  <NavItem href='#popovers' key={7}>Popovers</NavItem>
  <NavItem href='#progress' key={8}>Progress bars</NavItem>