fix(TabPane): omit Transition when prop is false (#6305)

* fix(TabPane): Omit Transition when prop is false

Make sure Transition is omitted in Tabpane when prop is a boolean and false instead of falling back to Fade

* fix(TabPane): Omit Transition whenn prop is false

Return nooptransition from helper instead of adding logic to tabpane

* fix(Tabs): Remove unnecessary prop

Remove transition={false} from tabs as it is not needed

Co-authored-by: Eduardo Martins <eduardo@sessionlab.com>

src/getTabTransitionComponent.ts

@@ -1,12 +1,13 @@
 import { TransitionComponent } from '@restart/ui/types';
+import NoopTransition from '@restart/ui/NoopTransition';
 import Fade from './Fade';
 import { TransitionType } from './helpers';
 
 export default function getTabTransitionComponent(
   transition?: TransitionType,
 ): TransitionComponent | undefined {
   if (typeof transition === 'boolean') {
-    return transition ? Fade : undefined;
+    return transition ? Fade : NoopTransition;
   }
 
   return transition;

test/TabsSpec.tsx

@@ -200,6 +200,24 @@ describe('<Tabs>', () => {
     );
     getByRole('tabpanel').classList.contains('fade').should.be.true;
   });
+
+  it('Should omit Transition in TabPane if prop is false ', () => {
+    const { getByText } = render(
+      <Tabs id="test" defaultActiveKey={1}>
+        <Tab title="Tab 1" className="custom" eventKey={1} transition={false}>
+          Tab 1 content
+        </Tab>
+        <Tab title="Tab 2" tabClassName="tcustom" eventKey={2}>
+          Tab 2 content
+        </Tab>
+      </Tabs>,
+    );
+    const firstTabContent = getByText('Tab 1 content');
+    const secondTabContent = getByText('Tab 2 content');
+
+    firstTabContent.classList.contains('fade').should.be.false;
+    secondTabContent.classList.contains('fade').should.be.true;
+  });
 });
 
 // describe('<Tab>', () => {