@kaizen/components 1.64.14 → 1.65.0

package/src/__future__/Tabs/_docs/Tabs--migration-guide.mdx

@@ -0,0 +1,93 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Components/Tabs/Tabs (Future)/Migration Guide" />
+
+# Future Tabs migration guide
+
+A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `future` release.
+
+## Why the change?
+
+Current Tabs uses the Reach UI library under the hood, which is no longer actively maintained. This switches the library used internally to React Aria Components.
+
+## Component and API changes at a glance
+
+The Reach UI and React Aria APIs are fairly similar so there's not too much to adjust.
+
+The biggest adjustment is that you now need to provide an `id` for each `<Tab>` and match it with the one on `<TabPanel>`
+
+Additionally:
+- `<TabPanel>`s no longer needs to be wrapped in a `<TabPanels>` component
+- `classNameOverride` changes to `className`
+- `<Tabs defaultIndex={}>` changes to `<Tabs defaultSelectedKey={}>`
+- `<Tabs index={}>` changes to `<Tabs selectedKey={}>`
+- `<Tabs onChange={}>` changes to `<Tabs onSelectionChange={}>`
+- `<Tab disabled>` changes to `<Tab isDisabled>`
+
+## Migration examples
+
+### Uncontrolled
+
+#### Before
+
+```tsx
+<Tabs defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel classNameOverride="p-4">Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs defaultSelectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one" className="p-4">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```
+
+### Controlled
+
+#### Before
+
+```tsx
+<Tabs onChange={setSelectedTab} defaultIndex={1}>
+  <TabList>
+    <Tab>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+  </TabPanels>
+</Tabs>
+```
+
+#### After
+
+```tsx
+<Tabs onSelectionChange={setSelectedTab} selectedKey="two">
+  <TabList>
+    <Tab id="one">Tab 1</Tab>
+    <Tab id="two">Tab 2</Tab>
+    <Tab id="three" isDisabled>Disabled tab</Tab>
+  </TabList>
+  <TabPanel id="one">Content 1</TabPanel>
+  <TabPanel id="two">Content 2</TabPanel>
+</Tabs>
+```

