From e4ed372dc79886ba811a1c16029f6dc15acf8588 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Thu, 24 Oct 2024 00:03:57 +0100
Subject: [PATCH] Updates

---
 packages/core/stories/badge/badge.stories.tsx |  2 +-
 packages/lab/src/tabs-next/TabBar.css         |  4 ++--
 packages/lab/src/tabs-next/TabBar.tsx         | 10 ++++----
 .../tabs-next/tabs-next.qa.stories.tsx        |  2 +-
 .../stories/tabs-next/tabs-next.stories.tsx   | 24 +++++++++----------
 site/docs/components/tabs/examples.mdx        |  6 ++---
 site/src/examples/badge/InlineBadge.tsx       |  2 +-
 site/src/examples/tabs/ActiveColor.tsx        |  2 +-
 site/src/examples/tabs/AddANewTab.tsx         |  4 ++--
 site/src/examples/tabs/ClosableTabs.tsx       |  2 +-
 site/src/examples/tabs/DisabledTabs.tsx       |  2 +-
 ...atorAndPadding.tsx => DividerAndInset.tsx} | 22 ++++++++---------
 site/src/examples/tabs/Overflow.tsx           |  2 +-
 site/src/examples/tabs/WithBadge.tsx          |  2 +-
 site/src/examples/tabs/WithIcon.tsx           |  2 +-
 site/src/examples/tabs/index.ts               |  2 +-
 .../DetailComponent/DetailComponent.tsx       |  9 ++-----
 17 files changed, 47 insertions(+), 52 deletions(-)
 rename site/src/examples/tabs/{SeparatorAndPadding.tsx => DividerAndInset.tsx} (68%)

