feat(react): update Tabs API and delete next/Tab (#10225)

* chore: check in progress * chore: check in progress * chore: check in progress * refactor(styles): remove unused tabs styles * fix(styles): remove tabs scrollable class and replace with tabs * chore(react): remove outdated comments * chore(react): remove outdated comments * chore(react): remove outdated comments * chore: check in progress * feat(react): update tabs api and delete tab next * fix(react): remove unnecessary ContainedTab export * fix(react): remove contained tab export * fix(react): update snapshots and add tests to new Tabs * feat(react): remove unstable containedTabs
carbon-design-system · Dec 7, 2021 · ab061bd · ab061bd
1 parent f6e5dd2
commit ab061bd
Show file tree

Hide file tree

Showing 16 changed files with 630 additions and 2,052 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5942,51 +5942,6 @@ Map {
       },
     },
   },
-  "unstable_ContainedTab" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "propTypes": Object {
-      "className": Object {
-        "type": "string",
-      },
-      "disabled": Object {
-        "type": "bool",
-      },
-      "handleTabClick": Object {
-        "type": "func",
-      },
-      "handleTabKeyDown": Object {
-        "type": "func",
-      },
-      "id": Object {
-        "type": "string",
-      },
-      "index": Object {
-        "type": "number",
-      },
-      "label": Object {
-        "type": "node",
-      },
-      "onClick": Object {
-        "type": "func",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-      "renderButton": Object {
-        "type": "func",
-      },
-      "renderContent": Object {
-        "type": "func",
-      },
-      "selected": Object {
-        "type": "bool",
-      },
-      "tabIndex": Object {
-        "type": "number",
-      },
-    },
-    "render": [Function],
-  },
   "TabContent" => Object {
     "defaultProps": Object {
       "selected": false,
@@ -6085,7 +6040,7 @@ Map {
       },
     },
   },
-  "unstable_ContainedTabs" => Object {
+  "unstable_TabPanel" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
@@ -6094,32 +6049,19 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "hidden": Object {
-        "type": "bool",
-      },
-      "leftOverflowButtonProps": Object {
-        "type": "object",
-      },
-      "light": [Function],
-      "onClick": Object {
-        "type": "func",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-      "onSelectionChange": Object {
-        "type": "func",
-      },
-      "rightOverflowButtonProps": Object {
-        "type": "object",
-      },
-      "scrollIntoView": Object {
-        "type": "bool",
-      },
-      "selected": Object {
-        "type": "number",
+    },
+    "render": [Function],
+  },
+  "unstable_TabPanels" => Object {
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
       },
-      "selectionMode": Object {
+    },
+  },
+  "unstable_TabList" => Object {
+    "propTypes": Object {
+      "activation": Object {
         "args": Array [
           Array [
             "automatic",
@@ -6128,11 +6070,26 @@ Map {
         ],
         "type": "oneOf",
       },
-      "tabContentClassName": Object {
+      "aria-label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
         "type": "string",
       },
+      "contained": Object {
+        "type": "bool",
+      },
+      "light": Object {
+        "type": "bool",
+      },
+      "scrollIntoView": Object {
+        "type": "bool",
+      },
     },
-    "render": [Function],
   },
   "Tag" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -199,8 +199,6 @@ Array [
   "TooltipDefinition",
   "TooltipIcon",
   "UnorderedList",
-  "unstable_ContainedTab",
-  "unstable_ContainedTabs",
   "unstable_FeatureFlags",
   "unstable_HStack",
   "unstable_Heading",
@@ -219,6 +217,9 @@ Array [
   "unstable_ProgressBar",
   "unstable_Section",
   "unstable_Stack",
+  "unstable_TabList",
+  "unstable_TabPanel",
+  "unstable_TabPanels",
   "unstable_Theme",
   "unstable_Tooltip",
   "unstable_TreeNode",

diff --git a/packages/react/src/components/Tab/index.js b/packages/react/src/components/Tab/index.js
@@ -6,12 +6,9 @@
  */
 
 import * as FeatureFlags from '@carbon/feature-flags';
-import { default as TabNext } from './next/Tab';
+import { Tab as TabNext } from '../Tabs/next/Tabs';
 import { default as TabClassic } from './Tab';
-import ContainedTab from './next/ContainedTab';
 
 const Tab = FeatureFlags.enabled('enable-v11-release') ? TabNext : TabClassic;
 
-export { ContainedTab };
-
 export default Tab;
diff --git a/packages/react/src/components/Tab/next/ContainedTab.js b/packages/react/src/components/Tab/next/ContainedTab.js