Skip to content

Commit

Permalink
Removed page section styling, added page section
Browse files Browse the repository at this point in the history
  • Loading branch information
@thatblindgeye
thatblindgeye committed Jan 10, 2025
1 parent 821f1e1 commit dc0a1e4
Showing 1 changed file with 77 additions and 71 deletions.
148 changes: 77 additions & 71 deletions packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
MenuToggle,
MenuToggleElement,
PageSection,
PageSectionVariants,
Title
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
Expand All @@ -34,95 +33,102 @@ export const DataListActionable: React.FunctionComponent = () => {

return (
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
<PageSection variant={PageSectionVariants.secondary}>
<PageSection>
<Content>
<Title headingLevel="h1">Projects</Title>
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
</Content>
</PageSection>
<DataList aria-label="single action data list example ">
{!isDeleted && (
<DataListItem aria-labelledby="single-action-item1">
<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"
>
<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="single-action-item1">Single actionable Primary content</span>
<span id="multi-actions-item1">Multi actions Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
<DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="single-action-item1 single-action-action1"
id="single-action-action1"
aria-labelledby="multi-actions-item1 multi-actions-action1"
id="multi-actions-action1"
aria-label="Actions"
>
<Button
onClick={() => {
if (confirm('Are you sure?')) {
setIsDeleted(true);
}
}}
variant="primary"
key="delete-action"
<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)}
>
Delete
</Button>
<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>
)}
<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"
>
<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>
</DataList>
</PageSection>
</DashboardWrapper>
);
};

0 comments on commit dc0a1e4

Please sign in to comment.