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.

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

[EuiTable][EuiBasicTable][EuiInMemoryTable] Convert to Emotion + style-related updates & cleanups #7654

Merged
merged 11 commits into from
Apr 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 3 additions & 0 deletions changelogs/upcoming/7621.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Breaking changes**

- Removed unused `EuiTableHeaderButton` component
10 changes: 10 additions & 0 deletions changelogs/upcoming/7625.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
- Updated `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable` with a new `responsiveBreakpoint` prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards
- Updated `EuiProvider`'s `componentDefaults` prop to allow configuring `EuiTable.responsiveBreakpoint`

**Breaking changes**

- Removed the `responsive` prop from `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable`. Use the new `responsiveBreakpoint` prop instead

**DOM changes**

- `EuiTable` mobile headers no longer render in the DOM when not visible (previously rendered with `display: none`). This may affect DOM testing assertions.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7631.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**DOM changes**

- `EuiTableRowCell` now applies passed `className`s to the parent `<td>` element, instead of to the inner cell content `<div>`.
10 changes: 10 additions & 0 deletions changelogs/upcoming/7632.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
**Breaking changes**

- The following props are no longer needed by `EuiBasicTable` or `EuiInMemoryTable` for responsive table behavior to work correctly, and can be removed:
- `isSelectable`
- `isExpandable`
- `hasActions`

**DOM changes**

- `EuiTableRow`s rendered by basic and memory tables now only render a `.euiTableRow-isSelectable` className if the selection checkbox is not disabled
7 changes: 7 additions & 0 deletions changelogs/upcoming/7640.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
**Bug fixes**

- `EuiBasicTable` & `EuiInMemoryTable` `isPrimary` actions are now correctly shown on mobile views

**Breaking changes**

- Removed the `showOnHover` prop from `EuiTableRowCell` / `EuiBasicTable`/`EuiInMemoryTable`'s `columns` API. Use the new actions `columns[].actions[].showOnHover` API instead.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7641.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**DOM changes**

- `EuiTableRowCell`s with `textOnly` set to `false` will no longer attempt to apply the `.euiTableCellContent__text` className to child elements.
15 changes: 15 additions & 0 deletions changelogs/upcoming/7642.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
**Bug fixes**

- Table `mobileOptions`:
- `mobileOptions.align` is now respected instead of all cells being forced to left alignment
- `textTruncate` and `textOnly` are now respected even if a `render` function is not passed

**Breaking changes**

- Removed top-level `textOnly` prop from `EuiBasicTable` and `EuiInMemoryTable`. Use `columns[].textOnly` instead.

**DOM changes**

- `EuiTableRowCell` no longer renders mobile headers to the DOM unless the current table is displaying its responsive view.
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on mobile if their columns' `mobileOptions.show` is set to `false`.
- `EuiTableHeaderCell` and `EuiTableRowCell` will no longer render in the DOM at all on desktop if their columns' `mobileOptions.only` is set to `true`.
17 changes: 17 additions & 0 deletions changelogs/upcoming/7654.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
**CSS-in-JS conversions**

