@sproutsocial/seeds-react-tabs 1.3.11 → 1.4.12

package/src/__tests__/tabs.test.tsx

@@ -60,6 +60,35 @@ const TestStatefulTabs = ({
 };
 
 describe("Tabs", () => {
+  beforeEach(() => {
+    // jsdom doesn't implement Element.prototype.scrollIntoView or .scrollBy
+    Element.prototype.scrollIntoView = jest.fn();
+    Element.prototype.scrollBy = jest.fn();
+  });
+
+  const mockScrollDimensions = (
+    el: Element,
+    {
+      scrollWidth,
+      clientWidth,
+      scrollLeft,
+    }: { scrollWidth: number; clientWidth: number; scrollLeft: number }
+  ) => {
+    Object.defineProperty(el, "scrollWidth", {
+      value: scrollWidth,
+      configurable: true,
+    });
+    Object.defineProperty(el, "clientWidth", {
+      value: clientWidth,
+      configurable: true,
+    });
+    Object.defineProperty(el, "scrollLeft", {
+      value: scrollLeft,
+      configurable: true,
+      writable: true,
+    });
+  };
+
   it("should render selected tab", () => {
     render(
       <TestStatefulTabs>
@@ -88,7 +117,7 @@ describe("Tabs", () => {
       tabs: "",
     });
     const secondTab = screen.getByText(/second/i);
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(secondTab).toHaveFocus();
   });
 
@@ -106,11 +135,11 @@ describe("Tabs", () => {
     });
     const secondTab = screen.getByText(/second/i);
     const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyUp(tabs, leftArrowKey);
+    fireEvent.keyDown(tabs, leftArrowKey);
     expect(onSelect).toHaveBeenCalledWith("3");
     expect(thirdTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, leftArrowKey);
+    fireEvent.keyDown(tabs, leftArrowKey);
     expect(onSelect).toHaveBeenCalledWith("2");
     expect(secondTab).toHaveFocus();
   });
@@ -130,15 +159,15 @@ describe("Tabs", () => {
     const firstTab = screen.getByText(/first/i);
     const secondTab = screen.getByText(/second/i);
     const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("2");
     expect(secondTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("3");
     expect(thirdTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("1");
     expect(firstTab).toHaveFocus();
   });
@@ -168,7 +197,7 @@ describe("Tabs", () => {
       tabs: "",
     });
     const secondTab = screen.getByText(/second/i);
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("2");
     expect(secondTab).toHaveFocus();
     rerender(
@@ -177,7 +206,7 @@ describe("Tabs", () => {
       </TestStatefulTabs>
     );
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     const thirdTab = screen.getByText(/third/i);
     expect(onSelect).toHaveBeenCalledWith("3");
     expect(thirdTab).toHaveFocus();
@@ -210,7 +239,7 @@ describe("Tabs", () => {
     });
     const secondTab = screen.getByText(/second/i);
     const thirdTab = screen.getByText(/third/i);
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("2");
     expect(secondTab).toHaveFocus();
     rerender(
@@ -219,15 +248,69 @@ describe("Tabs", () => {
       </TestStatefulTabs>
     );
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("3");
     expect(thirdTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("2");
     expect(secondTab).toHaveFocus();
   });
 
+  it("scrolls the focused tab into view on arrow-key navigation", () => {
+    render(
+      <TestStatefulTabs>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+        <Tabs.Button id="3">Third</Tabs.Button>
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({ tabs: "" });
+    const secondTab = screen.getByText(/second/i);
+
+    fireEvent.keyDown(tabs, rightArrowKey);
+
+    expect(secondTab.scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+
+  it("scrolls the activated tab into view on click", () => {
+    render(
+      <TestStatefulTabs>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+      </TestStatefulTabs>
+    );
+    const secondTab = screen.getByText(/second/i);
+
+    fireEvent.click(secondTab);
+
+    expect(secondTab.scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+
+  it("forwards aria-label to the tablist", () => {
+    render(
+      <Tabs
+        selectedId="1"
+        onSelect={jest.fn()}
+        aria-label="Repository sections"
+      >
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+      </Tabs>
+    );
+
+    const tablist = screen.getByRole("tablist", {
+      name: "Repository sections",
+    });
+    expect(tablist).toBeInTheDocument();
+  });
+
   it("should handle dynamically changing tab ids", () => {
     const onSelect = jest.fn();
     const { rerender } = render(
@@ -256,16 +339,124 @@ describe("Tabs", () => {
     const thirdTab = screen.getByText(/third/i);
     const fourthTab = screen.getByText(/fourth/i);
 
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("6");
     expect(secondTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("5");
     expect(thirdTab).toHaveFocus();
     onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
+    fireEvent.keyDown(tabs, rightArrowKey);
     expect(onSelect).toHaveBeenCalledWith("4");
     expect(fourthTab).toHaveFocus();
   });
+
+  describe("wheel redirect", () => {
+    const renderOverflowing = () => {
+      render(
+        <TestStatefulTabs>
+          <Tabs.Button id="1">First</Tabs.Button>
+          <Tabs.Button id="2">Second</Tabs.Button>
+          <Tabs.Button id="3">Third</Tabs.Button>
+        </TestStatefulTabs>
+      );
+      return screen.getByDataQaLabel({ tabs: "" });
+    };
+
+    it("redirects vertical wheel to horizontal scroll mid-list", () => {
+      const tabs = renderOverflowing();
+      mockScrollDimensions(tabs, {
+        scrollWidth: 800,
+        clientWidth: 480,
+        scrollLeft: 100,
+      });
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: 50,
+        deltaX: 0,
+        cancelable: true,
+        bubbles: true,
+      });
+      jest.spyOn(wheelEvent, "preventDefault");
+      tabs.dispatchEvent(wheelEvent);
+      expect(wheelEvent.preventDefault).toHaveBeenCalled();
+      expect(tabs.scrollBy).toHaveBeenCalledWith({
+        left: 50,
+        behavior: "instant",
+      });
+    });
+
+    it("releases at the end so page scroll can take over", () => {
+      const tabs = renderOverflowing();
+      mockScrollDimensions(tabs, {
+        scrollWidth: 800,
+        clientWidth: 480,
+        scrollLeft: 320, // at end (320 + 480 = 800)
+      });
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: 50,
+        deltaX: 0,
+        cancelable: true,
+        bubbles: true,
+      });
+      jest.spyOn(wheelEvent, "preventDefault");
+      tabs.dispatchEvent(wheelEvent);
+      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
+      expect(tabs.scrollBy).not.toHaveBeenCalled();
+    });
+
+    it("releases at the start when scrolling back further", () => {
+      const tabs = renderOverflowing();
+      mockScrollDimensions(tabs, {
+        scrollWidth: 800,
+        clientWidth: 480,
+        scrollLeft: 0,
+      });
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: -50,
+        deltaX: 0,
+        cancelable: true,
+        bubbles: true,
+      });
+      jest.spyOn(wheelEvent, "preventDefault");
+      tabs.dispatchEvent(wheelEvent);
+      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it("does not interfere when wheel input has a horizontal component", () => {
+      const tabs = renderOverflowing();
+      mockScrollDimensions(tabs, {
+        scrollWidth: 800,
+        clientWidth: 480,
+        scrollLeft: 100,
+      });
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: 50,
+        deltaX: 30,
+        cancelable: true,
+        bubbles: true,
+      });
+      jest.spyOn(wheelEvent, "preventDefault");
+      tabs.dispatchEvent(wheelEvent);
+      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it("does nothing when the tab list does not overflow", () => {
+      const tabs = renderOverflowing();
+      mockScrollDimensions(tabs, {
+        scrollWidth: 400,
+        clientWidth: 480,
+        scrollLeft: 0,
+      });
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: 50,
+        deltaX: 0,
+        cancelable: true,
+        bubbles: true,
+      });
+      jest.spyOn(wheelEvent, "preventDefault");
+      tabs.dispatchEvent(wheelEvent);
+      expect(wheelEvent.preventDefault).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/styles.ts

@@ -11,18 +11,75 @@ interface TypeStyleProps extends TypeFullWidth, TypeTabState {}
 
 const Container = styled.div<TypeTabsProps>`
   display: ${(props) => (props.fullWidth ? "flex" : "inline-flex")};
-  justify-content: space-between;
   margin: 0;
   padding: 0;
+  min-width: 0;
+  max-width: 100%;
+  min-height: min-content;
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  scroll-padding-inline: 48px;
+  scroll-behavior: smooth;
   border-bottom: ${(props) => props.theme.borders[500]}
     ${(props) => props.theme.colors.container.border.base};
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[data-fade-right] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - 48px),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - 48px),
+      transparent
+    );
+  }
+
+  &[data-fade-left] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black 100%
+    );
+    mask-image: linear-gradient(to right, transparent, black 48px, black 100%);
+  }
+
+  &[data-fade-left][data-fade-right] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
+  }
+
   ${COMMON}
 `;
 
 export const TabButton = styled(Button)<TypeStyleProps>`
   margin-bottom: -1px;
-  padding: ${(props) => `${props.theme.space[350]} 0`};
+  padding: ${(props) =>
+    `${props.theme.space[350]} ${
+      props.fullWidth ? 0 : props.theme.space[350]
+    }`};
   color: ${(props) => props.theme.colors.text.headline};
   border-radius: 0;
   border-width: 0 0 3px;
@@ -34,14 +91,6 @@ export const TabButton = styled(Button)<TypeStyleProps>`
       flex-grow: 1;
     `};
 
-  &:not(:last-child) {
-    ${(props) =>
-      !props.fullWidth &&
-      css`
-        margin-right: ${(props) => props.theme.space[350]};
-      `};
-  }
-
   ${(props) =>
     props.isSelected &&
     css`