From ba386d3552d779fe4a494bc11c81c57991a7660b Mon Sep 17 00:00:00 2001 From: LiJinyao Date: Fri, 21 Oct 2016 14:48:10 +0800 Subject: [PATCH 001/963] add ListGroupItem ListGroupItemHeading and List GroupItemText components --- src/ListGroupItem.js | 44 ++++++++++++++++++++++ src/ListGroupItemHeading.js | 32 ++++++++++++++++ src/ListGroupItemText.js | 32 ++++++++++++++++ src/__tests__/ListGroupItem.spec.js | 40 ++++++++++++++++++++ src/__tests__/ListGroupItemHeading.spec.js | 15 ++++++++ src/__tests__/ListGroupItemText.sepc.js | 15 ++++++++ 6 files changed, 178 insertions(+) create mode 100644 src/ListGroupItem.js create mode 100644 src/ListGroupItemHeading.js create mode 100644 src/ListGroupItemText.js create mode 100644 src/__tests__/ListGroupItem.spec.js create mode 100644 src/__tests__/ListGroupItemHeading.spec.js create mode 100644 src/__tests__/ListGroupItemText.sepc.js diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js new file mode 100644 index 000000000..25aa24b3c --- /dev/null +++ b/src/ListGroupItem.js @@ -0,0 +1,44 @@ +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; + +const propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + active: PropTypes.bool, + disabled: PropTypes.bool, + color: PropTypes.string, + action: PropTypes.bool, + className: PropTypes.any, +}; + +const defaultProps = { + tag: 'li' +}; + +const ListGroupItem = (props) => { + const { + className, + tag: Tag, + active, + disabled, + action, + color, + ...attributes + } = props; + const classes = classNames( + className, + active ? 'active' : false, + disabled ? 'disabled' : false, + action ? 'list-group-item-action' : false, + color ? `list-group-item-${color}` : false, + 'list-group-item' + ); + + return ( + + ); +}; + +ListGroupItem.propTypes = propTypes; +ListGroupItem.defaultProps = defaultProps; + +export default ListGroupItem; diff --git a/src/ListGroupItemHeading.js b/src/ListGroupItemHeading.js new file mode 100644 index 000000000..b3c518364 --- /dev/null +++ b/src/ListGroupItemHeading.js @@ -0,0 +1,32 @@ +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; + +const propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.any +}; + +const defaultProps = { + tag: 'h5' +}; + +const ListGroupItemHeading = (props) => { + const { + className, + tag: Tag, + ...attributes + } = props; + const classes = classNames( + className, + 'list-group-item-heading' + ); + + return ( + + ); +}; + +ListGroupItemHeading.propTypes = propTypes; +ListGroupItemHeading.defaultProps = defaultProps; + +export default ListGroupItemHeading; diff --git a/src/ListGroupItemText.js b/src/ListGroupItemText.js new file mode 100644 index 000000000..a268620fb --- /dev/null +++ b/src/ListGroupItemText.js @@ -0,0 +1,32 @@ +import React, { PropTypes } from 'react'; +import classNames from 'classnames'; + +const propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.any +}; + +const defaultProps = { + tag: 'p' +}; + +const ListGroupItemText = (props) => { + const { + className, + tag: Tag, + ...attributes + } = props; + const classes = classNames( + className, + 'list-group-item-text' + ); + + return ( + + ); +}; + +ListGroupItemText.propTypes = propTypes; +ListGroupItemText.defaultProps = defaultProps; + +export default ListGroupItemText; diff --git a/src/__tests__/ListGroupItem.spec.js b/src/__tests__/ListGroupItem.spec.js new file mode 100644 index 000000000..45cdb6ca3 --- /dev/null +++ b/src/__tests__/ListGroupItem.spec.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ListGroupItem from '../ListGroupItem'; + +describe('ListGroupItem', () => { + it('should render children', () => { + const listGroupItem = shallow(Yo!).find('li'); + expect(listGroupItem.text()).toBe('Yo!'); + }); + + it('should render with "list-group-item" class', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item')).toBe(true); + }); + + it('should render with "active" class when active is passed', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('active')).toBe(true); + }); + + it('should render with "disabled" class when disabled is passed', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('disabled')).toBe(true); + }); + + it('should render with "list-group-item-action" class when action is passed', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item-action')).toBe(true); + }); + + it('should render with "list-group-item-${color}" class when color is passed', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item-success')).toBe(true); + }); + + it('should render with "list-group-item-info" class when color="info" is passed', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item-info')).toBe(true); + }); +}); diff --git a/src/__tests__/ListGroupItemHeading.spec.js b/src/__tests__/ListGroupItemHeading.spec.js new file mode 100644 index 000000000..50dacaa3c --- /dev/null +++ b/src/__tests__/ListGroupItemHeading.spec.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ListGroupItemHeading from '../ListGroupItemHeading'; + +describe('ListGroupItem', () => { + it('should render children', () => { + const listGroupItem = shallow(Yo!).find('h5'); + expect(listGroupItem.text()).toBe('Yo!'); + }); + + it('should render with "list-group-item-heading" class', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item-heading')).toBe(true); + }); +}); diff --git a/src/__tests__/ListGroupItemText.sepc.js b/src/__tests__/ListGroupItemText.sepc.js new file mode 100644 index 000000000..d0da59157 --- /dev/null +++ b/src/__tests__/ListGroupItemText.sepc.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ListGroupItemText from '../ListGroupItemText'; + +describe('ListGroupItem', () => { + it('should render children', () => { + const listGroupItem = shallow(Yo!).find('p'); + expect(listGroupItem.text()).toBe('Yo!'); + }); + + it('should render with "list-group-item-text" class', () => { + const wrapper = shallow(Yo!); + expect(wrapper.hasClass('list-group-item-text')).toBe(true); + }); +}); From ea63cf29fb8affd73b228185d7e026361e4c4d10 Mon Sep 17 00:00:00 2001 From: LiJinyao Date: Fri, 21 Oct 2016 15:04:31 +0800 Subject: [PATCH 002/963] export components --- src/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 6587916ff..b584444d3 100644 --- a/src/index.js +++ b/src/index.js @@ -62,6 +62,9 @@ import TabContent from './TabContent'; import TabPane from './TabPane'; import Jumbotron from './Jumbotron'; import Alert from './Alert'; +import ListGroupItem from './ListGroupItem'; +import ListGroupItemHeading from './ListGroupItemHeading'; +import ListGroupItemText from './ListGroupItemText'; export { Alert, @@ -127,5 +130,8 @@ export { PaginationLink, TabContent, TabPane, - Jumbotron + Jumbotron, + ListGroupItem, + ListGroupItemText, + ListGroupItemHeading }; From 05c3aaf18de0dc0974547e6d9cdc10a16dc78462 Mon Sep 17 00:00:00 2001 From: LiJinyao Date: Fri, 21 Oct 2016 15:12:20 +0800 Subject: [PATCH 003/963] remove unnecessary test --- src/__tests__/ListGroupItem.spec.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/__tests__/ListGroupItem.spec.js b/src/__tests__/ListGroupItem.spec.js index 45cdb6ca3..6778c0ae8 100644 --- a/src/__tests__/ListGroupItem.spec.js +++ b/src/__tests__/ListGroupItem.spec.js @@ -32,9 +32,4 @@ describe('ListGroupItem', () => { const wrapper = shallow(Yo!); expect(wrapper.hasClass('list-group-item-success')).toBe(true); }); - - it('should render with "list-group-item-info" class when color="info" is passed', () => { - const wrapper = shallow(Yo!); - expect(wrapper.hasClass('list-group-item-info')).toBe(true); - }); }); From 0ad0f98c10036b249bc816604e5b0d330eec2808 Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Sat, 29 Oct 2016 18:20:27 -0400 Subject: [PATCH 004/963] chore(release): adding 3.7.1 (#212) --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dfedad2e1..81beda11c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [3.7.1](https://github.com/reactstrap/reactstrap/compare/3.7.0...v3.7.1) (2016-10-29) + + +### Bug Fixes + +* **NavbarToggler:** remove unnecessary menu char ([#200](https://github.com/reactstrap/reactstrap/issues/200)) ([67544a3](https://github.com/reactstrap/reactstrap/commit/67544a3)) + + + # [3.7.0](https://github.com/reactstrap/reactstrap/compare/3.6.0...v3.7.0) (2016-10-27) diff --git a/package.json b/package.json index 1ed3156e0..5100c3e4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactstrap", - "version": "3.7.0", + "version": "3.7.1", "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x", "main": "lib/index.js", "scripts": { From ddbf0dda4675d593f8eddce61dca1f72a0b95bff Mon Sep 17 00:00:00 2001 From: Li Jinyao Date: Tue, 1 Nov 2016 14:32:40 +0800 Subject: [PATCH 005/963] feat(Collapse): add Collapse component #79 (#201) * init collapse * add collapse animation * add margin between toggle button and collapse * disable lint on force refresh DOM line. * add test to Collapse * remove height after shown * Revert "remove height after shown" This reverts commit eff9353c21d070927aa049ae42e9b93504ed8509. * remove height after shown. * add more test * use setState() to set inline height style * remove custom tag in doc * add inline style test * remove comment * set height to null when isOpen is true * add initial state test --- docs/lib/Components/CollapsePage.js | 38 +++++++++ docs/lib/Components/index.js | 4 + docs/lib/examples/Collapse.js | 34 ++++++++ docs/lib/routes.js | 2 + src/Collapse.js | 120 +++++++++++++++++++++++++++ src/__tests__/Collapse.spec.js | 121 ++++++++++++++++++++++++++++ src/index.js | 4 +- webpack.dev.config.js | 1 + 8 files changed, 323 insertions(+), 1 deletion(-) create mode 100644 docs/lib/Components/CollapsePage.js create mode 100644 docs/lib/examples/Collapse.js create mode 100644 src/Collapse.js create mode 100644 src/__tests__/Collapse.spec.js diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js new file mode 100644 index 000000000..21a3c858a --- /dev/null +++ b/docs/lib/Components/CollapsePage.js @@ -0,0 +1,38 @@ +/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ +import React from 'react'; +import { PrismCode } from 'react-prism'; +import { Alert } from 'reactstrap'; +import Helmet from 'react-helmet'; + +import CollapseExample from '../examples/Collapse'; +const CollapseExampleSource = require('!!raw!../examples/Collapse'); + +export default class AlertsPage extends React.Component { + render() { + return ( +
+ + +

Collapse

+
+ +
+ 
+          
+            {CollapseExampleSource}
+          
+
+ +

Properties

+ 
+          
+{`Collapse.propTypes = {
+  isOpen: PropTypes.bool,
+  className: PropTypes.node
+}`}
+          
+
+
+ ); + } +} diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js index 1f5d622b7..347ae5924 100644 --- a/docs/lib/Components/index.js +++ b/docs/lib/Components/index.js @@ -108,6 +108,10 @@ class Components extends React.Component { { name: 'Alerts', to: '/components/alerts/' + }, + { + name: 'Collapse', + to: '/components/collapse/', } ] }; diff --git a/docs/lib/examples/Collapse.js b/docs/lib/examples/Collapse.js new file mode 100644 index 000000000..59d8480f0 --- /dev/null +++ b/docs/lib/examples/Collapse.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; +import { Collapse, Button, CardBlock, Card } from 'reactstrap'; + +class Example extends Component { + constructor(props) { + super(props); + this.toggle = this.toggle.bind(this); + this.state = { collapse: false }; + } + + toggle() { + this.setState({ collapse: !this.state.collapse }); + } + + render() { + return ( +
+ + + + + Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. Nihil + anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. + + + +
+ ); + } +} + +export default Example; diff --git a/docs/lib/routes.js b/docs/lib/routes.js index 23075d25d..50ba21de2 100644 --- a/docs/lib/routes.js +++ b/docs/lib/routes.js @@ -23,6 +23,7 @@ import PaginationPage from './Components/PaginationPage'; import TabsPage from './Components/TabsPage'; import JumbotronPage from './Components/JumbotronPage'; import AlertsPage from './Components/AlertsPage'; +import CollapsePage from './Components/CollapsePage'; import NotFound from './NotFound'; import Components from './Components'; import UI from './UI'; @@ -54,6 +55,7 @@ const routes = ( + diff --git a/src/Collapse.js b/src/Collapse.js new file mode 100644 index 000000000..dc29b499b --- /dev/null +++ b/src/Collapse.js @@ -0,0 +1,120 @@ +import React, { Component, PropTypes } from 'react'; +import classNames from 'classnames'; +import omit from 'lodash.omit'; + +const SHOW = 'SHOW'; +const SHOWN = 'SHOWN'; +const HIDE = 'HIDE'; +const HIDDEN = 'HIDDEN'; + +const propTypes = { + isOpen: PropTypes.bool, + className: PropTypes.node, + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), +}; + +const defaultProps = { + isOpen: false, + tag: 'div' +}; + +class Collapse extends Component { + constructor(props) { + super(props); + this.state = { + collapse: props.isOpen ? SHOWN : HIDDEN, + height: props.isOpen ? null : 0 + }; + this.element = null; + } + + componentWillReceiveProps(nextProps) { + const willOpen = nextProps.isOpen; + const collapse = this.state.collapse; + + if (willOpen && collapse === HIDDEN) { + // will open + this.setState({ collapse: SHOW }, () => { + // the height transition will work after class "collapsing" applied + this.setState({ height: this.getHeight() }); + this.transitionTag = setTimeout(() => { + this.setState({ + collapse: SHOWN, + height: null + }); + }, 350); + }); + } else if (!willOpen && collapse === SHOWN) { + // will hide + this.setState({ height: this.getHeight() }, () => { + this.setState({ + collapse: HIDE, + height: this.getHeight() + }, () => { + this.setState({ height: 0 }); + }); + }); + + this.transitionTag = setTimeout(() => { + this.setState({ + collapse: HIDDEN, + height: null + }); + }, 350); + } + // else: do nothing. + } + + componentWillUnmount() { + clearTimeout(this.transitionTag); + } + + getHeight() { + return this.element.scrollHeight; + } + + render() { + const { + className, + tag: Tag, + ...attributes + } = omit(this.props, ['isOpen']); + const { collapse, height } = this.state; + let collapseClass; + switch (collapse) { + case SHOW: + collapseClass = 'collapsing'; + break; + case SHOWN: + collapseClass = 'collapse in'; + break; + case HIDE: + collapseClass = 'collapsing'; + break; + case HIDDEN: + collapseClass = 'collapse'; + break; + default: + // HIDDEN + collapseClass = 'collapse'; + } + + const classes = classNames( + className, + collapseClass + ); + const style = height === null ? null : { height }; + return ( + { this.element = c; }} + /> + ); + } +} + +Collapse.propTypes = propTypes; +Collapse.defaultProps = defaultProps; +export default Collapse; diff --git a/src/__tests__/Collapse.spec.js b/src/__tests__/Collapse.spec.js new file mode 100644 index 000000000..e4404e573 --- /dev/null +++ b/src/__tests__/Collapse.spec.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import Collapse from '../Collapse'; + +describe('Collapse', () => { + let isOpen; + let toggle; + + beforeEach(() => { + isOpen = false; + toggle = () => { isOpen = !isOpen; }; + jasmine.clock().install(); + }); + + afterEach(() => { + // fast forward time for collapse to fade out + jasmine.clock().tick(400); + jasmine.clock().uninstall(); + }); + + it('should render children', () => { + const wrapper = shallow(

hello

).find('p'); + expect(wrapper.text()).toBe('hello'); + }); + + it('should have default isOpen value', () => { + const wrapper = shallow(); + expect(wrapper.instance().props.isOpen).toEqual(false); + }); + + it('should render with class "collapse"', () => { + const wrapper = shallow(); + expect(wrapper.hasClass('collapse')).toEqual(true); + }); + + it('should render with class "in" when isOpen is true', () => { + const wrapper = shallow(); + expect(wrapper.hasClass('in')).toEqual(true); + }); + + it('should set height to null when isOpen is true', () => { + isOpen = true; + const wrapper = shallow(); + expect(wrapper.state('height')).toBe(null); + }); + + it('should set height to 0 when isOpen is false', () => { + const wrapper = shallow(); + expect(wrapper.state('height')).toBe(0); + }); + + it('should render with class "collapse" with default collapse state', () => { + const wrapper = mount(); + wrapper.setState({ collapse: null }); + jasmine.clock().tick(360); + wrapper.update(); + expect(wrapper.find('.collapse').length).toBe(1); + wrapper.unmount(); + }); + + it('should change state with { collapse: ${State} } when isOpen change to true before transition', () => { + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + expect(wrapper.state('collapse')).toEqual('SHOW'); + wrapper.unmount(); + }); + + it('should change state with { collapse: ${State} } when isOpen change to true after transition', () => { + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + jasmine.clock().tick(350); + expect(wrapper.state('collapse')).toEqual('SHOWN'); + wrapper.unmount(); + }); + + it('should change state with { collapse: ${State} } when isOpen change to false before transition', () => { + isOpen = true; + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + expect(wrapper.state('collapse')).toEqual('HIDE'); + wrapper.unmount(); + }); + + it('should change state with { collapse: ${State} } when isOpen change to false after transition', () => { + isOpen = true; + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + jasmine.clock().tick(360); + expect(wrapper.state('collapse')).toEqual('HIDDEN'); + wrapper.unmount(); + }); + + it('should set inline style to 0 when isOpen change to false', () => { + isOpen = true; + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + expect(wrapper.state('height')).toBe(0); + wrapper.unmount(); + }); + + it('should remove inline style when isOpen change to true after transition', () => { + const wrapper = mount(); + toggle(); + wrapper.setProps({ isOpen: isOpen }); + jasmine.clock().tick(380); + expect(wrapper.state('height')).toBe(null); + wrapper.unmount(); + }); + + it('should remove timeout tag after unmount', () => { + spyOn(Collapse.prototype, 'componentWillUnmount').and.callThrough(); + const wrapper = mount(); + wrapper.unmount(); + expect(Collapse.prototype.componentWillUnmount).toHaveBeenCalled(); + }); +}); diff --git a/src/index.js b/src/index.js index 6587916ff..64d4b68f0 100644 --- a/src/index.js +++ b/src/index.js @@ -62,6 +62,7 @@ import TabContent from './TabContent'; import TabPane from './TabPane'; import Jumbotron from './Jumbotron'; import Alert from './Alert'; +import Collapse from './Collapse'; export { Alert, @@ -127,5 +128,6 @@ export { PaginationLink, TabContent, TabPane, - Jumbotron + Jumbotron, + Collapse }; diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 86f4aad58..e569e1354 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -35,6 +35,7 @@ var paths = [ '/components/tabs/', '/components/jumbotron/', '/components/alerts/', + '/components/collapse/', '/404.html' ]; From 55e47b31a729a4fa260f2bae265a2dee1c502fe9 Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Tue, 1 Nov 2016 02:55:32 -0400 Subject: [PATCH 006/963] chore(release): adding 3.8.0 (#217) * chore(release): adding 3.8.0 * feat(Collapse): add cssModule support --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- src/Collapse.js | 7 +++++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 81beda11c..4c0e619de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +# [3.8.0](https://github.com/reactstrap/reactstrap/compare/3.7.1...v3.8.0) (2016-11-01) + + +### Features + +* **Collapse:** add Collapse component [#79](https://github.com/reactstrap/reactstrap/issues/79) ([#201](https://github.com/reactstrap/reactstrap/issues/201)) ([ddbf0dd](https://github.com/reactstrap/reactstrap/commit/ddbf0dd)) + + + ## [3.7.1](https://github.com/reactstrap/reactstrap/compare/3.7.0...v3.7.1) (2016-10-29) diff --git a/package.json b/package.json index 5100c3e4c..5977285df 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactstrap", - "version": "3.7.1", + "version": "3.8.0", "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x", "main": "lib/index.js", "scripts": { diff --git a/src/Collapse.js b/src/Collapse.js index dc29b499b..dac2b0938 100644 --- a/src/Collapse.js +++ b/src/Collapse.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; import omit from 'lodash.omit'; +import { mapToCssModules } from './utils'; const SHOW = 'SHOW'; const SHOWN = 'SHOWN'; @@ -11,6 +12,7 @@ const propTypes = { isOpen: PropTypes.bool, className: PropTypes.node, tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + cssModule: PropTypes.object, }; const defaultProps = { @@ -76,6 +78,7 @@ class Collapse extends Component { render() { const { className, + cssModule, tag: Tag, ...attributes } = omit(this.props, ['isOpen']); @@ -99,10 +102,10 @@ class Collapse extends Component { collapseClass = 'collapse'; } - const classes = classNames( + const classes = mapToCssModules(classNames( className, collapseClass - ); + ), cssModule); const style = height === null ? null : { height }; return ( Date: Tue, 1 Nov 2016 11:39:09 -0400 Subject: [PATCH 007/963] feat(refs): add getRef to focusable components (#218) --- src/Button.js | 6 ++++-- src/CardLink.js | 4 +++- src/Form.js | 6 ++++-- src/Input.js | 6 ++++-- src/NavLink.js | 6 ++++-- 5 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/Button.js b/src/Button.js index b0097201c..8e0b3d3d8 100644 --- a/src/Button.js +++ b/src/Button.js @@ -9,6 +9,7 @@ const propTypes = { disabled: PropTypes.bool, outline: PropTypes.bool, tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), onClick: PropTypes.func, size: PropTypes.string, children: PropTypes.node, @@ -18,7 +19,7 @@ const propTypes = { const defaultProps = { color: 'secondary', - tag: 'button' + tag: 'button', }; class Button extends React.Component { @@ -49,6 +50,7 @@ class Button extends React.Component { outline, size, tag: Tag, + getRef, ...attributes } = this.props; @@ -66,7 +68,7 @@ class Button extends React.Component { } return ( - + ); } } diff --git a/src/CardLink.js b/src/CardLink.js index 073dcdb48..b26e4851f 100644 --- a/src/CardLink.js +++ b/src/CardLink.js @@ -4,6 +4,7 @@ import { mapToCssModules } from './utils'; const propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), className: PropTypes.string, cssModule: PropTypes.object, }; @@ -17,6 +18,7 @@ const CardLink = (props) => { className, cssModule, tag: Tag, + getRef, ...attributes } = props; const classes = mapToCssModules(classNames( @@ -25,7 +27,7 @@ const CardLink = (props) => { ), cssModule); return ( - + ); }; diff --git a/src/Form.js b/src/Form.js index 691127e53..f4db6a36c 100644 --- a/src/Form.js +++ b/src/Form.js @@ -5,7 +5,8 @@ import { mapToCssModules } from './utils'; const propTypes = { children: PropTypes.node, inline: PropTypes.bool, - tag: PropTypes.string, + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), className: PropTypes.string, cssModule: PropTypes.object, }; @@ -20,6 +21,7 @@ const Form = (props) => { cssModule, inline, tag: Tag, + getRef, ...attributes, } = props; @@ -29,7 +31,7 @@ const Form = (props) => { ), cssModule); return ( - + ); }; diff --git a/src/Input.js b/src/Input.js index e41af8dc8..8f46aba02 100644 --- a/src/Input.js +++ b/src/Input.js @@ -9,7 +9,8 @@ const propTypes = { type: PropTypes.string, size: PropTypes.string, state: PropTypes.string, - tag: PropTypes.string, + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), static: PropTypes.bool, addon: PropTypes.bool, className: PropTypes.string, @@ -32,6 +33,7 @@ class Input extends React.Component { tag, addon, static: staticInput, + getRef, ...attributes, } = this.props; @@ -69,7 +71,7 @@ class Input extends React.Component { } return ( - + ); } } diff --git a/src/NavLink.js b/src/NavLink.js index f932ddf18..d253da9a6 100644 --- a/src/NavLink.js +++ b/src/NavLink.js @@ -4,6 +4,7 @@ import { mapToCssModules } from './utils'; const propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + getRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), disabled: PropTypes.bool, active: PropTypes.bool, className: PropTypes.string, @@ -13,7 +14,7 @@ const propTypes = { }; const defaultProps = { - tag: 'a' + tag: 'a', }; class NavLink extends React.Component { @@ -44,6 +45,7 @@ class NavLink extends React.Component { cssModule, active, tag: Tag, + getRef, ...attributes } = this.props; @@ -57,7 +59,7 @@ class NavLink extends React.Component { ), cssModule); return ( - + ); } } From f467462df9c6eec90a56176063228dd269f6b7fc Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Tue, 1 Nov 2016 09:01:02 -0700 Subject: [PATCH 008/963] chore(release): adding 3.8.1 (#219) --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c0e619de..602de0616 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [3.8.1](https://github.com/reactstrap/reactstrap/compare/3.8.0...v3.8.1) (2016-11-01) + + +### Features + +* **refs:** add getRef to focusable components ([#218](https://github.com/reactstrap/reactstrap/issues/218)) ([cbfa0e0](https://github.com/reactstrap/reactstrap/commit/cbfa0e0)) + + + # [3.8.0](https://github.com/reactstrap/reactstrap/compare/3.7.1...v3.8.0) (2016-11-01) diff --git a/package.json b/package.json index 5977285df..58fec71ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactstrap", - "version": "3.8.0", + "version": "3.8.1", "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x", "main": "lib/index.js", "scripts": { From 997d36fac7804ccdb1ca6df970c7a089fd08b0ef Mon Sep 17 00:00:00 2001 From: edgji Date: Wed, 2 Nov 2016 08:40:41 -0700 Subject: [PATCH 009/963] docs(NavbarToggler): add NavbarToggler example with Collapse Component (#216) * add NavbarToggler example * feat(Collapse): add Collapse component #79 (#201) * init collapse * add collapse animation * add margin between toggle button and collapse * disable lint on force refresh DOM line. * add test to Collapse * remove height after shown * Revert "remove height after shown" This reverts commit eff9353c21d070927aa049ae42e9b93504ed8509. * remove height after shown. * add more test * use setState() to set inline height style * remove custom tag in doc * add inline style test * remove comment * set height to null when isOpen is true * add initial state test * chore(release): adding 3.8.0 (#217) * chore(release): adding 3.8.0 * feat(Collapse): add cssModule support * feat(refs): add getRef to focusable components (#218) * chore(release): adding 3.8.1 (#219) * add NavbarToggler example * update example to use Collapse component --- docs/lib/Components/NavbarPage.js | 11 +++++++++ docs/lib/examples/NavbarToggler.js | 39 ++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 docs/lib/examples/NavbarToggler.js diff --git a/docs/lib/Components/NavbarPage.js b/docs/lib/Components/NavbarPage.js index 6a71c3417..fd0dbb083 100644 --- a/docs/lib/Components/NavbarPage.js +++ b/docs/lib/Components/NavbarPage.js @@ -5,6 +5,8 @@ import { PrismCode } from 'react-prism'; import Helmet from 'react-helmet'; import NavbarExample from '../examples/Navbar'; const NavbarExampleSource = require('!!raw!../examples/Navbar'); +import NavbarTogglerExample from '../examples/NavbarToggler'; +const NavbarTogglerExampleSource = require('!!raw!../examples/NavbarToggler'); export default class NavsPage extends React.Component { render() { @@ -45,6 +47,15 @@ export default class NavsPage extends React.Component { }`} +

NavbarToggler

+
+ +
+ 
+          
+            {NavbarTogglerExampleSource}
+          
+

NavbarToggler Properties

           
diff --git a/docs/lib/examples/NavbarToggler.js b/docs/lib/examples/NavbarToggler.js
new file mode 100644
index 000000000..5cbf7179f
--- /dev/null
+++ b/docs/lib/examples/NavbarToggler.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
+
+export default class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggleNavbar = this.toggleNavbar.bind(this);
+    this.state = {
+      collapsed: true
+    };
+  }
+
+  toggleNavbar() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+  render() {
+    return (
+      

+        
+          
+          
+            reactstrap
+            
+          
+        
+      

+    );
+  }
+}

