Skip to content

Commit 22d074f

Browse files
thatblindgeyethatblindgeye
authored
chore(DescriptionList): added in drawer demo (#11404)
* chore(DescriptionList): added in drawer demo * Removed page section styling * Updated card button behavior to match state
1 parent 9868ab5 commit 22d074f

File tree

2 files changed

+169
-1
lines changed

2 files changed

+169
-1
lines changed

‎packages/react-core/src/demos/DescriptionList/DescriptionList.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ section: components
44
---
55

66
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
7+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
78
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
89

910
## Demos
1011

1112
### Basic
1213

1314
```js file='./examples/DescriptionListBasic.tsx' isFullscreen
14-
```
15+
```
16+
17+
### In drawer
18+
19+
```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
20+
```

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React from 'react';
2+
import {
3+
Gallery,
4+
Content,
5+
PageSection,
6+
GalleryItem,
7+
Card,
8+
CardBody,
9+
DrawerHead,
10+
DrawerActions,
11+
DrawerCloseButton,
12+
DrawerPanelBody,
13+
DescriptionList,
14+
DescriptionListTerm,
15+
DescriptionListGroup,
16+
DescriptionListDescription,
17+
Button,
18+
Title
19+
} from '@patternfly/react-core';
20+
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
21+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
22+
23+
export const DescriptionListInDrawer: React.FunctionComponent = () => {
24+
const drawerRef = React.useRef<HTMLDivElement>(null);
25+
const btnRef = React.useRef<HTMLDivElement>(null);
26+
const [isExpanded, setIsExpanded] = React.useState(true);
27+
28+
const onExpand = () => {
29+
drawerRef.current && drawerRef.current.focus();
30+
};
31+
32+
const onCloseClick = () => {
33+
setIsExpanded(false);
34+
btnRef.current && btnRef.current.focus();
35+
};
36+
37+
const onToggleDrawer = () => {
38+
setIsExpanded((prevIsExpanded) => !prevIsExpanded);
39+
};
40+
41+
const panelContent = (
42+
<>
43+
<DrawerHead>
44+
<Title headingLevel="h2">
45+
<span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}>
46+
test
47+
</span>
48+
</Title>
49+
<DrawerActions>
50+
<DrawerCloseButton onClick={onCloseClick} />
51+
</DrawerActions>
52+
</DrawerHead>
53+
<DrawerPanelBody>
54+
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
55+
<DescriptionListGroup>
56+
<DescriptionListTerm>Name</DescriptionListTerm>
57+
<DescriptionListDescription>test</DescriptionListDescription>
58+
</DescriptionListGroup>
59+
<DescriptionListGroup>
60+
<DescriptionListTerm>Namespace</DescriptionListTerm>
61+
<DescriptionListDescription>
62+
<a href="#">mary-test</a>
63+
</DescriptionListDescription>
64+
</DescriptionListGroup>
65+
<DescriptionListGroup>
66+
<DescriptionListTerm>Labels</DescriptionListTerm>
67+
<DescriptionListDescription>app=test</DescriptionListDescription>
68+
</DescriptionListGroup>
69+
<DescriptionListGroup>
70+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
71+
<DescriptionListDescription>Node selector is not available at this time</DescriptionListDescription>
72+
</DescriptionListGroup>
73+
<DescriptionListGroup>
74+
<DescriptionListTerm>Tolerations</DescriptionListTerm>
75+
<DescriptionListDescription>No tolerations</DescriptionListDescription>
76+
</DescriptionListGroup>
77+
<DescriptionListGroup>
78+
<DescriptionListTerm>Annotations</DescriptionListTerm>
79+
<DescriptionListDescription>No annotaions</DescriptionListDescription>
80+
</DescriptionListGroup>
81+
<DescriptionListGroup>
82+
<DescriptionListTerm>Status</DescriptionListTerm>
83+
<DescriptionListDescription>Active</DescriptionListDescription>
84+
</DescriptionListGroup>
85+
<DescriptionListGroup>
86+
<DescriptionListTerm>Created at:</DescriptionListTerm>
87+
<DescriptionListDescription>3 minutes agot</DescriptionListDescription>
88+
</DescriptionListGroup>
89+
<DescriptionListGroup>
90+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
91+
<DescriptionListDescription>
92+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
93+
app=MyApp
94+
</Button>
95+
</DescriptionListDescription>
96+
</DescriptionListGroup>
97+
<DescriptionListGroup>
98+
<DescriptionListTerm>Session affinity</DescriptionListTerm>
99+
<DescriptionListDescription>None</DescriptionListDescription>
100+
</DescriptionListGroup>
101+
<DescriptionListGroup>
102+
<DescriptionListTerm>Latest version</DescriptionListTerm>
103+
<DescriptionListDescription>1.0</DescriptionListDescription>
104+
</DescriptionListGroup>
105+
<DescriptionListGroup>
106+
<DescriptionListTerm>Update strategy</DescriptionListTerm>
107+
<DescriptionListDescription>Rolling</DescriptionListDescription>
108+
</DescriptionListGroup>
109+
<DescriptionListGroup>
110+
<DescriptionListTerm>Timeout</DescriptionListTerm>
111+
<DescriptionListDescription>600 seconds</DescriptionListDescription>
112+
</DescriptionListGroup>
113+
<DescriptionListGroup>
114+
<DescriptionListTerm>Max available</DescriptionListTerm>
115+
<DescriptionListDescription>25% of 1 pod</DescriptionListDescription>
116+
</DescriptionListGroup>
117+
<DescriptionListGroup>
118+
<DescriptionListTerm>Max surge</DescriptionListTerm>
119+
<DescriptionListDescription>25% greater than 1 pod</DescriptionListDescription>
120+
</DescriptionListGroup>
121+
</DescriptionList>
122+
</DrawerPanelBody>
123+
</>
124+
);
125+
126+
const drawerContent = (
127+
<Gallery hasGutter>
128+
<GalleryItem key={0}>
129+
<Card>
130+
<CardBody>
131+
<Button variant="link" isInline onClick={onToggleDrawer} ref={btnRef}>
132+
{`${isExpanded ? 'Close' : 'Open'} drawer`}
133+
</Button>
134+
</CardBody>
135+
</Card>
136+
</GalleryItem>
137+
{Array.from({ length: 30 }).map((_value, index) => (
138+
<GalleryItem key={index + 1}>
139+
<Card>
140+
<CardBody>{`Card-${index + 1}`}</CardBody>
141+
</Card>
142+
</GalleryItem>
143+
))}
144+
</Gallery>
145+
);
146+
147+
return (
148+
<DashboardWrapper
149+
notificationDrawer={panelContent}
150+
isNotificationDrawerExpanded={isExpanded}
151+
onNotificationDrawerExpand={onExpand}
152+
>
153+
<PageSection>
154+
<Content>
155+
<Content component="h1">Main title</Content>
156+
<Content component="p">This is a full page demo.</Content>
157+
</Content>
158+
</PageSection>
159+
<PageSection>{drawerContent}</PageSection>
160+
</DashboardWrapper>
161+
);
162+
};

0 commit comments

Comments
 (0)