Skip to content

Commit

Permalink
feat(@clayui/table): Adds the noWrap prop to ClayTable.Cell
Browse files Browse the repository at this point in the history 
Passing the `noWrap` (boolean) props to `<ClayTable.Cell />` will make
it use the `table-cell-ws-nowrap` CSS class, which keep table cells on
one line.
  • Loading branch information
Julien Castelain committed May 25, 2021
1 parent e492700 commit da88293
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 0 deletions.
7 changes: 7 additions & 0 deletions packages/clay-table/src/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ export interface ICellProps extends TableCellBaseProps {
*/
headingTitle?: boolean;

/*
* Keep cells on one line.
*/
noWrap?: boolean;

/**
* Truncates the text inside a Cell. Requires `expanded`
* property value set to true.
Expand All @@ -72,6 +77,7 @@ const ClayTableCell = React.forwardRef<
headingCell = false,
headingTitle = false,
truncate = false,
noWrap = false,
...otherProps
}: ICellProps,
ref
Expand All @@ -86,6 +92,7 @@ const ClayTableCell = React.forwardRef<
[`table-cell-${cellDelimiter}`]: cellDelimiter,
[`table-column-text-${columnTextAlignment}`]: columnTextAlignment,
[`text-${align}`]: align,
'table-cell-ws-nowrap': noWrap,
})}
ref={ref}
>
Expand Down
51 changes: 51 additions & 0 deletions packages/clay-table/src/__tests__/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,3 +390,54 @@ exports[`ClayTable renders with a headingTitle 1`] = `
</div>
</div>
`;

exports[`ClayTable renders with non wrapped cells 1`] = `
<div>
<div
class="table-responsive"
>
<table
class="table table-autofit show-quick-actions-on-hover table-hover table-list"
>
<tbody>
<tr
class="table-divider"
>
<td
class=""
colspan="8"
>
Recipes
</td>
</tr>
<tr
class=""
>
<td
class="table-cell-expand"
>
<p
class="table-list-title"
>
Hamburger
</p>
</td>
<td
class=""
/>
<td
class="table-cell-ws-nowrap"
>
Originally from the U.S.A. but available anywhere around the world
</td>
<td
class="text-right"
>
10 min.
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
28 changes: 28 additions & 0 deletions packages/clay-table/src/__tests__/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,4 +242,32 @@ describe('ClayTable', () => {
);
expect(container).toMatchSnapshot();
});

it('renders with non wrapped cells', () => {
const {container} = render(
<ClayTable>
<ClayTable.Body>
<ClayTable.Row divider>
<ClayTable.Cell colSpan={8}>{'Recipes'}</ClayTable.Cell>
</ClayTable.Row>

<ClayTable.Row>
<ClayTable.Cell expanded headingTitle>
{'Hamburger'}
</ClayTable.Cell>
<ClayTable.Cell />
<ClayTable.Cell noWrap>
{
'Originally from the U.S.A. but available anywhere around the world'
}
</ClayTable.Cell>
<ClayTable.Cell align="right">
{'10 min.'}
</ClayTable.Cell>
</ClayTable.Row>
</ClayTable.Body>
</ClayTable>
);
expect(container).toMatchSnapshot();
});
});
111 changes: 111 additions & 0 deletions packages/clay-table/stories/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -534,4 +534,115 @@ storiesOf('Components|ClayTable', module)
</ClayTable.Body>
</ClayTable>
</form>
))
.add('with non wrapped cells', () => (
<form>
<ClayTable
bodyVerticalAlignment={select(
'body vertical alignment',
{bottom: 'bottom', middle: 'middle', top: 'top'},
'middle'
)}
borderedColumns={boolean('bordered columns', false)}
borderless={boolean('bordeless', false)}
headVerticalAlignment={select(
'head vertical alignment',
{bottom: 'bottom', middle: 'middle', top: 'top'},
'middle'
)}
headingNoWrap={boolean('heading no wrap', false)}
hover={boolean('hover', true)}
noWrap={boolean('no wrap', false)}
responsive={boolean('responsive', false)}
responsiveSize={select(
'responsive size',
{lg: 'lg', md: 'md', sm: 'sm', xl: 'xl'},
'sm'
)}
striped={boolean('striped', true)}
tableVerticalAlignment={select(
'table vertical alignment',
{bottom: 'bottom', middle: 'middle', top: 'top'},
'middle'
)}
>
<ClayTable.Head>
<ClayTable.Row>
<ClayTable.Cell headingCell />
<ClayTable.Cell expanded headingCell headingTitle>
<span className="text-truncate">
{'Description'}
</span>
</ClayTable.Cell>
<ClayTable.Cell headingCell>
<span className="text-truncate">{'Format'}</span>
</ClayTable.Cell>
<ClayTable.Cell headingCell>
<span className="text-truncate">{'Label'}</span>
</ClayTable.Cell>
<ClayTable.Cell headingCell />
</ClayTable.Row>
</ClayTable.Head>

<ClayTable.Body>
<ClayTable.Row>
<ClayTable.Cell>
<ClayCheckboxWithState aria-label="Select first row" />
</ClayTable.Cell>
<ClayTable.Cell headingTitle noWrap>
{
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
}
</ClayTable.Cell>
<ClayTable.Cell>
<a href="1">{'JPG'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<a href="1">{'JPG'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<Dropdown />
</ClayTable.Cell>
</ClayTable.Row>
<ClayTable.Row>
<ClayTable.Cell>
<ClayCheckboxWithState aria-label="Select second row" />
</ClayTable.Cell>
<ClayTable.Cell headingTitle noWrap>
{
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
}
</ClayTable.Cell>
<ClayTable.Cell>
<a href="2">{'GIF'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<a href="2">{'GIF'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<Dropdown />
</ClayTable.Cell>
</ClayTable.Row>
<ClayTable.Row>
<ClayTable.Cell>
<ClayCheckboxWithState aria-label="Select third row" />
</ClayTable.Cell>
<ClayTable.Cell headingTitle noWrap>
{
'Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.'
}
</ClayTable.Cell>
<ClayTable.Cell>
<a href="3">{'TIFF'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<a href="3">{'TIFF'}</a>
</ClayTable.Cell>
<ClayTable.Cell>
<Dropdown />
</ClayTable.Cell>
</ClayTable.Row>
</ClayTable.Body>
</ClayTable>
</form>
));

0 comments on commit da88293

Please sign in to comment.