fix(TabPane): use Fade for default transition (#6235)

react-bootstrap · Feb 7, 2022 · 3e0b4d3 · 3e0b4d3
1 parent e7e3207
commit 3e0b4d3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/TabPane.tsx b/src/TabPane.tsx
@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import NoopTransition from '@restart/ui/NoopTransition';
 import SelectableContext from '@restart/ui/SelectableContext';
 import TabContext from '@restart/ui/TabContext';
 import { useTabPanel } from '@restart/ui/TabPanel';
 import { EventKey, TransitionCallbacks } from '@restart/ui/types';
 import { useBootstrapPrefix } from './ThemeProvider';
+import Fade from './Fade';
 import getTabTransitionComponent from './getTabTransitionComponent';
 import {
   BsPrefixProps,
@@ -118,7 +118,7 @@ const TabPane: BsPrefixRefForwardingComponent<'div', TabPaneProps> =
           onExited,
           mountOnEnter,
           unmountOnExit,
-          transition: Transition = NoopTransition,
+          transition: Transition = Fade,
         },
       ] = useTabPanel({
         ...props,

diff --git a/test/TabsSpec.tsx b/test/TabsSpec.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
 import sinon from 'sinon';
-import React from 'react';
 
 import Tab from '../src/Tab';
 import Tabs from '../src/Tabs';
@@ -189,6 +188,17 @@ describe('<Tabs>', () => {
 
     getAllByRole('tabpanel').should.have.length(1);
   });
+
+  it('should have fade animation by default', () => {
+    const { getByRole } = render(
+      <Tabs id="test" defaultActiveKey={1}>
+        <Tab title="Tab 1" eventKey={1}>
+          Tab 1 content
+        </Tab>
+      </Tabs>,
+    );
+    getByRole('tabpanel').classList.contains('fade').should.be.true;
+  });
 });
 
 // describe('<Tab>', () => {