Skip to content

Table deprecation #8843

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

Closed
wants to merge 5 commits into from
Closed

Table deprecation #8843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
154b6c1
wip
jenny-s51 Nov 8, 2022
2f900cf
fix imports to resolve build
jenny-s51 Mar 29, 2023
00a104b
fix lodash error
jenny-s51 Mar 29, 2023
5ef1789
fix more docs build errors
jenny-s51 Mar 29, 2023
cba6d0f
fixed more build errors with Nicole!
jenny-s51 Mar 30, 2023
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
8 changes: 4 additions & 4 deletions packages/react-core/src/demos/CardDemos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
Expand Down Expand Up @@ -655,7 +655,7 @@ import {
Popover,
Title
} from '@patternfly/react-core';
import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
Expand Down Expand Up @@ -723,7 +723,7 @@ const StatusPlain: React.FunctionComponent = () => {
<div>
Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
</div>
<TableComposable variant="compact">
<Table variant="compact">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -762,7 +762,7 @@ const StatusPlain: React.FunctionComponent = () => {
</Tbody>
);
})}
</TableComposable>
</Table>
</>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/Filters/FilterDemos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ ToolbarToggleGroup
} from '@patternfly/react-core';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';

## Filtering demos

Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
EmptyStateActions,
EmptyStateIcon
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

Expand Down Expand Up @@ -649,7 +649,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -701,7 +701,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
</Tr>
)}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
Badge,
Pagination
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

interface Repository {
Expand Down Expand Up @@ -375,7 +375,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -419,7 +419,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
EmptyStateIcon,
EmptyStateActions
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

Expand Down Expand Up @@ -465,7 +465,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -517,7 +517,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
</Tr>
)}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
EmptyStateIcon,
EmptyStateActions
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

Expand Down Expand Up @@ -515,7 +515,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -567,7 +567,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
</Tr>
)}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
EmptyStateIcon,
EmptyStateActions
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

Expand Down Expand Up @@ -488,7 +488,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -540,7 +540,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
</Tr>
)}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
EmptyStateIcon,
EmptyStateActions
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

interface Repository {
Expand Down Expand Up @@ -296,7 +296,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -348,7 +348,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
</Tr>
)}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
ToolbarItem,
Pagination
} from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';

interface Repository {
Expand Down Expand Up @@ -360,7 +360,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
return (
<React.Fragment>
{toolbar}
<TableComposable aria-label="Selectable table">
<Table aria-label="Selectable table">
<Thead>
<Tr>
<Th />
Expand Down Expand Up @@ -404,7 +404,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
</React.Fragment>
);
};
17 changes: 8 additions & 9 deletions packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,12 @@ import {
ToolbarToggleGroup
} from '@patternfly/react-core';
import {
TableComposable,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
IAction,
ActionsColumn,
CustomActionsToggleProps
Td
} from '@patternfly/react-table';
import { KebabToggle } from '@patternfly/react-core/deprecated';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
Expand All @@ -58,6 +55,8 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import { ActionsColumn, CustomActionsToggleProps } from "@patternfly/react-table/src/deprecated/components/Table/ActionsColumn";
import { IAction } from "@patternfly/react-table/src/deprecated/components/Table/TableTypes";

interface Repository {
name: string;
Expand Down Expand Up @@ -209,8 +208,8 @@ export const TablesAndTabs = () => {
</Toolbar>
);

const tableComposable = (
<TableComposable aria-label="`Composable` table">
const table = (
<Table aria-label="table">
<Thead noWrap>
<Tr>
<Th
Expand Down Expand Up @@ -284,7 +283,7 @@ export const TablesAndTabs = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
);

const panelContent = (
Expand Down Expand Up @@ -375,7 +374,7 @@ export const TablesAndTabs = () => {
const tabContent = (
<Drawer isExpanded={isExpanded} isInline>
<DrawerContent panelContent={panelContent}>
<DrawerContentBody>{tableComposable}</DrawerContentBody>
<DrawerContentBody>{table}</DrawerContentBody>
</DrawerContent>
</Drawer>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/deprecated/components/Dropdown/DropdownWithContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
zIndex,
...props
} = this.props;
const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
const id = toggle.props?.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
let component: string;
let renderedContent: React.ReactNode[];
let ariaHasPopup = false;
Expand Down
6 changes: 3 additions & 3 deletions packages/react-integration/demo-app-ts/src/Demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,9 +463,9 @@ export const Demos: DemoInterface[] = [
componentType: Examples.TableFavoritesDemo
},
{
id: 'table-composable-demo',
name: 'Table Composable Demo',
componentType: Examples.TableComposableDemo
id: 'table-demo',
name: 'Table Demo',
componentType: Examples.TableDemo
},
{
id: 'tab-string-event-key-demo',
Expand Down
2 changes: 1 addition & 1 deletion packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { Switch, Button } from '@patternfly/react-core';
import { Table, TableBody, TableHeader } from '@patternfly/react-table';
import { Table, TableBody, TableHeader } from '@patternfly/react-table/src/deprecated/components/Table';

interface SwitchState {
simple: {
Expand Down
2 changes: 1 addition & 1 deletion ...ges/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCollapsibleDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, TableHeader, TableBody, TableProps, expandable, ICell, IRow } from '@patternfly/react-table';
import { Table, TableHeader, TableBody, TableProps, expandable, ICell, IRow } from '@patternfly/react-table/src/deprecated/components/Table';

interface TableState {
columns: (ICell | string)[];
Expand Down
2 changes: 1 addition & 1 deletion ...ct-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
IRow,
ICell,
IRowCell
} from '@patternfly/react-table';
} from '@patternfly/react-table/src/deprecated/components/Table';

import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
Expand Down
Loading