@patternfly/react-core 4.222.1 → 4.222.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +5 -5
  3. package/src/components/InputGroup/examples/InputGroup.md +5 -237
  4. package/src/components/InputGroup/examples/InputGroupBasic.tsx +31 -0
  5. package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx +43 -0
  6. package/src/components/InputGroup/examples/InputGroupWithPopover.tsx +33 -0
  7. package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx +32 -0
  8. package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx +13 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.2 (2022-06-15)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  ## 4.222.1 (2022-06-15)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-core
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.222.1",
3
+ "version": "4.222.2",
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.1",
38
- "@patternfly/react-styles": "^4.72.1",
39
- "@patternfly/react-tokens": "^4.74.1",
37
+ "@patternfly/react-icons": "^4.73.2",
38
+ "@patternfly/react-styles": "^4.72.2",
39
+ "@patternfly/react-tokens": "^4.74.2",
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": "badaa87b0f9005b2daf2a64636260131cc053159"
63
+ "gitHead": "7c58918e8fab9b30e51e24dce84141b9a7a063d2"
64
64
  }
package/src/components/InputGroup/examples/InputGroup.md CHANGED
@@ -8,256 +8,24 @@ import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
8
8
  import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
9
9
  import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
10
10
  import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
11
- import {
12
- Button,
13
- ButtonVariant,
14
- TextArea,
15
- InputGroup,
16
- InputGroupText,
17
- TextInput,
18
- Dropdown,
19
- DropdownToggle,
20
- DropdownItem,
21
- Popover,
22
- PopoverPosition
23
- } from '@patternfly/react-core';
24
11
 
25
12
  ## Examples
26
13
  ### Basic
27
- ```js
28
- import React from 'react';
29
- import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
30
- import {
31
- Button,
32
- InputGroup,
33
- InputGroupText,
34
- InputGroupTextVariant,
35
- TextInput,
36
- ValidatedOptions
37
- } from '@patternfly/react-core';
38
-
39
- class SimpleInputGroups extends React.Component {
40
- constructor(props) {
41
- super(props);
42
- }
43
-
44
- render() {
45
- return (
46
- <React.Fragment>
47
- <InputGroup>
48
- <TextInput id="textInput6" type="email" aria-label="email input field" />
49
- <InputGroupText id="email-example">@example.com</InputGroupText>
50
- </InputGroup>
51
- <br />
52
- <InputGroup>
53
- <InputGroupText id="username">
54
- <AtIcon />
55
- </InputGroupText>
56
- <TextInput validated={ValidatedOptions.error} id="textInput7" type="email" aria-label="Error state username example" />
57
- </InputGroup>
58
- <br />
59
- <InputGroup>
60
- <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
61
- <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>%</InputGroupText>
62
- </InputGroup>
63
- </React.Fragment>
64
- );
65
- }
66
- }
14
+ ```ts file='./InputGroupBasic.tsx'
67
15
  ```
68
16
 
69
17
  ### With textarea
70
- ```js
71
- import React from 'react';
72
- import {
73
- Button,
74
- TextArea,
75
- InputGroup
76
- } from '@patternfly/react-core';
77
-
78
- class SimpleInputGroups extends React.Component {
79
- constructor(props) {
80
- super(props);
81
- }
82
-
83
- render() {
84
- return (
85
- <React.Fragment>
86
- <InputGroup>
87
- <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
88
- <Button id="textAreaButton2" variant="control">
89
- Button
90
- </Button>
91
- </InputGroup>
92
- </React.Fragment>
93
- );
94
- }
95
- }
18
+ ```ts file='./InputGroupWithTextarea.tsx'
96
19
  ```
97
20
 
98
21
  ### With dropdown