- Converted `EuiTable`, `EuiTableRow`, `EuiTableRowCell`, and all other table subcomponents to Emotion
- Removed the following `EuiTable` Sass variables:
- `$euiTableCellContentPadding`
- `$euiTableCellContentPaddingCompressed`
- `$euiTableCellCheckboxWidth`
- `$euiTableHoverColor`
- `$euiTableSelectedColor`
- `$euiTableHoverSelectedColor`
- `$euiTableActionsBorderColor`
- `$euiTableHoverClickableColor`
- `$euiTableFocusClickableColor`
- Removed the following `EuiTable` Sass mixins:
- `euiTableActionsBackgroundMobile`
- `euiTableCellCheckbox`
- `euiTableCell`
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const EuiComponentDefaultsProps: FunctionComponent<
// Exported in one place for DRYness
export const euiProviderComponentDefaultsSnippet = `<EuiProvider
componentDefaults={{
EuiTable: { responsiveBreakpoint: 's', },
EuiTablePagination: { itemsPerPage: 20, },
EuiFocusTrap: { crossFrame: true },
EuiPortal: { insert },
Expand Down
13 changes: 8 additions & 5 deletions src-docs/src/views/tables/actions/actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
sortable: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down Expand Up @@ -162,6 +162,11 @@ export default () => {
];
if (multiAction) {
actions = [
{
...actions[0],
isPrimary: true,
showOnHover: true,
},
{
render: (user: User) => {
return (
Expand All @@ -176,7 +181,6 @@ export default () => {
return <EuiLink onClick={() => {}}>Edit</EuiLink>;
},
},
...actions,
];
}
return actions;
Expand All @@ -198,7 +202,7 @@ export default () => {
if (multiAction) {
actions = [
{
name: <span>Clone</span>,
name: <>Clone</>,
description: 'Clone this user',
icon: 'copy',
type: 'icon',
Expand Down Expand Up @@ -396,7 +400,6 @@ export default () => {
pagination={pagination}
sorting={sorting}
selection={selection}
hasActions={customAction ? false : true}
onChange={onTableChange}
/>
</>
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/auto/auto.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/basic/basic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ export default () => {
'data-test-subj': 'firstNameCell',
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
8 changes: 5 additions & 3 deletions src-docs/src/views/tables/basic/basic_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
} from '../props/props';

const source = require('!!raw-loader!./basic');

Expand Down
14 changes: 7 additions & 7 deletions src-docs/src/views/tables/custom/custom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,10 @@ export default class extends Component<{}, State> {
{
id: 2,
title: (
<span>
<>
A very long line in an ELEMENT which will wrap on narrower screens and
NOT become truncated and replaced by an ellipsis
</span>
</>
),
type: 'user',
dateCreated: 'Tue Dec 01 2016',
Expand All @@ -127,11 +127,11 @@ export default class extends Component<{}, State> {
id: 3,
title: {
value: (
<span>
<>
A very long line in an ELEMENT which will not wrap on narrower
screens and instead will become truncated and replaced by an
ellipsis
</span>
</>
),
truncateText: true,
},
Expand Down Expand Up @@ -290,14 +290,14 @@ export default class extends Component<{}, State> {
width: '100%',
},
render: (title: DataItem['title'], item: DataItem) => (
<span>
<>
<EuiIcon
type={item.type}
size="m"
style={{ verticalAlign: 'text-top' }}
/>{' '}
{title as ReactNode}
</span>
</>
),
},
{
Expand Down Expand Up @@ -686,7 +686,7 @@ export default class extends Component<{}, State> {
<EuiTableRow
key={item.id}
isSelected={this.isItemSelected(item.id)}
isSelectable={true}
hasSelection={true}
hasActions={true}
>
{cells}
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/custom/custom_section.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const section = {
},
],
text: (
<div>
<>
<p>
As an alternative to <strong>EuiBasicTable</strong> you can instead
construct a table from individual{' '}
Expand Down Expand Up @@ -58,7 +58,7 @@ export const section = {
&nbsp;and <strong>EuiTableSortMobileItem</strong> components to supply
mobile sorting. See demo below.
</p>
</div>
</>
),
components: { EuiTable },
props: {
Expand Down
10 changes: 4 additions & 6 deletions src-docs/src/views/tables/expanding_rows/expanding_rows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down Expand Up @@ -134,9 +134,10 @@ export default () => {
isExpander: true,
name: (
<EuiScreenReaderOnly>
<span>Expand rows</span>
<span>Expand row</span>
</EuiScreenReaderOnly>
),
mobileOptions: { header: false },
render: (user: User) => {
const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };

Expand Down Expand Up @@ -260,12 +261,9 @@ export default () => {
items={pageOfItems}
itemId="id"
itemIdToExpandedRowMap={itemIdToExpandedRowMap}
isExpandable={true}
hasActions={true}
columns={columnsWithExpandingRowToggle}
pagination={pagination}
sorting={sorting}
isSelectable={true}
selection={selection}
onChange={onTableChange}
/>
Expand Down
13 changes: 5 additions & 8 deletions src-docs/src/views/tables/footer/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand All @@ -72,7 +72,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
{
field: 'github',
name: 'Github',
footer: ({ items }: { items: User[] }) => <span>{items.length} users</span>,
footer: ({ items }: { items: User[] }) => <>{items.length} users</>,
render: (username: User['github']) => (
<EuiLink href="#" target="_blank">
{username}
Expand All @@ -96,7 +96,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
const uniqueCountries = new Set(
items.map((user) => user.location.country)
);
return <span>{uniqueCountries.size} countries</span>;
return <>{uniqueCountries.size} countries</>;
},
render: (location: User['location']) => {
return `${location.city}, ${location.country}`;
Expand All @@ -106,9 +106,7 @@ const columns: Array<EuiBasicTableColumn<User>> = [
field: 'online',
name: 'Online',
footer: ({ items }: { items: User[] }) => {
return (
<span>{items.filter((user: User) => !!user.online).length} online</span>
);
return <>{items.filter((user: User) => !!user.online).length} online</>;
},
dataType: 'boolean',
render: (online: User['online']) => {
Expand Down Expand Up @@ -221,7 +219,6 @@ export default () => {
columns={columns}
pagination={pagination}
sorting={sorting}
isSelectable={true}
selection={selection}
onChange={onTableChange}
/>
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/tables/in_memory/in_memory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
truncateText: true,
mobileOptions: {
render: (user: User) => (
<span>
<>
{user.firstName} {user.lastName}
</span>
</>
),
header: false,
truncateText: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
import { Pagination } from '../paginated/_props';
import {
EuiTableFieldDataColumnType,
EuiTableComputedColumnType,
EuiTableActionsColumnType,
EuiTableSelectionType,
EuiTableSortingType,
} from '!!prop-loader!../../../../../src/components/basic_table/table_types';
import { CustomItemAction } from '!!prop-loader!../../../../../src/components/basic_table/action_types';
import {
EuiTableComputedColumnType,
EuiTableActionsColumnType,
DefaultItemActionProps as DefaultItemAction,
SearchProps as Search,
SearchFilterConfigProps as SearchFilterConfig,
Expand All @@ -37,22 +37,22 @@ export const controlledPaginationSection = {
},
],
text: (
<div>
<>
<p>
By default <EuiCode>EuiInMemoryTable</EuiCode> resets its page index
when receiving a new <EuiCode>EuiInMemoryTable</EuiCode> array. To avoid
this behavior the pagination object optionally takes a
this behavior the pagination object optionally takes a{' '}
<EuiCode>pageIndex</EuiCode> value to control this yourself.
Additionally, <EuiCode>pageSize</EuiCode> can also be controlled the
same way. Both of these are provided to your app during the
same way. Both of these are provided to your app during the{' '}
<EuiCode>onTableChange</EuiCode> callback.
</p>
<p>
The example below updates the array of users every second, randomly
toggling their online status. Pagination state is maintained by the app,
preventing it from being reset by the updates.
</p>
</div>
</>
),
props: {
EuiInMemoryTable,
Expand Down
Loading
Loading