diff --git a/.changeset/olive-hats-invent.md b/.changeset/olive-hats-invent.md index f6bdb66aec..8569865dd0 100644 --- 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 `` to allow overriding truncation for individual cells. When `shouldTruncate` is set to true on ``, `overflow: hidden` is applied to all cells, which can unintentionally clip hover and focus states on LeafyGreen components like `
`, 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` | - | \+ other HTML `td` element props. diff --git a/packages/table/src/Cell/Cell.styles.ts b/packages/table/src/Cell/Cell.styles.ts index b7f80f9331..c045df1c0c 100644 --- 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 index 7a16a0d94d..53ce8b80e5 100644 --- 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 extends BaseCellProps { diff --git a/packages/table/src/Cell/InternalCellWithRT.tsx b/packages/table/src/Cell/InternalCellWithRT.tsx index 62d37175b5..df07578f36 100644 --- a/packages/table/src/Cell/InternalCellWithRT.tsx +++ b/packages/table/src/Cell/InternalCellWithRT.tsx @@ -24,7 +24,6 @@ const InternalCellWithRTForwardRef = ( contentClassName, align, cell, - overrideTruncation = false, ...rest }: InternalCellWithRTProps, ref: ForwardedRef, @@ -53,14 +52,7 @@ const InternalCellWithRTForwardRef = ( disabled={disabled} /> )} -
- {children} -
+
{children}
); }; diff --git a/packages/table/src/Cell/InternalCellWithoutRT.tsx b/packages/table/src/Cell/InternalCellWithoutRT.tsx index 3d0499a6be..0e0758f573 100644 --- 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 ( - -
- {children} -
-
- ); - }, -); + return ( + +
{children}
+
+ ); +}); InternalCellWithoutRT.displayName = 'InternalCellWithoutRT'; diff --git a/packages/table/src/Table.stories.tsx b/packages/table/src/Table.stories.tsx index 5a00fc5fd3..e3408acce0 100644 --- a/packages/table/src/Table.stories.tsx +++ b/packages/table/src/Table.stories.tsx @@ -97,10 +97,7 @@ const Template: StoryFn = args => { {Object.keys(row).map((cellKey: string, index: number) => { return ( - + {index === 6 ? ( = args => { {!isExpandedContent && ( - {row.getVisibleCells().map((cell, index) => { + {row.getVisibleCells().map(cell => { return ( - + {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 index 5b689c7621..88b507edf8 100644 --- a/packages/table/src/Table/TableWithVS.stories.tsx +++ b/packages/table/src/Table/TableWithVS.stories.tsx @@ -799,25 +799,16 @@ export const WithLeafyGreenComponents: StoryFn = args => { {row .getVisibleCells() - .map( - ( - cell: LeafyGreenTableCell, - index: number, - ) => { - return ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ); - }, - )} + .map((cell: LeafyGreenTableCell) => { + return ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ); + })} )} {isExpandedContent && (