diff --git a/.changeset/old-singers-kneel.md b/.changeset/old-singers-kneel.md new file mode 100644 index 0000000000..066c108208 --- /dev/null +++ b/.changeset/old-singers-kneel.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/table': minor +--- + +Adds `contentClassName` prop, applied to the inner `div` of the Cell diff --git a/.changeset/wicked-impalas-battle.md b/.changeset/wicked-impalas-battle.md new file mode 100644 index 0000000000..2ecac05d91 --- /dev/null +++ b/.changeset/wicked-impalas-battle.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/table': minor +--- + +Adds `overflow` prop to `Cell` component. By default there is no change. When `overflow === 'truncate'`, the styling of the cell is updated (if necessary) to be aligned to the top, with an ellipsis after 2 lines of text. diff --git a/.changeset/wild-ads-explain.md b/.changeset/wild-ads-explain.md new file mode 100644 index 0000000000..6ea3dc291f --- /dev/null +++ b/.changeset/wild-ads-explain.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/table': minor +--- + +Nested rows now support animations for content taller than 40px diff --git a/packages/table/README.md b/packages/table/README.md index aa158a3769..acd08d289c 100644 --- a/packages/table/README.md +++ b/packages/table/README.md @@ -226,11 +226,12 @@ This option determines the alignment of the column. Refer to [Storybook deployme #### Props -| Name | Description | Type | Default | -| ------------------------- | -------------------------------------------------------------- | -------- | ------- | -| `shouldAlternateRowColor` | Determines whether alternating rows will have dark backgrounds | boolean | false | -| `baseFontSize` | The base font size of the title and text rendered in children | 13 \| 16 | 13 | -| `darkMode` | Render the component in dark mode. | boolean | false | +| Name | Description | Type | Default | +| ------------------------- | ------------------------------------------------------------------------------------------- | -------- | ------- | +| `shouldAlternateRowColor` | Determines whether alternating rows will have dark backgrounds | boolean | false | +| `disableAnimations` | Disables all transition animations for smoother rendering of tall content where appropriate | boolean | false | +| `baseFontSize` | The base font size of the title and text rendered in children | 13 \| 16 | 13 | +| `darkMode` | Render the component in dark mode. | boolean | false | \+ other HTML `table` element props @@ -285,7 +286,7 @@ All HTML `tr` element props `Cell` accepts HTML `td` element props. -> The `Cell` component does not automatically handle overflowing text content, as `text-overflow` depends on the element having `overflow: hidden` and an explicit pixel width value. Refer to the LeafyGreen [Storybook deployment](https://mongodb.github.io/leafygreen-ui/) for an example. +> All nested row animations are set at the Cell level, with a `max-height` set to 40vh, which should cover most cases with a relatively smooth animation. For taller content, set `disableAnimation={true}` or override the max-height with a `& > div { max-height: ... }` CSS selector on the `Cell` component. ## Feature Examples diff --git a/packages/table/src/Cell/Cell.styles.ts b/packages/table/src/Cell/Cell.styles.ts index 3743ea93f3..d9df833464 100644 --- a/packages/table/src/Cell/Cell.styles.ts +++ b/packages/table/src/Cell/Cell.styles.ts @@ -1,7 +1,7 @@ import { TransitionStatus } from 'react-transition-group'; import { css } from '@leafygreen-ui/emotion'; -import { spacing, transitionDuration } from '@leafygreen-ui/tokens'; +import { spacing, transitionDuration, typeScales } from '@leafygreen-ui/tokens'; import { Align } from './Cell.types'; @@ -17,7 +17,6 @@ export const standardCellHeight = spacing[5] + spacing[2]; export const baseCellStyles = css` padding: 0 8px; overflow: hidden; - text-overflow: ellipsis; &:focus-visible { box-shadow: inset; @@ -75,29 +74,47 @@ export const basicCellStyles = css` } `; -export const cellContentContainerStyles = css` +export const cellTransitionContainerStyles = css` display: flex; align-items: center; - text-overflow: ellipsis; - transition: ${transitionDuration.default}ms ease-in-out; - transition-property: min-height, max-height, opacity, transform; min-height: ${standardCellHeight}px; + transition-property: min-height, max-height, opacity, padding, transform; + transition-duration: ${transitionDuration.default}ms; + transition-timing-function: ease; `; -const _hiddenStyles = css` - opacity: 0; - min-height: 0; - max-height: 0; +export const truncatedContentStyles = css` + /* See https://css-tricks.com/line-clampin/#aa-the-standardized-way */ + display: -webkit-box; + -webkit-line-clamp: ${standardCellHeight / typeScales.body1.lineHeight}; + -webkit-box-orient: vertical; + -webkit-box-align: start; `; -export const cellContentTransitionStyles: Record = { - entered: css` - opacity: 1; - min-height: ${standardCellHeight}px; - max-height: ${standardCellHeight}px; - `, - entering: _hiddenStyles, - exiting: _hiddenStyles, - exited: _hiddenStyles, - unmounted: _hiddenStyles, +export const disableAnimationStyles = css` + transition-duration: 0; + transition: none; +`; + +export const cellContentTransitionStateStyles = ( + height?: number, +): Record => { + const _hiddenStyles = css` + opacity: 0; + min-height: 0; + max-height: 0; + overflow: hidden; + `; + + return { + entered: css` + opacity: 1; + min-height: ${standardCellHeight}px; + max-height: ${height ? height + 'px' : 'unset'}; + `, + entering: _hiddenStyles, + exiting: _hiddenStyles, + exited: _hiddenStyles, + unmounted: _hiddenStyles, + }; }; diff --git a/packages/table/src/Cell/Cell.tsx b/packages/table/src/Cell/Cell.tsx index c654f03694..f13c11b6f4 100644 --- a/packages/table/src/Cell/Cell.tsx +++ b/packages/table/src/Cell/Cell.tsx @@ -2,21 +2,40 @@ import React from 'react'; import { cx } from '@leafygreen-ui/emotion'; +import { useTableContext } from '../TableContext'; + import { alignmentStyles, baseCellStyles, basicCellStyles, - cellContentContainerStyles, + cellTransitionContainerStyles, + disableAnimationStyles, } from './Cell.styles'; import { CellProps } from '.'; -const Cell = ({ className, align, children, ...rest }: CellProps) => ( - -
- {children} -
- -); +const Cell = ({ + className, + contentClassName, + align, + children, + ...rest +}: CellProps) => { + const { disableAnimations } = useTableContext(); + return ( + +
+ {children} +
+ + ); +}; Cell.displayName = 'Cell'; diff --git a/packages/table/src/Cell/Cell.types.ts b/packages/table/src/Cell/Cell.types.ts index 718647de57..d1755940f0 100644 --- a/packages/table/src/Cell/Cell.types.ts +++ b/packages/table/src/Cell/Cell.types.ts @@ -5,40 +5,66 @@ export type Align = Extract< 'left' | 'right' | 'center' >; -interface AlignProp { +export const CellOverflowBehavior = { + Default: 'default', + Truncate: 'truncate', + // TODO: `Expand`: The cell will expand to the height of its content + // Expand: 'expand', +} as const; +export type CellOverflowBehavior = + (typeof CellOverflowBehavior)[keyof typeof CellOverflowBehavior]; + +interface BaseCellProps extends HTMLElementProps<'td'> { /** * Alignment of the cell's contents * * Overrides ``'s deprecated `align` prop */ align?: Align; + + /** A `className` applied to the inner `div` of the Cell */ + contentClassName?: string; + + /** + * Defines how a cell should behave when its content is larger than the standard cell height. + * + * `Default`: The cell height will be fixed to the standard cell height (40px by default). + * Any overflowing content will be clipped. + * + * `Truncate`: The cell height will be fixed to the standard cell height (40px by default), + * and include an ellipsis before the content is clipped. + * + * Note: It's recommended to provide the same value for all cells in a given row. + * + * @default CellOverflowBehavior.Default + */ + overflow?: CellOverflowBehavior; } -export type CellProps = HTMLElementProps<'td'> & AlignProp; - -export type InternalCellProps = CellProps & - AlignProp & { - /** - * Index of the cell in its parent row. - */ - cellIndex: number; - - /** - * Depth of nesting its parent row has. - */ - depth: number; - - /** - * Defines whether the cell's row is visible (i.e. expanded) - * - * @default true - */ - isVisible?: boolean; - - /** - * Defines whether the cell's row is expandable - * - * @default false - */ - isExpandable?: boolean; - }; +export type CellProps = BaseCellProps; + +export interface InternalCellProps extends BaseCellProps { + /** + * Index of the cell in its parent row. + */ + cellIndex: number; + + /** + * Depth of nesting its parent row has. + */ + depth: number; + + /** + * Defines whether the cell's row is visible (i.e. expanded) + * + * @default true + */ + isVisible?: boolean; + + /** + * Defines whether the cell's row is expandable + * + * @default false + */ + isExpandable?: boolean; +} diff --git a/packages/table/src/Cell/HeaderCell/HeaderCell.tsx b/packages/table/src/Cell/HeaderCell/HeaderCell.tsx index 7126700ea8..7079ef836d 100644 --- a/packages/table/src/Cell/HeaderCell/HeaderCell.tsx +++ b/packages/table/src/Cell/HeaderCell/HeaderCell.tsx @@ -2,12 +2,12 @@ import React, { PropsWithChildren } from 'react'; import { cx } from '@leafygreen-ui/emotion'; -import { useTableContext } from '../../TableContext/TableContext'; +import { useTableContext } from '../../TableContext'; import { LGRowData } from '../../useLeafyGreenTable'; import { alignmentStyles, baseCellStyles, - cellContentContainerStyles, + cellTransitionContainerStyles, getCellPadding, } from '../Cell.styles'; @@ -65,7 +65,7 @@ const HeaderCell = ({ >
{ const isFirstCell = cellIndex === 0; - const { table } = useTableContext(); + const { table, disableAnimations } = useTableContext(); const isSelectable = !!table && !!table.hasSelectableRows; const transitionRef = useRef(null); + const contentRef = useRef(null); + const contentHeight = standardCellHeight; + const scrollHeight = contentRef.current + ? contentRef.current?.scrollHeight + : 0; + const shouldTruncate = useMemo(() => { + return ( + overflow === CellOverflowBehavior.Truncate && scrollHeight > contentHeight + ); + }, [contentHeight, overflow, scrollHeight]); return ( (
{children} diff --git a/packages/table/src/ExpandedContent/ExpandedContent.spec.tsx b/packages/table/src/ExpandedContent/ExpandedContent.spec.tsx index 3f7598453a..6350035b06 100644 --- a/packages/table/src/ExpandedContent/ExpandedContent.spec.tsx +++ b/packages/table/src/ExpandedContent/ExpandedContent.spec.tsx @@ -13,7 +13,7 @@ import { Table } from '..'; import ExpandedContent from './ExpandedContent'; -const RowWithExpandableContent = () => { +const RowWithExpandableContent = args => { const { containerRef, table } = useTestHookCall({ rowProps: { // eslint-disable-next-line react/display-name @@ -25,7 +25,7 @@ const RowWithExpandableContent = () => { return (
- +
{table.getHeaderGroups().map(headerGroup => ( @@ -90,4 +90,27 @@ describe('packages/table/Row/ExpandableContent', () => { expect(collapseIconButton).toBeInTheDocument(); expect(queryByText('Expandable content test')).toBeInTheDocument(); }); + + describe('disabled animations', () => { + test('renders the correct number of cell children with disabled animations', () => { + const { getAllByRole: getAllByRoleLocal } = render( + , + ); + const firstRow = getAllByRoleLocal('row')[1]; + expect(getAllByRole(firstRow, 'cell').length).toBe(6); + }); + test('rows with expandable content render expand icon button with disabled animations', async () => { + const { getByLabelText } = render( + , + ); + const expandIconButton = getByLabelText('Expand row'); + expect(expandIconButton).toBeInTheDocument(); + }); + test('rows with expandable content render rows as tbody elements with disabled animations', async () => { + const { getAllByRole } = render( + , + ); + expect(getAllByRole('rowgroup').length).toBe(4); // 1 for thead, 3 for tbody + }); + }); }); diff --git a/packages/table/src/ExpandedContent/ExpandedContent.styles.ts b/packages/table/src/ExpandedContent/ExpandedContent.styles.ts index e1f9492945..857fd28e61 100644 --- a/packages/table/src/ExpandedContent/ExpandedContent.styles.ts +++ b/packages/table/src/ExpandedContent/ExpandedContent.styles.ts @@ -1,13 +1,12 @@ -import { TransitionStatus } from 'react-transition-group'; - import { css } from '@leafygreen-ui/emotion'; import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; -import { spacing } from '@leafygreen-ui/tokens'; +import { transitionDuration } from '@leafygreen-ui/tokens'; export const baseStyles = css` padding: 0; overflow: hidden; + transition: ${transitionDuration.default}ms ease; `; export const expandedContentStyles: Record = { @@ -18,26 +17,3 @@ export const expandedContentStyles: Record = { background-color: ${palette.gray.light3}; `, }; - -const _hiddenStyles = css` - opacity: 0; - min-height: 0; - max-height: 0; - overflow: hidden; -`; - -export const expandedContentTransitionStyles = ( - height: number, -): Record => { - return { - entered: css` - opacity: 1; - min-height: ${spacing[5] + spacing[2]}px; - max-height: ${height}px; - `, - entering: _hiddenStyles, - exiting: _hiddenStyles, - exited: _hiddenStyles, - unmounted: _hiddenStyles, - }; -}; diff --git a/packages/table/src/ExpandedContent/ExpandedContent.tsx b/packages/table/src/ExpandedContent/ExpandedContent.tsx index d1442c6317..4f68e691ff 100644 --- a/packages/table/src/ExpandedContent/ExpandedContent.tsx +++ b/packages/table/src/ExpandedContent/ExpandedContent.tsx @@ -5,23 +5,23 @@ import { RowData } from '@tanstack/react-table'; import { cx } from '@leafygreen-ui/emotion'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -import { cellContentContainerStyles } from '../Cell/Cell.styles'; +import { + cellContentTransitionStateStyles, + cellTransitionContainerStyles, + disableAnimationStyles, +} from '../Cell/Cell.styles'; import InternalRowBase from '../Row/InternalRowBase'; -import { useTableContext } from '../TableContext/TableContext'; +import { useTableContext } from '../TableContext'; import { getAreAncestorsExpanded } from '../utils/areAncestorsExpanded'; -import { - baseStyles, - expandedContentStyles, - expandedContentTransitionStyles, -} from './ExpandedContent.styles'; +import { baseStyles, expandedContentStyles } from './ExpandedContent.styles'; import { ExpandedContentProps } from './ExpandedContent.types'; const ExpandedContent = ({ row, ...rest }: ExpandedContentProps) => { - const { getParentRow } = useTableContext(); + const { disableAnimations, getParentRow } = useTableContext(); const contentRef = useRef(null); const transitionRef = useRef(null); const areAncestorsExpanded = getAreAncestorsExpanded(row.id, getParentRow); @@ -49,9 +49,10 @@ const ExpandedContent = ({
{content}
diff --git a/packages/table/src/Row/InternalRowWithRT.tsx b/packages/table/src/Row/InternalRowWithRT.tsx index cca79bfa06..527e845f18 100644 --- a/packages/table/src/Row/InternalRowWithRT.tsx +++ b/packages/table/src/Row/InternalRowWithRT.tsx @@ -7,7 +7,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { HTMLElementProps, isComponentType } from '@leafygreen-ui/lib'; import { Polymorph } from '@leafygreen-ui/polymorphic'; -import { useTableContext } from '../TableContext/TableContext'; +import { useTableContext } from '../TableContext'; import { LGRowData } from '../useLeafyGreenTable'; import InternalRowBase from './InternalRowBase'; diff --git a/packages/table/src/Row/InternalRowWithoutRT.tsx b/packages/table/src/Row/InternalRowWithoutRT.tsx index e7035f58ba..7c680ad572 100644 --- a/packages/table/src/Row/InternalRowWithoutRT.tsx +++ b/packages/table/src/Row/InternalRowWithoutRT.tsx @@ -4,7 +4,7 @@ import { cx } from '@leafygreen-ui/emotion'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { consoleOnce, isComponentType } from '@leafygreen-ui/lib'; -import { useTableContext } from '../TableContext/TableContext'; +import { useTableContext } from '../TableContext'; import InternalRowBase from './InternalRowBase'; import { zebraStyles } from './Row.styles'; diff --git a/packages/table/src/Row/NestedRows.spec.tsx b/packages/table/src/Row/NestedRows.spec.tsx index 36d61c03f4..dd6dd09603 100644 --- a/packages/table/src/Row/NestedRows.spec.tsx +++ b/packages/table/src/Row/NestedRows.spec.tsx @@ -12,7 +12,7 @@ import { Table } from '..'; import { Row } from '.'; -const RowWithNestedRows = () => { +const RowWithNestedRows = args => { const { containerRef, table } = useTestHookCall({ rowProps: { subRows: [ @@ -32,7 +32,7 @@ const RowWithNestedRows = () => { return (
-
+
{table.getHeaderGroups().map(headerGroup => ( @@ -108,4 +108,25 @@ describe('packages/table/Row/NestedRows', () => { // the line below is not reliable as the row is expanded - the height is just 0 expect(queryByText('nested row name')).toBeVisible(); }); + + describe('disabled animations', () => { + test('renders the correct number of children', () => { + const { getAllByRole: getAllByRoleLocal } = render( + , + ); + const firstRow = getAllByRoleLocal('row')[1]; + expect(getAllByRole(firstRow, 'cell').length).toBe(6); + }); + test('rows with nested rows render expand icon button', async () => { + const { getByLabelText } = render( + , + ); + const expandIconButton = getByLabelText('Expand row'); + expect(expandIconButton).toBeInTheDocument(); + }); + test('having a row with nested rows render all rows as tbody elements', async () => { + const { getAllByRole } = render(); + expect(getAllByRole('rowgroup').length).toBe(4); // 1 for thead, 3 for tbody + }); + }); }); diff --git a/packages/table/src/Row/RowCellChildren.tsx b/packages/table/src/Row/RowCellChildren.tsx index b7218f8a91..eebf588282 100644 --- a/packages/table/src/Row/RowCellChildren.tsx +++ b/packages/table/src/Row/RowCellChildren.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, ReactNode } from 'react'; import InternalCell from '../Cell/InternalCell'; -import { useTableContext } from '../TableContext/TableContext'; +import { useTableContext } from '../TableContext'; import ToggleExpandedIcon from '../ToggleExpandedIcon'; import { LGRowData } from '../useLeafyGreenTable'; import { getAreAncestorsExpanded } from '../utils/areAncestorsExpanded'; diff --git a/packages/table/src/Table.story.tsx b/packages/table/src/Table.story.tsx index 4ff3a46c48..3c57323784 100644 --- a/packages/table/src/Table.story.tsx +++ b/packages/table/src/Table.story.tsx @@ -43,6 +43,7 @@ const meta: StoryMetaType = { component: Table, argTypes: { shouldAlternateRowColor: { control: 'boolean' }, + disableAnimations: { control: 'boolean' }, }, parameters: { default: 'LiveExample', @@ -198,7 +199,7 @@ export const LiveExample: StoryFn = args => { {row.getVisibleCells().map(cell => { return ( - + {flexRender(cell.column.columnDef.cell, cell.getContext())} ); @@ -208,7 +209,7 @@ export const LiveExample: StoryFn = args => { {subRow.getVisibleCells().map(cell => { return ( - + {flexRender( cell.column.columnDef.cell, cell.getContext(), @@ -235,6 +236,14 @@ LiveExample.argTypes = { }, }; +export const AnimationsDisabled: StoryFn = args => { + return ; +}; + +AnimationsDisabled.args = { + disableAnimations: true, +}; + export const Basic = Template.bind({}); export const ZebraStripes = Template.bind({}); @@ -267,6 +276,7 @@ export const OverflowingCell: StoryFn = args => { width: '80px', textOverflow: 'ellipsis', overflow: 'hidden', + whiteSpace: 'nowrap', }} > {row[cellKey]} diff --git a/packages/table/src/Table/Table.tsx b/packages/table/src/Table/Table.tsx index 068ef0d202..4e9b3e8f7b 100644 --- a/packages/table/src/Table/Table.tsx +++ b/packages/table/src/Table/Table.tsx @@ -9,7 +9,7 @@ import { useUpdatedBaseFontSize, } from '@leafygreen-ui/typography'; -import TableContextProvider from '../TableContext/TableContext'; +import { TableContextProvider } from '../TableContext'; import { LGRowData } from '../useLeafyGreenTable'; import { baseStyles, tableContainerStyles, themeStyles } from './Table.styles'; @@ -25,6 +25,7 @@ const Table = forwardRef>( baseFontSize: baseFontSizeProp, darkMode: darkModeProp, table, + disableAnimations = false, ...rest }: TableProps, containerRef: ForwardedRef, @@ -44,6 +45,7 @@ const Table = forwardRef>( shouldAlternateRowColor={shouldAlternateRowColor} darkMode={darkMode} table={table} + disableAnimations={disableAnimations} >
* The `useLeafyGreenTable` return value */ table?: LeafyGreenTable; + + /** + * Disables all transition animations for smoother rendering of tall content where appropriate + * @default false + */ + disableAnimations?: boolean; } diff --git a/packages/table/src/TableBody/TableBody.tsx b/packages/table/src/TableBody/TableBody.tsx index 24ef47e66b..35d409fd01 100644 --- a/packages/table/src/TableBody/TableBody.tsx +++ b/packages/table/src/TableBody/TableBody.tsx @@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react'; import { Polymorph } from '@leafygreen-ui/polymorphic'; -import { useTableContext } from '../TableContext/TableContext'; +import { useTableContext } from '../TableContext'; import { TableBodyProps } from './TableBody.types'; diff --git a/packages/table/src/TableContext/TableContext.tsx b/packages/table/src/TableContext/TableContext.tsx index b80e05084d..83f88cbca7 100644 --- a/packages/table/src/TableContext/TableContext.tsx +++ b/packages/table/src/TableContext/TableContext.tsx @@ -21,6 +21,7 @@ const TableContextProvider = ({ darkMode, table, shouldAlternateRowColor, + disableAnimations, }: PropsWithChildren>>) => { const getRowById = (id?: string) => id ? table?.getRowModel().rowsById?.[id] : undefined; @@ -40,6 +41,7 @@ const TableContextProvider = ({ getRowById, getParentRow, shouldAlternateRowColor, + disableAnimations, }} > {children} diff --git a/packages/table/src/TableContext/TableContext.types.ts b/packages/table/src/TableContext/TableContext.types.ts index fa90b5f5bf..49d0d05a1c 100644 --- a/packages/table/src/TableContext/TableContext.types.ts +++ b/packages/table/src/TableContext/TableContext.types.ts @@ -10,7 +10,7 @@ import { } from '../useLeafyGreenTable'; export type TableContextValues = PropsWithChildren< - Pick, 'table' | 'shouldAlternateRowColor'> + Pick, 'table' | 'shouldAlternateRowColor' | 'disableAnimations'> > & DarkModeProps & { /** returns the table row object with the provided `id` */ diff --git a/packages/table/src/TableContext/index.ts b/packages/table/src/TableContext/index.ts new file mode 100644 index 0000000000..fefd6a718d --- /dev/null +++ b/packages/table/src/TableContext/index.ts @@ -0,0 +1,4 @@ +import TableContextProvider, { useTableContext } from './TableContext'; +import { TableContextValues } from './TableContext.types'; + +export { TableContextProvider, type TableContextValues, useTableContext }; diff --git a/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.styles.tsx b/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.styles.tsx index a95e06f350..00693061e7 100644 --- a/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.styles.tsx +++ b/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.styles.tsx @@ -3,7 +3,7 @@ import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { transitionDuration } from '@leafygreen-ui/tokens'; -export const iconButtonStyles = css` +export const iconButtonTransitionStyles = css` transition: transform ${transitionDuration.default}ms ease-in-out; `; diff --git a/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.tsx b/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.tsx index 1316e5d7a2..b8408c1488 100644 --- a/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.tsx +++ b/packages/table/src/ToggleExpandedIcon/ToggleExpandedIcon.tsx @@ -6,8 +6,10 @@ import Icon from '@leafygreen-ui/icon'; import IconButton from '@leafygreen-ui/icon-button'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import { useTableContext } from '../TableContext'; + import { - iconButtonStyles, + iconButtonTransitionStyles, iconFills, rotatedStyles, } from './ToggleExpandedIcon.styles'; @@ -23,14 +25,16 @@ const ToggleExpandedIcon = ({ ...rest }: ToggleExpandedIconProps) => { const { theme } = useDarkMode(); + const { disableAnimations } = useTableContext(); return ( diff --git a/packages/table/src/utils/areAncestorsExpanded.ts b/packages/table/src/utils/areAncestorsExpanded.ts index 2c7a23c688..1436363ade 100644 --- a/packages/table/src/utils/areAncestorsExpanded.ts +++ b/packages/table/src/utils/areAncestorsExpanded.ts @@ -1,4 +1,4 @@ -import { TableContextValues } from '../TableContext/TableContext.types'; +import { TableContextValues } from '../TableContext'; import { LGRowData } from '../useLeafyGreenTable'; /** diff --git a/packages/table/src/utils/makeData.testutils.tsx b/packages/table/src/utils/makeData.testutils.tsx index e10251a68a..34b2fbee83 100644 --- a/packages/table/src/utils/makeData.testutils.tsx +++ b/packages/table/src/utils/makeData.testutils.tsx @@ -99,7 +99,11 @@ const createKitchenSinkData: (depth?: number) => object = (depth = 0) => { return { dateCreated: faker.date.past({ refDate: new Date('2023-12-26') }), frequency: faker.helpers.arrayElement(['Daily', 'Weekly', 'Monthly']), - clusterType: faker.helpers.arrayElement(['Replica set', 'Sharded cluster']), + clusterType: faker.helpers.weightedArrayElement([ + { value: 'Replica set', weight: 0.45 }, + { value: 'Sharded cluster', weight: 0.45 }, + { value: faker.lorem.lines(2), weight: 0.1 }, + ]), encryptorEnabled: faker.datatype.boolean(0.75), mdbVersion: faker.system.semver(), subRows: diff --git a/packages/tooltip/src/Tooltip/Tooltip.spec.tsx b/packages/tooltip/src/Tooltip/Tooltip.spec.tsx index 1aeb45f77b..79212553b1 100644 --- a/packages/tooltip/src/Tooltip/Tooltip.spec.tsx +++ b/packages/tooltip/src/Tooltip/Tooltip.spec.tsx @@ -571,12 +571,12 @@ describe('packages/tooltip', () => { }); }); - test('LeafyGreen UI Icon is passed to trigger', () => { + test('LeafyGreen UI Icon is passed to trigger', async () => { render( }>TooltipContent, ); - waitFor(() => { + await waitFor(() => { expect(warn).toHaveBeenCalledTimes(1); expect(warn).toHaveBeenCalledWith(expectedWarnMsg); });