Update TabstripNext and TabNext (jpmorganchase#3448)

liamsms · Oct 29, 2024 · 3cf8d99 · 3cf8d99
1 parent 97c6143
commit 3cf8d99
Show file tree

Hide file tree

Showing 59 changed files with 3,448 additions and 1,430 deletions.
diff --git a/.changeset/cool-fishes-appear.md b/.changeset/cool-fishes-appear.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Updated TabstripNext and TabNext to follow the new design guidelines and added dismissing and adding tabs.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -34,6 +34,11 @@ const config: StorybookConfig = {
 
     const customConfig: UserConfig = {
       plugins: [cssInline(), cssVariableDocgen()],
+      server: {
+        watch: {
+          ignored: ["**/coverage/**"],
+        },
+      },
     };
 
     if (configType === "PRODUCTION" && config.root) {

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",
     "lint:style:lab": "yarn stylelint -f verbose \"packages/lab/src/**/*.css\"",
     "lint:style:ag-theme": "yarn stylelint -f verbose \"packages/ag-grid-theme/css/**/*.css\"",
-    "storybook": "yarn storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "yarn build:ag-grid-theme && yarn bundle:css && storybook build --stats-json",
     "typecheck": "tsc --noEmit",
     "chromatic": "chromatic"

diff --git a/packages/core/src/utils/useResizeObserver.ts b/packages/core/src/utils/useResizeObserver.ts
@@ -14,9 +14,11 @@ export function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {
     const win = ownerWindow(element);
 
     const resizeObserver = new win.ResizeObserver((entries) => {
-      if (entries.length === 0) return;
+      requestAnimationFrame(() => {
+        if (entries.length === 0) return;
 
-      onResize();
+        onResize();
+      });
     });
     resizeObserver.observe(element);
 

diff --git a/packages/core/stories/badge/badge.qa.stories.tsx b/packages/core/stories/badge/badge.qa.stories.tsx
@@ -6,7 +6,13 @@ import {
   StackLayout,
 } from "@salt-ds/core";
 import { MessageIcon, NotificationSolidIcon } from "@salt-ds/icons";
-import { TabNext, TabstripNext } from "@salt-ds/lab";
+import {
+  TabBar,
+  TabListNext,
+  TabNext,
+  TabNextTrigger,
+  TabsNext,
+} from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
 import {
   QAContainer,
@@ -44,14 +50,20 @@ export const AllExamples: StoryFn<QAContainerProps> = (props) => (
         </Button>
       </Badge>
       <GridItem colSpan={7}>
-        <TabstripNext defaultValue="Checks">
-          <TabNext value="Checks">
-            <StackLayout direction="row" gap={1}>
-              Checks
-              <Badge value={30} />
-            </StackLayout>
-          </TabNext>
-        </TabstripNext>
+        <TabsNext defaultValue="Checks">
+          <TabListNext>
+            <TabBar>
+              <TabNext value="Checks">
+                <TabNextTrigger>
+                  <StackLayout direction="row" gap={1}>
+                    Checks
+                    <Badge value={30} />
+                  </StackLayout>
+                </TabNextTrigger>
+              </TabNext>
+            </TabBar>
+          </TabListNext>
+        </TabsNext>
       </GridItem>
     </GridLayout>
   </QAContainer>
@@ -95,14 +107,16 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         </Button>
       </Badge>
       <GridItem colSpan={9}>
-        <TabstripNext defaultValue="Checks">
+        <TabListNext defaultValue="Checks">
           <TabNext value="Checks">
-            <StackLayout direction="row" gap={1}>
-              Checks
-              <Badge value={30} />
-            </StackLayout>
+            <TabNextTrigger>
+              <StackLayout direction="row" gap={1}>
+                Checks
+                <Badge value={30} />
+              </StackLayout>
+            </TabNextTrigger>
           </TabNext>
-        </TabstripNext>
+        </TabListNext>
       </GridItem>
     </GridLayout>
   </QAContainerNoStyleInjection>

diff --git a/packages/core/stories/badge/badge.stories.tsx b/packages/core/stories/badge/badge.stories.tsx
@@ -6,7 +6,13 @@ import {
   ThumbsDownIcon,
   ThumbsUpIcon,
 } from "@salt-ds/icons";
-import { TabNext, TabstripNext } from "@salt-ds/lab";
+import {
+  TabBar,
+  TabListNext,
+  TabNext,
+  TabNextTrigger,
+  TabsNext,
+} from "@salt-ds/lab";
 import type { Meta, StoryFn } from "@storybook/react";
 
 export default {
@@ -69,19 +75,28 @@ export const String: StoryFn = () => {
 
 export const InlineBadge: StoryFn = () => {
   return (
-    <TabstripNext
-      defaultValue="Home"
-      style={{
-        minWidth: 350,
-      }}
-    >
-      <TabNext value="Home">Home</TabNext>
-      <TabNext value="Transactions" aria-label="Transations - 30 updates">
-        Transactions
-        <Badge value={30} />
-      </TabNext>
-      <TabNext value="Loans">Loans</TabNext>
-    </TabstripNext>
+    <TabsNext defaultValue="Home">
+      <TabBar inset divider>
+        <TabListNext
+          style={{
+            minWidth: 350,
+          }}
+        >
+          <TabNext value="Home">
+            <TabNextTrigger>Home</TabNextTrigger>
+          </TabNext>
+          <TabNext value="Transactions">
+            <TabNextTrigger aria-label="Transations - 30 updates">
+              Transactions
+              <Badge value={30} />
+            </TabNextTrigger>
+          </TabNext>
+          <TabNext value="Loans">
+            <TabNextTrigger>Loans</TabNextTrigger>
+          </TabNext>
+        </TabListNext>
+      </TabBar>
+    </TabsNext>
   );
 };
 
@@ -119,17 +134,23 @@ export const DotBadge: StoryFn<typeof Badge> = () => {
 
 export const InlineDotBadge: StoryFn<typeof Badge> = () => {
   return (
-    <TabstripNext
-      variant="inline"
-      defaultValue="Home"
-      align="center"
-      style={{ minWidth: 350 }}
-    >
-      <TabNext value="Home">Home</TabNext>
-      <TabNext value="Transactions" aria-label="Transactions - New">
-        Transactions <Badge />
-      </TabNext>
-      <TabNext value="Loans">Loans</TabNext>
-    </TabstripNext>
+    <TabsNext defaultValue="Home">
+      <TabBar>
+        <TabListNext appearance="transparent" style={{ minWidth: 350 }}>
+          <TabNext value="Home">
+            <TabNextTrigger>Home</TabNextTrigger>
+          </TabNext>
+          <TabNext value="Transactions">
+            <TabNextTrigger aria-label="Transations - New">
+              Transactions
+              <Badge />
+            </TabNextTrigger>
+          </TabNext>
+          <TabNext value="Loans">
+            <TabNextTrigger>Loans</TabNextTrigger>
+          </TabNext>
+        </TabListNext>
+      </TabBar>
+    </TabsNext>
   );
 };
diff --git a/packages/lab/package.json b/packages/lab/package.json
@@ -12,7 +12,6 @@
   "sideEffects": false,
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@fluentui/react-overflow": "^9.0.19",
     "@internationalized/date": "^3.5.5",
     "@salt-ds/core": "workspace:^",
     "@salt-ds/icons": "workspace:^",
@@ -29,6 +28,7 @@
     "react-color": "^2.19.3",
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
+    "tabbable": "^6.0.0",
     "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {