@patternfly/react-core 4.251.0 → 4.251.2
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 +19 -0
- package/dist/umd/react-core.min.css +957 -957
- package/package.json +2 -2
- package/src/components/SkipToContent/examples/SkipToContent.md +1 -103
- package/src/components/SkipToContent/examples/SkipToContentBasic.tsx +128 -0
- package/src/components/TextInput/examples/TextInput.md +8 -231
- package/src/components/TextInput/examples/TextInputBasic.tsx +7 -0
- package/src/components/TextInput/examples/TextInputDisabled.tsx +6 -0
- package/src/components/TextInput/examples/TextInputIcon.tsx +39 -0
- package/src/components/TextInput/examples/TextInputIconSprite.tsx +63 -0
- package/src/components/TextInput/examples/TextInputInvalid.tsx +16 -0
- package/src/components/TextInput/examples/TextInputLeftTruncated.tsx +17 -0
- package/src/components/TextInput/examples/TextInputReadOnly.tsx +25 -0
- package/src/components/TextInput/examples/TextInputSelectUsingRef.tsx +16 -0
- package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +55 -49
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Checkbox, TextInput } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const TextInputReadOnly: React.FunctionComponent = () => {
|
|
5
|
+
const [isPlainChecked, setIsPlainChecked] = React.useState(false);
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
<div style={{ marginBottom: '12px' }}>
|
|
9
|
+
<Checkbox
|
|
10
|
+
id="isPlain"
|
|
11
|
+
key="isPlain"
|
|
12
|
+
label="Plain read only variant"
|
|
13
|
+
isChecked={isPlainChecked}
|
|
14
|
+
onChange={checked => setIsPlainChecked(checked)}
|
|
15
|
+
/>
|
|
16
|
+
</div>
|
|
17
|
+
<TextInput
|
|
18
|
+
value="read only text input example"
|
|
19
|
+
type="text"
|
|
20
|
+
readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
|
|
21
|
+
aria-label="readonly input example"
|
|
22
|
+
/>
|
|
23
|
+
</>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TextInput } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const TextInputSelectUsingRef: React.FunctionComponent = () => {
|
|
5
|
+
const [value, setValue] = React.useState('select all on click');
|
|
6
|
+
const ref = React.useRef<HTMLInputElement>(null);
|
|
7
|
+
return (
|
|
8
|
+
<TextInput
|
|
9
|
+
ref={ref}
|
|
10
|
+
value={value}
|
|
11
|
+
onFocus={() => ref?.current?.select()}
|
|
12
|
+
onChange={value => setValue(value)}
|
|
13
|
+
aria-label="select-all"
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
JumpLinksItem,
|
|
13
13
|
JumpLinksList,
|
|
14
14
|
PageSection,
|
|
15
|
+
PageSectionVariants,
|
|
15
16
|
Sidebar,
|
|
16
17
|
SidebarContent,
|
|
17
18
|
SidebarPanel,
|
|
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
|
|
|
29
30
|
|
|
30
31
|
React.useEffect(() => {
|
|
31
32
|
const masthead = document.getElementsByClassName('pf-c-masthead')[0];
|
|
32
|
-
const drawerToggleSection = document.
|
|
33
|
+
const drawerToggleSection = document.getElementById('drawer-toggle');
|
|
33
34
|
|
|
34
35
|
getResizeObserver(masthead, () => {
|
|
35
36
|
setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
|
|
@@ -61,60 +62,65 @@ export const JumpLinksWithDrawer = () => {
|
|
|
61
62
|
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
|
|
62
63
|
<Drawer isExpanded={isExpanded}>
|
|
63
64
|
<DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
|
|
64
|
-
<DrawerContentBody
|
|
65
|
+
<DrawerContentBody>
|
|
65
66
|
<Sidebar>
|
|
66
67
|
<SidebarPanel variant="sticky">
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
{
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
68
|
+
<PageSection variant={PageSectionVariants.light}>
|
|
69
|
+
<JumpLinks
|
|
70
|
+
isVertical={true}
|
|
71
|
+
label="Jump to section"
|
|
72
|
+
scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
|
|
73
|
+
offset={offsetHeight}
|
|
74
|
+
expandable={{ default: 'expandable', md: 'nonExpandable' }}
|
|
75
|
+
>
|
|
76
|
+
{headings.map(heading => (
|
|
77
|
+
<JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
|
|
78
|
+
{`${heading} section`}
|
|
79
|
+
<JumpLinksList></JumpLinksList>
|
|
80
|
+
</JumpLinksItem>
|
|
81
|
+
))}
|
|
82
|
+
</JumpLinks>
|
|
83
|
+
</PageSection>
|
|
81
84
|
</SidebarPanel>
|
|
82
85
|
<SidebarContent>
|
|
83
|
-
<PageSection
|
|
86
|
+
<PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }} variant="light">
|
|
84
87
|
<Button onClick={onToggleClick}>Toggle drawer</Button>
|
|
85
88
|
</PageSection>
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
{
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
89
|
+
<PageSection variant={PageSectionVariants.light}>
|
|
90
|
+
<TextContent>
|
|
91
|
+
{headings.map(heading => (
|
|
92
|
+
<div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
|
|
93
|
+
<h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
|
|
94
|
+
{`${heading} section`}
|
|
95
|
+
</h2>
|
|
96
|
+
<p>
|
|
97
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper,
|
|
98
|
+
dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus
|
|
99
|
+
efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut
|
|
100
|
+
vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac
|
|
101
|
+
accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in.
|
|
102
|
+
Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae
|
|
103
|
+
ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur
|
|
104
|
+
porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec
|
|
105
|
+
augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus
|
|
106
|
+
porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.
|
|
107
|
+
</p>
|
|
108
|
+
<p>
|
|
109
|
+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
|
|
110
|
+
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
|
|
111
|
+
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
|
|
112
|
+
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
|
|
113
|
+
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
|
|
114
|
+
placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
|
|
115
|
+
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
|
116
|
+
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
|
|
117
|
+
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
|
|
118
|
+
doloribus asperiores repellat.
|
|
119
|
+
</p>
|
|
120
|
+
</div>
|
|
121
|
+
))}
|
|
122
|
+
</TextContent>
|
|
123
|
+
</PageSection>
|
|
118
124
|
</SidebarContent>
|
|
119
125
|
</Sidebar>
|
|
120
126
|
</DrawerContentBody>
|