basic example

mongodb · Feb 3, 2025 · 1bbc630 · 1bbc630
1 parent 5768f7b
commit 1bbc630
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 21 deletions.
diff --git a/packages/table/package.json b/packages/table/package.json
@@ -31,7 +31,6 @@
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/polymorphic": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
-    "@leafygreen-ui/tooltip": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^",
     "@tanstack/react-table": "^8.20.5",
@@ -46,7 +45,8 @@
     "@leafygreen-ui/code": "workspace:^",
     "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/badge": "workspace:^",
-    "@leafygreen-ui/pagination": "workspace:^"
+    "@leafygreen-ui/pagination": "workspace:^",
+    "@leafygreen-ui/tooltip": "workspace:^"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "workspace:^"

diff --git a/packages/table/src/Cell/InternalCellWithoutRT.tsx b/packages/table/src/Cell/InternalCellWithoutRT.tsx
@@ -14,19 +14,36 @@ import { InternalCellProps } from '.';
 const InternalCellWithoutRT = forwardRef<
   HTMLTableCellElement,
   InternalCellProps
->(({ children, className, ...rest }: InternalCellProps, fwdRef) => {
-  const { shouldTruncate = true } = useTableContext();
+>(
+  (
+    {
+      children,
+      className,
+      overrideTruncation = false,
+      ...rest
+    }: InternalCellProps,
+    fwdRef,
+  ) => {
+    const { shouldTruncate = true } = useTableContext();
 
-  return (
-    <InternalCellBase
-      ref={fwdRef}
-      className={cx(getCellStyles(), className)}
-      {...rest}
-    >
-      <div className={getCellEllipsisStyles(shouldTruncate)}>{children}</div>
-    </InternalCellBase>
-  );
-});
+    return (
+      <InternalCellBase
+        ref={fwdRef}
+        className={cx(getCellStyles(), className)}
+        {...rest}
+      >
+        <div
+          className={getCellEllipsisStyles({
+            shouldTruncate,
+            overrideTruncation,
+          })}
+        >
+          {children}
+        </div>
+      </InternalCellBase>
+    );
+  },
+);
 
 InternalCellWithoutRT.displayName = 'InternalCellWithoutRT';
 

diff --git a/packages/table/src/Table.stories.tsx b/packages/table/src/Table.stories.tsx
@@ -96,7 +96,26 @@ const Template: StoryFn<StoryTableProps> = args => {
         {data.map((row: AnyDict) => (
           <Row key={row.id}>
             {Object.keys(row).map((cellKey: string, index: number) => {
-              return <Cell key={`${cellKey}-${index}`}>{row[cellKey]}</Cell>;
+              return (
+                <Cell
+                  key={`${cellKey}-${index}`}
+                  overrideTruncation={index === 6}
+                >
+                  {index === 6 ? (
+                    <Tooltip
+                      trigger={
+                        <Button type="button" size="small">
+                          {row[cellKey]}
+                        </Button>
+                      }
+                    >
+                      {"I'm leafy, you're leafy"}
+                    </Tooltip>
+                  ) : (
+                    row[cellKey]
+                  )}
+                </Cell>
+              );
             })}
           </Row>
         ))}
@@ -492,6 +511,11 @@ export const WithButtons: StoryFn<StoryTableProps> = args => {
     </Table>
   );
 };
+WithButtons.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
 
 export const NoTruncation = LiveExample.bind({});
 NoTruncation.args = {

diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json
@@ -52,9 +52,6 @@
     {
       "path": "../tokens"
     },
-    {
-      "path": "../tooltip"
-    },
     {
       "path": "../typography"
     },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,9 +52,6 @@ @@
         {
           "path": "../tokens"
         },
-        {
-          "path": "../tooltip"
-        },
         {
           "path": "../typography"
         },
@@ Expand Down @@