diff --git a/packages/core/stories/badge/badge.stories.tsx b/packages/core/stories/badge/badge.stories.tsx
index 41b076b50d5..f9113ef3f9c 100644
--- a/packages/core/stories/badge/badge.stories.tsx
+++ b/packages/core/stories/badge/badge.stories.tsx
@@ -76,7 +76,7 @@ export const String: StoryFn = () => {
 export const InlineBadge: StoryFn = () => {
   return (
     <TabsNext defaultValue="Home">
-      <TabBar padding separator>
+      <TabBar inset divider>
         <TabListNext
           style={{
             minWidth: 350,
diff --git a/packages/lab/src/tabs-next/TabBar.css b/packages/lab/src/tabs-next/TabBar.css
index 2f5081e730f..0433412dc2f 100644
--- a/packages/lab/src/tabs-next/TabBar.css
+++ b/packages/lab/src/tabs-next/TabBar.css
@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 
-.saltTabBar-separator::before {
+.saltTabBar-divider::before {
   content: "";
   position: absolute;
   inset: auto 0 0 0;
@@ -15,7 +15,7 @@
   border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
 }
 
-.saltTabBar-padding {
+.saltTabBar-inset {
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
 }
diff --git a/packages/lab/src/tabs-next/TabBar.tsx b/packages/lab/src/tabs-next/TabBar.tsx
index ee75f30e894..c8e942ebaf4 100644
--- a/packages/lab/src/tabs-next/TabBar.tsx
+++ b/packages/lab/src/tabs-next/TabBar.tsx
@@ -10,18 +10,18 @@ export interface TabBarProps extends ComponentPropsWithRef<"div"> {
   /**
    * Styling variant with a bottom separator. Defaults to false
    */
-  separator?: boolean;
+  divider?: boolean;
   /**
    * Styling variant with left and right padding. Defaults to false
    */
-  padding?: boolean;
+  inset?: boolean;
 }
 
 const withBaseName = makePrefixer("saltTabBar");
 
 export const TabBar = forwardRef<HTMLDivElement, TabBarProps>(
   function TabBar(props, ref) {
-    const { className, children, separator, padding, ...rest } = props;
+    const { className, children, divider, inset, ...rest } = props;
 
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -35,8 +35,8 @@ export const TabBar = forwardRef<HTMLDivElement, TabBarProps>(
         className={clsx(
           withBaseName(),
           {
-            [withBaseName("separator")]: separator,
-            [withBaseName("padding")]: padding,
+            [withBaseName("divider")]: divider,
+            [withBaseName("inset")]: inset,
           },
           className,
         )}
diff --git a/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx b/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
index a7c71b52598..4a36d198198 100644
--- a/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
+++ b/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
@@ -45,7 +45,7 @@ export const LotsOfTabsTabstrip: StoryFn = () => {
           setValue(value);
         }}
       >
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
             {tabs.map((label) => (
               <TabNext key={label} value={label}>
diff --git a/packages/lab/stories/tabs-next/tabs-next.stories.tsx b/packages/lab/stories/tabs-next/tabs-next.stories.tsx
index 35e13b81539..c6d11407677 100644
--- a/packages/lab/stories/tabs-next/tabs-next.stories.tsx
+++ b/packages/lab/stories/tabs-next/tabs-next.stories.tsx
@@ -86,7 +86,7 @@ export const Bordered: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div className="container">
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext appearance="bordered">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -147,7 +147,7 @@ export const WithIcon: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div className="container">
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => {
               const Icon = tabToIcon[label];
@@ -178,7 +178,7 @@ export const WithBadge: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div style={{ minWidth: 0, maxWidth: "100%" }}>
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -204,7 +204,7 @@ WithBadge.args = {
 export const Overflow: StoryFn<typeof TabsNext> = (args) => {
   return (
     <TabsNext {...args}>
-      <TabBar padding separator>
+      <TabBar inset divider>
         <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
           {lotsOfTabs.map((label) => (
             <TabNext value={label} key={label}>
@@ -233,7 +233,7 @@ export const Closable: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div style={{ minWidth: 0, maxWidth: "100%" }}>
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -265,7 +265,7 @@ export const DisabledTabs: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div className="container">
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext appearance="bordered">
             {tabs.map((label) => (
               <TabNext disabled={label === "Loans"} value={label} key={label}>
@@ -300,7 +300,7 @@ export const AddTabs: StoryFn<typeof TabsNext> = (args) => {
         value={value}
         onChange={(_event, newValue) => setValue(newValue)}
       >
-        <TabBar padding separator style={{ width: 500 }}>
+        <TabBar inset divider style={{ width: 500 }}>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -338,7 +338,7 @@ export const Backgrounds = (): ReactElement => {
     <StackLayout gap={6}>
       <div style={{ alignItems: "center", width: "40vw" }}>
         <TabsNext defaultValue={tabs[0]}>
-          <TabBar separator>
+          <TabBar divider>
             <TabListNext activeColor={variant} appearance="bordered">
               {tabs.map((label) => (
                 <TabNext value={label} key={label}>
@@ -434,7 +434,7 @@ export const AddWithDialog = () => {
         onCancel={handleCancel}
       />
       <TabsNext defaultValue="Home">
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -507,7 +507,7 @@ export const CloseWithConfirmation = () => {
         onCancel={handleCancel}
       />
       <TabsNext defaultValue="Home">
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -586,7 +586,7 @@ export const WithMenu: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div style={{ minWidth: 0, maxWidth: "100%" }}>
       <TabsNext {...args}>
-        <TabBar padding separator>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -650,7 +650,7 @@ export const Controlled: StoryFn = () => {
 
   return (
     <TabsNext value={value} onChange={handleChange}>
-      <TabBar padding separator>
+      <TabBar inset divider>
         <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
           {tabs.map((label) => (
             <TabNext value={label} key={label}>
diff --git a/site/docs/components/tabs/examples.mdx b/site/docs/components/tabs/examples.mdx
index 535805e8311..55e3447f703 100644
--- a/site/docs/components/tabs/examples.mdx
+++ b/site/docs/components/tabs/examples.mdx
@@ -17,11 +17,11 @@ Two different appearances are available for tabs: Bordered and Transparent.
 
 </LivePreview>
 
-<LivePreview componentName="tabs" exampleName="SeparatorAndPadding" >
+<LivePreview componentName="tabs" exampleName="DividerAndInset" >
 
-## Separator and padding
+## Divider and inset
 
-Tabs can be shown with a separator or padding to help create visual alignment in your UI,
+Tabs can be shown with a divider or inset to help create visual alignment in your UI,
 
 </LivePreview>
 
diff --git a/site/src/examples/badge/InlineBadge.tsx b/site/src/examples/badge/InlineBadge.tsx
index 426778a7a80..22de5952724 100644
--- a/site/src/examples/badge/InlineBadge.tsx
+++ b/site/src/examples/badge/InlineBadge.tsx
@@ -10,7 +10,7 @@ import type { ReactElement } from "react";
 
 export const InlineBadge = (): ReactElement => (
   <TabsNext defaultValue="Home">
-    <TabBar padding separator>
+    <TabBar inset divider>
       <TabListNext
         style={{
           minWidth: 350,
diff --git a/site/src/examples/tabs/ActiveColor.tsx b/site/src/examples/tabs/ActiveColor.tsx
index d6c894bd872..9705c297f3f 100644
--- a/site/src/examples/tabs/ActiveColor.tsx
+++ b/site/src/examples/tabs/ActiveColor.tsx
@@ -31,7 +31,7 @@ export const ActiveColor = (): ReactElement => {
     <StackLayout gap={6}>
       <div style={{ alignItems: "center", width: "40vw" }}>
         <TabsNext defaultValue={tabs[0]}>
-          <TabBar separator>
+          <TabBar divider>
             <TabListNext activeColor={variant}>
               {tabs.map((label) => (
                 <TabNext value={label} key={label}>
diff --git a/site/src/examples/tabs/AddANewTab.tsx b/site/src/examples/tabs/AddANewTab.tsx
index 09ee58b5f6e..e18dccd7686 100644
--- a/site/src/examples/tabs/AddANewTab.tsx
+++ b/site/src/examples/tabs/AddANewTab.tsx
@@ -7,7 +7,7 @@ import {
   TabNextTrigger,
   TabsNext,
 } from "@salt-ds/lab";
-import React, { type ReactElement, useRef, useState } from "react";
+import { type ReactElement, useRef, useState } from "react";
 
 export const AddANewTab = (): ReactElement => {
   const [tabs, setTabs] = useState(["Home", "Transactions", "Loans"]);
@@ -16,7 +16,7 @@ export const AddANewTab = (): ReactElement => {
 
   return (
     <TabsNext value={value} onChange={(_event, newValue) => setValue(newValue)}>
-      <TabBar padding separator style={{ width: 500 }}>
+      <TabBar inset divider style={{ width: 500 }}>
         <TabListNext>
           {tabs.map((label) => (
             <TabNext value={label} key={label}>
diff --git a/site/src/examples/tabs/ClosableTabs.tsx b/site/src/examples/tabs/ClosableTabs.tsx
index 6ea2c7dab8f..8e1da40ef02 100644
--- a/site/src/examples/tabs/ClosableTabs.tsx
+++ b/site/src/examples/tabs/ClosableTabs.tsx
@@ -20,7 +20,7 @@ export const ClosableTabs = (): ReactElement => {
 
   return (
     <TabsNext defaultValue={tabs[0]}>
-      <TabBar separator padding>
+      <TabBar inset divider>
         <TabListNext>
           {tabs.map((label) => (
             <TabNext value={label} key={label}>
diff --git a/site/src/examples/tabs/DisabledTabs.tsx b/site/src/examples/tabs/DisabledTabs.tsx
index 573494936bd..00ad71a5bc4 100644
--- a/site/src/examples/tabs/DisabledTabs.tsx
+++ b/site/src/examples/tabs/DisabledTabs.tsx
@@ -12,7 +12,7 @@ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
 export const DisabledTabs = (): ReactElement => {
   return (
     <TabsNext defaultValue={tabs[0]}>
-      <TabBar padding separator>
+      <TabBar inset divider>
         <TabListNext>
           {tabs.map((label) => {
             return (
diff --git a/site/src/examples/tabs/SeparatorAndPadding.tsx b/site/src/examples/tabs/DividerAndInset.tsx
similarity index 68%
rename from site/src/examples/tabs/SeparatorAndPadding.tsx
rename to site/src/examples/tabs/DividerAndInset.tsx
index 9babccb3765..de49943f7e6 100644
--- a/site/src/examples/tabs/SeparatorAndPadding.tsx
+++ b/site/src/examples/tabs/DividerAndInset.tsx
@@ -10,14 +10,14 @@ 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);
+export const DividerAndInset = (): ReactElement => {
+  const [divider, setDivider] = useState(true);
+  const [inset, setInset] = useState(true);
 
   return (
     <StackLayout>
       <TabsNext defaultValue={tabs[0]}>
-        <TabBar separator={separator} padding={padding}>
+        <TabBar divider={divider} inset={inset}>
           <TabListNext appearance="bordered">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -28,7 +28,7 @@ export const SeparatorAndPadding = (): ReactElement => {
         </TabBar>
       </TabsNext>
       <TabsNext defaultValue={tabs[0]}>
-        <TabBar separator={separator} padding={padding}>
+        <TabBar divider={divider} inset={inset}>
           <TabListNext appearance="transparent">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -40,14 +40,14 @@ export const SeparatorAndPadding = (): ReactElement => {
       </TabsNext>
       <StackLayout direction="row">
         <Switch
-          label="Separator"
-          checked={separator}
-          onChange={(event) => setSeparator(event.target.checked)}
+          label="Divider"
+          checked={divider}
+          onChange={(event) => setDivider(event.target.checked)}
         />
         <Switch
-          label="Padding"
-          checked={padding}
-          onChange={(event) => setPadding(event.target.checked)}
+          label="Inset"
+          checked={inset}
+          onChange={(event) => setInset(event.target.checked)}
         />
       </StackLayout>
     </StackLayout>
diff --git a/site/src/examples/tabs/Overflow.tsx b/site/src/examples/tabs/Overflow.tsx
index f551c0a860b..cca89995793 100644
--- a/site/src/examples/tabs/Overflow.tsx
+++ b/site/src/examples/tabs/Overflow.tsx
@@ -30,7 +30,7 @@ const tabs = [
 export const Overflow = (): ReactElement => {
   return (
     <TabsNext defaultValue={tabs[0]}>
-      <TabBar separator padding>
+      <TabBar inset divider>
         <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
           {tabs.map((label) => (
             <TabNext value={label} key={label}>
diff --git a/site/src/examples/tabs/WithBadge.tsx b/site/src/examples/tabs/WithBadge.tsx
index cb4222a1916..5ecb664b545 100644
--- a/site/src/examples/tabs/WithBadge.tsx
+++ b/site/src/examples/tabs/WithBadge.tsx
@@ -18,7 +18,7 @@ const notifications: Record<(typeof tabs)[number], number> = {
 export const WithBadge = (): ReactElement => {
   return (
     <TabsNext defaultValue={tabs[0]}>
-      <TabBar separator padding>
+      <TabBar divider inset>
         <TabListNext>
           {tabs.map((label) => (
             <TabNext value={label} key={label}>
diff --git a/site/src/examples/tabs/WithIcon.tsx b/site/src/examples/tabs/WithIcon.tsx
index 6739ed8fa52..9e4e515f297 100644
--- a/site/src/examples/tabs/WithIcon.tsx
+++ b/site/src/examples/tabs/WithIcon.tsx
@@ -27,7 +27,7 @@ const tabToIcon: Record<string, ComponentType> = {
 export const WithIcon = (): ReactElement => {
   return (
     <TabsNext defaultValue={tabs[0]}>
-      <TabBar separator padding>
+      <TabBar divider inset>
         <TabListNext>
           {tabs.map((label) => {
             const Icon = tabToIcon[label];
diff --git a/site/src/examples/tabs/index.ts b/site/src/examples/tabs/index.ts
index 0108716f744..df907c8c9cc 100644
--- a/site/src/examples/tabs/index.ts
+++ b/site/src/examples/tabs/index.ts
@@ -6,4 +6,4 @@ export * from "./ClosableTabs";
 export * from "./DisabledTabs";
 export * from "./Overflow";
 export * from "./ActiveColor";
-export * from "./SeparatorAndPadding";
+export * from "./DividerAndInset";
diff --git a/site/src/layouts/DetailComponent/DetailComponent.tsx b/site/src/layouts/DetailComponent/DetailComponent.tsx
index 8ce891141ca..d7730cc352c 100644
--- a/site/src/layouts/DetailComponent/DetailComponent.tsx
+++ b/site/src/layouts/DetailComponent/DetailComponent.tsx
@@ -14,12 +14,7 @@ import {
   TabsNext,
 } from "@salt-ds/lab";
 import { useRouter } from "next/navigation";
-import {
-  type FC,
-  type SyntheticEvent,
-  useEffect,
-  useState,
-} from "react";
+import { type FC, type SyntheticEvent, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { a, code, p, ul } from "../../components/mdx";
 import { TableOfContents } from "../../components/toc";
@@ -140,7 +135,7 @@ export const DetailComponent: FC<LayoutProps> = ({ children }) => {
         value={currentTab?.name ?? tabs[0].name}
         onChange={handleTabChange}
       >
-        <TabBar className={styles.tabBar} separator>
+        <TabBar className={styles.tabBar} divider>
           <TabListNext appearance="transparent">
             {tabs.map(({ name, label }) => (
               <TabNext key={name} value={name}>