99
- ```js
100
- import React from 'react';
101
- import {
102
- Button,
103
- InputGroup,
104
- TextInput,
105
- Dropdown,
106
- DropdownToggle,
107
- DropdownItem
108
- } from '@patternfly/react-core';
109
-
110
- class SimpleInputGroups extends React.Component {
111
- constructor(props) {
112
- super(props);
113
- this.state = {
114
- isOpen: false,
115
- selected: ''
116
- };
117
- this.onToggle = isOpen => {
118
- this.setState({
119
- isOpen
120
- });
121
- };
122
- this.onSelect = event => {
123
- this.setState({
124
- isOpen: false,
125
- selected: event.currentTarget.value
126
- });
127
- };
128
- }
129
-
130
- render() {
131
- return (
132
- <React.Fragment>
133
- <InputGroup>
134
- <Dropdown
135
- onSelect={this.onSelect}
136
- toggle={
137
- <DropdownToggle onToggle={this.onToggle}>
138
- {this.state.selected ? this.state.selected : 'Dropdown'}
139
- </DropdownToggle>
140
- }
141
- isOpen={this.state.isOpen}
142
- dropdownItems={[
143
- <DropdownItem key="opt-1" value="Option 1" component="button">
144
- Option 1
145
- </DropdownItem>,
146
- <DropdownItem key="opt-2" value="Option 2" component="button">
147
- Option 2
148
- </DropdownItem>,
149
- <DropdownItem key="opt-3" value="Option 3" component="button">
150
- Option 3
151
- </DropdownItem>
152
- ]}
153
- />
154
- <TextInput id="textInput3" aria-label="input with dropdown and button" />
155
- <Button id="inputDropdownButton1" variant="control">Button</Button>
156
- </InputGroup>
157
- </React.Fragment>
158
- );
159
- }
160
- }
22
+ ```ts file='./InputGroupWithDropdown.tsx'
161
23
  ```
162
24
 
163
25
  ### With popover
164
- ```js
165
- import React from 'react';
166
- import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
167
- import {
168
- Button,
169
- InputGroup,
170
- TextInput,
171
- Popover,
172
- PopoverPosition
173
- } from '@patternfly/react-core';
174
-
175
- class SimpleInputGroups extends React.Component {
176
- constructor(props) {
177
- super(props);
178
- }
179
-
180
- render() {
181
- return (
182
- <React.Fragment>
183
- <InputGroup>
184
- <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
185
- <Popover
186
- aria-label="popover example"
187
- position={PopoverPosition.top}
188
- bodyContent="This field is an example of an input group with a popover."
189
- >
190
- <Button variant="control" aria-label="popover for input">
191
- <QuestionCircleIcon />
192
- </Button>
193
- </Popover>
194
- </InputGroup>
195
- <br />
196
- <InputGroup>
197
- <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
198
- <Popover
199
- aria-label="popover example"
200
- position={PopoverPosition.top}
201
- bodyContent="This field is an example of an input group with a popover."
202
- >
203
- <Button variant="plain" aria-label="Popover for input">
204
- <QuestionCircleIcon />
205
- </Button>
206
- </Popover>
207
- </InputGroup>
208
- </React.Fragment>
209
- );
210
- }
211
- }
26
+ ```ts file ='./InputGroupWithPopover.tsx'
212
27
  ```
213
28
 
214
-
215
29
  ### With multiple group siblings
