Updates

jpmorganchase · Oct 24, 2024 · 3fb265a · 3fb265a
1 parent ec61ffb
commit 3fb265a
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 45 deletions.
diff --git 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
@@ -7,15 +7,15 @@
   box-sizing: border-box;
 }
 
-.saltTabBar-separator::before {
+.saltTabBar-divider::before {
   content: "";
   position: absolute;
   inset: auto 0 0 0;
   height: var(--salt-size-border);
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...src/examples/tabs/SeparatorAndPadding.tsx → site/src/examples/tabs/DividerAndInset.tsx b/...src/examples/tabs/SeparatorAndPadding.tsx → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -140,7 +140,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}>