Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refa: remove align prop from Table #2036

Merged
merged 3 commits into from
Apr 27, 2022
Merged

refa: remove align prop from Table #2036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ea1473
refa: remove align prop from Table
ti10le Apr 27, 2022
4138835
Create eighty-goats-return.md
ti10le Apr 27, 2022
07d8e86
Update Table.tsx
ti10le Apr 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/eighty-goats-return.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@marigold/docs": minor
"@marigold/components": minor
---

refa: remove align prop from Table
47 changes: 0 additions & 47 deletions docs/content/components/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,6 @@ import { Table } from '@marigold/components';
| :----------------------------- | :----------------------------- | :------ | :------------------------------------------------------- |
| `selectionMode` (optional) | `'none', 'single', 'multiple'` | `none` | The type of selection that is allowed in the collection. |
| `onSelectionChange` (optional) | `(keys: Selection) => any` | | Handler that is called when the selection changes. |
| `align` (optional) | `left, center, right` | `left` | Align the cell content from the rows except the header. |
| `alignHeader` (optional) | `left, center, right` | `left` | Align the header content. |

## Examples

Expand Down Expand Up @@ -145,51 +143,6 @@ import { Table } from '@marigold/components';
</Table>
```

### Text Alignment

Align column headers and rows to the left, center, or right.

```tsx
<Table
aria-label="Table with multiple selection"
align="center"
alignHeader="center"
>
<Table.Header>
<Table.Column>Name</Table.Column>
<Table.Column>Firstname</Table.Column>
<Table.Column>House</Table.Column>
<Table.Column>Year of birth</Table.Column>
</Table.Header>
<Table.Body>
<Table.Row key={1}>
<Table.Cell>Potter</Table.Cell>
<Table.Cell>Harry</Table.Cell>
<Table.Cell>Gryffindor</Table.Cell>
<Table.Cell>1980</Table.Cell>
</Table.Row>
<Table.Row key={2}>
<Table.Cell>Malfoy</Table.Cell>
<Table.Cell>Draco</Table.Cell>
<Table.Cell>Slytherin</Table.Cell>
<Table.Cell>1980</Table.Cell>
</Table.Row>
<Table.Row key={3}>
<Table.Cell>Diggory</Table.Cell>
<Table.Cell>Cedric</Table.Cell>
<Table.Cell>Hufflepuff</Table.Cell>
<Table.Cell>1977</Table.Cell>
</Table.Row>
<Table.Row key={4}>
<Table.Cell>Lovegood</Table.Cell>
<Table.Cell>Luna</Table.Cell>
<Table.Cell>Ravenclaw</Table.Cell>
<Table.Cell>1981</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
```

### Dynamic collections

```tsx
Expand Down
17 changes: 0 additions & 17 deletions packages/components/src/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,6 @@ export default {
description: 'selection mode',
defaultValue: 'none',
},
align: {
control: {
type: 'select',
},
options: ['left', 'right', 'center'],
description: 'cell element alignment',

defaultValue: 'left',
},
alignHeader: {
control: {
type: 'select',
},
options: ['left', 'right', 'center'],
description: 'header element alignment',
defaultValue: 'left',
},
},
} as Meta;

Expand Down
114 changes: 0 additions & 114 deletions packages/components/src/Table/Table.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,120 +108,6 @@ test('supports theme with parts', () => {
expect(tableCells[0]).toHaveStyle(`padding: 16px`);
});

