feat(react): add horizontal overflow to Tabs in v11 (#10799)

* chore: check in progress * chore: check in progress * chore: check in progress * chore: check in progress * chore: check in progress * feat(react): add horizontal overflow to tabs * fix(react): adjust styles * feat(react): add horizontal overflow to tabs * chore(react): remove extraneous changes * chore(react): remove extraneous changes * fix(react): update snapshots and failing test * fix(react): replace use layout with use isomorphic * fix(react): fix incorrect import * fix(react): scroll tab into view when clicked * fix(react): scroll tab into view when clicked * feat(tabs): update scroll position on click * fix(tabs): update usePressable and fix interop with long press * fix(tabs): update animation mechanism and fix safari text selection issue * fix(tabs): add will-change: scroll-position * chore(tabs): remove extra comments on usePressable * fix(react): adjust next button visible and remove transparent keyowrd Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Josh Black <josh@josh.black>
carbon-design-system · Mar 3, 2022 · 1b49b03 · 1b49b03
1 parent 48d439d
commit 1b49b03
Show file tree

Hide file tree

Showing 8 changed files with 586 additions and 122 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8763,9 +8763,18 @@ Map {
         ],
         "type": "oneOf",
       },
+      "leftOverflowButtonProps": Object {
+        "type": "object",
+      },
       "light": Object {
         "type": "bool",
       },
+      "rightOverflowButtonProps": Object {
+        "type": "object",
+      },
+      "scrollDebounceWait": Object {
+        "type": "number",
+      },
       "scrollIntoView": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -390,7 +390,7 @@ export default class Tabs extends React.Component {
   };
 
   handleOverflowNavMouseDown = (event, { direction }) => {
-    // disregard mouse buttons aside from LMB
+    // disregard mouse buttons aside from left mouse button
     if (event.buttons !== 1) {
       return;
     }

diff --git a/packages/react/src/components/Tabs/next/Tabs-test.js b/packages/react/src/components/Tabs/next/Tabs-test.js
@@ -27,9 +27,12 @@ describe('Tabs', () => {
   });
 
   it('should set a className from props on outermost element in TabList', () => {
-    render(
+    const { container } = render(
       <Tabs>
-        <TabList aria-label="List of tabs" className="custom-class">
+        <TabList
+          aria-label="List of tabs"
+          className="custom-class"
+          data-test-id="test-id">
           <Tab disabled>Tab Label 1</Tab>
           <Tab>Tab Label 2</Tab>
           <Tab>Tab Label 3</Tab>
@@ -42,7 +45,7 @@ describe('Tabs', () => {
       </Tabs>
     );
 
-    expect(screen.getByRole('tablist')).toHaveClass('custom-class');
+    expect(container.firstChild).toHaveClass('custom-class');
   });
 });