@sproutsocial/seeds-react-tabs 1.4.13 → 1.4.15

package/CHANGELOG.md

@@ -1,383 +0,0 @@
-# @sproutsocial/seeds-react-tabs
-
-## 1.4.13
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-button@2.2.3
-
-## 1.4.12
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-button@2.2.2
-
-## 1.4.11
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.2.1
-
-## 1.4.10
-
-### Patch Changes
-
-- Updated dependencies [456a20f]
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-button@2.2.0
-  - @sproutsocial/seeds-react-system-props@3.1.1
-
-## 1.4.9
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-- Updated dependencies [a0fe3d3]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-button@2.1.3
-
-## 1.4.8
-
-### Patch Changes
-
-- Updated dependencies [cb27f07]
-  - @sproutsocial/seeds-react-button@2.1.2
-
-## 1.4.7
-
-### Patch Changes
-
-- Updated dependencies [40d2dfe]
-  - @sproutsocial/seeds-react-button@2.1.1
-
-## 1.4.6
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-button@2.1.0
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-
-## 1.4.5
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.8
-
-## 1.4.4
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-button@2.0.7
-
-## 1.4.3
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-button@2.0.6
-
-## 1.4.2
-
-### Patch Changes
-
-- 9c60744: Fix Safari-only tab collapse not addressed by 1.4.1:
-
-  Inside a flex parent with `overflow: auto/hidden`, Safari resolves the Container's `min-height: min-content` to `0` when the same element also has `overflow-x: auto; overflow-y: hidden`. Tabs would paint once, then collapse to their `border-bottom` (1px). Adds `flex-shrink: 0` on the Container so the tablist preserves its intrinsic height regardless of how Safari handles `min-content` in that combination. Chrome behavior is unchanged.
-
-  Reported in [BUGS-28687](https://sprout.atlassian.net/browse/BUGS-28687) across every Profiles-by-Network report.
-
-## 1.4.1
-
-### Patch Changes
-
-- 679806a: Fix layout regression introduced in 1.4.0:
-
-  - **Tabs no longer collapse to a 1px-tall row inside flex-column parents.** Container's `overflow-x: auto; overflow-y: hidden` was triggering the flex `min-height: auto → 0` override, allowing an ancestor `display: flex; flex-direction: column` with a bounded height (e.g. `ContentWithDrillDown`'s `Content.Body`) to shrink the tablist to its border-bottom. Container now sets `min-height: min-content`, restoring the pre-1.4.0 minimum-size behavior without changing scroll semantics.
-
-  No API changes.
-
-## 1.4.0
-
-### Minor Changes
-
-- 412cc1e: Tabs now scrolls horizontally when the tab list overflows its container, with a fade indicator at each edge that auto-adapts to the parent's background via CSS `mask-image`. Vertical mouse-wheel input is redirected to horizontal scroll (with release-at-ends behavior so page scrolling isn't trapped), and arrow-key and click activation auto-scroll the selected tab into view. Adds an optional `aria-label` prop that's forwarded to the `role="tablist"` element per the WAI-ARIA Authoring Practices Tabs pattern.
-
-  Spacing change for non-`fullWidth` Tabs: the inter-tab `margin-right` between adjacent tab buttons has been removed in favor of horizontal padding on each tab button. Visual spacing is preserved (each tab now contributes its own breathing room via padding rather than the previous tab pushing it via margin), and clickable hit-areas are slightly larger. The `fullWidth` case is unchanged. Consumers depending on the exact pixel values of the old margin should re-check their layouts.
-
-## 1.3.11
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.5
-
-## 1.3.10
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.4
-
-## 1.3.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.3
-
-## 1.3.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.2
-
-## 1.3.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.1
-
-## 1.3.6
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-- Updated dependencies [df9d751]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-button@2.0.0
-
-## 1.3.5
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-button@1.4.3
-
-## 1.3.4
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.2
-
-## 1.3.3
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.1
-
-## 1.3.2
-
-### Patch Changes
-
-- Updated dependencies [7d54d67]
-  - @sproutsocial/seeds-react-button@1.4.0
-
-## 1.3.1
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-button@1.3.20
-
-## 1.3.0
-
-### Minor Changes
-
-- 651fc1b: Update TabButton structure to correct aria descendents
-
-## 1.2.10
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.19
-
-## 1.2.9
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-button@1.3.18
-
-## 1.2.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.17
-
-## 1.2.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.16
-
-## 1.2.6
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.15
-
-## 1.2.5
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-button@1.3.14
-
-## 1.2.4
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-button@1.3.13
-
-## 1.2.3
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-button@1.3.12
-
-## 1.2.2
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.11
-
-## 1.2.1
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-button@1.3.10
-
-## 1.2.0
-
-### Minor Changes
-
-- 2612fec: Add TabPanel to Tabs
-- 2612fec: Remove list semantics from tabs
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-button@1.3.9
-
-## 1.1.12
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.8
-
-## 1.1.11
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.7
-
-## 1.1.10
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-button@1.3.6
-
-## 1.1.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.5
-
-## 1.1.8
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-button@1.3.4
-
-## 1.1.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.3
-
-## 1.1.6
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.3.2
-
-## 1.1.5
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-button@1.3.1
-
-## 1.1.4
-
-### Patch Changes
-
-- Updated dependencies [5ea5457]
-  - @sproutsocial/seeds-react-button@1.3.0
-
-## 1.1.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-button@1.2.3
-
-## 1.1.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-button@1.2.2
-  - @sproutsocial/seeds-react-theme@3.0.1
-
-## 1.1.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-button@1.2.1
-  - @sproutsocial/seeds-react-theme@2.2.1
-
-## 1.1.0
-
-### Minor Changes
-
-- cd61069: Refactors Tabs onSelect prop
-  - This should not be a breaking change; at most, type errors may arise.
-  - Before: `onSelect: (arg0: string) => void;`
-  - After: `onSelect(id: string): void;`
-  - By using method syntax when defining the prop's type, we allow users more control over the type of their `onSelect` function.
-  - For instance, this allows a function with signature `(id: 'a' | 'b') => void` to be passed
-
-## 1.0.0
-
-### Major Changes
-
-- bd8d03d: Migrate tabs from Racine to seeds-react-tabs

