From 27d3e5d6e7ea0714ac317b7d851cc87cbea6bebc Mon Sep 17 00:00:00 2001 From: jquense Date: Tue, 30 Jun 2015 18:52:40 -0400 Subject: [PATCH] Proper documentation and cleanup --- docs/examples/ModalCustomSizing.js | 15 ++-- docs/examples/ModalStatic.js | 1 + docs/examples/ModalTrigger.js | 16 +++-- docs/examples/Overlay.js | 38 +++++----- docs/examples/OverlayCustom.js | 45 ++++++++++++ docs/examples/OverlayTrigger.js | 35 --------- docs/generate-metadata.js | 3 +- docs/src/ComponentsPage.js | 110 ++++++++++++++--------------- docs/src/PropTable.js | 2 - docs/src/Samples.js | 2 +- src/Modal.js | 10 +++ src/ModalHeader.js | 3 +- src/ModalTrigger.js | 6 +- src/OverlayMixin.js | 12 ++-- src/OverlayTrigger.js | 29 +++++--- src/Popover.js | 32 +++++++++ src/Tooltip.js | 26 ++++++- 17 files changed, 239 insertions(+), 146 deletions(-) create mode 100644 docs/examples/OverlayCustom.js delete mode 100644 docs/examples/OverlayTrigger.js diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js index 5ddeab19de..4122e352d4 100644 --- a/docs/examples/ModalCustomSizing.js +++ b/docs/examples/ModalCustomSizing.js @@ -1,8 +1,11 @@ const MyModal = React.createClass({ render() { return ( - -
+ + + Modal heading + +

Wrapped Text

Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis @@ -19,10 +22,10 @@ const MyModal = React.createClass({ magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.

-
-
- -
+ + + + ); } diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js index a266659b7a..138c55f050 100644 --- a/docs/examples/ModalStatic.js +++ b/docs/examples/ModalStatic.js @@ -2,6 +2,7 @@ const modalInstance = (
this.setState({ showModal: false }); + close(){ + this.setState({ showModal: false }); + }, + open(){ + this.setState({ showModal: true }); + }, + + render() { let popover = very popover. such engagement; let tooltip = wow.; @@ -17,12 +23,12 @@ const Example = React.createClass({ - + Modal heading @@ -50,7 +56,7 @@ const Example = React.createClass({

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.

- +
diff --git a/docs/examples/Overlay.js b/docs/examples/Overlay.js index 73586f5b45..4f5f1b9fde 100644 --- a/docs/examples/Overlay.js +++ b/docs/examples/Overlay.js @@ -9,31 +9,31 @@ const Example = React.createClass({ }, render(){ - const style = { - position: 'absolute', - backgroundColor: '#EEE', - border: '1px solid #CCC', - borderRadius: 3, - marginLeft: 5, - padding: 10 + const tooltip = Tooltip overload!; + + const sharedProps = { + show: this.state.show, + container: this, + target: props => React.findDOMNode(this.refs.target) }; return ( -
+
- this.setState({ show: false })} - placement="right" - container={this} - target={ props => React.findDOMNode(this.refs.target)} - > -
- Holy guacamole! Check this info. -
+ + { tooltip } + + + { tooltip } + + + { tooltip } + + + { tooltip }
); diff --git a/docs/examples/OverlayCustom.js b/docs/examples/OverlayCustom.js new file mode 100644 index 0000000000..20230b56c6 --- /dev/null +++ b/docs/examples/OverlayCustom.js @@ -0,0 +1,45 @@ + +const Example = React.createClass({ + getInitialState(){ + return { show: true }; + }, + + toggle(){ + this.setState({ show: !this.state.show }); + }, + + render(){ + const style = { + position: 'absolute', + backgroundColor: '#EEE', + boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)', + border: '1px solid #CCC', + borderRadius: 3, + marginLeft: -5, + marginTop: 5, + padding: 10 + }; + + return ( +
+ + + this.setState({ show: false })} + placement="right" + container={this} + target={ props => React.findDOMNode(this.refs.target)} + > +
+ Holy guacamole! Check this info. +
+ +
+ ); + } +}); + +React.render(, mountNode); diff --git a/docs/examples/OverlayTrigger.js b/docs/examples/OverlayTrigger.js deleted file mode 100644 index 667c6ce2d2..0000000000 --- a/docs/examples/OverlayTrigger.js +++ /dev/null @@ -1,35 +0,0 @@ - -const Example = React.createClass({ - render(){ - const style = { - position: 'absolute', - backgroundColor: '#EEE', - border: '1px solid #CCC', - borderRadius: 3, - marginLeft: 5, - padding: 10 - }; - - const overlay = ( -
- Holy guacamole! Check this info. -
- ); - - return ( -
- - - -
- ); - } -}); - -React.render(, mountNode); diff --git a/docs/generate-metadata.js b/docs/generate-metadata.js index 299f702335..bf30c07d0e 100644 --- a/docs/generate-metadata.js +++ b/docs/generate-metadata.js @@ -16,7 +16,8 @@ let cleanDoclets = desc => { return (idx === -1 ? desc : desc.substr(0, idx )).trim(); }; -let cleanDocletValue = str => str.replace(/^\{|\}$/g, ''); +let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, ''); + let isLiteral = str => (/^('|")/).test(str.trim()); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 9eeca587c9..c3166eca4d 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -324,79 +324,76 @@ const ComponentsPage = React.createClass({
- {/* overlays */} -
-

Overlays Overlay, Tooltip, Popover

-

Overlay

+ {/* Tooltip */} +
+

Tooltip

- 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. + Tooltip component for a more stylish alternative to that anchor tag title attribute.

- + -

Overlay Trigger

-

- 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 OverlayTrigger component to reduce the amount of boilerplate - you need to write to implement this pattern. -

- +

Attach and position tooltips with OverlayTrigger.

+ -

Props

+

Positioned tooltip in text copy.

+ -

Overlay

- +

Props

-

OverlayTrigger

+

Overlay Trigger

- {/* Tooltip */} -
-

Tooltip

-

- 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 Overlay Component, or an OverlayTrigger -

- +

Tooltip

+ +
-

Positioned tooltip component.

- + {/* Popover */} +
+

Popovers

-

Positioned tooltip in copy.

- +

+ The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content. +

+ -

Props

- +

The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.

+ -
+

Trigger behaviors. It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.

+ - {/* Popover */} -
-

Popovers

+

Popover component in container.

+ -

- The Popover component, like the Tooltip can be used with an Overlay Component, or an OverlayTrigger. - Unlike the Tooltip popovers are designed to display more reobust information about their targets. -

- +

Positioned popover components in scrolling container.

+ -

Positioned popover component.

- +

Props

-

Trigger behaviors. It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.

- + +
-

Popover component in container.

- + {/* Overlay */} +
+

Overlay

-

Positioned popover components in scrolling container.

- +

+ The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed + to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use + the Overlay component directly. +

+ + +

+ You don't need to use the provided Tooltip or Popover components. Creating custom overlays + is as easy as wrapping some markup in an Overlay component +

+ -

Props

+

Props

- -
+
{/* Progress Bar */} @@ -838,12 +835,12 @@ const ComponentsPage = React.createClass({ {/* Utilities */}
-

Utilities Portal

+

Utilities Portal, Position

Portal

A Component that renders its children into a new React "subtree" or container. The Portal component kind of like the React - equivillent to jQuery's .appendTo(), which is helpful for components that need to be appended to a DOM node other than + equivalent to jQuery's .appendTo(), which is helpful for components that need to be appended to a DOM node other than the component's direct parent. The Modal, and Overlay components use the Portal component internally.

Props

@@ -881,9 +878,9 @@ const ComponentsPage = React.createClass({ Panels Modals - Overlays Tooltips Popovers + Overlays Progress bars Navs Navbars @@ -903,8 +900,7 @@ const ComponentsPage = React.createClass({ Glyphicons Tables Input - - Utilities + Utilities Back to top diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js index 18259b034b..250a70a8f6 100644 --- a/docs/src/PropTable.js +++ b/docs/src/PropTable.js @@ -115,11 +115,9 @@ const PropTable = React.createClass({ case 'union': return type.value.reduce((current, val, i, list) => { let item = this.getType({ type: val }); - if (React.isValidElement(item)) { item = React.cloneElement(item, {key: i}); } - current = current.concat(item); return i === (list.length - 1) ? current : current.concat(' | '); diff --git a/docs/src/Samples.js b/docs/src/Samples.js index b02ee906a6..47e6720802 100644 --- a/docs/src/Samples.js +++ b/docs/src/Samples.js @@ -102,5 +102,5 @@ export default { MenuItem: require('fs').readFileSync(__dirname + '/../examples/MenuItem.js', 'utf8'), Overlay: require('fs').readFileSync(__dirname + '/../examples/Overlay.js', 'utf8'), - OverlayTrigger: require('fs').readFileSync(__dirname + '/../examples/OverlayTrigger.js', 'utf8') + OverlayCustom: require('fs').readFileSync(__dirname + '/../examples/OverlayCustom.js', 'utf8') }; diff --git a/src/Modal.js b/src/Modal.js index f862eacd89..feaaa8ca31 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -1,3 +1,4 @@ +/*eslint-disable react/prop-types */ import React, { cloneElement } from 'react'; import classNames from 'classnames'; @@ -141,8 +142,17 @@ const ModalMarkup = React.createClass({ animation: React.PropTypes.bool, /** * A Callback fired when the header closeButton or non-static backdrop is clicked. + * @type {function} + * @required */ onHide: requiredIfNot('onRequestHide', React.PropTypes.func), + + /** + * A Callback fired when the header closeButton or non-static backdrop is clicked. + * @deprecated Replaced by `onHide`. + */ + onRequestHide: React.PropTypes.func, + /** * A css class to apply to the Modal dialog DOM node. */ diff --git a/src/ModalHeader.js b/src/ModalHeader.js index 25eeaac440..706546c64f 100644 --- a/src/ModalHeader.js +++ b/src/ModalHeader.js @@ -1,3 +1,4 @@ + import React from 'react'; import classnames from 'classnames'; @@ -12,7 +13,7 @@ class ModalHeader extends React.Component { { this.props.closeButton &&