test('supports default align prop', () => {
render(
<Table aria-label="Example table">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableCells = screen.getAllByRole(/rowheader/);
expect(tableCells[0]).toHaveStyle(`textAlign: left`);
});

test('supports custom align prop center', () => {
render(
<Table aria-label="Example table" align="center">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableCells = screen.getAllByRole(/rowheader/);
expect(tableCells[0]).toHaveStyle(`textAlign: center`);
});

test('supports custom align prop right', () => {
render(
<Table aria-label="Example table" align="right">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableCells = screen.getAllByRole(/rowheader/);
expect(tableCells[0]).toHaveStyle(`textAlign: right`);
});

test('supports default alignHeader prop', () => {
render(
<Table aria-label="Example table">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableHeader = screen.getAllByRole(/columnheader/);
expect(tableHeader[0]).toHaveStyle(`textAlign: left`);
});

test('supports custom alignHeader prop center', () => {
render(
<Table aria-label="Example table" alignHeader="center">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableHeader = screen.getAllByRole(/columnheader/);
expect(tableHeader[0]).toHaveStyle(`textAlign: center`);
});

test('supports custom alignHeader prop right', () => {
render(
<Table aria-label="Example table" alignHeader="right">
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rows}>
{item => (
<Table.Row>
{columnKey => <Table.Cell>{item[columnKey]}</Table.Cell>}
</Table.Row>
)}
</Table.Body>
</Table>
);
const tableHeader = screen.getAllByRole(/columnheader/);
expect(tableHeader[0]).toHaveStyle(`textAlign: right`);
});

test('supports selectionMode single', () => {
render(
<ThemeProvider theme={theme}>
Expand Down
16 changes: 3 additions & 13 deletions packages/components/src/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import { ThemeExtensionsWithParts, useComponentStyles } from '@marigold/system';

import { Box } from '../Box';

import { TableCell, TableCellProps } from './TableCell';
import { TableColumnHeader, TableColumnHeaderProps } from './TableColumnHeader';
import { TableCell } from './TableCell';
import { TableColumnHeader } from './TableColumnHeader';
import { TableHeaderRow } from './TableHeaderRow';
import { TableRow } from './TableRow';
import { TableRowGroup } from './TableRowGroup';
Expand All @@ -33,21 +33,13 @@ export interface TableThemeExtension
export interface TableProps
extends Pick<AriaTableProps<object>, 'onRowAction' | 'onCellAction'>,
TableStateProps<object> {
align?: TableCellProps['align'];
alignHeader?: TableColumnHeaderProps['align'];
variant?: string;
size?: string;
}

// Table Component
// ---------------
export const Table: Table = ({
align,
alignHeader,
variant,
size,
...props
}: TableProps) => {
export const Table: Table = ({ variant, size, ...props }: TableProps) => {
// Setup table state and mode
const showSelectionCheckboxes =
props.selectionMode === 'multiple' && props.selectionBehavior !== 'replace';
Expand Down Expand Up @@ -76,7 +68,6 @@ export const Table: Table = ({
item={column}
state={state}
isSelectionColumn={column.props.isSelectionCell}
align={alignHeader}
css={styles.header}
/>
))}
Expand All @@ -92,7 +83,6 @@ export const Table: Table = ({
item={cell}
state={state}
isSelectionCell={cell.props.isSelectionCell}
align={align}
css={styles.cell}
/>
))}
Expand Down
4 changes: 1 addition & 3 deletions packages/components/src/Table/TableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export interface TableCellProps {
* Wheter it is a cell with a checkbox or a regular data cell
*/
isSelectionCell?: boolean;
align?: 'left' | 'center' | 'right';
css?: CSSObject;
}

Expand All @@ -30,7 +29,6 @@ export const TableCell = ({
item: cell,
state,
isSelectionCell,
align = 'left',
css,
}: TableCellProps) => {
const cellRef = useRef(null);
Expand All @@ -55,7 +53,7 @@ export const TableCell = ({
as="td"
ref={cellRef}
__baseCSS={{
textAlign: isSelectionCell ? 'center' : align,
textAlign: isSelectionCell ? 'center' : 'left',
}}
css={css}
{...mergeProps(gridCellProps, focusProps)}
Expand Down
4 changes: 1 addition & 3 deletions packages/components/src/Table/TableColumnHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export interface TableColumnHeaderProps {
item: Node<object>;
state: TableState<object>;
isSelectionColumn?: boolean;
align?: 'left' | 'center' | 'right';
css?: CSSObject;
}

Expand All @@ -32,7 +31,6 @@ export const TableColumnHeader = ({
item: column,
state,
isSelectionColumn,
align = 'left',
css,
}: TableColumnHeaderProps) => {
const ref = useRef(null);
Expand All @@ -57,7 +55,7 @@ export const TableColumnHeader = ({
<Box
as="th"
ref={ref}
__baseCSS={{ textAlign: isSelectionColumn ? 'center' : align }}
__baseCSS={{ textAlign: isSelectionColumn ? 'center' : 'left' }}
css={css}
{...mergeProps(columnHeaderProps, focusProps)}
{...stateProps}
Expand Down