package/jest.config.js

@@ -1,9 +0,0 @@
-const baseConfig = require("@sproutsocial/seeds-testing");
-
-/** * @type {import('jest').Config} */
-const config = {
-  ...baseConfig,
-  displayName: "seeds-react-tabs",
-};
-
-module.exports = config;

package/src/Tabs.stories.tsx

@@ -1,258 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "@sproutsocial/seeds-react-button";
-import { Icon, type TypeIconName } from "@sproutsocial/seeds-react-icon";
-import { Tabs } from "./";
-import { Text } from "@sproutsocial/seeds-react-text";
-import type { Meta, StoryObj } from "@storybook/react";
-import Box from "@sproutsocial/seeds-react-box";
-
-interface TypeTabData {
-  id: string;
-  text: string;
-  icon: TypeIconName;
-}
-
-interface TypeTabsStoryState {
-  selected: string;
-  tabs?: TypeTabData[];
-}
-
-const meta: Meta<typeof Tabs> = {
-  title: "Components/Tabs",
-  component: Tabs,
-  args: {
-    fullWidth: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  render: (args) => {
-    const [selectedId, setSelectedId] = useState("notifications");
-
-    return (
-      <React.Fragment>
-        <Tabs
-          selectedId={selectedId}
-          onSelect={(selected) => setSelectedId(selected)}
-          fullWidth={args.fullWidth}
-        >
-          <Tabs.Button id="notifications">
-            <Icon name="bell-outline" mr="12px" aria-hidden />
-            <Text size="300" fontWeight="600">
-              Notifications
-            </Text>
-          </Tabs.Button>
-          <Tabs.Button id="issues">
-            <Icon name="triangle-exclamation-outline" mr="12px" aria-hidden />
-            <Text size="300" fontWeight="600">
-              Issues
-            </Text>
-          </Tabs.Button>
-        </Tabs>
-
-        {selectedId === "notifications" && (
-          <Tabs.Panel id="notifications">
-            <Text mt="24px">
-              Notifications panel content goes here. This panel is properly
-              connected to the "Notifications" tab via ARIA attributes for
-              accessibility.
-            </Text>
-          </Tabs.Panel>
-        )}
-
-        {selectedId === "issues" && (
-          <Tabs.Panel id="issues">
-            <Text mt="24px">
-              Issues panel content goes here. Screen readers will announce the
-              relationship between tabs and panels.
-            </Text>
-          </Tabs.Panel>
-        )}
-      </React.Fragment>
-    );
-  },
-  name: "Default",
-};
-
-export const FullWidth: Story = {
-  render: (args) => {
-    const [selectedId, setSelectedId] = useState("notifications");
-
-    return (
-      <Box width="100%" display="flex" flexDirection="column">
-        <Tabs
-          selectedId={selectedId}
-          onSelect={(selected) => setSelectedId(selected)}
-          fullWidth
-        >
-          <Tabs.Button id="notifications">
-            <Icon name="bell-outline" mr="12px" aria-hidden />
-            <Text size="300" fontWeight="600">
-              Notifications
-            </Text>
-          </Tabs.Button>
-          <Tabs.Button id="issues">
-            <Icon name="triangle-exclamation-outline" mr="12px" aria-hidden />
-            <Text size="300" fontWeight="600">
-              Issues
-            </Text>
-          </Tabs.Button>
-        </Tabs>
-
-        {selectedId === "notifications" && (
-          <Tabs.Panel id="notifications">
-            <Text mt="24px">
-              Notifications panel content goes here. This panel is properly
-              connected to the "Notifications" tab via ARIA attributes for
-              accessibility.
-            </Text>
-          </Tabs.Panel>
-        )}
-
-        {selectedId === "issues" && (
-          <Tabs.Panel id="issues">
-            <Text mt="24px">
-              Issues panel content goes here. Screen readers will announce the
-              relationship between tabs and panels.
-            </Text>
-          </Tabs.Panel>
-        )}
-      </Box>
-    );
-  },
-  name: "Full width",
-};
-
-export const Scrollable: Story = {
-  render: () => {
-    const tabs = [
-      "Overview",
-      "Notifications",
-      "Issues",
-      "Pull Requests",
-      "Discussions",
-      "Actions",
-      "Projects",
-      "Wiki",
-      "Security",
-      "Insights",
-    ];
-    const [selectedId, setSelectedId] = useState(tabs[0]);
-
-    return (
-      <>
-        <Box width="450px" mb={400}>
-          <Tabs
-            selectedId={selectedId ?? ""}
-            onSelect={(selected) => setSelectedId(selected)}
-            aria-label="Repository sections"
-          >
-            {tabs.map((tab) => (
-              <Tabs.Button key={tab} id={tab}>
-                <Text size="300" fontWeight="600" flexWrap={"nowrap"}>
-                  {tab}
-                </Text>
-              </Tabs.Button>
-            ))}
-          </Tabs>
-        </Box>
-
-        {tabs.map((tab) => {
-          if (selectedId !== tab) return null;
-          return (
-            <Tabs.Panel id={tab}>
-              <Text color="text.body">{tab} Panel</Text>
-            </Tabs.Panel>
-          );
-        })}
-      </>
-    );
-  },
-  name: "Scrollable",
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "When the tab list overflows its container, the bar scrolls horizontally and a fade indicator appears at each overflowing edge. Arrow-key and click activation auto-scroll the selected tab fully into view past the fade region. The fade uses CSS `mask-image` so it auto-adapts to any container background — no consumer configuration needed.",
-      },
-    },
-  },
-};
-
-export const RemoveATab: Story = {
-  render: (args) => {
-    const [state, setState] = useState<TypeTabsStoryState>({
-      selected: "notifications",
-      tabs: [
-        {
-          id: "notifications",
-          text: "Notifications",
-          icon: "bell-outline",
-        },
-        {
-          id: "issues",
-          text: "Issues",
-          icon: "triangle-exclamation-outline",
-        },
-        {
-          id: "fun",
-          text: "Fun Tab",
-          icon: "x-twitter",
-        },
-        {
-          id: "drafts",
-          text: "Drafts",
-          icon: "paper-outline",
-        },
-      ],
-    });
-
-    return (
-      <React.Fragment>
-        <Button
-          onClick={() =>
-            setState({
-              ...state,
-              tabs: state.tabs?.slice(1),
-            })
-          }
-        >
-          Remove a tab <Icon name="x-outline" aria-hidden />
-        </Button>
-        <Tabs
-          selectedId={state.selected}
-          onSelect={(selected) =>
-            setState({
-              ...state,
-              selected,
-            })
-          }
-          fullWidth={args.fullWidth}
-        >
-          {state.tabs?.map((tab) => (
-            <Tabs.Button key={tab.id} id={tab.id}>
-              <Icon name={tab.icon} mr="12px" aria-hidden />
-              <Text size="300" fontWeight="600">
-                {tab.text}
-              </Text>
-            </Tabs.Button>
-          ))}
-        </Tabs>
-
-        {state.tabs?.map(
-          (tab) =>
-            state.selected === tab.id && (
-              <Tabs.Panel key={tab.id} id={tab.id}>
-                <Text mt="24px">{tab.text} panel content goes here.</Text>
-              </Tabs.Panel>
-            )
-        )}
-      </React.Fragment>
-    );
-  },
-  name: "Remove a tab",
-};