Skip to content

Commit

Permalink
Table column vertical alignment (#2547)
Browse files Browse the repository at this point in the history
* wip

* wip

* updating stories

* lg virtual item

* top styles

* remove padding from TableBody

* expanded row background color

* removing stuff

* row context

* memoizing stuff

* wip

* styled components

* comments

* more cleanup

* clean up

* comments

* wip, memoize regular table

* testing

* huh

* why does this work?

* testing why nothing works

* clean up

* update virtual stories

* clean up

* cleanup

* row types

* types

* should truncate support

* remove memo from useLeafyGreenVirtualTable

* remove unsed exports

* add a new story

* widths and vertical align

* dynamic ellipsis

* comment

* combined components

* cell generic type

* update types

* align styles

* Prerelease version packages 13.0.0-beta.0

* fix install error

* Prerelease version packages 13.0.0-beta.1

* comment, wip

* revert useLeafyGreenTable hook so its consistent with a virtual table

* add getItemKey

* small fix

* stop mapping columns def

* testing

* debugging

* tbody updates

* css vars

* add virtual context

* remove comment

* remove measureElement from hook

* row context updates

* remove overflow from regular table

* updates virtual types

* more TS docs

* ts fixes

* row TS docs

* TS docs stuff

* fix comment

* add react-intersection-observer

* wip

* remove original from rowCopy

* story clean up

* remove v10 and v11 adapter

* remove react-virtual

* cell styles

* interrowwithRT style updates

* table styles

* comment

* comment

* wip

* story with less rows

* move box-shadow to headerRow

* darken darkmode scroll shadow

* move styles

* alignment

* remove comment

* add test

* remove comments

* testing removing styled components

* add back styled

* diff react-intersection-observer version

* yarn lonk

* cell ternary, headercell util, expandedcontent styles

* fb - toggleExpand, isVirtual boolean, type casting, tsdocs

* virtual scrolling padding util

* forgot to save

* fb - remove virtual context

* custom row model

* styledcomponent stuff, TS still not correct

* callable virtual items

* update ts docs

* token

* use classname

* move interaction test

* use a classname

* remove id

* remove ?

* fix broken stories

* interaction rename and args

* story heights

* add back color

* update stories

* remove InternalCell file

* new story

* fix row stories

* update rows stories

* revert some story changes

* revert some more story changes

* use classname

* revert some story changes
  • Loading branch information
shaneeza authored Nov 22, 2024
1 parent 2a2f2c6 commit e587873
Show file tree
Hide file tree
Showing 11 changed files with 138 additions and 96 deletions.
30 changes: 17 additions & 13 deletions packages/table/src/Cell/Cell.styles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { css } from '@leafygreen-ui/emotion';
import { css, cx } from '@leafygreen-ui/emotion';
import { spacing } from '@leafygreen-ui/tokens';

import { VerticalAlignment } from '../Table/Table.types';

import { Align } from './Cell.types';

/** The base left & right padding in the table */
Expand Down Expand Up @@ -67,10 +69,12 @@ export const getCellContainerStyles = (align: Align = 'left') => css`
text-align: ${align};
`;

export const baseCellStyles = css`
export const getBaseCellStyles = (
verticalAlignment: VerticalAlignment = VerticalAlignment.Top,
) => css`
padding: 0 ${spacing[200]}px;
overflow: hidden;
vertical-align: top;
vertical-align: ${verticalAlignment};
&:focus-visible {
box-shadow: inset;
Expand All @@ -87,13 +91,13 @@ export const cellInnerStyles = css`
min-width: 100%;
`;

export const getCellEllipsisStyles = (shouldTruncate: boolean) => css`
${shouldTruncate &&
css`
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
contain: inline-size; // 🤯
`}
`;
export const getCellEllipsisStyles = (shouldTruncate: boolean) =>
cx({
[css`
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
contain: inline-size; // 🤯
`]: shouldTruncate,
});
4 changes: 2 additions & 2 deletions packages/table/src/Cell/HeaderCell/HeaderCell.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
import { spacing } from '@leafygreen-ui/tokens';

import {
baseCellStyles,
getBaseCellStyles,
getCellContainerStyles,
getCellPadding,
} from '../Cell.styles';
Expand All @@ -14,7 +14,7 @@ export const headerCellContentStyles = css`

export const getBaseHeaderCellStyles = (size: number, isSelectable?: boolean) =>
cx(
baseCellStyles,
getBaseCellStyles(),
css`
&:first-of-type {
${getCellPadding({ depth: 0, isExpandable: false, isSelectable })}
Expand Down
36 changes: 0 additions & 36 deletions packages/table/src/Cell/InternalCell.tsx

This file was deleted.

6 changes: 4 additions & 2 deletions packages/table/src/Cell/InternalCellBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
import { cx } from '@leafygreen-ui/emotion';

import { LGIDS } from '../constants';
import { useTableContext } from '../TableContext';

import {
baseCellStyles,
cellInnerStyles,
getBaseCellStyles,
getCellContainerStyles,
} from './Cell.styles';
import { InternalCellProps } from './Cell.types';
Expand All @@ -25,10 +26,11 @@ const InternalCellBase = forwardRef<HTMLTableCellElement, InternalCellProps>(
}: InternalCellProps,
fwdRref,
) => {
const { verticalAlignment } = useTableContext();
return (
<td
data-lgid={LGIDS.cell}
className={cx(baseCellStyles, className)}
className={cx(getBaseCellStyles(verticalAlignment), className)}
ref={fwdRref}
{...rest}
>
Expand Down
61 changes: 46 additions & 15 deletions packages/table/src/Row/Row.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
import { StoryFn } from '@storybook/react';

import Button from '@leafygreen-ui/button';
import { css } from '@leafygreen-ui/emotion';
import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
import { DarkModeProps } from '@leafygreen-ui/lib';

Expand All @@ -33,21 +34,22 @@ import {
RowProps,
} from '..';

// TODO: UPDATE ME

const meta: StoryMetaType<typeof Row> = {
title: 'Components/Table/Row',
component: Row,
argTypes: {
virtualRow: { control: 'none' },
row: { control: 'none' },
className: { control: 'none' },
disabled: { control: 'boolean' },
},
parameters: {
default: null,
controls: {
exclude: [...storybookExcludedControlParams, 'ref', 'children'],
exclude: [
...storybookExcludedControlParams,
'ref',
'children',
'row',
'virtualRow',
],
},
chromatic: {
disableSnapshot: true,
Expand All @@ -61,18 +63,45 @@ const meta: StoryMetaType<typeof Row> = {
combineArgs: {
darkMode: [false, true],
disabled: [false, true],
// @ts-ignore - this is a table prop
shouldTruncate: [false, true],
verticalAlignment: ['top', 'center'],
},
args: {
children: makeData(false, 1).map(rowData =>
Object.values(rowData).map(c => <Cell>{c}</Cell>),
),
},
excludeCombinations: [
{
// @ts-ignore - this is a table prop
shouldTruncate: true,
verticalAlignment: 'center',
},
],
decorator: (Instance, ctx) => {
return (
<LeafyGreenProvider darkMode={ctx?.args.darkMode}>
<Table>
<Table
shouldTruncate={ctx?.args.shouldTruncate}
verticalAlignment={ctx?.args.verticalAlignment}
>
<TableBody>
<Instance />
<Instance>
<Cell
className={css`
width: 60px;
`}
>
1
</Cell>
<Cell
className={css`
width: 200px;
`}
>
Est mollitia laborum dolores dolorem corporis explicabo
nobis enim omnis. Minima excepturi accusantium iure culpa.
</Cell>
<Cell>MongoDB</Cell>
<Cell>7.85</Cell>
<Cell>Complicated</Cell>
</Instance>
</TableBody>
</Table>
</LeafyGreenProvider>
Expand Down Expand Up @@ -242,7 +271,6 @@ DisabledClickableRows.args = {
export const DisabledSelectableRows: StoryFn<
RowProps<Person> & DarkModeProps
> = ({ darkMode, ...args }: DarkModeProps & RowProps<Person>) => {
const tableContainerRef = React.useRef<HTMLDivElement>(null);
const data = React.useState(() => makeData(false, 100))[0];
const [rowSelection, setRowSelection] = React.useState({});

Expand Down Expand Up @@ -326,7 +354,6 @@ export const DisabledSelectableRows: StoryFn<
<Table
darkMode={darkMode}
table={table}
ref={tableContainerRef}
data-total-rows={table.getRowModel().rows.length}
>
<TableHead>
Expand Down Expand Up @@ -371,4 +398,8 @@ DisabledSelectableRows.argTypes = {
darkMode: storybookArgTypes.darkMode,
};

DisabledSelectableRows.args = {
disabled: true,
};

export const Generated = () => <></>;
31 changes: 18 additions & 13 deletions packages/table/src/Table.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Icon from '@leafygreen-ui/icon';
import IconButton from '@leafygreen-ui/icon-button';
import Pagination, { PaginationProps } from '@leafygreen-ui/pagination';

import { VerticalAlignment } from './Table/Table.types';
import {
makeData,
makeKitchenSinkData,
Expand Down Expand Up @@ -42,7 +43,18 @@ const meta: StoryMetaType<typeof Table> = {
title: 'Components/Table',
component: Table,
argTypes: {
shouldAlternateRowColor: { control: 'boolean' },
shouldAlternateRowColor: { control: 'boolean', defaultValue: false },
shouldTruncate: { control: 'boolean', defaultValue: true },
verticalAlignment: {
control: { type: 'radio' },
options: VerticalAlignment,
defaultValue: VerticalAlignment.Top,
},
},
args: {
verticalAlignment: VerticalAlignment.Top,
shouldTruncate: true,
shouldAlternateRowColor: false,
},
parameters: {
default: 'LiveExample',
Expand Down Expand Up @@ -220,12 +232,6 @@ export const LiveExample: StoryFn<StoryTableProps> = args => {
);
};

LiveExample.argTypes = {
shouldAlternateRowColor: {
control: 'none',
},
};

export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
const tableContainerRef = React.useRef<HTMLDivElement>(null);
const [data] = useState(() => makeKitchenSinkData(500));
Expand Down Expand Up @@ -353,18 +359,17 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
);
};

HundredsOfRows.argTypes = {
shouldAlternateRowColor: {
control: 'none',
},
};

HundredsOfRows.parameters = {
chromatic: {
disableSnapshots: true,
},
};

export const NoTruncation = LiveExample.bind({});
NoTruncation.args = {
shouldTruncate: false,
};

export const Basic = Template.bind({});

export const ZebraStripes = Template.bind({});
Expand Down
6 changes: 4 additions & 2 deletions packages/table/src/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,20 @@ import {
getTableStyles,
tableClassName,
} from './Table.styles';
import { TableProps } from './Table.types';
import { TableProps, VerticalAlignment } from './Table.types';

// Inferred generic type from component gets used in place of `any`
const Table = forwardRef<HTMLDivElement, TableProps<any>>(
<T extends LGRowData>(
{
table,
children,
className,
verticalAlignment = VerticalAlignment.Top,
shouldAlternateRowColor = false,
shouldTruncate = true,
baseFontSize: baseFontSizeProp,
darkMode: darkModeProp,
table,
'data-lgid': lgidProp = LGIDS.root,
...rest
}: TableProps<T>,
Expand Down Expand Up @@ -67,6 +68,7 @@ const Table = forwardRef<HTMLDivElement, TableProps<any>>(
isSelectable={isSelectable}
shouldTruncate={shouldTruncate}
virtualTable={virtualTable}
verticalAlignment={verticalAlignment}
>
<table
className={cx(tableClassName, getTableStyles(theme, baseFontSize))}
Expand Down
14 changes: 14 additions & 0 deletions packages/table/src/Table/Table.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { BaseFontSize } from '@leafygreen-ui/tokens';
import { LeafyGreenTable, LGRowData } from '../useLeafyGreenTable';
import { LeafyGreenVirtualTable } from '../useLeafyGreenVirtualTable/useLeafyGreenVirtualTable.types';

export const VerticalAlignment = {
Top: 'top',
Middle: 'middle',
} as const;

export type VerticalAlignment =
(typeof VerticalAlignment)[keyof typeof VerticalAlignment];

export interface TableProps<T extends LGRowData>
extends HTMLElementProps<'table'>,
DarkModeProps,
Expand All @@ -30,4 +38,10 @@ export interface TableProps<T extends LGRowData>
* @default true
*/
shouldTruncate?: boolean;

/**
* When rows are not truncated, this will determine if cells should be top or middle aligned
* @default 'top'
*/
verticalAlignment?: VerticalAlignment;
}
Loading

0 comments on commit e587873

Please sign in to comment.