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

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 5 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
25 changes: 25 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,25 @@
---
id: Description list
section: components
---

import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
import pfIcon from '../assets/pf-logo-small.svg';
import pfLogo from '../assets/pf-logo.svg';
ajaypratap003 marked this conversation as resolved.
Show resolved Hide resolved
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import { Link } from '@reach/router';
ajaypratap003 marked this conversation as resolved.
Show resolved Hide resolved
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

## Demos

### In drawer

```js file='./examples/DescriptionListDrawer.tsx' isFullscreen
```
163 changes: 163 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,163 @@
import React from 'react';
import {
Gallery,
PageSection,
GalleryItem,
Card,
CardBody,
Drawer,
DrawerPanelContent,
DrawerContent,
DrawerContentBody,
DrawerHead,
DrawerActions,
DrawerCloseButton,
PageSectionVariants,
TextContent,
Text,
DrawerPanelBody,
DescriptionList,
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Button,
Tabs,
Tab
} 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>();
const [isExpanded, setIsExpanded] = React.useState(true);

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

const onCloseClick = () => {
setIsExpanded(false);
};

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

const panelContent = (
<DrawerPanelContent>
<DrawerHead>
<Text component="h1">ajay-test</Text>
ajaypratap003 marked this conversation as resolved.
Show resolved Hide resolved
<DrawerActions>
<DrawerCloseButton onClick={onCloseClick} />
</DrawerActions>
</DrawerHead>
<DrawerPanelBody>
<Tabs activeKey={0} variant={'default'} aria-label="Tabs in the box light variation example" role="region">
ajaypratap003 marked this conversation as resolved.
Show resolved Hide resolved
<Tab eventKey={0} title="Overview">
ajaypratap003 marked this conversation as resolved.
Show resolved Hide resolved
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
<DescriptionListGroup>
<DescriptionListTerm>Name</DescriptionListTerm>
<DescriptionListDescription>ajay-test</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Namespace</DescriptionListTerm>
<DescriptionListDescription>
<a href="#">mary-test</a>
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
<DescriptionListDescription>app=ajay-test</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Pod selector</DescriptionListTerm>
<DescriptionListDescription>Nod 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>
</Tab>
<Tab eventKey={1} title="Activity" disabled>
content
</Tab>
</Tabs>
</DrawerPanelBody>
</DrawerPanelContent>
);

const drawerContent = (
<Gallery hasGutter>
{Array.from({ length: 30 }).map((_value, index) => (
<GalleryItem key={index}>
<Card key={index} onClick={onClickCard}>
<CardBody>Click here to open drawer</CardBody>
</Card>
</GalleryItem>
))}
</Gallery>
);

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