From cd3c1cebea342d23b1d9a8d917e6aadf18396b9f Mon Sep 17 00:00:00 2001
From: Evan Sharp 
Date: Sun, 13 Nov 2016 17:06:53 -0500
Subject: [PATCH 010/963] fix(DropdownToggle): support non Button styles (#221)

* fix(DropdownToggle): always use Button; passing tag if provided

* fix(DropdownToggle): support non Button styles
---
 src/DropdownToggle.js                | 15 ++++++++++-----
 src/__tests__/DropdownToggle.spec.js | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
index a4adf4d4c..2b076cf1d 100644
--- a/src/DropdownToggle.js
+++ b/src/DropdownToggle.js
@@ -21,7 +21,6 @@ const defaultProps = {
   'data-toggle': 'dropdown',
   'aria-haspopup': true,
   color: 'secondary',
-  tag: Button
 };
 
 const contextTypes = {
@@ -42,7 +41,7 @@ class DropdownToggle extends React.Component {
       return;
     }
 
-    if (this.props.nav) {
+    if (this.props.nav && !this.props.tag) {
       e.preventDefault();
     }
 
@@ -54,7 +53,7 @@ class DropdownToggle extends React.Component {
   }
 
   render() {
-    const { className, cssModule, caret, split, nav, tag: Tag, ...props } = this.props;
+    const { className, cssModule, caret, split, nav, tag, ...props } = this.props;
     const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
     const classes = mapToCssModules(classNames(
       className,
@@ -67,9 +66,15 @@ class DropdownToggle extends React.Component {
     ), cssModule);
     const children = props.children || {ariaLabel};
 
-    if (nav) {
-      props.tag = 'a';
+    let Tag;
+
+    if (nav && !tag) {
+      Tag = 'a';
       props.href = '#';
+    } else if (!tag) {
+      Tag = Button;
+    } else {
+      Tag = tag;
     }
 
     return (
diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js
index 72533651a..fe3b95fb7 100644
--- a/src/__tests__/DropdownToggle.spec.js
+++ b/src/__tests__/DropdownToggle.spec.js
@@ -170,6 +170,20 @@ describe('DropdownToggle', () => {
       expect(wrapper.find('.nav-link').length).toBe(1);
     });
 
+    it('should not set the tag prop when the tag is defined', () => {
+      const wrapper = mount(
+        Ello world,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('[aria-haspopup="true"]').prop('tag')).toBe(undefined);
+    });
+
     it('should preventDefault', () => {
       const e = { preventDefault: jasmine.createSpy('preventDefault') };
       const wrapper = mount(

From ce10764e75e580fffd434d705512503ca49121a0 Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Sun, 13 Nov 2016 20:37:33 -0800
Subject: [PATCH 011/963] chore(release): adding 3.9.0 (#225)

* chore(release): adding 3.9.0

* build(travis): update dist

* build(package.json): bump react-scripts, add verbose flag to coverage

* build(travis): run tests in current process
---
 .travis.yml  |  4 +++-
 CHANGELOG.md | 15 +++++++++++++++
 package.json |  4 ++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 288cd140e..c2c542222 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,5 @@
+sudo: false
+dist: trusty
 language: node_js
 node_js:
   - 6
@@ -8,7 +10,7 @@ before_script:
   - chmod +x scripts/docs
 script:
   - npm run lint
-  - npm run cover
+  - npm run cover -- --runInBand
 after_script:
   - npm run report-coverage
 after_success:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 602de0616..fa351f25e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+
+# [3.9.0](https://github.com/reactstrap/reactstrap/compare/3.8.1...v3.9.0) (2016-11-13)
+
+
+### Bug Fixes
+
+* **DropdownToggle:** support non Button styles ([#221](https://github.com/reactstrap/reactstrap/issues/221)) ([cd3c1ce](https://github.com/reactstrap/reactstrap/commit/cd3c1ce))
+
+
+### Features
+
+* **ListGroup:** add ListGroupItem, ListGroupItemHeading, ListGroupItemText components ([#192](https://github.com/reactstrap/reactstrap/issues/192)) ([d09e81a](https://github.com/reactstrap/reactstrap/commit/d09e81a))
+
+
+
 
 ## [3.8.1](https://github.com/reactstrap/reactstrap/compare/3.8.0...v3.8.1) (2016-11-01)
 
diff --git a/package.json b/package.json
index 58fec71ef..d17850916 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactstrap",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x",
   "main": "lib/index.js",
   "scripts": {
@@ -92,7 +92,7 @@
     "react-helmet": "^3.0.1",
     "react-prism": "4.0.0",
     "react-router": "^2.6.1",
-    "react-scripts": "^0.6.0",
+    "react-scripts": "^0.7.0",
     "static-site-generator-webpack-plugin": "^2.0.1",
     "style-loader": "^0.13.1",
     "webpack": "^1.12.13",

From 9ddeb8a0be17eddddac278490f9b278096494781 Mon Sep 17 00:00:00 2001
From: Evan Sharp 
Date: Tue, 22 Nov 2016 21:51:18 -0500
Subject: [PATCH 012/963] fix(modal): fix multi-modal backdrop (#227)

closes #222
---
 src/Modal.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Modal.js b/src/Modal.js
index 5522c4fc3..95ffcd770 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -125,6 +125,8 @@ class Modal extends React.Component {
     const classes = document.body.className;
     this._element = document.createElement('div');
     this._element.setAttribute('tabindex', '-1');
+    this._element.style.position = 'relative';
+    this._element.style.zIndex = '1000';
     this.originalBodyPadding = getOriginalBodyPadding();
 
     conditionallyUpdateScrollbar();

From e3b5e10911f6fa13c2a6411d63967dd3e055e26e Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Tue, 22 Nov 2016 21:53:29 -0800
Subject: [PATCH 013/963] chore(release): adding 3.9.1 (#229)

---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa351f25e..71807667b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+
+## [3.9.1](https://github.com/reactstrap/reactstrap/compare/3.9.0...v3.9.1) (2016-11-23)
+
+
+### Bug Fixes
+
+* **modal:** fix multi-modal backdrop ([#227](https://github.com/reactstrap/reactstrap/issues/227)) ([9ddeb8a](https://github.com/reactstrap/reactstrap/commit/9ddeb8a)), closes [#222](https://github.com/reactstrap/reactstrap/issues/222)
+
+
+
 
 # [3.9.0](https://github.com/reactstrap/reactstrap/compare/3.8.1...v3.9.0) (2016-11-13)
 
diff --git a/package.json b/package.json
index d17850916..48ad45cdf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactstrap",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x",
   "main": "lib/index.js",
   "scripts": {

From bd851b6d2c5114b2e1384a41c2ac575132b3c1a0 Mon Sep 17 00:00:00 2001
From: Jim Liu 
Date: Wed, 23 Nov 2016 18:35:05 -0600
Subject: [PATCH 014/963] docs(readme): add to projects using reactstrap (#233)

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 1d621b27d..cf51ac803 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,7 @@ Organizations and projects using `reactstrap`
 
 - [availity-reactstrap-validation](https://availity.github.io/availity-reactstrap-validation/)
 - [component-template](https://reactstrap.github.io/component-template/)
+- [video-react](https://video-react.github.io/)
 
 Submit a PR to add to this list!
 

From d9e7621ed55eb849f0e2a5bf0b1fbbc15cdcacde Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Mon, 28 Nov 2016 00:02:13 -0800
Subject: [PATCH 015/963] fix(TetherContent): Fixes className prop typo,
 removes arrow & position relative hack

---
 src/TetherContent.js                | 14 +++-----------
 src/__tests__/TetherContent.spec.js | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/TetherContent.js b/src/TetherContent.js
index 670e6add4..74eae558f 100644
--- a/src/TetherContent.js
+++ b/src/TetherContent.js
@@ -2,10 +2,10 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import isFunction from 'lodash.isfunction';
 import Tether from 'tether';
-import { mapToCssModules } from './utils';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   arrow: PropTypes.string,
   disabled: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
@@ -101,15 +101,9 @@ class TetherContent extends React.Component {
     document.addEventListener('click', this.handleDocumentClick, true);
 
     this._element = document.createElement('div');
+    this._element.className = this.props.className;
     document.body.appendChild(this._element);
     this.renderIntoSubtree();
-
-    if (this.props.arrow) {
-      const arrow = document.createElement('div');
-      arrow.className = mapToCssModules(this.props.arrow + '-arrow', this.props.cssModule);
-      this._element.appendChild(arrow);
-    }
-
     this._tether = new Tether(this.getTetherConfig());
     this.props.tetherRef(this._tether);
     this._tether.position();
@@ -136,9 +130,7 @@ class TetherContent extends React.Component {
     const { children, style } = this.props;
     return React.cloneElement(
       children,
-      {
-        style: { position: 'relative', ...style }
-      }
+      { style }
     );
   }
 
diff --git a/src/__tests__/TetherContent.spec.js b/src/__tests__/TetherContent.spec.js
index 56faa860d..789173d89 100644
--- a/src/__tests__/TetherContent.spec.js
+++ b/src/__tests__/TetherContent.spec.js
@@ -24,6 +24,16 @@ describe('TetherContent', () => {
     expect(instance._element).toBe(undefined);
   });
 
+  it('should renderChildren with className', () => {
+    state = true;
+    spyOn(TetherContent.prototype, 'componentDidMount').and.callThrough();
+    spyOn(TetherContent.prototype, 'renderChildren').and.callThrough();
+    const wrapper = mount(
Content
);
+    const instance = wrapper.instance();
+
+    expect(instance._element.className.indexOf('foo') > -1).toBe(true);
+  });
+
   it('should renderChildren when isOpen is true', () => {
     state = true;
     spyOn(TetherContent.prototype, 'componentDidMount').and.callThrough();
@@ -37,16 +47,6 @@ describe('TetherContent', () => {
     expect(instance._element.className.indexOf('tether') > -1).toBe(true);
   });
 
-  it('should render an arrow dom node when prop is true', () => {
-    state = true;
-    const wrapper = mount(
Content
);
-    const instance = wrapper.instance();
-
-    expect(instance._element.textContent).toBe('Content');
-    expect(instance._tether.enabled).toBe(true);
-    expect(instance._element.innerHTML.indexOf('
') > -1).toBe(true);
-  });
-
   it('should not call props.toggle when disabled ', () => {
     state = true;
     let props = jasmine.createSpyObj('props', ['toggle']);

From b9d3ea7574e4dfab5f33a4da71e548c136560791 Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Mon, 28 Nov 2016 00:04:33 -0800
Subject: [PATCH 016/963] fix(Popover): remove old arrow markup, correct
 enabled className

---
 src/Popover.js                | 7 +++++--
 src/__tests__/Popover.spec.js | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Popover.js b/src/Popover.js
index 2f2522f45..631cb9f17 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -23,7 +23,10 @@ const defaultProps = {
 
 const defaultTetherConfig = {
   classPrefix: 'bs-tether',
-  classes: { element: 'popover', enabled: 'open' },
+  classes: {
+    element: false,
+    enabled: 'in'
+  },
   constraints: [
     { to: 'scrollParent', attachment: 'together none' },
     { to: 'window', attachment: 'together none' }
@@ -63,7 +66,7 @@ class Popover extends React.Component {
 
     return (
        {
     expect(isOpen).toBe(false);
 
     expect(wrapper.find(TetherContent).length).toBe(0);
+    expect(document.body.querySelectorAll('.popover.in').length).toBe(0);
     expect(document.getElementsByClassName('popover').length).toBe(0);
     expect(document.getElementsByClassName('popover-inner').length).toBe(0);
     expect(document.getElementsByClassName('popover-title').length).toBe(0);
@@ -80,6 +81,7 @@ describe('Popover', () => {
 
     expect(isOpen).toBe(true);
     expect(wrapper.find(TetherContent).length).toBe(1);
+    expect(document.body.querySelectorAll('.popover.in').length).toBe(1);
     expect(document.getElementsByClassName('popover').length).toBe(1);
     expect(document.getElementsByClassName('popover-inner').length).toBe(1);
     expect(document.getElementsByClassName('popover-title').length).toBe(1);

From 62d622ba534c261591dc9b6ba5df3a0538200a35 Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Mon, 28 Nov 2016 00:04:37 -0800
Subject: [PATCH 017/963] fix(Tooltip): remove old arrow markup, correct
 enabled className

---
 src/Tooltip.js                | 11 +++++++----
 src/__tests__/Tooltip.spec.js |  2 ++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Tooltip.js b/src/Tooltip.js
index 68c83fd6f..a2bb4b33a 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -11,7 +11,7 @@ const propTypes = {
   disabled: PropTypes.bool,
   tether: PropTypes.object,
   tetherRef: PropTypes.func,
-  classNames: PropTypes.any,
+  className: PropTypes.string,
   cssModule: PropTypes.object,
   toggle: PropTypes.func,
   autohide: PropTypes.bool,
@@ -36,7 +36,10 @@ const defaultProps = {
 
 const defaultTetherConfig = {
   classPrefix: 'bs-tether',
-  classes: { element: 'tooltip in', enabled: 'open' },
+  classes: {
+    element: false,
+    enabled: 'in',
+  },
   constraints: [
     { to: 'scrollParent', attachment: 'together none' },
     { to: 'window', attachment: 'together none' }
@@ -184,14 +187,14 @@ class Tooltip extends React.Component {
     const attributes = omit(this.props, Object.keys(propTypes));
     const classes = mapToCssModules(classNames(
       'tooltip-inner',
-      this.props.classNames
+      this.props.className
     ), this.props.cssModule);
 
     let tetherConfig = this.getTetherConfig();
 
     return (
        {
     const tooltips = document.getElementsByClassName('tooltip');
 
     expect(ReactDOM.findDOMNode(instance)).toBe(null);
+    expect(document.body.querySelectorAll('.tooltip.in').length).toBe(0);
     expect(target.className).toBe('');
     expect(tooltips.length).toBe(0);
     wrapper.detach();
@@ -64,6 +65,7 @@ describe('Tooltip', () => {
     const tooltips = document.getElementsByClassName('tooltip');
 
     expect(ReactDOM.findDOMNode(instance)).toBe(null);
+    expect(document.body.querySelectorAll('.tooltip.in').length).toBe(1);
     expect(target.className.indexOf('bs-tether-target') > -1).toBe(true);
     expect(tooltips.length).toBe(1);
     expect(tooltips[0].textContent).toBe('Tooltip Content');

From 25bf3ad6bbe2fc72a1e8796896f48cf3a7ea9ee6 Mon Sep 17 00:00:00 2001
From: Eddy Hernandez 
Date: Mon, 28 Nov 2016 00:30:21 -0800
Subject: [PATCH 018/963] chore(release): adding 3.9.2

---
 CHANGELOG.md | 12 ++++++++++++
 package.json |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71807667b..24ac501a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+
+## [3.9.2](https://github.com/reactstrap/reactstrap/compare/3.9.1...v3.9.2) (2016-11-28)
+
+
+### Bug Fixes
+
+* **Popover:** remove old arrow markup, correct enabled className ([b9d3ea7](https://github.com/reactstrap/reactstrap/commit/b9d3ea7))
+* **TetherContent:** Fixes className prop typo, removes arrow & position relative hack ([d9e7621](https://github.com/reactstrap/reactstrap/commit/d9e7621))
+* **Tooltip:** remove old arrow markup, correct enabled className ([62d622b](https://github.com/reactstrap/reactstrap/commit/62d622b))
+
+
+
 
 ## [3.9.1](https://github.com/reactstrap/reactstrap/compare/3.9.0...v3.9.1) (2016-11-23)
 
diff --git a/package.json b/package.json
index 48ad45cdf..3b32d8546 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactstrap",
-  "version": "3.9.1",
+  "version": "3.9.2",
   "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x",
   "main": "lib/index.js",
   "scripts": {

From 656ee2dc10edbb6e7bfe74cf1cf36a84d1e61f04 Mon Sep 17 00:00:00 2001
From: Evan Sharp 
Date: Thu, 1 Dec 2016 16:50:26 -0500
Subject: [PATCH 019/963] feature(modal): make z-index configurable (#244)

---
 docs/lib/Components/ModalsPage.js | 7 ++++++-
 src/Modal.js                      | 9 +++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
index 20b4f9f6b..5f9017f34 100644
--- a/docs/lib/Components/ModalsPage.js
+++ b/docs/lib/Components/ModalsPage.js
@@ -49,7 +49,12 @@ export default class ModalsPage extends React.Component {
     PropTypes.bool,
     PropTypes.oneOf(['static'])
   ]),
-  keyboard: PropTypes.bool
+  keyboard: PropTypes.bool,
+  // zIndex defaults to 1000.
+  zIndex: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
 }`}
diff --git a/src/Modal.js b/src/Modal.js index 95ffcd770..c9bf2526e 100644 --- a/src/Modal.js +++ b/src/Modal.js @@ -24,12 +24,17 @@ const propTypes = { children: PropTypes.node, className: PropTypes.string, cssModule: PropTypes.object, + zIndex: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + ]), }; const defaultProps = { isOpen: false, backdrop: true, - keyboard: true + keyboard: true, + zIndex: 1000, }; class Modal extends React.Component { @@ -126,7 +131,7 @@ class Modal extends React.Component { this._element = document.createElement('div'); this._element.setAttribute('tabindex', '-1'); this._element.style.position = 'relative'; - this._element.style.zIndex = '1000'; + this._element.style.zIndex = this.props.zIndex; this.originalBodyPadding = getOriginalBodyPadding(); conditionallyUpdateScrollbar(); From 1301b1136bfc940cb9ad8845d52b92df5b1ae69b Mon Sep 17 00:00:00 2001 From: Li Jinyao Date: Fri, 2 Dec 2016 05:52:44 +0800 Subject: [PATCH 020/963] feat(ListGroup): prevent onClick when disabled & add docs #185 (#236) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * init ListGroup doc * Prevent click event when disabled. * set contextual classes by pass status props directly I use a color prop to pass contextual classes info to the component, when you want to set a status, you must type `color=“success”`. It trivially to do so. Now you just need pass a `success` bool prop to show the status. * ListGroup Doc * add test for disabled item * change back to color prop * remove Container * move disable handler function out --- docs/lib/Components/ListGroupPage.js | 87 +++++++++++++++++++ docs/lib/Components/index.js | 4 + docs/lib/examples/ListGroup.js | 16 ++++ .../examples/ListGroupAnchorsAndButtons.js | 29 +++++++ .../examples/ListGroupContextualClasses.js | 15 ++++ docs/lib/examples/ListGroupCustomContent.js | 29 +++++++ docs/lib/examples/ListGroupDisabledItems.js | 16 ++++ docs/lib/examples/ListGroupTag.js | 14 +++ docs/lib/routes.js | 2 + src/ListGroupItem.js | 8 ++ src/__tests__/ListGroupItem.spec.js | 9 +- webpack.dev.config.js | 1 + 12 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 docs/lib/Components/ListGroupPage.js create mode 100644 docs/lib/examples/ListGroup.js create mode 100644 docs/lib/examples/ListGroupAnchorsAndButtons.js create mode 100644 docs/lib/examples/ListGroupContextualClasses.js create mode 100644 docs/lib/examples/ListGroupCustomContent.js create mode 100644 docs/lib/examples/ListGroupDisabledItems.js create mode 100644 docs/lib/examples/ListGroupTag.js diff --git a/docs/lib/Components/ListGroupPage.js b/docs/lib/Components/ListGroupPage.js new file mode 100644 index 000000000..d08e9e996 --- /dev/null +++ b/docs/lib/Components/ListGroupPage.js @@ -0,0 +1,87 @@ +/* eslint react/no-multi-comp: 0, react/prop-types: 0 */ +import React from 'react'; +import { PrismCode } from 'react-prism'; +import Helmet from 'react-helmet'; +import ListGroupExample from '../examples/ListGroup'; +import ListGroupTagExample from '../examples/ListGroupTag'; +import ListGroupDisabledItemsExample from '../examples/ListGroupDisabledItems'; +import ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndButtons'; +import ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses'; +import ListGroupCustomContentExample from '../examples/ListGroupCustomContent'; + +const ListGroupTagExampleSource = require('!!raw!../examples/ListGroupTag'); +const ListGroupExampleSource = require('!!raw!../examples/ListGroup'); +const ListGroupDisabledItemsExampleSource = require('!!raw!../examples/ListGroupDisabledItems'); +const ListGroupAnchorsAndButtonsExampleSource = require('!!raw!../examples/ListGroupAnchorsAndButtons'); +const ListGroupContextualClassesExampleSource = require('!!raw!../examples/ListGroupContextualClasses'); +const ListGroupCustomContentExampleSource = require('!!raw!../examples/ListGroupCustomContent'); + +export default class ListGroupPage extends React.Component { + render() { + return ( +
+ +

ListGroup

+
+ +
+ 
+          
+            {ListGroupExampleSource}
+          
+
+ + Tags +
+ +
+ 
+          
+            {ListGroupTagExampleSource}
+          
+
+ + Disabled items +
+ +
+ 
+          
+            {ListGroupDisabledItemsExampleSource}
+          
+
+ + Anchors and buttons +
+

Note: you need add action props to make these buttons fit the list.

+ +
+ 
+          
+            {ListGroupAnchorsAndButtonsExampleSource}
+          
+
+ + Contextual classes +
+ +
+ 
+          
+            {ListGroupContextualClassesExampleSource}
+          
+
+ + Custom content +
+ +
+ 
+          
+            {ListGroupCustomContentExampleSource}
+          
+
+
+ ); + } +} diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js index 347ae5924..a5b3037dc 100644 --- a/docs/lib/Components/index.js +++ b/docs/lib/Components/index.js @@ -112,6 +112,10 @@ class Components extends React.Component { { name: 'Collapse', to: '/components/collapse/', + }, + { + name: 'List Group', + to: '/components/listgroup/' } ] }; diff --git a/docs/lib/examples/ListGroup.js b/docs/lib/examples/ListGroup.js new file mode 100644 index 000000000..0777f5b47 --- /dev/null +++ b/docs/lib/examples/ListGroup.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { ListGroup, ListGroupItem } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + ); + } +} diff --git a/docs/lib/examples/ListGroupAnchorsAndButtons.js b/docs/lib/examples/ListGroupAnchorsAndButtons.js new file mode 100644 index 000000000..6c7cb3cc6 --- /dev/null +++ b/docs/lib/examples/ListGroupAnchorsAndButtons.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { ListGroup, ListGroupItem } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( +
+

Anchors

+

Be sure to not use the standard .btn classes here.

+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +

+

Buttons

+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
+ ); + } +} diff --git a/docs/lib/examples/ListGroupContextualClasses.js b/docs/lib/examples/ListGroupContextualClasses.js new file mode 100644 index 000000000..33d1847f2 --- /dev/null +++ b/docs/lib/examples/ListGroupContextualClasses.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { ListGroup, ListGroupItem } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + + ); + } +} diff --git a/docs/lib/examples/ListGroupCustomContent.js b/docs/lib/examples/ListGroupCustomContent.js new file mode 100644 index 000000000..6986ac8bf --- /dev/null +++ b/docs/lib/examples/ListGroupCustomContent.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( + + + List group item heading + + Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + + + + List group item heading + + Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + + + + List group item heading + + Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + + + + ); + } +} diff --git a/docs/lib/examples/ListGroupDisabledItems.js b/docs/lib/examples/ListGroupDisabledItems.js new file mode 100644 index 000000000..5fdd2ba70 --- /dev/null +++ b/docs/lib/examples/ListGroupDisabledItems.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { ListGroup, ListGroupItem } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + ); + } +} diff --git a/docs/lib/examples/ListGroupTag.js b/docs/lib/examples/ListGroupTag.js new file mode 100644 index 000000000..ef08ceacf --- /dev/null +++ b/docs/lib/examples/ListGroupTag.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { ListGroup, ListGroupItem, Tag } from 'reactstrap'; + +export default class Example extends React.Component { + render() { + return ( + + 14Cras justo odio + 2Dapibus ac facilisis in + 1Morbi leo risus + + ); + } +} diff --git a/docs/lib/routes.js b/docs/lib/routes.js index 50ba21de2..4e2cc93d2 100644 --- a/docs/lib/routes.js +++ b/docs/lib/routes.js @@ -24,6 +24,7 @@ import TabsPage from './Components/TabsPage'; import JumbotronPage from './Components/JumbotronPage'; import AlertsPage from './Components/AlertsPage'; import CollapsePage from './Components/CollapsePage'; +import ListGroupPage from './Components/ListGroupPage'; import NotFound from './NotFound'; import Components from './Components'; import UI from './UI'; @@ -56,6 +57,7 @@ const routes = ( + diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js index 25aa24b3c..ef5565822 100644 --- a/src/ListGroupItem.js +++ b/src/ListGroupItem.js @@ -14,6 +14,10 @@ const defaultProps = { tag: 'li' }; +const handleDisabledOnClick = (e) => { + e.preventDefault(); +}; + const ListGroupItem = (props) => { const { className, @@ -33,6 +37,10 @@ const ListGroupItem = (props) => { 'list-group-item' ); + // Prevent click event when disabled. + if (disabled) { + attributes.onClick = handleDisabledOnClick; + } return ( ); diff --git a/src/__tests__/ListGroupItem.spec.js b/src/__tests__/ListGroupItem.spec.js index 6778c0ae8..74774e6cd 100644 --- a/src/__tests__/ListGroupItem.spec.js +++ b/src/__tests__/ListGroupItem.spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, mount } from 'enzyme'; import ListGroupItem from '../ListGroupItem'; describe('ListGroupItem', () => { @@ -32,4 +32,11 @@ describe('ListGroupItem', () => { const wrapper = shallow(Yo!); expect(wrapper.hasClass('list-group-item-success')).toBe(true); }); + + it('should prevent click event when disabled is passed', () => { + const onDisableClick = jasmine.createSpy('click'); + const wrapper = mount(Yo!); + wrapper.find('li').simulate('click'); + expect(onDisableClick).not.toHaveBeenCalled(); + }); }); diff --git a/webpack.dev.config.js b/webpack.dev.config.js index e569e1354..272ae9935 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -36,6 +36,7 @@ var paths = [ '/components/jumbotron/', '/components/alerts/', '/components/collapse/', + '/components/listgroup/', '/404.html' ]; From 9456d102de4b683fede5b0fe9d51925739c3594f Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Thu, 1 Dec 2016 13:54:49 -0800 Subject: [PATCH 021/963] chore(release): adding 3.9.3 (#245) --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24ac501a1..f1ea5915e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [3.9.3](https://github.com/reactstrap/reactstrap/compare/3.9.2...v3.9.3) (2016-12-01) + + +### Features + +* **ListGroup:** prevent onClick when disabled & add docs [#185](https://github.com/reactstrap/reactstrap/issues/185) ([#236](https://github.com/reactstrap/reactstrap/issues/236)) ([1301b11](https://github.com/reactstrap/reactstrap/commit/1301b11)) + + + ## [3.9.2](https://github.com/reactstrap/reactstrap/compare/3.9.1...v3.9.2) (2016-11-28) diff --git a/package.json b/package.json index 3b32d8546..31b5dae46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactstrap", - "version": "3.9.2", + "version": "3.9.3", "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x", "main": "lib/index.js", "scripts": { From 5e0f5d2591c9231533929bc8a26571a8f27165ba Mon Sep 17 00:00:00 2001 From: Ajai Date: Mon, 12 Dec 2016 09:35:16 -0800 Subject: [PATCH 022/963] fix(Modal): clear timeouts when toggling of modal - #166 --- src/Fade.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Fade.js b/src/Fade.js index accd7b86e..03eb1a1f1 100644 --- a/src/Fade.js +++ b/src/Fade.js @@ -41,8 +41,12 @@ class Fade extends React.Component { this.onLeave = this.onLeave.bind(this); this.onEnter = this.onEnter.bind(this); + this.timers = []; } + componentWillUnmount() { + this.timers.forEach(timer => clearTimeout(timer)); + } onEnter(cb) { return () => { cb(); @@ -51,7 +55,6 @@ class Fade extends React.Component { } }; } - onLeave(cb) { return () => { cb(); @@ -66,7 +69,7 @@ class Fade extends React.Component { this.onEnter(cb)(); } - setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout); + this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionAppearTimeout)); } componentDidAppear() { @@ -80,7 +83,7 @@ class Fade extends React.Component { this.onEnter(cb)(); } - setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout); + this.timers.push(setTimeout(this.onEnter(cb), this.props.transitionEnterTimeout)); } componentDidEnter() { @@ -98,9 +101,8 @@ class Fade extends React.Component { this.onLeave(cb)(); } - setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout); + this.timers.push(setTimeout(this.onLeave(cb), this.props.transitionLeaveTimeout)); } - render() { const { baseClass, From dcfeb50de30fbd66814b188ced5ebdfeaeab9217 Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Mon, 12 Dec 2016 09:48:06 -0800 Subject: [PATCH 023/963] chore(release): adding 3.9.4 (#250) --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1ea5915e..eaec729f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [3.9.4](https://github.com/reactstrap/reactstrap/compare/3.9.3...v3.9.4) (2016-12-12) + + +### Bug Fixes + +* **Modal:** clear timeouts when toggling of modal - [#166](https://github.com/reactstrap/reactstrap/issues/166) ([5e0f5d2](https://github.com/reactstrap/reactstrap/commit/5e0f5d2)) + + + ## [3.9.3](https://github.com/reactstrap/reactstrap/compare/3.9.2...v3.9.3) (2016-12-01) diff --git a/package.json b/package.json index 31b5dae46..f2c31907d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactstrap", - "version": "3.9.3", + "version": "3.9.4", "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x", "main": "lib/index.js", "scripts": { From 72d9a0d7ff14c4b60e07bb29609aec02d1f7ad3e Mon Sep 17 00:00:00 2001 From: Eddy Hernandez Date: Wed, 14 Dec 2016 21:56:03 -0800 Subject: [PATCH 024/963] docs(ButtonDropdown): move color prop to DropdownToggle --- docs/lib/Components/ButtonDropdownPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/lib/Components/ButtonDropdownPage.js b/docs/lib/Components/ButtonDropdownPage.js index ef0821079..dbd504013 100644 --- a/docs/lib/Components/ButtonDropdownPage.js +++ b/docs/lib/Components/ButtonDropdownPage.js @@ -78,8 +78,8 @@ DropdownToggle.propTypes = { 
           
-{`
-  
+{`
+  
     Text
   
   

From a7833080215130f96e84a0a9d4f592238056fd40 Mon Sep 17 00:00:00 2001
From: Daniel Huisman 
Date: Sun, 18 Dec 2016 21:45:12 +0100
Subject: [PATCH 025/963] feat(Modal): Pass through props in Modal (#254)

---
 src/Modal.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index c9bf2526e..70230358c 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+import omit from 'lodash.omit';
 import TransitionGroup from 'react-addons-transition-group';
 import Fade from './Fade';
 import {
@@ -161,9 +162,19 @@ class Modal extends React.Component {
   }
 
   renderChildren() {
+    const {
+      className,
+      cssModule,
+      isOpen,
+      size,
+      backdrop,
+      children,
+      ...attributes
+    } = omit(this.props, ['toggle', 'keyboard', 'onEnter', 'onExit', 'zIndex']);
+
     return (
       
-        {this.props.isOpen && (
+        {isOpen && (
           
             
 (this._dialog = c)}
+              {...attributes}
             >
               

-                {this.props.children}
+                {children}
               

             

           
         )}
-        {this.props.isOpen && this.props.backdrop && (
+        {isOpen && backdrop && (
           
Date: Sun, 18 Dec 2016 12:49:34 -0800
Subject: [PATCH 026/963] chore(release): adding 3.9.5 (#255)

---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eaec729f2..7d728d87f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+
+## [3.9.5](https://github.com/reactstrap/reactstrap/compare/3.9.4...v3.9.5) (2016-12-18)
+
+
+### Features
+
+* **Modal:** Pass through props in Modal ([#254](https://github.com/reactstrap/reactstrap/issues/254)) ([a783308](https://github.com/reactstrap/reactstrap/commit/a783308))
+
+
+
 
 ## [3.9.4](https://github.com/reactstrap/reactstrap/compare/3.9.3...v3.9.4) (2016-12-12)
 
diff --git a/package.json b/package.json
index f2c31907d..615278f8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactstrap",
-  "version": "3.9.4",
+  "version": "3.9.5",
   "description": "React Bootstrap 4 components compatible with React 0.14.x and 15.x",
   "main": "lib/index.js",
   "scripts": {

From e8e818b9af85c239268a2917db27e35b76f49306 Mon Sep 17 00:00:00 2001
From: Skoranga 
Date: Fri, 6 Jan 2017 12:19:19 -0800
Subject: [PATCH 027/963] feat(cssModules): adding missing classes (#271)

* adding missing and cleaning up cssModule

* adding more className under cssModule
---
 src/Modal.js       |  6 +++---
 src/ModalBody.js   | 10 +++++++---
 src/ModalFooter.js | 10 +++++++---
 src/ModalHeader.js |  2 +-
 src/Popover.js     |  2 +-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/Modal.js b/src/Modal.js
index 70230358c..b6e83c02f 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -184,7 +184,7 @@ class Modal extends React.Component {
             transitionLeaveTimeout={300}
             onClickCapture={this.handleBackdropClick}
             onKeyUp={this.handleEscape}
-            className="modal"
+            className={mapToCssModules('modal', cssModule)}
             style={{ display: 'block' }}
             tabIndex="-1"
           >
@@ -196,7 +196,7 @@ class Modal extends React.Component {
               ref={(c) => (this._dialog = c)}
               {...attributes}
             >
-              

+              

                 {children}
               

             

@@ -208,7 +208,7 @@ class Modal extends React.Component {
             transitionAppearTimeout={150}
             transitionEnterTimeout={150}
             transitionLeaveTimeout={150}
-            className="modal-backdrop"
+            className={mapToCssModules('modal-backdrop', cssModule)}
           />
         )}
       
diff --git a/src/ModalBody.js b/src/ModalBody.js
index da148a78d..323c405fa 100644
--- a/src/ModalBody.js
+++ b/src/ModalBody.js
@@ -8,13 +8,17 @@ const propTypes = {
 };
 
 const ModalBody = (props) => {
+  const {
+    className,
+    cssModule,
+    ...attributes } = props;
   const classes = mapToCssModules(classNames(
-    props.className,
+    className,
     'modal-body'
-  ), props.cssModule);
+  ), cssModule);
 
   return (
-    

+    

   );
 };
 
diff --git a/src/ModalFooter.js b/src/ModalFooter.js
index 6264ec16c..6c87c3969 100644
--- a/src/ModalFooter.js
+++ b/src/ModalFooter.js
@@ -8,13 +8,17 @@ const propTypes = {
 };
 
 const ModalFooter = (props) => {
+  const {
+    className,
+    cssModule,
+    ...attributes } = props;
   const classes = mapToCssModules(classNames(
-    props.className,
+    className,
     'modal-footer'
-  ), props.cssModule);
+  ), cssModule);
 
   return (
-    

+    

   );
 };
 
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 1c86b1a21..8803c8b26 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -36,7 +36,7 @@ const ModalHeader = (props) => {
   return (
     

       {closeButton}
-      

+      

         {children}
       

     

diff --git a/src/Popover.js b/src/Popover.js
index 631cb9f17..062605f78 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -66,7 +66,7 @@ class Popover extends React.Component {
 
     return (
       
Date: Fri, 6 Jan 2017 12:21:52 -0800
Subject: [PATCH 028/963] V4 (#262)

---
 .travis.yml                                   |   1 +
 CHANGELOG.md                                  |  78 +++++++-
 README.md                                     |   5 +-
 .../Components/{TagsPage.js => BadgePage.js}  |  30 +--
 docs/lib/Components/CollapsePage.js           |   6 +-
 docs/lib/Components/LayoutPage.js             |  10 +-
 docs/lib/Components/ListGroupPage.js          |   8 +-
 docs/lib/Components/NavbarPage.js             |   3 +-
 docs/lib/Components/ProgressPage.js           |  36 +++-
 docs/lib/Components/index.js                  |   8 +-
 docs/lib/Home/index.js                        |   6 +-
 docs/lib/NotFound/index.js                    |   4 +-
 docs/lib/UI/Footer.js                         |   4 +-
 docs/lib/UI/Nav.js                            |   8 +-
 docs/lib/examples/Badge.js                    |  17 ++
 docs/lib/examples/BadgePills.js               |  17 ++
 docs/lib/examples/BadgeVariations.js          |  17 ++
 docs/lib/examples/CardAlignment.js            |   4 +-
 docs/lib/examples/Layout.js                   |  31 ++--
 docs/lib/examples/ListGroupBadge.js           |  14 ++
 docs/lib/examples/ListGroupTag.js             |  14 --
 docs/lib/examples/Navbar.js                   |   2 +-
 docs/lib/examples/Progress.js                 |  18 +-
 docs/lib/examples/ProgressAnimated.js         |   6 +
 docs/lib/examples/ProgressLabels.js           |  22 +++
 docs/lib/examples/ProgressMax.js              |  16 +-
 docs/lib/examples/ProgressMulti.js            |  32 ++++
 docs/lib/examples/ProgressStriped.js          |   6 +
 docs/lib/examples/Tag.js                      |  17 --
 docs/lib/examples/TagPills.js                 |  17 --
 docs/lib/examples/TagVariations.js            |  17 --
 docs/lib/routes.js                            |   4 +-
 docs/static/docs.css                          |  18 +-
 package.json                                  |  12 +-
 scripts/publish                               |   2 +-
 scripts/release                               |   4 +-
 src/Alert.js                                  |   4 +-
 src/{Tag.js => Badge.js}                      |  14 +-
 src/Col.js                                    |  54 +++---
 src/Collapse.js                               |   7 +-
 src/Dropdown.js                               |   4 +-
 src/Fade.js                                   |   2 +-
 src/Nav.js                                    |   3 +-
 src/Navbar.js                                 |  12 +-
 src/Popover.js                                |   2 +-
 src/Progress.js                               |  41 ++---
 src/Row.js                                    |   5 +-
 src/Tooltip.js                                |   2 +-
 src/__tests__/Alert.spec.js                   |   4 +-
 src/__tests__/Badge.spec.js                   |  29 +++
 src/__tests__/Col.spec.js                     |  16 +-
 src/__tests__/Collapse.spec.js                |   9 +-
 src/__tests__/Fade.spec.js                    |  18 +-
 src/__tests__/Nav.spec.js                     |   6 +
 src/__tests__/Navbar.spec.js                  |  17 +-
 src/__tests__/Popover.spec.js                 |   4 +-
 src/__tests__/Progress.spec.js                | 172 ++++++------------
 src/__tests__/Row.spec.js                     |   7 +
 src/__tests__/Tag.spec.js                     |  29 ---
 src/__tests__/Tooltip.spec.js                 |   4 +-
 src/index.js                                  |   4 +-
 webpack.base.config.js                        |   1 -
 webpack.dev.config.js                         |   5 +-
 63 files changed, 590 insertions(+), 399 deletions(-)
 rename docs/lib/Components/{TagsPage.js => BadgePage.js} (52%)
 create mode 100644 docs/lib/examples/Badge.js
 create mode 100644 docs/lib/examples/BadgePills.js
 create mode 100644 docs/lib/examples/BadgeVariations.js
 create mode 100644 docs/lib/examples/ListGroupBadge.js
 delete mode 100644 docs/lib/examples/ListGroupTag.js
 create mode 100644 docs/lib/examples/ProgressLabels.js
 create mode 100644 docs/lib/examples/ProgressMulti.js
 delete mode 100644 docs/lib/examples/Tag.js
 delete mode 100644 docs/lib/examples/TagPills.js
 delete mode 100644 docs/lib/examples/TagVariations.js
 rename src/{Tag.js => Badge.js} (79%)
 create mode 100644 src/__tests__/Badge.spec.js
 delete mode 100644 src/__tests__/Tag.spec.js

diff --git a/.travis.yml b/.travis.yml
index c2c542222..3f8f9784e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -21,6 +21,7 @@ env:
 branches:
   only:
   - master
+  - v4
 before_deploy:
   - npm run build
 deploy:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d728d87f..0e79d5f10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,49 @@
+
+# [4.0.0-alpha.7](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.6...v4.0.0-alpha.7) (2017-01-05)
+
+
+### Features
+
+* **Col:** update classes based on alpha.6 changes ([#267](https://github.com/reactstrap/reactstrap/issues/267)) ([89ff16c](https://github.com/reactstrap/reactstrap/commit/89ff16c))
+* **Collapse:** add navbar prop ([#266](https://github.com/reactstrap/reactstrap/issues/266)) ([c1b633a](https://github.com/reactstrap/reactstrap/commit/c1b633a))
+* **Nav:** update navbar prop class value ([#265](https://github.com/reactstrap/reactstrap/pull/265))([f979aae54a8662d151d6216dac45b9dc3541ca7e] (https://github.com/reactstrap/reactstrap/pull/265/commits/f979aae54a8662d151d6216dac45b9dc3541ca7e))
+* **Navbar:** rename dark prop to inverse, add toggleable size prop ([#265](https://github.com/reactstrap/reactstrap/pull/265))([3ee55f19792bd803d937837f4599ff0ee88974fb] (https://github.com/reactstrap/reactstrap/pull/265/commits/3ee55f19792bd803d937837f4599ff0ee88974fb))
+
+
+### BREAKING CHANGES
+
+* Col: The default xs prop now returns `.col` instead of
+`.col-xs-12`. The `auto` size value now returns `.col-auto` or
+`.col-sm-auto` for variable width content columns. Use `true` or `''`
+as the size value to return `.col` or `.col-sm` for auto layout of
+columns (not to be confused with `auto`  -> (variable width of
+content)).
+
+
+
+# [4.0.0-alpha.6](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.5...v4.0.0-alpha.6) (2017-01-03)
+
+
+### Bug Fixes
+
+* **className:** update "active" to "show" for stateful components ([#259](https://github.com/reactstrap/reactstrap/issues/259)) ([7df9a01](https://github.com/reactstrap/reactstrap/commit/7df9a01))
+
+
+### Features
+
+* **Progress:** update markup & support nested progress bars ([#261](https://github.com/reactstrap/reactstrap/issues/261)) ([0b19b41](https://github.com/reactstrap/reactstrap/commit/0b19b41))
+* **Row:** add noGutters prop ([#260](https://github.com/reactstrap/reactstrap/issues/260)) ([c79bb3e](https://github.com/reactstrap/reactstrap/commit/c79bb3e))
+
+
+
+# [4.0.0-alpha.5](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.4...v4.0.0-alpha.5) (2016-12-18)
+
+
+### Features
+
+* **Modal:** Pass through props in Modal ([#254](https://github.com/reactstrap/reactstrap/issues/254)) ([c99e873](https://github.com/reactstrap/reactstrap/commit/c99e873))
+
+
 
 ## [3.9.5](https://github.com/reactstrap/reactstrap/compare/3.9.4...v3.9.5) (2016-12-18)
 
@@ -7,15 +53,30 @@
 * **Modal:** Pass through props in Modal ([#254](https://github.com/reactstrap/reactstrap/issues/254)) ([a783308](https://github.com/reactstrap/reactstrap/commit/a783308))
 
 
+
+# [4.0.0-alpha.4](https://github.com/reactstrap/reactstrap/compare/3.9.4...v4.0.0-alpha.4) (2016-12-15)
+
+* **Modal:** clear timeouts when toggling of modal - [#166](https://github.com/reactstrap/reactstrap/issues/166) ([5e0f5d2](https://github.com/reactstrap/reactstrap/commit/5e0f5d2))
+
 
 
 ## [3.9.4](https://github.com/reactstrap/reactstrap/compare/3.9.3...v3.9.4) (2016-12-12)
 
-
 ### Bug Fixes
 
 * **Modal:** clear timeouts when toggling of modal - [#166](https://github.com/reactstrap/reactstrap/issues/166) ([5e0f5d2](https://github.com/reactstrap/reactstrap/commit/5e0f5d2))
 
+
+# [4.0.0-alpha.3](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.2...v4.0.0-alpha.3) (2016-12-01)
+
+
+
+# [4.0.0-alpha.2](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.1...v4.0.0-alpha.2) (2016-11-28)
+
+
+### Bug Fixes
+
+* **className:** update "in" to "active" for stateful components ([#241](https://github.com/reactstrap/reactstrap/issues/241)) ([ea2439e](https://github.com/reactstrap/reactstrap/commit/ea2439e))
 
 
 
@@ -27,7 +88,6 @@
 * **ListGroup:** prevent onClick when disabled & add docs [#185](https://github.com/reactstrap/reactstrap/issues/185) ([#236](https://github.com/reactstrap/reactstrap/issues/236)) ([1301b11](https://github.com/reactstrap/reactstrap/commit/1301b11))
 
 
-
 
 ## [3.9.2](https://github.com/reactstrap/reactstrap/compare/3.9.1...v3.9.2) (2016-11-28)
 
@@ -39,6 +99,18 @@
 * **Tooltip:** remove old arrow markup, correct enabled className ([62d622b](https://github.com/reactstrap/reactstrap/commit/62d622b))
 
 
+
+# [4.0.0-alpha.1](https://github.com/reactstrap/reactstrap/compare/4.0.0-alpha.0...v4.0.0-alpha.1) (2016-11-23)
+
+
+### Features
+
+* **Badge:** rename Tag component to Badge ([#230](https://github.com/reactstrap/reactstrap/issues/230)) ([dfc9943](https://github.com/reactstrap/reactstrap/commit/dfc9943))
+
+
+
+# [4.0.0-alpha.0](https://github.com/reactstrap/reactstrap/compare/v4...v4.0.0-alpha.0) (2016-11-23)
+
 
 
 ## [3.9.1](https://github.com/reactstrap/reactstrap/compare/3.9.0...v3.9.1) (2016-11-23)
@@ -664,5 +736,3 @@ custom elements should render their html “tags”.
 * **Dropdowns:** add examples ([3d48e8c](https://github.com/reactstrap/reactstrap/commit/3d48e8c))
 * **Dropdowns:** basic dropdown, toggle, menu & menu items ([750aaf9](https://github.com/reactstrap/reactstrap/commit/750aaf9))
 
-
-
diff --git a/README.md b/README.md
index cf51ac803..e05c4f44b 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,11 @@
 
 # reactstrap
 
-Easy to use React Bootstrap 4 components compatible with React 0.14.x and 15.x.
+Stateless React Components for Bootstrap 4.
 
+## V4 Notes
+
+The v4 branch will be used for keeping up with the latest in the twbs/bootstrap master branch. This includes breaking changes that haven't been merged and api changes in reactstrap.
 
 ## Installation
 
diff --git a/docs/lib/Components/TagsPage.js b/docs/lib/Components/BadgePage.js
similarity index 52%
rename from docs/lib/Components/TagsPage.js
rename to docs/lib/Components/BadgePage.js
index 8bc6e30e9..546b1fe04 100644
--- a/docs/lib/Components/TagsPage.js
+++ b/docs/lib/Components/BadgePage.js
@@ -3,47 +3,47 @@ import React from 'react';
 import { PrismCode } from 'react-prism';
 import Helmet from 'react-helmet';
 
-import TagExample from '../examples/Tag';
-const TagExampleSource = require('!!raw!../examples/Tag');
+import BadgeExample from '../examples/Badge';
+const BadgeExampleSource = require('!!raw!../examples/Badge');
 
-import TagPillsExample from '../examples/TagPills';
-const TagPillsExampleSource = require('!!raw!../examples/TagPills');
+import BadgePillsExample from '../examples/BadgePills';
+const BadgePillsExampleSource = require('!!raw!../examples/BadgePills');
 
-import TagVariationsExample from '../examples/TagVariations';
-const TagVariationsExampleSource = require('!!raw!../examples/TagVariations');
+import BadgeVariationsExample from '../examples/BadgeVariations';
+const BadgeVariationsExampleSource = require('!!raw!../examples/BadgeVariations');
 
-export default class TagsPage extends React.Component {
+export default class BadgesPage extends React.Component {
   render() {
     return (
       

-        
-        
Tags

+        
+        
Badges

         

         
Scale to parent

         

-          
+          
         

         
           
-            {TagExampleSource}
+            {BadgeExampleSource}
           
         

         
Variations

         

-          
+          
         

         
           
-            {TagVariationsExampleSource}
+            {BadgeVariationsExampleSource}
           
         

         
Pills

         

-          
+          
         

         
           
-            {TagPillsExampleSource}
+            {BadgePillsExampleSource}
           
         

       

diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js
index 21a3c858a..719fc2fb9 100644
--- a/docs/lib/Components/CollapsePage.js
+++ b/docs/lib/Components/CollapsePage.js
@@ -1,13 +1,12 @@
 /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
 import React from 'react';
 import { PrismCode } from 'react-prism';
-import { Alert } from 'reactstrap';
 import Helmet from 'react-helmet';
 
 import CollapseExample from '../examples/Collapse';
 const CollapseExampleSource = require('!!raw!../examples/Collapse');
 
-export default class AlertsPage extends React.Component {
+export default class CollapsePage extends React.Component {
   render() {
     return (
       

@@ -28,7 +27,8 @@ export default class AlertsPage extends React.Component {
           
 {`Collapse.propTypes = {
   isOpen: PropTypes.bool,
-  className: PropTypes.node
+  className: PropTypes.node,
+  navbar: PropTypes.bool
 }`}
diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js index 75a1a566c..71fa9d270 100644 --- a/docs/lib/Components/LayoutPage.js +++ b/docs/lib/Components/LayoutPage.js @@ -31,7 +31,9 @@ export default class LayoutsPage extends React.Component {

Row Properties

           
-{'Row.propTypes = {}'}
+{`Row.propTypes = {
+  noGutters: PropTypes.bool
+}`}

Col Properties

@@ -43,7 +45,11 @@ const columnProps = PropTypes.oneOfType([ PropTypes.number, PropTypes.bool, PropTypes.shape({ - size: stringOrNumberProp, + size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]), + // example size values: + // 12 || "12" => col-12 or col-\`width\`-12 + // auto => col-auto or col-\`width\`-auto + // true => col or col-\`width\` push: stringOrNumberProp, pull: stringOrNumberProp, offset: stringOrNumberProp diff --git a/docs/lib/Components/ListGroupPage.js b/docs/lib/Components/ListGroupPage.js index d08e9e996..fd76524cf 100644 --- a/docs/lib/Components/ListGroupPage.js +++ b/docs/lib/Components/ListGroupPage.js @@ -3,13 +3,13 @@ import React from 'react'; import { PrismCode } from 'react-prism'; import Helmet from 'react-helmet'; import ListGroupExample from '../examples/ListGroup'; -import ListGroupTagExample from '../examples/ListGroupTag'; +import ListGroupBadgeExample from '../examples/ListGroupBadge'; import ListGroupDisabledItemsExample from '../examples/ListGroupDisabledItems'; import ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndButtons'; import ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses'; import ListGroupCustomContentExample from '../examples/ListGroupCustomContent'; -const ListGroupTagExampleSource = require('!!raw!../examples/ListGroupTag'); +const ListGroupBadgeExampleSource = require('!!raw!../examples/ListGroupBadge'); const ListGroupExampleSource = require('!!raw!../examples/ListGroup'); const ListGroupDisabledItemsExampleSource = require('!!raw!../examples/ListGroupDisabledItems'); const ListGroupAnchorsAndButtonsExampleSource = require('!!raw!../examples/ListGroupAnchorsAndButtons'); @@ -33,11 +33,11 @@ export default class ListGroupPage extends React.Component { Tags
- + 
           
-            {ListGroupTagExampleSource}
+            {ListGroupBadgeExampleSource}
diff --git a/docs/lib/Components/NavbarPage.js b/docs/lib/Components/NavbarPage.js index fd0dbb083..fcd3bfb32 100644 --- a/docs/lib/Components/NavbarPage.js +++ b/docs/lib/Components/NavbarPage.js @@ -28,11 +28,12 @@ export default class NavsPage extends React.Component { {`Navbar.propTypes = { light: PropTypes.bool, - dark: PropTypes.bool, + inverse: PropTypes.bool, full: PropTypes.bool, fixed: PropTypes.string, color: PropTypes.string, role: PropTypes.string, + toggleable: PropTypes.string, tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) // pass in custom element to use }`} diff --git a/docs/lib/Components/ProgressPage.js b/docs/lib/Components/ProgressPage.js index 5ba69c6d5..87aca60a7 100644 --- a/docs/lib/Components/ProgressPage.js +++ b/docs/lib/Components/ProgressPage.js @@ -7,10 +7,14 @@ import ProgressExample from '../examples/Progress'; const ProgressExampleSource = require('!!raw!../examples/Progress'); import ProgressColorExample from '../examples/ProgressColor'; const ProgressColorExampleSource = require('!!raw!../examples/ProgressColor'); +import ProgressLabelsExample from '../examples/ProgressLabels'; +const ProgressLabelsExampleSource = require('!!raw!../examples/ProgressLabels'); import ProgressAnimatedExample from '../examples/ProgressAnimated'; const ProgressAnimatedExampleSource = require('!!raw!../examples/ProgressAnimated'); import ProgressStripedExample from '../examples/ProgressStriped'; const ProgressStripedExampleSource = require('!!raw!../examples/ProgressStriped'); +import ProgressMultiExample from '../examples/ProgressMulti'; +const ProgressMultiExampleSource = require('!!raw!../examples/ProgressMulti'); import ProgressMaxExample from '../examples/ProgressMax'; const ProgressMaxExampleSource = require('!!raw!../examples/ProgressMax'); @@ -32,6 +36,8 @@ export default class ProgressPage extends React.Component { 
           
 {`Progress.propTypes = {
+  multi: PropTypes.bool,
+  bar: PropTypes.bool, // used in combination with multi
   tag: PropTypes.string,
   value: PropTypes.oneOfType([
     PropTypes.string,
@@ -67,6 +73,18 @@ Progress.defaultProps = {
+

Labels

+
+
+ +
+
+ 
+          
+            {ProgressLabelsExampleSource}
+          
+
+

Striped

@@ -83,12 +101,6 @@ Progress.defaultProps = {

The animated prop also adds the striped prop; there is no need to pass both.

- - - Currently, animated progress does not work in bootstrap v4 (alpha 3). This is an issue bootstrap has to - resolve. - -
@@ -100,6 +112,18 @@ Progress.defaultProps = { +

Multiple bars / Stacked

+
+
+ +
+
+ 
+          
+            {ProgressMultiExampleSource}
+          
+
+

Max value

diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js index a5b3037dc..fedf91b6a 100644 --- a/docs/lib/Components/index.js +++ b/docs/lib/Components/index.js @@ -50,8 +50,8 @@ class Components extends React.Component { to: '/components/breadcrumbs/' }, { - name: 'Tags', - to: '/components/tags/' + name: 'Badge', + to: '/components/badge/' }, { name: 'Card', @@ -122,12 +122,12 @@ class Components extends React.Component { } render() { return ( - +
Components
-