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

Jump to bottom

Descriptionlist in drawer demo #10229

Open
wants to merge 11 commits into
base: v5
Choose a base branch
from
+181 −0
Open

Descriptionlist in drawer demo #10229

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
8c911f1
add description list basic demo
ajaypratap003 Mar 21, 2024
36c6945
fix DashboardWrapper not found issue
ajaypratap003 Mar 27, 2024
774eeb4
Merge remote-tracking branch 'upstream/main' into demo-descriptionlist
ajaypratap003 Apr 1, 2024
428d280
add descriptionlist in drawer demo
ajaypratap003 Apr 1, 2024
ecdda3e
open drawer on card click
ajaypratap003 Apr 1, 2024
0e81335
fix drawer height issue
ajaypratap003 Apr 22, 2024
efa6dbb
remove unused imports and
ajaypratap003 Apr 23, 2024
dab63d4
fix typo
ajaypratap003 Apr 24, 2024
438245b
add isInline prop in button
ajaypratap003 Apr 25, 2024
d150b5a
set focus on drawer title
ajaypratap003 Apr 25, 2024
cd2d87f
fix drawer porps issue
ajaypratap003 May 6, 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
14 changes: 14 additions & 0 deletions packages/react-core/src/demos/DescriptionList/DescriptionList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
id: Description list
section: components
---

import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

## Demos

### In drawer

```js file='./examples/DescriptionListDrawer.tsx' isFullscreen
```
167 changes: 167 additions & 0 deletions packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
import React from 'react';
import {
Gallery,
PageSection,
GalleryItem,
Card,
CardBody,
DrawerHead,
DrawerActions,
DrawerCloseButton,
PageSectionVariants,
TextContent,
Text,
DrawerPanelBody,
DescriptionList,
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Button,
Page,
Title
} from '@patternfly/react-core';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';

export const DescriptionListDrawer: React.FunctionComponent = () => {
const drawerRef = React.useRef<HTMLDivElement>(null);
const btnRef = React.useRef<HTMLDivElement>(null);
const [isExpanded, setIsExpanded] = React.useState(true);

const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
};

const onCloseClick = () => {
setIsExpanded(false);
btnRef.current && btnRef.current.focus();
};

const onOpenDrawer = () => {
setIsExpanded(true);
};

const panelContent = (
<>
<DrawerHead>
<Title headingLevel="h2">
<span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
test
</span>
</Title>
<DrawerActions>
<DrawerCloseButton onClick={onCloseClick} />
</DrawerActions>
</DrawerHead>
<DrawerPanelBody>
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
<DescriptionListGroup>
<DescriptionListTerm>Name</DescriptionListTerm>
<DescriptionListDescription>test</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Namespace</DescriptionListTerm>
<DescriptionListDescription>
<a href="#">mary-test</a>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
<DescriptionListDescription>app=test</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Tolerations</DescriptionListTerm>
<DescriptionListDescription>No tolerations</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Annotations</DescriptionListTerm>
<DescriptionListDescription>No annotaions</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Status</DescriptionListTerm>
<DescriptionListDescription>Active</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Created at:</DescriptionListTerm>
<DescriptionListDescription>3 minutes agot</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>
<Button variant="link" isInline icon={<PlusCircleIcon />}>
app=MyApp
</Button>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Session affinity</DescriptionListTerm>
<DescriptionListDescription>None</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Latest version</DescriptionListTerm>
<DescriptionListDescription>1.0</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Update strategy</DescriptionListTerm>
<DescriptionListDescription>Rolling</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Timeout</DescriptionListTerm>
<DescriptionListDescription>600 seconds</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Max available</DescriptionListTerm>
<DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Max surge</DescriptionListTerm>
<DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</DrawerPanelBody>
</>
);

const drawerContent = (
<Gallery hasGutter>
<GalleryItem key={0}>
<Card>
<CardBody>
<Button variant="link" isInline onClick={onOpenDrawer} ref={btnRef}>
Open drawer
</Button>
</CardBody>
</Card>
</GalleryItem>
{Array.from({ length: 30 }).map((_value, index) => (
<GalleryItem key={index + 1}>
<Card>
<CardBody>{`Card-${index + 1}`}</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
);

return (
<DashboardWrapper
notificationDrawer={panelContent}
isNotificationDrawerExpanded={isExpanded}
onNotificationDrawerExpand={onExpand}
>
<Page>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main title</Text>
<Text component="p">This is a full page demo.</Text>
</TextContent>
</PageSection>
<PageSection>{drawerContent}</PageSection>
</Page>
</DashboardWrapper>
);
};
Loading