fix(className): update "active" to "show" for stateful components (#259)

src/Alert.js

@@ -67,9 +67,9 @@ const Alert = (props) => {
       component={FirstChild}
       transitionName={{
         appear: 'fade',
-        appearActive: 'active',
+        appearActive: 'show',
         enter: 'fade',
-        enterActive: 'active',
+        enterActive: 'show',
         leave: 'fade',
         leaveActive: 'out'
       }}

src/Collapse.js

@@ -89,7 +89,7 @@ class Collapse extends Component {
         collapseClass = 'collapsing';
         break;
       case SHOWN:
-        collapseClass = 'collapse active';
+        collapseClass = 'collapse show';
         break;
       case HIDE:
         collapseClass = 'collapsing';

src/Dropdown.js

@@ -35,7 +35,7 @@ const childContextTypes = {
 
 const defaultTetherConfig = {
   classPrefix: 'bs-tether',
-  classes: { element: 'dropdown', enabled: 'active' },
+  classes: { element: 'dropdown', enabled: 'show' },
   constraints: [
     { to: 'scrollParent', attachment: 'together none' },
     { to: 'window', attachment: 'together none' }
@@ -178,7 +178,7 @@ class Dropdown extends React.Component {
         'btn-group': group,
         [`btn-group-${size}`]: !!size,
         dropdown: !group,
-        active: isOpen,
+        show: isOpen,
         dropup: dropup
       }
     ), cssModule);

src/Fade.js

@@ -22,7 +22,7 @@ const propTypes = {
 const defaultProps = {
   tag: 'div',
   baseClass: 'fade',
-  baseClassIn: 'active',
+  baseClassIn: 'show',
   transitionAppearTimeout: 0,
   transitionEnterTimeout: 0,
   transitionLeaveTimeout: 0,

src/Popover.js

@@ -25,7 +25,7 @@ const defaultTetherConfig = {
   classPrefix: 'bs-tether',
   classes: {
     element: false,
-    enabled: 'active',
+    enabled: 'show',
   },
   constraints: [
     { to: 'scrollParent', attachment: 'together none' },

src/Tooltip.js

@@ -38,7 +38,7 @@ const defaultTetherConfig = {
   classPrefix: 'bs-tether',
   classes: {
     element: false,
-    enabled: 'active',
+    enabled: 'show',
   },
   constraints: [
     { to: 'scrollParent', attachment: 'together none' },

src/__tests__/Alert.spec.js

@@ -12,9 +12,9 @@ describe('Alert', () => {
     const alert = shallow(<Alert>Yo!</Alert>);
     expect(alert.prop('transitionName')).toEqual({
       appear: 'fade',
-      appearActive: 'active',
+      appearActive: 'show',
       enter: 'fade',
-      enterActive: 'active',
+      enterActive: 'show',
       leave: 'fade',
       leaveActive: 'out'
     });

src/__tests__/Collapse.spec.js

@@ -33,9 +33,9 @@ describe('Collapse', () => {
     expect(wrapper.hasClass('collapse')).toEqual(true);
   });
 
-  it('should render with class "active" when isOpen is true', () => {
+  it('should render with class "show" when isOpen is true', () => {
     const wrapper = shallow(<Collapse isOpen />);
-    expect(wrapper.hasClass('active')).toEqual(true);
+    expect(wrapper.hasClass('show')).toEqual(true);
   });
 
   it('should set height to null when isOpen is true', () => {

src/__tests__/Fade.spec.js

@@ -39,7 +39,7 @@ describe('Fade', () => {
     jasmine.clock().uninstall();
   });
 
-  it('should transition classes from "fade" to "fade active" on appear', () => {
+  it('should transition classes from "fade" to "fade show" on appear', () => {
     let isOpen = true;
     const wrapper = mount(
       <Helper showItem={isOpen} >
@@ -49,17 +49,17 @@ describe('Fade', () => {
     );
 
     expect(wrapper.find('div.fade').length).toBe(2);
-    expect(wrapper.find('div.fade.active').length).toBe(1);
+    expect(wrapper.find('div.fade.show').length).toBe(1);
 
     jasmine.clock().tick(300);
 
-    expect(wrapper.find('div.fade.active').length).toBe(2);
+    expect(wrapper.find('div.fade.show').length).toBe(2);
 
     wrapper.find('.trigger').simulate('click');
-    expect(wrapper.find('div.fade.active').length).toBe(0);
+    expect(wrapper.find('div.fade.show').length).toBe(0);
   });
 
-  it('should transition classes from "fade" to "fade active" on enter', () => {
+  it('should transition classes from "fade" to "fade show" on enter', () => {
     const onEnter = jasmine.createSpy('spy');
     const onLeave = jasmine.createSpy('spy');
     let isOpen = false;
@@ -71,21 +71,21 @@ describe('Fade', () => {
     );
 
     expect(wrapper.find('div.fade').length).toBe(0);
-    expect(wrapper.find('div.fade.active').length).toBe(0);
+    expect(wrapper.find('div.fade.show').length).toBe(0);
 
     wrapper.find('.trigger').simulate('click');
 
     expect(wrapper.find('div.fade').length).toBe(2);
-    expect(wrapper.find('div.fade.active').length).toBe(1);
+    expect(wrapper.find('div.fade.show').length).toBe(1);
     expect(onEnter).not.toHaveBeenCalled();
 
     jasmine.clock().tick(300);
 
     expect(onEnter).toHaveBeenCalled();
     expect(onLeave).not.toHaveBeenCalled();
-    expect(wrapper.find('div.fade.active').length).toBe(2);
+    expect(wrapper.find('div.fade.show').length).toBe(2);
 
     wrapper.find('.trigger').simulate('click');
-    expect(wrapper.find('div.fade.active').length).toBe(0);
+    expect(wrapper.find('div.fade.show').length).toBe(0);
   });
 });

src/__tests__/Popover.spec.js

@@ -68,7 +68,7 @@ describe('Popover', () => {
     expect(isOpen).toBe(false);
 
     expect(wrapper.find(TetherContent).length).toBe(0);
-    expect(document.body.querySelectorAll('.popover.active').length).toBe(0);
+    expect(document.body.querySelectorAll('.popover.show').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);
@@ -81,7 +81,7 @@ describe('Popover', () => {
 
     expect(isOpen).toBe(true);
     expect(wrapper.find(TetherContent).length).toBe(1);
-    expect(document.body.querySelectorAll('.popover.active').length).toBe(1);
+    expect(document.body.querySelectorAll('.popover.show').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);

src/__tests__/Tooltip.spec.js

@@ -47,7 +47,7 @@ describe('Tooltip', () => {
     const tooltips = document.getElementsByClassName('tooltip');
 
     expect(ReactDOM.findDOMNode(instance)).toBe(null);
-    expect(document.body.querySelectorAll('.tooltip.active').length).toBe(0);
+    expect(document.body.querySelectorAll('.tooltip.show').length).toBe(0);
     expect(target.className).toBe('');
     expect(tooltips.length).toBe(0);
     wrapper.detach();
@@ -65,7 +65,7 @@ describe('Tooltip', () => {
     const tooltips = document.getElementsByClassName('tooltip');
 
     expect(ReactDOM.findDOMNode(instance)).toBe(null);
-    expect(document.body.querySelectorAll('.tooltip.active').length).toBe(1);
+    expect(document.body.querySelectorAll('.tooltip.show').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');