@patternfly/react-core 4.222.0 → 4.222.3
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 +24 -0
- package/dist/esm/components/Select/Select.d.ts.map +1 -1
- package/dist/esm/components/Select/Select.js +21 -14
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/js/components/Select/Select.d.ts.map +1 -1
- package/dist/js/components/Select/Select.js +21 -14
- package/dist/js/components/Select/Select.js.map +1 -1
- package/dist/umd/react-core.css +98 -102
- package/dist/umd/react-core.js +21 -14
- package/dist/umd/react-core.min.css +1 -5
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +6 -6
- package/src/components/InputGroup/examples/InputGroup.md +5 -237
- package/src/components/InputGroup/examples/InputGroupBasic.tsx +31 -0
- package/src/components/InputGroup/examples/InputGroupWithDropdown.tsx +43 -0
- package/src/components/InputGroup/examples/InputGroupWithPopover.tsx +33 -0
- package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx +32 -0
- package/src/components/InputGroup/examples/InputGroupWithTextarea.tsx +13 -0
- package/src/components/Label/examples/Label.md +5 -399
- package/src/components/Label/examples/LabelCompact.tsx +27 -0
- package/src/components/Label/examples/LabelFilled.tsx +167 -0
- package/src/components/Label/examples/LabelOutline.tsx +188 -0
- package/src/components/Label/examples/LabelRouterLink.tsx +20 -0
- package/src/components/Select/Select.tsx +16 -4
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Label } from '@patternfly/react-core';
|
|
3
|
+
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
|
|
4
|
+
|
|
5
|
+
export const LabelOutline: React.FunctionComponent = () => (
|
|
6
|
+
<React.Fragment>
|
|
7
|
+
<Label variant="outline">Grey</Label>{' '}
|
|
8
|
+
<Label variant="outline" icon={<InfoCircleIcon />}>
|
|
9
|
+
Grey icon
|
|
10
|
+
</Label>{' '}
|
|
11
|
+
<Label variant="outline" onClose={() => Function.prototype}>
|
|
12
|
+
Grey removable
|
|
13
|
+
</Label>{' '}
|
|
14
|
+
<Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
15
|
+
Grey icon removable
|
|
16
|
+
</Label>{' '}
|
|
17
|
+
<Label variant="outline" href="#outline">
|
|
18
|
+
Grey link
|
|
19
|
+
</Label>{' '}
|
|
20
|
+
<Label variant="outline" href="#outline" onClose={() => Function.prototype}>
|
|
21
|
+
Grey link removable
|
|
22
|
+
</Label>
|
|
23
|
+
<Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
24
|
+
Grey label with icon that overflows
|
|
25
|
+
</Label>
|
|
26
|
+
<br />
|
|
27
|
+
<br />
|
|
28
|
+
<Label variant="outline" color="blue">
|
|
29
|
+
Blue
|
|
30
|
+
</Label>{' '}
|
|
31
|
+
<Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
|
|
32
|
+
Blue icon
|
|
33
|
+
</Label>{' '}
|
|
34
|
+
<Label variant="outline" color="blue" onClose={() => Function.prototype}>
|
|
35
|
+
Blue removable
|
|
36
|
+
</Label>{' '}
|
|
37
|
+
<Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
38
|
+
Blue icon removable
|
|
39
|
+
</Label>{' '}
|
|
40
|
+
<Label variant="outline" color="blue" href="#outline">
|
|
41
|
+
Blue link
|
|
42
|
+
</Label>{' '}
|
|
43
|
+
<Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
|
|
44
|
+
Blue link removable
|
|
45
|
+
</Label>
|
|
46
|
+
<Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
47
|
+
Blue label with icon that overflows
|
|
48
|
+
</Label>
|
|
49
|
+
<br />
|
|
50
|
+
<br />
|
|
51
|
+
<Label variant="outline" color="green">
|
|
52
|
+
Green
|
|
53
|
+
</Label>{' '}
|
|
54
|
+
<Label variant="outline" color="green" icon={<InfoCircleIcon />}>
|
|
55
|
+
Green icon
|
|
56
|
+
</Label>{' '}
|
|
57
|
+
<Label variant="outline" color="green" onClose={() => Function.prototype}>
|
|
58
|
+
Green removable
|
|
59
|
+
</Label>{' '}
|
|
60
|
+
<Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
61
|
+
Green icon removable
|
|
62
|
+
</Label>{' '}
|
|
63
|
+
<Label variant="outline" color="green" href="#outline">
|
|
64
|
+
Green link
|
|
65
|
+
</Label>{' '}
|
|
66
|
+
<Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
|
|
67
|
+
Green link removable
|
|
68
|
+
</Label>
|
|
69
|
+
<Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
70
|
+
Green label with icon that overflows
|
|
71
|
+
</Label>
|
|
72
|
+
<br />
|
|
73
|
+
<br />
|
|
74
|
+
<Label variant="outline" color="orange">
|
|
75
|
+
Orange
|
|
76
|
+
</Label>{' '}
|
|
77
|
+
<Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
|
|
78
|
+
Orange icon
|
|
79
|
+
</Label>{' '}
|
|
80
|
+
<Label variant="outline" color="orange" onClose={() => Function.prototype}>
|
|
81
|
+
Orange removable
|
|
82
|
+
</Label>{' '}
|
|
83
|
+
<Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
84
|
+
Orange icon removable
|
|
85
|
+
</Label>{' '}
|
|
86
|
+
<Label variant="outline" color="orange" href="#outline">
|
|
87
|
+
Orange link
|
|
88
|
+
</Label>{' '}
|
|
89
|
+
<Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
|
|
90
|
+
Orange link removable
|
|
91
|
+
</Label>
|
|
92
|
+
<Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
93
|
+
Orange label with icon that overflows
|
|
94
|
+
</Label>
|
|
95
|
+
<br />
|
|
96
|
+
<br />
|
|
97
|
+
<Label variant="outline" color="red">
|
|
98
|
+
Red
|
|
99
|
+
</Label>{' '}
|
|
100
|
+
<Label variant="outline" color="red" icon={<InfoCircleIcon />}>
|
|
101
|
+
Red icon
|
|
102
|
+
</Label>{' '}
|
|
103
|
+
<Label variant="outline" color="red" onClose={() => Function.prototype}>
|
|
104
|
+
Red removable
|
|
105
|
+
</Label>{' '}
|
|
106
|
+
<Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
107
|
+
Red icon removable
|
|
108
|
+
</Label>{' '}
|
|
109
|
+
<Label variant="outline" color="red" href="#outline">
|
|
110
|
+
Red link
|
|
111
|
+
</Label>{' '}
|
|
112
|
+
<Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
|
|
113
|
+
Red link removable
|
|
114
|
+
</Label>
|
|
115
|
+
<Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
116
|
+
Red label with icon that overflows
|
|
117
|
+
</Label>
|
|
118
|
+
<br />
|
|
119
|
+
<br />
|
|
120
|
+
<Label variant="outline" color="purple">
|
|
121
|
+
Purple
|
|
122
|
+
</Label>{' '}
|
|
123
|
+
<Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
|
|
124
|
+
Purple icon
|
|
125
|
+
</Label>{' '}
|
|
126
|
+
<Label variant="outline" color="purple" onClose={() => Function.prototype}>
|
|
127
|
+
Purple removable
|
|
128
|
+
</Label>{' '}
|
|
129
|
+
<Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
130
|
+
Purple icon removable
|
|
131
|
+
</Label>{' '}
|
|
132
|
+
<Label variant="outline" color="purple" href="#outline">
|
|
133
|
+
Purple link
|
|
134
|
+
</Label>{' '}
|
|
135
|
+
<Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
|
|
136
|
+
Purple link removable
|
|
137
|
+
</Label>
|
|
138
|
+
<Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
139
|
+
Purple label with icon that overflows
|
|
140
|
+
</Label>
|
|
141
|
+
<br />
|
|
142
|
+
<br />
|
|
143
|
+
<Label variant="outline" color="cyan">
|
|
144
|
+
Cyan
|
|
145
|
+
</Label>{' '}
|
|
146
|
+
<Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
|
|
147
|
+
Cyan icon
|
|
148
|
+
</Label>{' '}
|
|
149
|
+
<Label variant="outline" color="cyan" onClose={() => Function.prototype}>
|
|
150
|
+
Cyan removable
|
|
151
|
+
</Label>{' '}
|
|
152
|
+
<Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
153
|
+
Cyan icon removable
|
|
154
|
+
</Label>{' '}
|
|
155
|
+
<Label variant="outline" color="cyan" href="#outline">
|
|
156
|
+
Cyan link
|
|
157
|
+
</Label>{' '}
|
|
158
|
+
<Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
|
|
159
|
+
Cyan link removable
|
|
160
|
+
</Label>
|
|
161
|
+
<Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
162
|
+
Cyan label with icon that overflows
|
|
163
|
+
</Label>
|
|
164
|
+
<br />
|
|
165
|
+
<br />
|
|
166
|
+
<Label variant="outline" color="gold">
|
|
167
|
+
Gold
|
|
168
|
+
</Label>{' '}
|
|
169
|
+
<Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
|
|
170
|
+
Gold icon
|
|
171
|
+
</Label>{' '}
|
|
172
|
+
<Label variant="outline" color="gold" onClose={() => Function.prototype}>
|
|
173
|
+
Gold removable
|
|
174
|
+
</Label>{' '}
|
|
175
|
+
<Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
|
|
176
|
+
Gold icon removable
|
|
177
|
+
</Label>{' '}
|
|
178
|
+
<Label variant="outline" color="gold" href="#outline">
|
|
179
|
+
Gold link
|
|
180
|
+
</Label>{' '}
|
|
181
|
+
<Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
|
|
182
|
+
Gold link removable
|
|
183
|
+
</Label>
|
|
184
|
+
<Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
|
|
185
|
+
Gold label with icon that overflows
|
|
186
|
+
</Label>
|
|
187
|
+
</React.Fragment>
|
|
188
|
+
);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Label } from '@patternfly/react-core';
|
|
3
|
+
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
|
|
4
|
+
import { Link } from '@reach/router';
|
|
5
|
+
|
|
6
|
+
export const LabelRouterLink: React.FunctionComponent = () => (
|
|
7
|
+
<Label
|
|
8
|
+
color="blue"
|
|
9
|
+
icon={<InfoCircleIcon />}
|
|
10
|
+
onClose={() => Function.prototype}
|
|
11
|
+
isTruncated
|
|
12
|
+
render={({ className, content, componentRef }) => (
|
|
13
|
+
<Link to="/" className={className} innerRef={componentRef}>
|
|
14
|
+
{content}
|
|
15
|
+
</Link>
|
|
16
|
+
)}
|
|
17
|
+
>
|
|
18
|
+
Blue label router link with icon that overflows
|
|
19
|
+
</Label>
|
|
20
|
+
);
|
|
@@ -297,11 +297,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
|
|
|
297
297
|
this.setState({ viewMoreNextIndex: -1 });
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
const
|
|
301
|
-
|
|
302
|
-
prevProps.children.some((prevChild: React.ReactElement, index: number) => {
|
|
300
|
+
const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
|
|
301
|
+
prevChildren.some((prevChild: React.ReactElement, index: number) => {
|
|
303
302
|
const prevChildProps = prevChild.props;
|
|
304
|
-
const currChild =
|
|
303
|
+
const currChild = currChildren[index];
|
|
305
304
|
const { props: currChildProps } = currChild;
|
|
306
305
|
|
|
307
306
|
if (prevChildProps && currChildProps) {
|
|
@@ -316,6 +315,19 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
|
|
|
316
315
|
}
|
|
317
316
|
});
|
|
318
317
|
|
|
318
|
+
const hasUpdatedChildren =
|
|
319
|
+
prevProps.children.length !== this.props.children.length ||
|
|
320
|
+
checkUpdatedChildren(prevProps.children, this.props.children) ||
|
|
321
|
+
(this.props.isGrouped &&
|
|
322
|
+
prevProps.children.some(
|
|
323
|
+
(prevChild: React.ReactElement, index: number) =>
|
|
324
|
+
prevChild.type === SelectGroup &&
|
|
325
|
+
prevChild.props.children &&
|
|
326
|
+
this.props.children[index].props.children &&
|
|
327
|
+
(prevChild.props.children.length !== this.props.children[index].props.children.length ||
|
|
328
|
+
checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
|
|
329
|
+
));
|
|
330
|
+
|
|
319
331
|
if (hasUpdatedChildren) {
|
|
320
332
|
this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
|
|
321
333
|
}
|