Skip to content

feat(Datalist): implement full page Basic demo to match HTML #9048 #9087

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

Merged
tlabaj merged 11 commits into from
Nov 3, 2023
Merged

feat(Datalist): implement full page Basic demo to match HTML #9048 #9087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a696c2d
feat(Datalist): implement full page Basic demo to match HTML #9048
Kells512 May 9, 2023
a296345
fix syntax error
Kells512 May 9, 2023
a35d88a
comments applied
Kells512 May 11, 2023
2ed77be
comments applied
Kells512 May 11, 2023
7641b55
comments applied
Kells512 May 17, 2023
154f6a0
comments applied
Kells512 May 18, 2023
f37a83a
\xa0 comments applied
Kells512 May 18, 2023
6a3f7e3
move key per review comments
nicolethoen Jul 17, 2023
b96da36
address PR comments
nicolethoen Sep 1, 2023
af40d2b
revert change to package.json
nicolethoen Sep 1, 2023
5e47d05
Converted basic demo to TS
Oct 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
314 changes: 314 additions & 0 deletions packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,314 @@
import React from 'react';
import {
Button,
DataList,
DataListItem,
DataListCell,
DataListItemRow,
DataListItemCells,
Flex,
FlexItem,
MenuToggle,
MenuToggleCheckbox,
OverflowMenu,
OverflowMenuControl,
OverflowMenuItem,
PageSection,
PageSectionVariants,
Pagination,
Text,
TextContent,
TextVariants,
Toolbar,
ToolbarItem,
ToolbarContent
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';

import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';

export const DataListBasic: React.FunctionComponent = () => {
const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;

const toolbarItems = (
<React.Fragment>
<ToolbarItem variant="bulk-select">
<MenuToggle
aria-label="Select cards"
splitButtonOptions={{
items: [
<MenuToggleCheckbox
id="split-dropdown-checkbox"
key="split-dropdown-checkbox"
aria-label={'Select all cards'}
/>
]
}}
></MenuToggle>
</ToolbarItem>
<ToolbarItem>
<MenuToggle>Filter by creator name</MenuToggle>
</ToolbarItem>
<ToolbarItem variant="overflow-menu">
<OverflowMenu breakpoint="md">
<OverflowMenuItem>
<Button variant="primary">Create instance</Button>
</OverflowMenuItem>
<OverflowMenuControl hasAdditionalOptions>
<MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
<EllipsisVIcon />
</MenuToggle>
</OverflowMenuControl>
</OverflowMenu>
</ToolbarItem>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
{renderPagination()}
</ToolbarItem>
</React.Fragment>
);

return (
<React.Fragment>
<DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Projects</Text>
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
</TextContent>
</PageSection>
<PageSection isFilled>
<Toolbar id="toolbar-group-types">
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
<DataList aria-label="Demo data list">
<DataListItem aria-labelledby="Demo-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons1">
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Text component={TextVariants.p}>patternfly</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.small}>
Working repo for
<a href="http://www.patternfly.org/">PatternFly</a>
</Text>
</FlexItem>
<FlexItem>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon /> 10
</FlexItem>
<FlexItem>
<CodeIcon /> 4
</FlexItem>
<FlexItem>
<CubeIcon /> 5
</FlexItem>
<FlexItem> Updated 2 days ago</FlexItem>
</Flex>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Demo-item2">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons2">
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Text component={TextVariants.small}>patternfly-elements</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.small}>PatternFly elements</Text>
</FlexItem>
<FlexItem>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon /> 5
</FlexItem>
<FlexItem>
<CodeIcon /> 9
</FlexItem>
<FlexItem>
<CubeIcon /> 2
</FlexItem>
<FlexItem>
<CheckCircleIcon />
11
</FlexItem>
<FlexItem>
<ExclamationTriangleIcon /> 4
</FlexItem>
<FlexItem>
<TimesCircleIcon /> 1
</FlexItem>
<FlexItem> Updated 2 days ago</FlexItem>
</Flex>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem>
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="Demo-item3">
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Text component={TextVariants.small}>patternfly-unified-design-kit</Text>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="buttons3">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Demo-item4">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons4">
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Text component={TextVariants.small}>patternfly</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.small}>
Working repo for
<a href="http://www.patternfly.org/">PatternFly</a>
</Text>
</FlexItem>
<FlexItem>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon />
10
</FlexItem>
<FlexItem>
<CodeIcon /> 4
</FlexItem>
<FlexItem>
<CubeIcon /> 5
</FlexItem>
<FlexItem> Updated 2 days ago</FlexItem>
</Flex>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="Demo-item5">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="buttons5">
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Text component={TextVariants.small}>patternfly-elements</Text>
</FlexItem>
<FlexItem>
<Text component={TextVariants.small}>PatternFly elements</Text>
</FlexItem>
<FlexItem>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CodeBranchIcon /> 5
</FlexItem>
<FlexItem>
<CodeIcon /> 9
</FlexItem>
<FlexItem>
<CubeIcon /> 2
</FlexItem>
<FlexItem>
<CheckCircleIcon /> 11
</FlexItem>
<FlexItem>
<ExclamationTriangleIcon /> 4
</FlexItem>
<FlexItem>
<TimesCircleIcon /> 1
</FlexItem>
<FlexItem> Updated 2 days ago</FlexItem>
</Flex>
</FlexItem>
</Flex>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
<Flex>
<FlexItem>
<Button variant="secondary">Action</Button>
</FlexItem>
<FlexItem>
<a href="#">Link</a>
</FlexItem>
</Flex>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
</PageSection>
</DashboardWrapper>
</React.Fragment>
);
};
12 changes: 12 additions & 0 deletions packages/react-core/src/demos/DataListDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,20 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { css } from '@patternfly/react-styles';

import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';

## Demos

### Basic

```js file="./DataList/examples/DataListBasic.tsx" isFullscreen

```

### Expandable control in toolbar

```js
Expand Down