package/src/__future__/Tabs/_docs/Tabs.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Text } from "~components/Text"
+import { Button } from "~components/__actions__/v2"
+import { Tab, TabList, TabPanel, Tabs, Key } from "../index"
+
+const meta = {
+  title: "Components/Tabs/Tabs (Future)",
+  component: Tabs,
+  args: {
+    children: (
+      <>
+        <TabList aria-label="Tabs">
+          <Tab id="one">Tab 1</Tab>
+          <Tab id="two">Tab 2</Tab>
+          <Tab id="three" badge="3">
+            Tab 3
+          </Tab>
+          <Tab id="four" isDisabled>
+            Disabled Tab
+          </Tab>
+        </TabList>
+        <TabPanel id="one" className="p-24">
+          <Text variant="body">Content 1</Text>
+        </TabPanel>
+        <TabPanel id="two" className="p-24">
+          <Text variant="body">Content 2</Text>
+        </TabPanel>
+        <TabPanel id="three" className="p-24">
+          <Text variant="body">Content 3</Text>
+        </TabPanel>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    chromatic: { disable: false },
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+  args: {
+    defaultSelectedKey: "one",
+    // eslint-disable-next-line no-console
+    onSelectionChange: (key): void => console.log("Tab changed to ", key),
+  },
+}
+
+export const Controlled: Story = {
+  render: args => {
+    const [selectedKey, setSelectedKey] = useState<Key>(0)
+    return (
+      <>
+        <Tabs
+          {...args}
+          selectedKey={selectedKey}
+          onSelectionChange={setSelectedKey}
+        />
+        <Button
+          label="Switch to tab 2"
+          onClick={(): void => setSelectedKey("two")}
+        />
+      </>
+    )
+  },
+}

package/src/__future__/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs"
+export * from "./subcomponents"

package/src/__future__/Tabs/subcomponents/Tab/Tab.module.css

@@ -0,0 +1,94 @@
+.tab {
+  display: inline-flex;
+  align-items: center;
+  border: 2px solid transparent;
+  border-bottom: 0;
+  border-top-left-radius: var(--border-borderless-border-radius);
+  border-top-right-radius: var(--border-borderless-border-radius);
+  background: var(--color-white);
+  white-space: nowrap;
+  text-decoration: none;
+  padding: var(--spacing-md) var(--spacing-md);
+  margin: 0;
+  font-family: var(--typography-heading-4-font-family);
+  font-size: var(--typography-heading-4-font-size);
+  font-weight: var(--typography-heading-4-font-weight);
+  line-height: var(--typography-heading-4-line-height);
+  letter-spacing: var(--typography-heading-4-letter-spacing);
+  color: var(--color-purple-800);
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+    border-color: var(--color-blue-500);
+  }
+
+  &[data-disabled] {
+    opacity: 0.3;
+  }
+
+  &:not(:first-child) {
+    margin-inline-start: var(--spacing-xs);
+  }
+
+  &:not([data-disabled]):hover {
+    background: var(--color-blue-100);
+    color: var(--color-blue-500);
+  }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: var(--color-blue-500);
+
+  &::before {
+    content: "";
+    display: block;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background-color: currentcolor;
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.badge {
+  margin-inline-start: var(--spacing-sm);
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-radius: var(--border-focus-ring-border-radius);
+      border-width: var(--border-focus-ring-border-width);
+      border-style: var(--border-focus-ring-border-style);
+      border-color: transparent;
+      inset: -2px;
+    }
+  }
+
+  .tab[data-selected]::before {
+    /* High contrast also doesn't see the pseudo element created to show the active tab. */
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
+}

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import classnames from "classnames"
+import { Tab as RACTab, TabProps as RACTabProps } from "react-aria-components"
+import { Badge } from "~components/Badge"
+import styles from "./Tab.module.css"
+
+export type TabProps = {
+  /**
+   * Adds a Kaizen Badge component to the tab.
+   * Comes with some logic baked in - changes variant based on active/focus/hover state.
+   */
+  badge?: string
+} & Omit<
+  RACTabProps,
+  // omitting link functionality because it goes against WAI ARIA standards https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+  | "href"
+  | "hrefLang"
+  | "target"
+  | "rel"
+  | "download"
+  | "ping"
+  | "referrerPolicy"
+>
+
+/**
+ * A tab button
+ */
+export const Tab = (props: TabProps): JSX.Element => {
+  const { badge, children, className, ...restProps } = props
+
+  const tabProps = {
+    className: classnames(styles.tab, className),
+    ...restProps,
+  }
+
+  return (
+    <RACTab {...tabProps}>
+      {({ isSelected, isFocusVisible, isHovered }) => (
+        <>
+          {children}
+          {badge && (
+            <span className={styles.badge}>
+              <Badge
+                variant={
+                  isSelected || isFocusVisible || isHovered
+                    ? "active"
+                    : "default"
+                }
+              >
+                {badge}
+              </Badge>
+            </span>
+          )}
+        </>
+      )}
+    </RACTab>
+  )
+}

package/src/__future__/Tabs/subcomponents/Tab/index.ts

@@ -0,0 +1 @@
+export * from "./Tab"

package/src/__future__/Tabs/subcomponents/TabList/TabList.module.css

@@ -0,0 +1,8 @@
+.tabList {
+  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  padding: var(--spacing-xs) var(--spacing-md) 0;
+}
+
+.noPadding {
+  padding: 0;
+}

package/src/__future__/Tabs/subcomponents/TabList/TabList.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react"
+import classnames from "classnames"
+import {
+  TabList as RACTabList,
+  TabListProps as RACTabListProps,
+} from "react-aria-components"
+import styles from "./TabList.module.css"
+
+export type TabListProps = {
+  /**
+   * Accessible name for the set of tabs
+   */
+  "aria-label": string
+  /**
+   * Removes the built in padding
+   */
+  noPadding?: boolean
+  children: ReactNode
+} & RACTabListProps<HTMLElement>
+
+/**
+ * Wrapper for the tabs themselves
+ */
+export const TabList = (props: TabListProps): JSX.Element => {
+  const {
+    "aria-label": ariaLabel,
+    noPadding = false,
+    children,
+    className,
+    ...restProps
+  } = props
+  return (
+    <RACTabList
+      aria-label={ariaLabel}
+      className={classnames(
+        styles.tabList,
+        className,
+        noPadding && styles.noPadding
+      )}
+      {...restProps}
+    >
+      {children}
+    </RACTabList>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabList/index.ts

@@ -0,0 +1 @@
+export * from "./TabList"

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -0,0 +1,12 @@
+.tabPanel {
+  border: 2px solid transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+  }
+}

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import {
+  TabPanel as RACTabPanel,
+  TabPanelProps as RACTabPanelProps,
+} from "react-aria-components"
+import styles from "./TabPanel.module.css"
+
+export type TabPanelProps = RACTabPanelProps
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+export const TabPanel = (props: TabPanelProps): JSX.Element => {
+  const { className, children, ...restProps } = props
+  return (
+    <RACTabPanel className={(styles.tabPanel, className)} {...restProps}>
+      {children}
+    </RACTabPanel>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabPanel/index.ts

@@ -0,0 +1 @@
+export * from "./TabPanel"

package/src/__future__/Tabs/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export * from "./Tab/"
+export * from "./TabList/"
+export * from "./TabPanel/"

package/src/__future__/index.ts

@@ -1,2 +1,3 @@
 export * from "./Select"
 export * from "./Tag"
+export * from "./Tabs"