216
- ```js
217
- import React from 'react';
218
- import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
219
- import {
220
- Button,
221
- TextArea,
222
- InputGroup,
223
- InputGroupText,
224
- TextInput
225
- } from '@patternfly/react-core';
226
-
227
- class SimpleInputGroups extends React.Component {
228
- constructor(props) {
229
- super(props);
230
- }
231
-
232
- render() {
233
- return (
234
- <React.Fragment>
235
- <InputGroup>
236
- <Button id="textAreaButton1" variant="control">
237
- Button
238
- </Button>
239
- <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
240
- <Button variant="control">Button</Button>
241
- </InputGroup>
242
- <br />
243
- <InputGroup>
244
- <Button id="textAreaButton3" variant="control">
245
- Button
246
- </Button>
247
- <Button variant="control">Button</Button>
248
- <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
249
- <Button variant="control">Button</Button>
250
- </InputGroup>
251
- <br />
252
- <InputGroup>
253
- <InputGroupText>
254
- <DollarSignIcon />
255
- </InputGroupText>
256
- <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
257
- <InputGroupText>.00</InputGroupText>
258
- </InputGroup>
259
- </React.Fragment>
260
- );
261
- }
262
- }
30
+ ```ts file='./InputGroupWithSiblings.tsx'
263
31
  ```
package/src/components/InputGroup/examples/InputGroupBasic.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
3
+ import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, ValidatedOptions } from '@patternfly/react-core';
4
+
5
+ export const InputGroupBasic: React.FunctionComponent = () => (
6
+ <React.Fragment>
7
+ <InputGroup>
8
+ <TextInput id="textInput6" type="email" aria-label="email input field" />
9
+ <InputGroupText id="email-example">@example.com</InputGroupText>
10
+ </InputGroup>
11
+ <br />
12
+ <InputGroup>
13
+ <InputGroupText id="username">
14
+ <AtIcon />
15
+ </InputGroupText>
16
+ <TextInput
17
+ validated={ValidatedOptions.error}
18
+ id="textInput7"
19
+ type="email"
20
+ aria-label="Error state username example"
21
+ />
22
+ </InputGroup>
23
+ <br />
24
+ <InputGroup>
25
+ <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
26
+ <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
27
+ %
28
+ </InputGroupText>
29
+ </InputGroup>
30
+ </React.Fragment>
31
+ );
package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import React from 'react';
2
+ import { Button, InputGroup, TextInput, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
3
+
4
+ export const InputGroupWithDropdown: React.FunctionComponent = () => {
5
+ const [isOpen, setIsOpen] = React.useState<boolean>(false);
6
+
7
+ const onToggle = (isOpen: boolean) => {
8
+ setIsOpen(isOpen);
9
+ };
10
+
11
+ const onSelect = () => {
12
+ setIsOpen(false);
13
+ };
14
+
15
+ const dropdownItems = [
16
+ <DropdownItem key="opt-1" value="Option 1" component="button">
17
+ Option 1
18
+ </DropdownItem>,
19
+ <DropdownItem key="opt-2" value="Option 2" component="button">
20
+ Option 2
21
+ </DropdownItem>,
22
+ <DropdownItem key="opt-3" value="Option 3" component="button">
23
+ Option 3
24
+ </DropdownItem>
25
+ ];
26
+
27
+ return (
28
+ <React.Fragment>
29
+ <InputGroup>
30
+ <Dropdown
31
+ onSelect={onSelect}
32
+ toggle={<DropdownToggle onToggle={onToggle}>Dropdown</DropdownToggle>}
33
+ isOpen={isOpen}
34
+ dropdownItems={dropdownItems}
35
+ />
36
+ <TextInput id="textInput3" aria-label="input with dropdown and button" />
37
+ <Button id="inputDropdownButton1" variant="control">
38
+ Button
39
+ </Button>
40
+ </InputGroup>
41
+ </React.Fragment>
42
+ );
43
+ };
package/src/components/InputGroup/examples/InputGroupWithPopover.tsx ADDED
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
3
+ import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
4
+
5
+ export const InputGroupWithPopover: React.FunctionComponent = () => (
6
+ <React.Fragment>
7
+ <InputGroup>
8
+ <TextInput name="textInput10" id="textInput10" type="text" aria-label="input example with popover" />
9
+ <Popover
10
+ aria-label="popover example"
11
+ position={PopoverPosition.top}
12
+ bodyContent="This field is an example of an input group with a popover."
13
+ >
14
+ <Button variant="control" aria-label="popover for input">
15
+ <QuestionCircleIcon />
16
+ </Button>
17
+ </Popover>
18
+ </InputGroup>
19
+ <br />
20
+ <InputGroup>
21
+ <TextInput name="textInput12" id="textInput12" type="text" aria-label="input example with popover" />
22
+ <Popover
23
+ aria-label="popover example"
24
+ position={PopoverPosition.top}
25
+ bodyContent="This field is an example of an input group with a popover."
26
+ >
27
+ <Button variant="plain" aria-label="Popover for input">
28
+ <QuestionCircleIcon />
29
+ </Button>
30
+ </Popover>
31
+ </InputGroup>
32
+ </React.Fragment>
33
+ );
package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
3
+ import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
4
+
5
+ export const InputGroupWithSiblings: React.FunctionComponent = () => (
6
+ <React.Fragment>
7
+ <InputGroup>
8
+ <Button id="textAreaButton1" variant="control">
9
+ Button
10
+ </Button>
11
+ <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
12
+ <Button variant="control">Button</Button>
13
+ </InputGroup>
14
+ <br />
15
+ <InputGroup>
16
+ <Button id="textAreaButton3" variant="control">
17
+ Button
18
+ </Button>
19
+ <Button variant="control">Button</Button>
20
+ <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
21
+ <Button variant="control">Button</Button>
22
+ </InputGroup>
23
+ <br />
24
+ <InputGroup>
25
+ <InputGroupText>
26
+ <DollarSignIcon />
27
+ </InputGroupText>
28
+ <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
29
+ <InputGroupText>.00</InputGroupText>
30
+ </InputGroup>
31
+ </React.Fragment>
32
+ );
package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { Button, TextArea, InputGroup } from '@patternfly/react-core';
3
+
4
+ export const InputGroupWithTextarea: React.FunctionComponent = () => (
5
+ <React.Fragment>
6
+ <InputGroup>
7
+ <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
8
+ <Button id="textAreaButton2" variant="control">
9
+ Button
10
+ </Button>
11
+ </InputGroup>
12
+ </React.Fragment>
13
+ );