@patternfly/react-core 4.222.7 → 4.222.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 4.222.8 (2022-06-16)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Table:** filterable table demo icon text spacing fix ([#7477](https://github.com/patternfly/patternfly-react/issues/7477)) ([e35387f](https://github.com/patternfly/patternfly-react/commit/e35387f42b355000ff66a79e1031eb6e9a7bb8c3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 4.222.7 (2022-06-16)
|
|
7
18
|
|
|
8
19
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.222.
|
|
3
|
+
"version": "4.222.8",
|
|
4
4
|
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"generate": "node scripts/copyStyles.js"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@patternfly/react-icons": "^4.73.
|
|
38
|
-
"@patternfly/react-styles": "^4.72.
|
|
39
|
-
"@patternfly/react-tokens": "^4.74.
|
|
37
|
+
"@patternfly/react-icons": "^4.73.8",
|
|
38
|
+
"@patternfly/react-styles": "^4.72.8",
|
|
39
|
+
"@patternfly/react-tokens": "^4.74.8",
|
|
40
40
|
"focus-trap": "6.9.2",
|
|
41
41
|
"react-dropzone": "9.0.0",
|
|
42
42
|
"tippy.js": "5.1.2",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react": "^16.8.0 || ^17.0.0",
|
|
61
61
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "578849aa95888275b3834c63ffac16fb41ae0a2f"
|
|
64
64
|
}
|
package/src/demos/JumpLinks.md
CHANGED
|
@@ -130,3 +130,13 @@ ScrollspyH2 = () => {
|
|
|
130
130
|
);
|
|
131
131
|
};
|
|
132
132
|
```
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
### With drawer
|
|
136
|
+
|
|
137
|
+
This demo shows how jump links can be used in combination with a drawer.
|
|
138
|
+
|
|
139
|
+
The `scrollableSelector` prop passed to the jump links component is an `id` that was placed on the `DrawerContent` component.
|
|
140
|
+
|
|
141
|
+
```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
|
|
142
|
+
```
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
Drawer,
|
|
5
|
+
DrawerPanelContent,
|
|
6
|
+
DrawerContent,
|
|
7
|
+
DrawerContentBody,
|
|
8
|
+
DrawerHead,
|
|
9
|
+
DrawerActions,
|
|
10
|
+
DrawerCloseButton,
|
|
11
|
+
JumpLinks,
|
|
12
|
+
JumpLinksItem,
|
|
13
|
+
JumpLinksList,
|
|
14
|
+
PageSection,
|
|
15
|
+
Sidebar,
|
|
16
|
+
SidebarContent,
|
|
17
|
+
SidebarPanel,
|
|
18
|
+
TextContent,
|
|
19
|
+
getResizeObserver
|
|
20
|
+
} from '@patternfly/react-core';
|
|
21
|
+
import DashboardWrapper from '../DashboardWrapper';
|
|
22
|
+
|
|
23
|
+
export const JumpLinksWithDrawer = () => {
|
|
24
|
+
const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
|
|
25
|
+
|
|
26
|
+
const [offsetHeight, setOffsetHeight] = React.useState(0);
|
|
27
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
28
|
+
const drawerRef = React.useRef();
|
|
29
|
+
|
|
30
|
+
React.useEffect(() => {
|
|
31
|
+
const masthead = document.getElementsByClassName('pf-c-masthead')[0];
|
|
32
|
+
const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
|
|
33
|
+
|
|
34
|
+
getResizeObserver(masthead, () => {
|
|
35
|
+
setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
|
|
36
|
+
});
|
|
37
|
+
}, []);
|
|
38
|
+
|
|
39
|
+
const onCloseClick = () => {
|
|
40
|
+
setIsExpanded(false);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const onToggleClick = () => {
|
|
44
|
+
setIsExpanded(!isExpanded);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const panelContent = (
|
|
48
|
+
<DrawerPanelContent>
|
|
49
|
+
<DrawerHead>
|
|
50
|
+
<span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
|
|
51
|
+
drawer-panel
|
|
52
|
+
</span>
|
|
53
|
+
<DrawerActions>
|
|
54
|
+
<DrawerCloseButton onClick={onCloseClick} />
|
|
55
|
+
</DrawerActions>
|
|
56
|
+
</DrawerHead>
|
|
57
|
+
</DrawerPanelContent>
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
|
|
62
|
+
<Drawer isExpanded={isExpanded}>
|
|
63
|
+
<DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
|
|
64
|
+
<DrawerContentBody hasPadding>
|
|
65
|
+
<Sidebar>
|
|
66
|
+
<SidebarPanel variant="sticky">
|
|
67
|
+
<JumpLinks
|
|
68
|
+
isVertical={true}
|
|
69
|
+
label="Jump to section"
|
|
70
|
+
scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
|
|
71
|
+
offset={offsetHeight}
|
|
72
|
+
expandable={{ default: 'expandable', md: 'nonExpandable' }}
|
|
73
|
+
>
|
|
74
|
+
{headings.map(heading => (
|
|
75
|
+
<JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
|
|
76
|
+
{`${heading} section`}
|
|
77
|
+
<JumpLinksList></JumpLinksList>
|
|
78
|
+
</JumpLinksItem>
|
|
79
|
+
))}
|
|
80
|
+
</JumpLinks>
|
|
81
|
+
</SidebarPanel>
|
|
82
|
+
<SidebarContent>
|
|
83
|
+
<PageSection sticky="top" variant="light">
|
|
84
|
+
<Button onClick={onToggleClick}>Toggle drawer</Button>
|
|
85
|
+
</PageSection>
|
|
86
|
+
<TextContent>
|
|
87
|
+
{headings.map(heading => (
|
|
88
|
+
<div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
|
|
89
|
+
<h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
|
|
90
|
+
{`${heading} section`}
|
|
91
|
+
</h2>
|
|
92
|
+
<p>
|
|
93
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim
|
|
94
|
+
purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel.
|
|
95
|
+
Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc
|
|
96
|
+
viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit,
|
|
97
|
+
tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus,
|
|
98
|
+
vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper.
|
|
99
|
+
Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla.
|
|
100
|
+
Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros
|
|
101
|
+
pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a
|
|
102
|
+
accumsan. Nam pretium vitae leo vitae rhoncus.
|
|
103
|
+
</p>
|
|
104
|
+
<p>
|
|
105
|
+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
|
106
|
+
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
|
|
107
|
+
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et
|
|
108
|
+
dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
|
|
109
|
+
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
|
|
110
|
+
possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
|
|
111
|
+
aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
|
|
112
|
+
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
|
|
113
|
+
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
|
|
114
|
+
</p>
|
|
115
|
+
</div>
|
|
116
|
+
))}
|
|
117
|
+
</TextContent>
|
|
118
|
+
</SidebarContent>
|
|
119
|
+
</Sidebar>
|
|
120
|
+
</DrawerContentBody>
|
|
121
|
+
</DrawerContent>
|
|
122
|
+
</Drawer>
|
|
123
|
+
</DashboardWrapper>
|
|
124
|
+
);
|
|
125
|
+
};
|