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.

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

Add DataList actions demo #10251

Closed
wants to merge 4 commits into from
+135 −0
Closed

Add DataList actions demo #10251

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa70ba4
add DataList actions demo
ajaypratap003 Apr 5, 2024
b1b296f
implement review comments
ajaypratap003 Apr 24, 2024
420b6e0
fix import issue
ajaypratap003 May 10, 2024
cbfd3ec
rebase with main
ajaypratap003 Jun 1, 2024
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
136 changes: 136 additions & 0 deletions packages/react-core/src/demos/DataList/examples/DataListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import React from 'react';
import {
Button,
DataList,
DataListItem,
DataListCell,
DataListItemRow,
DataListItemCells,
DataListAction,
Dropdown,
DropdownList,
DropdownItem,
MenuToggle,
MenuToggleElement,
PageSection,
PageSectionVariants,
TextContent,
Text
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

export const DataListActions: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
const [isDeleted, setIsDeleted] = React.useState(false);

const onToggle = () => {
setIsOpen(!isOpen);
};

const onSelect = () => {
setIsOpen(!isOpen);
};

return (
<React.Fragment>
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Projects</Text>
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
</TextContent>
</PageSection>
<DataList aria-label="single action data list example ">
{!isDeleted && (
<DataListItem aria-labelledby="single-action-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="single-action-item1">Single actionable Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="single-action-item1 single-action-action1"
id="single-action-action1"
aria-label="Actions"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 3 props can be removed from DataListAction here and the other instance of the component. They're not currently being applied anywhere internally.

Ideally they could be applied to the Button (or whatever interactive action) that is passed as children. Depending on whether this demo should be more 1:1 to the Core demo (where each DataListItem as the same "Delete" and "Link" action visually), then we could move the aria-labelledby and id props to those components.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 3 props can be removed from DataListAction here and the other instance of the component. They're not currently being applied anywhere internally.

These 3 props are mandatory fields , so we can't remove

Ideally they could be applied to the Button (or whatever interactive action) that is passed as children. Depending on whether this demo should be more 1:1 to the Core demo (where each DataListItem as the same "Delete" and "Link" action visually), then we could move the aria-labelledby and id props to those components.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tlabaj would there be any objection to either marking these props as optional or removing them from the DataListAction interface? We'd still be destructuring them where are are currently so they wouldn't actually be applied to anything, so it shouldn't really cause any issues. It would just prevent us from having to pass in props that aren't doing anything like this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do have an issue tracking this #9823 it just needs to be prioritized.

>
<Button
onClick={() => {
if (confirm('Are you sure?')) {
setIsDeleted(true);
}
}}
variant="primary"
key="delete-action"
>
Delete
</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
)}
<DataListItem aria-labelledby="multi-actions-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="multi-actions-item1">Multi actions Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="multi-actions-item1 multi-actions-action1"
id="multi-actions-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
isExpanded={isOpen}
onClick={onToggle}
variant="plain"
aria-label="Data list with actions example kebab toggle"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
>
<DropdownList>
<DropdownItem key="action">Action</DropdownItem>
{/* Prevent default onClick functionality for example
purposes */}
<DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
Link
</DropdownItem>
<DropdownItem key="disabled action" isDisabled>
Disabled Action
</DropdownItem>
<DropdownItem
key="disabled link"
isDisabled
to="#"
onClick={(event: any) => event.preventDefault()}
>
Disabled Link
</DropdownItem>
</DropdownList>
</Dropdown>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
</DashboardWrapper>
</React.Fragment>
);
};
5 changes: 5 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 @@ -28,3 +28,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard

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

### Actions: single and multiple
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved

```js file="./DataList/examples/DataListActions.tsx" isFullscreen
```
Loading