+
{
onCancel={handleCancel}
/>
- {
- setValueToRemove(closedTab);
- }}
- >
- {tabs.map((label) => (
- 1}>
- {label}
-
- ))}
-
+
+ {
+ setValueToRemove(closedTab);
+ }}
+ >
+ {tabs.map((label) => (
+ 1}>
+ {label}
+
+ ))}
+
+
);
diff --git a/site/docs/components/tabs/examples.mdx b/site/docs/components/tabs/examples.mdx
index 9b817f6caf..7500b09ac4 100644
--- a/site/docs/components/tabs/examples.mdx
+++ b/site/docs/components/tabs/examples.mdx
@@ -9,29 +9,22 @@ data:
---
-
+
-## Main tabstrip
-
-The main tabstrip uses a border to separate the tabs from the rest of the page. You can align tabs inside the tabstrip can be aligned to the left, center or right. Use it to organize content across the main region of an interface under the app header.
-
-### Best practices
-
-The main tabstrip should span the width of the page.
+## Appearance
+Two different appearances are available for tabs: Bordered and Transparent.
+
-
+
-## Inline tabstrip
-
-The inline tabstrip has no separator between the tabs and the content below. Use it within an area of a page to switch between related content. Like the main tabstrip, you can align the tabs to the left, center or right.
-
-### Best practices
+## Separator and padding
-Don’t use inline tabs standalone outside of the content region it is nested within.
+Tabs can be shown with a separator or padding to help create visual alignment in your UI,
+
@@ -97,9 +90,11 @@ Tabs can be set as disabled using the `disabled` prop.
-
+
-## Variants
+## Active color
+
+Tabs supports three active colors: "primary", "secondary" and "tertiary".
diff --git a/site/src/examples/tabs/Variants.tsx b/site/src/examples/tabs/ActiveColor.tsx
similarity index 81%
rename from site/src/examples/tabs/Variants.tsx
rename to site/src/examples/tabs/ActiveColor.tsx
index a289c57298..d77ee8ac49 100644
--- a/site/src/examples/tabs/Variants.tsx
+++ b/site/src/examples/tabs/ActiveColor.tsx
@@ -7,6 +7,7 @@ import {
StackLayout,
} from "@salt-ds/core";
import {
+ TabBar,
TabListNext,
type TabListNextProps,
TabNext,
@@ -17,7 +18,7 @@ import { type ChangeEvent, type ReactElement, useState } from "react";
const tabs = ["Home", "Transactions", "Loans"];
-export const Variants = (): ReactElement => {
+export const ActiveColor = (): ReactElement => {
const [variant, setVariant] =
useState
("primary");
@@ -29,13 +30,15 @@ export const Variants = (): ReactElement => {
-
- {tabs.map((label) => (
-
- {label}
-
- ))}
-
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
{tabs.map((label) => (
{label}
diff --git a/site/src/examples/tabs/AddANewTab.tsx b/site/src/examples/tabs/AddANewTab.tsx
index 4efca4cd1e..8fc185b1ad 100644
--- a/site/src/examples/tabs/AddANewTab.tsx
+++ b/site/src/examples/tabs/AddANewTab.tsx
@@ -1,4 +1,6 @@
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { Button } from "@salt-ds/core";
+import { AddIcon } from "@salt-ds/icons";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import React, { type ReactElement, useRef, useState } from "react";
export const AddANewTab = (): ReactElement => {
@@ -8,22 +10,27 @@ export const AddANewTab = (): ReactElement => {
return (
setValue(newValue)}>
- {
- const newTab = `New Tab${newCount.current > 0 ? ` ${newCount.current}` : ""}`;
- newCount.current += 1;
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
+ setTabs((old) => old.concat(newTab));
+ }}
+ >
+
+
+
);
};
diff --git a/site/src/examples/tabs/Appearance.tsx b/site/src/examples/tabs/Appearance.tsx
new file mode 100644
index 0000000000..b1a8e2c8da
--- /dev/null
+++ b/site/src/examples/tabs/Appearance.tsx
@@ -0,0 +1,34 @@
+import { StackLayout } from "@salt-ds/core";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import type { ReactElement } from "react";
+
+const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+export const Appearance = (): ReactElement => {
+ return (
+
+
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/site/src/examples/tabs/ClosableTabs.tsx b/site/src/examples/tabs/ClosableTabs.tsx
index 702a0a04c9..289719cefb 100644
--- a/site/src/examples/tabs/ClosableTabs.tsx
+++ b/site/src/examples/tabs/ClosableTabs.tsx
@@ -1,5 +1,4 @@
-import { Badge } from "@salt-ds/core";
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import { type ReactElement, useState } from "react";
export const ClosableTabs = (): ReactElement => {
@@ -13,17 +12,19 @@ export const ClosableTabs = (): ReactElement => {
return (
- {
- setTabs(tabs.filter((tab) => tab !== closedTab));
- }}
- >
- {tabs.map((label) => (
- 1}>
- {label}
-
- ))}
-
+
+ {
+ setTabs(tabs.filter((tab) => tab !== closedTab));
+ }}
+ >
+ {tabs.map((label) => (
+ 1}>
+ {label}
+
+ ))}
+
+
);
};
diff --git a/site/src/examples/tabs/DisabledTabs.tsx b/site/src/examples/tabs/DisabledTabs.tsx
index 6dc99c74e7..78b3516696 100644
--- a/site/src/examples/tabs/DisabledTabs.tsx
+++ b/site/src/examples/tabs/DisabledTabs.tsx
@@ -1,4 +1,4 @@
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import type { ReactElement } from "react";
const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
@@ -6,15 +6,17 @@ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
export const DisabledTabs = (): ReactElement => {
return (
-
- {tabs.map((label) => {
- return (
-
- {label}
-
- );
- })}
-
+
+
+ {tabs.map((label) => {
+ return (
+
+ {label}
+
+ );
+ })}
+
+
);
};
diff --git a/site/src/examples/tabs/Inline.tsx b/site/src/examples/tabs/Inline.tsx
deleted file mode 100644
index 565e4810b5..0000000000
--- a/site/src/examples/tabs/Inline.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
-import type { ReactElement } from "react";
-
-const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
-
-export const Inline = (): ReactElement => {
- return (
-
-
- {tabs.map((label) => (
-
- {label}
-
- ))}
-
-
- );
-};
diff --git a/site/src/examples/tabs/Main.tsx b/site/src/examples/tabs/Main.tsx
deleted file mode 100644
index 9ce5b16646..0000000000
--- a/site/src/examples/tabs/Main.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
-import type { ReactElement } from "react";
-
-const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
-
-export const Main = (): ReactElement => {
- return (
-
-
- {tabs.map((label) => (
-
- {label}
-
- ))}
-
-
- );
-};
diff --git a/site/src/examples/tabs/Overflow.tsx b/site/src/examples/tabs/Overflow.tsx
index aebac6bfe0..c472860dcf 100644
--- a/site/src/examples/tabs/Overflow.tsx
+++ b/site/src/examples/tabs/Overflow.tsx
@@ -1,4 +1,4 @@
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import type { ReactElement } from "react";
const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
@@ -6,13 +6,15 @@ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
export const Overflow = (): ReactElement => {
return (
-
- {tabs.map((label) => (
-
- {label}
-
- ))}
-
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
);
};
diff --git a/site/src/examples/tabs/SeparatorAndPadding.tsx b/site/src/examples/tabs/SeparatorAndPadding.tsx
new file mode 100644
index 0000000000..d5cf7addc8
--- /dev/null
+++ b/site/src/examples/tabs/SeparatorAndPadding.tsx
@@ -0,0 +1,49 @@
+import { StackLayout, Switch } from "@salt-ds/core";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { type ReactElement, useState } from "react";
+
+const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+
+export const SeparatorAndPadding = (): ReactElement => {
+ const [separator, setSeparator] = useState(true);
+ const [padding, setPadding] = useState(true);
+
+ return (
+
+
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+
+
+
+ {tabs.map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+
+ setSeparator(event.target.checked)}
+ />
+ setPadding(event.target.checked)}
+ />
+
+
+ );
+};
diff --git a/site/src/examples/tabs/WithBadge.tsx b/site/src/examples/tabs/WithBadge.tsx
index bdda23d847..68aa468fbf 100644
--- a/site/src/examples/tabs/WithBadge.tsx
+++ b/site/src/examples/tabs/WithBadge.tsx
@@ -1,5 +1,5 @@
import { Badge } from "@salt-ds/core";
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import type { ReactElement } from "react";
const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
@@ -12,16 +12,18 @@ const notifications: Record<(typeof tabs)[number], number> = {
export const WithBadge = (): ReactElement => {
return (
-
- {tabs.map((label) => (
-
- {label}
- {notifications[label] > 0 ? (
-
- ) : undefined}
-
- ))}
-
+
+
+ {tabs.map((label) => (
+
+ {label}
+ {notifications[label] > 0 ? (
+
+ ) : undefined}
+
+ ))}
+
+
);
};
diff --git a/site/src/examples/tabs/WithIcon.tsx b/site/src/examples/tabs/WithIcon.tsx
index e29a95e233..c3337e1c93 100644
--- a/site/src/examples/tabs/WithIcon.tsx
+++ b/site/src/examples/tabs/WithIcon.tsx
@@ -5,7 +5,7 @@ import {
LineChartIcon,
ReceiptIcon,
} from "@salt-ds/icons";
-import { TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
+import { TabBar, TabListNext, TabNext, TabsNext } from "@salt-ds/lab";
import type { ComponentType, ReactElement } from "react";
const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
@@ -21,16 +21,18 @@ const tabToIcon: Record = {
export const WithIcon = (): ReactElement => {
return (
-
- {tabs.map((label) => {
- const Icon = tabToIcon[label];
- return (
-
- {label}
-
- );
- })}
-
+
+
+ {tabs.map((label) => {
+ const Icon = tabToIcon[label];
+ return (
+
+ {label}
+
+ );
+ })}
+
+
);
};
diff --git a/site/src/examples/tabs/index.ts b/site/src/examples/tabs/index.ts
index 760321cee0..0108716f74 100644
--- a/site/src/examples/tabs/index.ts
+++ b/site/src/examples/tabs/index.ts
@@ -1,9 +1,9 @@
-export * from "./Main";
-export * from "./Inline";
+export * from "./Appearance";
export * from "./WithIcon";
export * from "./WithBadge";
export * from "./AddANewTab";
export * from "./ClosableTabs";
export * from "./DisabledTabs";
export * from "./Overflow";
-export * from "./Variants";
+export * from "./ActiveColor";
+export * from "./SeparatorAndPadding";
diff --git a/yarn.lock b/yarn.lock
index 6e57b4b462..401a66da4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4107,11 +4107,10 @@ __metadata:
languageName: node
linkType: hard
-"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.0":
- version: 0.4.0
- resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.0"
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.1":
+ version: 0.4.1
+ resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.1"
dependencies:
- glob: "npm:^10.0.0"
magic-string: "npm:^0.27.0"
react-docgen-typescript: "npm:^2.2.2"
peerDependencies:
@@ -4120,7 +4119,7 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
- checksum: 10/96ab538a3b01a5dd81869ea52df2fd7cd989a6648f79e8c8cf9fb30a2614620c7e986bdce62724bdf9c277be22dd52b006481207c1ee134c8f9e19135f5b56ef
+ checksum: 10/f4ac95967a221b37fc0e93dafeb0c5b2496bdb27c1822581889ba102734fd69b185d7da02df6fd5e7c7670f805137e0cf8440cf8f3cb6b84c3c134833ada7fae
languageName: node
linkType: hard
@@ -15273,7 +15272,7 @@ __metadata:
languageName: node
linkType: hard
-"glob@npm:^10.0.0, glob@npm:^10.3.10, glob@npm:^10.3.7":
+"glob@npm:^10.3.10, glob@npm:^10.3.7":
version: 10.4.5
resolution: "glob@npm:10.4.5"
dependencies: