revert changes and adds css

mongodb · Feb 5, 2025 · ef040f1 · ef040f1
1 parent 7762d1d
commit ef040f1
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 93 deletions.
diff --git a/.changeset/olive-hats-invent.md b/.changeset/olive-hats-invent.md
@@ -1,11 +1,5 @@
 ---
-'@leafygreen-ui/table': minor
+'@leafygreen-ui/table': patch
 ---
 
-Introduces a new prop, `overrideTruncation`, on `<Cell />` to allow overriding truncation for individual cells. When `shouldTruncate` is set to true on `<Table />`, `overflow: hidden` is applied to all cells, which can unintentionally clip hover and focus states on LeafyGreen components like `<Button />`. Setting `overrideTruncation` to true removes the overflow styles for that specific cell, ensuring interactive elements display correctly.
-
-
-e.g. 
-```js
-<Cell overrrideTruncation>{content}</Cell>
-```
+Adds `css` to ensure interactive styles (e.g., hover and focus) are not clipped within cells.
diff --git a/packages/table/README.md b/packages/table/README.md
@@ -958,10 +958,9 @@ All HTML `tr` element props
 
 ### Cell
 
-| Name                 | Description                                                                                                                                                                                                                | Type                     | Default |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| `cell`               | The cell object that is returned when mapping through a row passed from the `useLeafyGreenTable` or `useLeafyGreenVirtualTable` hook. **Required** if using the `useLeafyGreenTable` or `useLeafyGreenVirtualTable` hooks. | `LeafyGreenTableCell<T>` | -       |
-| `overrideTruncation` | If `shouldTruncation={true}` on `<Table>`, this prop will override truncation for this cell. This is helpful for cells that should never truncate, like buttons or icons since truncation clips hover/focus states.        | `boolean`                | `false` |
+| Name   | Description                                                                                                                                                                                                                | Type                     | Default |
+| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
+| `cell` | The cell object that is returned when mapping through a row passed from the `useLeafyGreenTable` or `useLeafyGreenVirtualTable` hook. **Required** if using the `useLeafyGreenTable` or `useLeafyGreenVirtualTable` hooks. | `LeafyGreenTableCell<T>` | -       |
 
 \+ other HTML `td` element props.
 

diff --git a/packages/table/src/Cell/Cell.styles.ts b/packages/table/src/Cell/Cell.styles.ts
@@ -93,19 +93,16 @@ export const cellInnerStyles = css`
   min-width: 100%;
 `;
 
-export const getCellEllipsisStyles = ({
-  shouldTruncate,
-  overrideTruncation,
-}: {
-  shouldTruncate: boolean;
-  overrideTruncation: boolean;
-}) =>
+export const getCellEllipsisStyles = (shouldTruncate: boolean) =>
   cx({
     [css`
       flex: 1;
-      overflow: ${overrideTruncation ? 'unset' : 'hidden'};
+      overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       contain: inline-size; // 🤯
+      // This a workaround to prevent interactive syles(e.g. hover and focus styles) from clipping because of overflow: hidden
+      margin: -${spacing[100]}px;
+      padding: ${spacing[100]}px;
     `]: shouldTruncate,
   });
diff --git a/packages/table/src/Cell/Cell.types.ts b/packages/table/src/Cell/Cell.types.ts
@@ -26,11 +26,6 @@ interface BaseCellProps extends ComponentPropsWithRef<'td'> {
    * A `className` applied to the inner `div` of the Cell
    */
   contentClassName?: string;
-
-  /**
-   * If shouldTruncation={true} on `Table`, this prop will override truncation for this cell. This is helpful for cells that should never truncate, like buttons or icons since truncation clips hover/focus states.
-   */
-  overrideTruncation?: boolean;
 }
 
 export interface CellProps<T extends LGRowData> extends BaseCellProps {

diff --git a/packages/table/src/Cell/InternalCellWithRT.tsx b/packages/table/src/Cell/InternalCellWithRT.tsx
@@ -24,7 +24,6 @@ const InternalCellWithRTForwardRef = <T extends LGRowData>(
     contentClassName,
     align,
     cell,
-    overrideTruncation = false,
     ...rest
   }: InternalCellWithRTProps<T>,
   ref: ForwardedRef<HTMLTableCellElement>,
@@ -53,14 +52,7 @@ const InternalCellWithRTForwardRef = <T extends LGRowData>(
           disabled={disabled}
         />
       )}
-      <div
-        className={getCellEllipsisStyles({
-          shouldTruncate,
-          overrideTruncation,
-        })}
-      >
-        {children}
-      </div>
+      <div className={getCellEllipsisStyles(shouldTruncate)}>{children}</div>
     </InternalCellBase>
   );
 };

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

diff --git a/packages/table/src/Table.stories.tsx b/packages/table/src/Table.stories.tsx
@@ -97,10 +97,7 @@ const Template: StoryFn<StoryTableProps> = args => {
           <Row key={row.id}>
             {Object.keys(row).map((cellKey: string, index: number) => {
               return (
-                <Cell
-                  key={`${cellKey}-${index}`}
-                  overrideTruncation={index === 6}
-                >
+                <Cell key={`${cellKey}-${index}`}>
                   {index === 6 ? (
                     <Tooltip
                       trigger={
@@ -486,14 +483,9 @@ export const WithButtons: StoryFn<StoryTableProps> = args => {
             <Fragment key={row.id}>
               {!isExpandedContent && (
                 <Row row={row}>
-                  {row.getVisibleCells().map((cell, index) => {
+                  {row.getVisibleCells().map(cell => {
                     return (
-                      <Cell
-                        key={cell.id}
-                        id={cell.id}
-                        cell={cell}
-                        overrideTruncation={index === 5}
-                      >
+                      <Cell key={cell.id} id={cell.id} cell={cell}>
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),

diff --git a/packages/table/src/Table/TableWithVS.stories.tsx b/packages/table/src/Table/TableWithVS.stories.tsx
@@ -799,25 +799,16 @@ export const WithLeafyGreenComponents: StoryFn<StoryTableProps> = args => {
                       <Row row={row} virtualRow={virtualRow}>
                         {row
                           .getVisibleCells()
-                          .map(
-                            (
-                              cell: LeafyGreenTableCell<KitchenSink>,
-                              index: number,
-                            ) => {
-                              return (
-                                <Cell
-                                  key={cell.id}
-                                  cell={cell}
-                                  overrideTruncation={index === 5}
-                                >
-                                  {flexRender(
-                                    cell.column.columnDef.cell,
-                                    cell.getContext(),
-                                  )}
-                                </Cell>
-                              );
-                            },
-                          )}
+                          .map((cell: LeafyGreenTableCell<KitchenSink>) => {
+                            return (
+                              <Cell key={cell.id} cell={cell}>
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext(),
+                                )}
+                              </Cell>
+                            );
+                          })}
                       </Row>
                     )}
                     {isExpandedContent && (