Skip to content

Commit cac6127

Browse files
mcokermcoker
authored
chore(table): remove card that wraps table content (#11959)
1 parent d3c0109 commit cac6127

File tree

9 files changed

+387
-415
lines changed

9 files changed

+387
-415
lines changed

‎packages/react-table/src/demos/examples/TableCompact.tsx‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Fragment, useState } from 'react';
22
import {
33
Button,
4-
Card,
54
MenuToggle,
65
MenuToggleElement,
76
Pagination,
@@ -130,45 +129,43 @@ export const TableCompact: React.FunctionComponent = () => {
130129
<Fragment>
131130
<DashboardWrapper hasPageTemplateTitle>
132131
<PageSection isFilled aria-label="Compact table data">
133-
<Card>
134-
{tableToolbar}
135-
<Table variant="compact" aria-label="Compact Table">
136-
<Thead>
137-
<Tr>
138-
<Th key={0}>{columns[0]}</Th>
139-
<Th key={1}>{columns[1]}</Th>
140-
<Th key={2}>{columns[2]}</Th>
141-
<Th key={3}>{columns[3]}</Th>
142-
<Th key={4}>{columns[4]}</Th>
143-
<Th key={5}>{columns[5]}</Th>
144-
<Th key={6}>{columns[6]}</Th>
145-
<Th key={7} width={10}>
146-
{columns[7]}
147-
</Th>
132+
{tableToolbar}
133+
<Table variant="compact" aria-label="Compact Table">
134+
<Thead>
135+
<Tr>
136+
<Th key={0}>{columns[0]}</Th>
137+
<Th key={1}>{columns[1]}</Th>
138+
<Th key={2}>{columns[2]}</Th>
139+
<Th key={3}>{columns[3]}</Th>
140+
<Th key={4}>{columns[4]}</Th>
141+
<Th key={5}>{columns[5]}</Th>
142+
<Th key={6}>{columns[6]}</Th>
143+
<Th key={7} width={10}>
144+
{columns[7]}
145+
</Th>
146+
</Tr>
147+
</Thead>
148+
<Tbody>
149+
{paginatedRows.map((row, rowIndex) => (
150+
<Tr key={rowIndex}>
151+
<>
152+
<Td dataLabel={columns[0]}>{row.name}</Td>
153+
<Td dataLabel={columns[1]}>{row.threads}</Td>
154+
<Td dataLabel={columns[2]}>{row.applications}</Td>
155+
<Td dataLabel={columns[3]}>{row.workspaces}</Td>
156+
<Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
157+
<Td dataLabel={columns[5]}>{row.location}</Td>
158+
<Td dataLabel={columns[6]}>{row.lastModified}</Td>
159+
<Td dataLabel={columns[7]} modifier="truncate">
160+
<TableText>
161+
<a href="#">{row.url}</a>
162+
</TableText>
163+
</Td>
164+
</>
148165
</Tr>
149-
</Thead>
150-
<Tbody>
151-
{paginatedRows.map((row, rowIndex) => (
152-
<Tr key={rowIndex}>
153-
<>
154-
<Td dataLabel={columns[0]}>{row.name}</Td>
155-
<Td dataLabel={columns[1]}>{row.threads}</Td>
156-
<Td dataLabel={columns[2]}>{row.applications}</Td>
157-
<Td dataLabel={columns[3]}>{row.workspaces}</Td>
158-
<Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
159-
<Td dataLabel={columns[5]}>{row.location}</Td>
160-
<Td dataLabel={columns[6]}>{row.lastModified}</Td>
161-
<Td dataLabel={columns[7]} modifier="truncate">
162-
<TableText>
163-
<a href="#">{row.url}</a>
164-
</TableText>
165-
</Td>
166-
</>
167-
</Tr>
168-
))}
169-
</Tbody>
170-
</Table>
171-
</Card>
166+
))}
167+
</Tbody>
168+
</Table>
172169
</PageSection>
173170
</DashboardWrapper>
174171
</Fragment>

‎packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
22
import {
33
Bullseye,
44
Button,
5-
Card,
65
EmptyState,
76
EmptyStateVariant,
87
EmptyStateBody,
@@ -16,42 +15,40 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
1615
export const TableEmptyStateDefault: React.FunctionComponent = () => (
1716
<DashboardWrapper hasPageTemplateTitle>
1817
<PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table data">
19-
<Card component="div">
20-
<Table aria-label="Empty state table">
21-
<Thead>
22-
<Tr>
23-
<Th>Repositories</Th>
24-
<Th>Branches</Th>
25-
<Th>Pull requests</Th>
26-
<Th>Workspaces</Th>
27-
<Th>Last commit</Th>
28-
</Tr>
29-
</Thead>
30-
<Tbody>
31-
<Tr>
32-
<Td colSpan={8}>
33-
<Bullseye>
34-
<EmptyState
35-
titleText="No results found"
36-
icon={SearchIcon}
37-
headingLevel="h2"
38-
variant={EmptyStateVariant.sm}
39-
>
40-
<EmptyStateBody>
41-
No results match this filter criteria. Clear all filters and try again.
42-
</EmptyStateBody>
43-
<EmptyStateFooter>
44-
<EmptyStateActions>
45-
<Button variant="link">Clear all filters</Button>
46-
</EmptyStateActions>
47-
</EmptyStateFooter>
48-
</EmptyState>
49-
</Bullseye>
50-
</Td>
51-
</Tr>
52-
</Tbody>
53-
</Table>
54-
</Card>
18+
<Table aria-label="Empty state table">
19+
<Thead>
20+
<Tr>
21+
<Th>Repositories</Th>
22+
<Th>Branches</Th>
23+
<Th>Pull requests</Th>
24+
<Th>Workspaces</Th>
25+
<Th>Last commit</Th>
26+
</Tr>
27+
</Thead>
28+
<Tbody>
29+
<Tr>
30+
<Td colSpan={8}>
31+
<Bullseye>
32+
<EmptyState
33+
titleText="No results found"
34+
icon={SearchIcon}
35+
headingLevel="h2"
36+
variant={EmptyStateVariant.sm}
37+
>
38+
<EmptyStateBody>
39+
No results match this filter criteria. Clear all filters and try again.
40+
</EmptyStateBody>
41+
<EmptyStateFooter>
42+
<EmptyStateActions>
43+
<Button variant="link">Clear all filters</Button>
44+
</EmptyStateActions>
45+
</EmptyStateFooter>
46+
</EmptyState>
47+
</Bullseye>
48+
</Td>
49+
</Tr>
50+
</Tbody>
51+
</Table>
5552
</PageSection>
5653
</DashboardWrapper>
5754
);

‎packages/react-table/src/demos/examples/TableEmptyStateError.tsx‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
11
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
2-
import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
2+
import { Bullseye, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
33
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
44
import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
55

66
export const TableEmptyStateError: React.FunctionComponent = () => (
77
<DashboardWrapper hasPageTemplateTitle>
88
<PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table with error">
9-
<Card component="div">
10-
<Table aria-label="Loading table demo">
11-
<Thead>
12-
<Tr>
13-
<Th>Repositories</Th>
14-
<Th>Branches</Th>
15-
<Th>Pull requests</Th>
16-
<Th>Workspaces</Th>
17-
<Th>Last commit</Th>
18-
</Tr>
19-
</Thead>
20-
<Tbody>
21-
<Tr>
22-
<Td colSpan={8}>
23-
<Bullseye>
24-
<EmptyState
25-
icon={ExclamationCircleIcon}
26-
titleText="Unable to connect"
27-
headingLevel="h2"
28-
variant={EmptyStateVariant.sm}
29-
>
30-
<EmptyStateBody>
31-
There was an error retrieving data. Check your connection and reload the page.
32-
</EmptyStateBody>
33-
</EmptyState>
34-
</Bullseye>
35-
</Td>
36-
</Tr>
37-
</Tbody>
38-
</Table>
39-
</Card>
9+
<Table aria-label="Loading table demo">
10+
<Thead>
11+
<Tr>
12+
<Th>Repositories</Th>
13+
<Th>Branches</Th>
14+
<Th>Pull requests</Th>
15+
<Th>Workspaces</Th>
16+
<Th>Last commit</Th>
17+
</Tr>
18+
</Thead>
19+
<Tbody>
20+
<Tr>
21+
<Td colSpan={8}>
22+
<Bullseye>
23+
<EmptyState
24+
icon={ExclamationCircleIcon}
25+
titleText="Unable to connect"
26+
headingLevel="h2"
27+
variant={EmptyStateVariant.sm}
28+
>
29+
<EmptyStateBody>
30+
There was an error retrieving data. Check your connection and reload the page.
31+
</EmptyStateBody>
32+
</EmptyState>
33+
</Bullseye>
34+
</Td>
35+
</Tr>
36+
</Tbody>
37+
</Table>
4038
</PageSection>
4139
</DashboardWrapper>
4240
);

‎packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
2-
import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
2+
import { Bullseye, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
33
import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
44

55
export const TableEmptyStateLoading: React.FunctionComponent = () => (
66
<DashboardWrapper hasPageTemplateTitle>
77
<PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table loading">
8-
<Card component="div">
9-
<Table aria-label="Loading table demo">
10-
<Thead>
11-
<Tr>
12-
<Th>Repositories</Th>
13-
<Th>Branches</Th>
14-
<Th>Pull requests</Th>
15-
<Th>Workspaces</Th>
16-
<Th>Last commit</Th>
17-
</Tr>
18-
</Thead>
19-
<Tbody>
20-
<Tr>
21-
<Td colSpan={8}>
22-
<Bullseye>
23-
<EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
24-
</Bullseye>
25-
</Td>
26-
</Tr>
27-
</Tbody>
28-
</Table>
29-
</Card>
8+
<Table aria-label="Loading table demo">
9+
<Thead>
10+
<Tr>
11+
<Th>Repositories</Th>
12+
<Th>Branches</Th>
13+
<Th>Pull requests</Th>
14+
<Th>Workspaces</Th>
15+
<Th>Last commit</Th>
16+
</Tr>
17+
</Thead>
18+
<Tbody>
19+
<Tr>
20+
<Td colSpan={8}>
21+
<Bullseye>
22+
<EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
23+
</Bullseye>
24+
</Td>
25+
</Tr>
26+
</Tbody>
27+
</Table>
3028
</PageSection>
3129
</DashboardWrapper>
3230
);

0 commit comments

Comments
 (0)