@patternfly/react-core 4.221.6 → 4.221.7
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 +8 -0
- package/dist/umd/react-core.min.css +38 -38
- package/package.json +5 -5
- package/src/components/HelperText/examples/HelperText.md +6 -153
- package/src/components/HelperText/examples/HelperTextDynamic.tsx +41 -0
- package/src/components/HelperText/examples/HelperTextDynamicList.tsx +16 -0
- package/src/components/HelperText/examples/HelperTextMultipleStatic.tsx +10 -0
- package/src/components/HelperText/examples/HelperTextStatic.tsx +22 -0
- package/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx +35 -0
- package/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx +30 -0
- package/src/components/Hint/examples/Hint.md +2 -167
- package/src/components/Hint/examples/HintBasicWithTitle.tsx +65 -0
- package/src/components/Hint/examples/HintBasicWithoutTitle.tsx +74 -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.221.7 (2022-06-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## 4.221.6 (2022-06-06)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-core
|
|
@@ -3439,6 +3439,44 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
3439
3439
|
margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
|
|
3440
3440
|
}
|
|
3441
3441
|
|
|
3442
|
+
.pf-c-code-block {
|
|
3443
|
+
--pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
3444
|
+
--pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
3445
|
+
--pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
|
|
3446
|
+
--pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
|
|
3447
|
+
--pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
|
|
3448
|
+
--pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
|
|
3449
|
+
--pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
|
|
3450
|
+
--pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
3451
|
+
--pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
|
|
3452
|
+
background-color: var(--pf-c-code-block--BackgroundColor);
|
|
3453
|
+
}
|
|
3454
|
+
|
|
3455
|
+
.pf-c-code-block__header {
|
|
3456
|
+
display: flex;
|
|
3457
|
+
border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3460
|
+
.pf-c-code-block__actions {
|
|
3461
|
+
display: flex;
|
|
3462
|
+
margin-left: auto;
|
|
3463
|
+
}
|
|
3464
|
+
|
|
3465
|
+
.pf-c-code-block__content {
|
|
3466
|
+
padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
|
|
3467
|
+
}
|
|
3468
|
+
|
|
3469
|
+
.pf-c-code-block__pre {
|
|
3470
|
+
font-family: var(--pf-c-code-block__pre--FontFamily);
|
|
3471
|
+
font-size: var(--pf-c-code-block__pre--FontSize);
|
|
3472
|
+
overflow-wrap: break-word;
|
|
3473
|
+
white-space: pre-wrap;
|
|
3474
|
+
}
|
|
3475
|
+
|
|
3476
|
+
.pf-c-code-block__code {
|
|
3477
|
+
font-family: var(--pf-c-code-block__code--FontFamily, inherit);
|
|
3478
|
+
}
|
|
3479
|
+
|
|
3442
3480
|
.pf-c-clipboard-copy {
|
|
3443
3481
|
--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
|
|
3444
3482
|
--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
|
|
@@ -3549,44 +3587,6 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
3549
3587
|
border: 0;
|
|
3550
3588
|
}
|
|
3551
3589
|
|
|
3552
|
-
.pf-c-code-block {
|
|
3553
|
-
--pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
3554
|
-
--pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
3555
|
-
--pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
|
|
3556
|
-
--pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
|
|
3557
|
-
--pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
|
|
3558
|
-
--pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
|
|
3559
|
-
--pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
|
|
3560
|
-
--pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
3561
|
-
--pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
|
|
3562
|
-
background-color: var(--pf-c-code-block--BackgroundColor);
|
|
3563
|
-
}
|
|
3564
|
-
|
|
3565
|
-
.pf-c-code-block__header {
|
|
3566
|
-
display: flex;
|
|
3567
|
-
border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
|
|
3568
|
-
}
|
|
3569
|
-
|
|
3570
|
-
.pf-c-code-block__actions {
|
|
3571
|
-
display: flex;
|
|
3572
|
-
margin-left: auto;
|
|
3573
|
-
}
|
|
3574
|
-
|
|
3575
|
-
.pf-c-code-block__content {
|
|
3576
|
-
padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
|
|
3577
|
-
}
|
|
3578
|
-
|
|
3579
|
-
.pf-c-code-block__pre {
|
|
3580
|
-
font-family: var(--pf-c-code-block__pre--FontFamily);
|
|
3581
|
-
font-size: var(--pf-c-code-block__pre--FontSize);
|
|
3582
|
-
overflow-wrap: break-word;
|
|
3583
|
-
white-space: pre-wrap;
|
|
3584
|
-
}
|
|
3585
|
-
|
|
3586
|
-
.pf-c-code-block__code {
|
|
3587
|
-
font-family: var(--pf-c-code-block__code--FontFamily, inherit);
|
|
3588
|
-
}
|
|
3589
|
-
|
|
3590
3590
|
.pf-c-context-selector__menu {
|
|
3591
3591
|
--pf-global--Color--100: var(--pf-global--Color--dark-100);
|
|
3592
3592
|
--pf-global--Color--200: var(--pf-global--Color--dark-200);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.221.
|
|
3
|
+
"version": "4.221.7",
|
|
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.72.
|
|
38
|
-
"@patternfly/react-styles": "^4.71.
|
|
39
|
-
"@patternfly/react-tokens": "^4.73.
|
|
37
|
+
"@patternfly/react-icons": "^4.72.7",
|
|
38
|
+
"@patternfly/react-styles": "^4.71.7",
|
|
39
|
+
"@patternfly/react-tokens": "^4.73.7",
|
|
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": "9f9b98091cf0361abdc23cd00cc5652d4421bdb4"
|
|
64
64
|
}
|
|
@@ -15,177 +15,30 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
|
|
|
15
15
|
|
|
16
16
|
### Static
|
|
17
17
|
|
|
18
|
-
```
|
|
19
|
-
import React from 'react';
|
|
20
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
21
|
-
|
|
22
|
-
<React.Fragment>
|
|
23
|
-
<HelperText>
|
|
24
|
-
<HelperTextItem>This is default helper text</HelperTextItem>
|
|
25
|
-
</HelperText>
|
|
26
|
-
<HelperText>
|
|
27
|
-
<HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
|
|
28
|
-
</HelperText>
|
|
29
|
-
<HelperText>
|
|
30
|
-
<HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
|
|
31
|
-
</HelperText>
|
|
32
|
-
<HelperText>
|
|
33
|
-
<HelperTextItem variant="success">This is success helper text</HelperTextItem>
|
|
34
|
-
</HelperText>
|
|
35
|
-
<HelperText>
|
|
36
|
-
<HelperTextItem variant="error">This is error helper text</HelperTextItem>
|
|
37
|
-
</HelperText>
|
|
38
|
-
</React.Fragment>;
|
|
18
|
+
```ts file="HelperTextStatic.tsx"
|
|
39
19
|
```
|
|
40
20
|
|
|
41
21
|
### Static with default icons
|
|
42
22
|
|
|
43
|
-
```
|
|
44
|
-
import React from 'react';
|
|
45
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
46
|
-
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
|
|
47
|
-
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
|
|
48
|
-
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
|
|
49
|
-
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
|
|
50
|
-
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
|
|
51
|
-
|
|
52
|
-
<React.Fragment>
|
|
53
|
-
<HelperText>
|
|
54
|
-
<HelperTextItem hasIcon>This is default helper text</HelperTextItem>
|
|
55
|
-
</HelperText>
|
|
56
|
-
<HelperText>
|
|
57
|
-
<HelperTextItem variant="indeterminate" hasIcon>
|
|
58
|
-
This is indeterminate helper text
|
|
59
|
-
</HelperTextItem>
|
|
60
|
-
</HelperText>
|
|
61
|
-
<HelperText>
|
|
62
|
-
<HelperTextItem variant="warning" hasIcon>
|
|
63
|
-
This is warning helper text
|
|
64
|
-
</HelperTextItem>
|
|
65
|
-
</HelperText>
|
|
66
|
-
<HelperText>
|
|
67
|
-
<HelperTextItem variant="success" hasIcon>
|
|
68
|
-
This is success helper text
|
|
69
|
-
</HelperTextItem>
|
|
70
|
-
</HelperText>
|
|
71
|
-
<HelperText>
|
|
72
|
-
<HelperTextItem variant="error" hasIcon>
|
|
73
|
-
This is error helper text
|
|
74
|
-
</HelperTextItem>
|
|
75
|
-
</HelperText>
|
|
76
|
-
</React.Fragment>;
|
|
23
|
+
```ts file="HelperTextStaticWithDefaultIcon.tsx"
|
|
77
24
|
```
|
|
78
25
|
|
|
79
26
|
### Static with custom icons
|
|
80
27
|
|
|
81
|
-
```
|
|
82
|
-
import React from 'react';
|
|
83
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
84
|
-
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
|
|
85
|
-
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
|
|
86
|
-
import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
|
|
87
|
-
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
|
88
|
-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
|
89
|
-
|
|
90
|
-
<React.Fragment>
|
|
91
|
-
<HelperText>
|
|
92
|
-
<HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
|
|
93
|
-
</HelperText>
|
|
94
|
-
<HelperText>
|
|
95
|
-
<HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
|
|
96
|
-
This is indeterminate helper text
|
|
97
|
-
</HelperTextItem>
|
|
98
|
-
</HelperText>
|
|
99
|
-
<HelperText>
|
|
100
|
-
<HelperTextItem variant="warning" icon={<ExclamationIcon />}>
|
|
101
|
-
This is warning helper text
|
|
102
|
-
</HelperTextItem>
|
|
103
|
-
</HelperText>
|
|
104
|
-
<HelperText>
|
|
105
|
-
<HelperTextItem variant="success" icon={<CheckIcon />}>
|
|
106
|
-
This is success helper text
|
|
107
|
-
</HelperTextItem>
|
|
108
|
-
</HelperText>
|
|
109
|
-
<HelperText>
|
|
110
|
-
<HelperTextItem variant="error" icon={<TimesIcon />}>
|
|
111
|
-
This is error helper text
|
|
112
|
-
</HelperTextItem>
|
|
113
|
-
</HelperText>
|
|
114
|
-
</React.Fragment>;
|
|
28
|
+
```ts file="HelperTextStaticWithCustomIcon.tsx"
|
|
115
29
|
```
|
|
116
30
|
|
|
117
31
|
### Multiple static
|
|
118
32
|
|
|
119
|
-
```
|
|
120
|
-
import React from 'react';
|
|
121
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
122
|
-
|
|
123
|
-
<HelperText>
|
|
124
|
-
<HelperTextItem>This is default helper text</HelperTextItem>
|
|
125
|
-
<HelperTextItem>This is another default helper text in the same block</HelperTextItem>
|
|
126
|
-
<HelperTextItem>And this is more default text in the same block</HelperTextItem>
|
|
127
|
-
</HelperText>;
|
|
33
|
+
```ts file="HelperTextMultipleStatic.tsx"
|
|
128
34
|
```
|
|
129
35
|
|
|
130
36
|
### Dynamic
|
|
131
37
|
|
|
132
|
-
```
|
|
133
|
-
import React from 'react';
|
|
134
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
135
|
-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
|
136
|
-
|
|
137
|
-
<React.Fragment>
|
|
138
|
-
<HelperText>
|
|
139
|
-
<HelperTextItem isDynamic>This is default helper text</HelperTextItem>
|
|
140
|
-
</HelperText>
|
|
141
|
-
<HelperText>
|
|
142
|
-
<HelperTextItem isDynamic variant="indeterminate">
|
|
143
|
-
This is indeterminate helper text
|
|
144
|
-
</HelperTextItem>
|
|
145
|
-
</HelperText>
|
|
146
|
-
<HelperText>
|
|
147
|
-
<HelperTextItem isDynamic variant="warning">
|
|
148
|
-
This is warning helper text
|
|
149
|
-
</HelperTextItem>
|
|
150
|
-
</HelperText>
|
|
151
|
-
<HelperText>
|
|
152
|
-
<HelperTextItem isDynamic variant="success">
|
|
153
|
-
This is success helper text
|
|
154
|
-
</HelperTextItem>
|
|
155
|
-
</HelperText>
|
|
156
|
-
<HelperText>
|
|
157
|
-
<HelperTextItem isDynamic variant="error">
|
|
158
|
-
This is error helper text
|
|
159
|
-
</HelperTextItem>
|
|
160
|
-
</HelperText>
|
|
161
|
-
<HelperText>
|
|
162
|
-
<HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
|
|
163
|
-
This is error helper text with a custom icon
|
|
164
|
-
</HelperTextItem>
|
|
165
|
-
</HelperText>
|
|
166
|
-
<HelperText>
|
|
167
|
-
<HelperTextItem isDynamic variant="error" hasIcon={false}>
|
|
168
|
-
This is error helper text with no icon
|
|
169
|
-
</HelperTextItem>
|
|
170
|
-
</HelperText>
|
|
171
|
-
</React.Fragment>;
|
|
38
|
+
```ts file="HelperTextDynamic.tsx"
|
|
172
39
|
```
|
|
173
40
|
|
|
174
41
|
### Dynamic list
|
|
175
42
|
|
|
176
|
-
```
|
|
177
|
-
import React from 'react';
|
|
178
|
-
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
179
|
-
|
|
180
|
-
<HelperText component="ul">
|
|
181
|
-
<HelperTextItem isDynamic variant="success" component="li">
|
|
182
|
-
Must be at least 14 characters
|
|
183
|
-
</HelperTextItem>
|
|
184
|
-
<HelperTextItem isDynamic variant="error" component="li">
|
|
185
|
-
Cannot contain any variation of the word "redhat"
|
|
186
|
-
</HelperTextItem>
|
|
187
|
-
<HelperTextItem isDynamic variant="success" component="li">
|
|
188
|
-
Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
|
|
189
|
-
</HelperTextItem>
|
|
190
|
-
</HelperText>;
|
|
43
|
+
```ts file="HelperTextDynamicList.tsx"
|
|
191
44
|
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
|
4
|
+
|
|
5
|
+
export const HelperTextDynamic: React.FunctionComponent = () => (
|
|
6
|
+
<React.Fragment>
|
|
7
|
+
<HelperText>
|
|
8
|
+
<HelperTextItem isDynamic>This is default helper text</HelperTextItem>
|
|
9
|
+
</HelperText>
|
|
10
|
+
<HelperText>
|
|
11
|
+
<HelperTextItem isDynamic variant="indeterminate">
|
|
12
|
+
This is indeterminate helper text
|
|
13
|
+
</HelperTextItem>
|
|
14
|
+
</HelperText>
|
|
15
|
+
<HelperText>
|
|
16
|
+
<HelperTextItem isDynamic variant="warning">
|
|
17
|
+
This is warning helper text
|
|
18
|
+
</HelperTextItem>
|
|
19
|
+
</HelperText>
|
|
20
|
+
<HelperText>
|
|
21
|
+
<HelperTextItem isDynamic variant="success">
|
|
22
|
+
This is success helper text
|
|
23
|
+
</HelperTextItem>
|
|
24
|
+
</HelperText>
|
|
25
|
+
<HelperText>
|
|
26
|
+
<HelperTextItem isDynamic variant="error">
|
|
27
|
+
This is error helper text
|
|
28
|
+
</HelperTextItem>
|
|
29
|
+
</HelperText>
|
|
30
|
+
<HelperText>
|
|
31
|
+
<HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
|
|
32
|
+
This is error helper text with a custom icon
|
|
33
|
+
</HelperTextItem>
|
|
34
|
+
</HelperText>
|
|
35
|
+
<HelperText>
|
|
36
|
+
<HelperTextItem isDynamic variant="error" hasIcon={false}>
|
|
37
|
+
This is error helper text with no icon
|
|
38
|
+
</HelperTextItem>
|
|
39
|
+
</HelperText>
|
|
40
|
+
</React.Fragment>
|
|
41
|
+
);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const HelperTextDynamicList: React.FunctionComponent = () => (
|
|
5
|
+
<HelperText component="ul">
|
|
6
|
+
<HelperTextItem isDynamic variant="success" component="li">
|
|
7
|
+
Must be at least 14 characters
|
|
8
|
+
</HelperTextItem>
|
|
9
|
+
<HelperTextItem isDynamic variant="error" component="li">
|
|
10
|
+
Cannot contain any variation of the word "redhat"
|
|
11
|
+
</HelperTextItem>
|
|
12
|
+
<HelperTextItem isDynamic variant="success" component="li">
|
|
13
|
+
Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
|
|
14
|
+
</HelperTextItem>
|
|
15
|
+
</HelperText>
|
|
16
|
+
);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const HelperTextMultipleStatic: React.FunctionComponent = () => (
|
|
5
|
+
<HelperText>
|
|
6
|
+
<HelperTextItem>This is default helper text</HelperTextItem>
|
|
7
|
+
<HelperTextItem>This is another default helper text in the same block</HelperTextItem>
|
|
8
|
+
<HelperTextItem>And this is more default text in the same block</HelperTextItem>
|
|
9
|
+
</HelperText>
|
|
10
|
+
);
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const HelperTextStatic: React.FunctionComponent = () => (
|
|
5
|
+
<React.Fragment>
|
|
6
|
+
<HelperText>
|
|
7
|
+
<HelperTextItem>This is default helper text</HelperTextItem>
|
|
8
|
+
</HelperText>
|
|
9
|
+
<HelperText>
|
|
10
|
+
<HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
|
|
11
|
+
</HelperText>
|
|
12
|
+
<HelperText>
|
|
13
|
+
<HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
|
|
14
|
+
</HelperText>
|
|
15
|
+
<HelperText>
|
|
16
|
+
<HelperTextItem variant="success">This is success helper text</HelperTextItem>
|
|
17
|
+
</HelperText>
|
|
18
|
+
<HelperText>
|
|
19
|
+
<HelperTextItem variant="error">This is error helper text</HelperTextItem>
|
|
20
|
+
</HelperText>
|
|
21
|
+
</React.Fragment>
|
|
22
|
+
);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
|
|
4
|
+
import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
|
|
5
|
+
import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
|
|
6
|
+
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
|
7
|
+
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
|
8
|
+
|
|
9
|
+
export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
|
|
10
|
+
<React.Fragment>
|
|
11
|
+
<HelperText>
|
|
12
|
+
<HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
|
|
13
|
+
</HelperText>
|
|
14
|
+
<HelperText>
|
|
15
|
+
<HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
|
|
16
|
+
This is indeterminate helper text
|
|
17
|
+
</HelperTextItem>
|
|
18
|
+
</HelperText>
|
|
19
|
+
<HelperText>
|
|
20
|
+
<HelperTextItem variant="warning" icon={<ExclamationIcon />}>
|
|
21
|
+
This is warning helper text
|
|
22
|
+
</HelperTextItem>
|
|
23
|
+
</HelperText>
|
|
24
|
+
<HelperText>
|
|
25
|
+
<HelperTextItem variant="success" icon={<CheckIcon />}>
|
|
26
|
+
This is success helper text
|
|
27
|
+
</HelperTextItem>
|
|
28
|
+
</HelperText>
|
|
29
|
+
<HelperText>
|
|
30
|
+
<HelperTextItem variant="error" icon={<TimesIcon />}>
|
|
31
|
+
This is error helper text
|
|
32
|
+
</HelperTextItem>
|
|
33
|
+
</HelperText>
|
|
34
|
+
</React.Fragment>
|
|
35
|
+
);
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
|
|
5
|
+
<React.Fragment>
|
|
6
|
+
<HelperText>
|
|
7
|
+
<HelperTextItem hasIcon>This is default helper text</HelperTextItem>
|
|
8
|
+
</HelperText>
|
|
9
|
+
<HelperText>
|
|
10
|
+
<HelperTextItem variant="indeterminate" hasIcon>
|
|
11
|
+
This is indeterminate helper text
|
|
12
|
+
</HelperTextItem>
|
|
13
|
+
</HelperText>
|
|
14
|
+
<HelperText>
|
|
15
|
+
<HelperTextItem variant="warning" hasIcon>
|
|
16
|
+
This is warning helper text
|
|
17
|
+
</HelperTextItem>
|
|
18
|
+
</HelperText>
|
|
19
|
+
<HelperText>
|
|
20
|
+
<HelperTextItem variant="success" hasIcon>
|
|
21
|
+
This is success helper text
|
|
22
|
+
</HelperTextItem>
|
|
23
|
+
</HelperText>
|
|
24
|
+
<HelperText>
|
|
25
|
+
<HelperTextItem variant="error" hasIcon>
|
|
26
|
+
This is error helper text
|
|
27
|
+
</HelperTextItem>
|
|
28
|
+
</HelperText>
|
|
29
|
+
</React.Fragment>
|
|
30
|
+
);
|
|
@@ -9,175 +9,10 @@ propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
|
|
|
9
9
|
|
|
10
10
|
### Basic with title
|
|
11
11
|
|
|
12
|
-
```
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import {
|
|
15
|
-
Hint,
|
|
16
|
-
HintTitle,
|
|
17
|
-
HintBody,
|
|
18
|
-
HintFooter,
|
|
19
|
-
Button,
|
|
20
|
-
Dropdown,
|
|
21
|
-
DropdownToggle,
|
|
22
|
-
DropdownItem,
|
|
23
|
-
DropdownSeparator,
|
|
24
|
-
DropdownPosition,
|
|
25
|
-
DropdownDirection,
|
|
26
|
-
KebabToggle
|
|
27
|
-
} from '@patternfly/react-core';
|
|
28
|
-
|
|
29
|
-
class BasicHint extends React.Component {
|
|
30
|
-
constructor(props) {
|
|
31
|
-
super(props);
|
|
32
|
-
this.state = {
|
|
33
|
-
isOpen: false
|
|
34
|
-
};
|
|
35
|
-
this.onToggle = isOpen => {
|
|
36
|
-
this.setState({
|
|
37
|
-
isOpen
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
this.onSelect = event => {
|
|
41
|
-
this.setState({
|
|
42
|
-
isOpen: !this.state.isOpen
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
render() {
|
|
48
|
-
const { isOpen } = this.state;
|
|
49
|
-
const dropdownItems = [
|
|
50
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
51
|
-
<DropdownItem key="action" component="button">
|
|
52
|
-
Action
|
|
53
|
-
</DropdownItem>,
|
|
54
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
55
|
-
Disabled Link
|
|
56
|
-
</DropdownItem>,
|
|
57
|
-
<DropdownItem key="disabled action" isDisabled component="button">
|
|
58
|
-
Disabled Action
|
|
59
|
-
</DropdownItem>,
|
|
60
|
-
<DropdownSeparator key="separator" />,
|
|
61
|
-
<DropdownItem key="separated link">Separated Link</DropdownItem>,
|
|
62
|
-
<DropdownItem key="separated action" component="button">
|
|
63
|
-
Separated Action
|
|
64
|
-
</DropdownItem>
|
|
65
|
-
];
|
|
66
|
-
const actions = (
|
|
67
|
-
<Dropdown
|
|
68
|
-
onSelect={this.onSelect}
|
|
69
|
-
toggle={<KebabToggle onToggle={this.onToggle} id="hint-kebab-toggle" />}
|
|
70
|
-
isOpen={isOpen}
|
|
71
|
-
dropdownItems={dropdownItems}
|
|
72
|
-
position="right"
|
|
73
|
-
isPlain
|
|
74
|
-
/>
|
|
75
|
-
);
|
|
76
|
-
return (
|
|
77
|
-
<Hint actions={actions}>
|
|
78
|
-
<HintTitle>Do more with Find it Fix it capabilities</HintTitle>
|
|
79
|
-
<HintBody>
|
|
80
|
-
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
|
|
81
|
-
</HintBody>
|
|
82
|
-
<HintFooter>
|
|
83
|
-
<Button variant="link" isInline>
|
|
84
|
-
Try it for 90 days
|
|
85
|
-
</Button>
|
|
86
|
-
</HintFooter>
|
|
87
|
-
</Hint>
|
|
88
|
-
);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
12
|
+
```ts file="HintBasicWithTitle.tsx"
|
|
91
13
|
```
|
|
92
14
|
|
|
93
15
|
### Basic without title
|
|
94
16
|
|
|
95
|
-
```
|
|
96
|
-
import React from 'react';
|
|
97
|
-
import {
|
|
98
|
-
Hint,
|
|
99
|
-
HintBody,
|
|
100
|
-
HintFooter,
|
|
101
|
-
Button,
|
|
102
|
-
Dropdown,
|
|
103
|
-
DropdownToggle,
|
|
104
|
-
DropdownItem,
|
|
105
|
-
DropdownSeparator,
|
|
106
|
-
DropdownPosition,
|
|
107
|
-
DropdownDirection,
|
|
108
|
-
KebabToggle
|
|
109
|
-
} from '@patternfly/react-core';
|
|
110
|
-
|
|
111
|
-
class BasicHint extends React.Component {
|
|
112
|
-
constructor(props) {
|
|
113
|
-
super(props);
|
|
114
|
-
this.state = {
|
|
115
|
-
isOpen: false
|
|
116
|
-
};
|
|
117
|
-
this.onToggle = isOpen => {
|
|
118
|
-
this.setState({
|
|
119
|
-
isOpen
|
|
120
|
-
});
|
|
121
|
-
};
|
|
122
|
-
this.onSelect = event => {
|
|
123
|
-
this.setState({
|
|
124
|
-
isOpen: !this.state.isOpen
|
|
125
|
-
});
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
render() {
|
|
130
|
-
const { isOpen } = this.state;
|
|
131
|
-
const dropdownItems = [
|
|
132
|
-
<DropdownItem key="link">Link</DropdownItem>,
|
|
133
|
-
<DropdownItem key="action" component="button">
|
|
134
|
-
Action
|
|
135
|
-
</DropdownItem>,
|
|
136
|
-
<DropdownItem key="disabled link" isDisabled>
|
|
137
|
-
Disabled Link
|
|
138
|
-
</DropdownItem>,
|
|
139
|
-
<DropdownItem key="disabled action" isDisabled component="button">
|
|
140
|
-
Disabled Action
|
|
141
|
-
</DropdownItem>,
|
|
142
|
-
<DropdownSeparator key="separator" />,
|
|
143
|
-
<DropdownItem key="separated link">Separated Link</DropdownItem>,
|
|
144
|
-
<DropdownItem key="separated action" component="button">
|
|
145
|
-
Separated Action
|
|
146
|
-
</DropdownItem>
|
|
147
|
-
];
|
|
148
|
-
const actions = (
|
|
149
|
-
<Dropdown
|
|
150
|
-
onSelect={this.onSelect}
|
|
151
|
-
toggle={<KebabToggle onToggle={this.onToggle} id="hint-notitle-kebab-toggle" />}
|
|
152
|
-
isOpen={isOpen}
|
|
153
|
-
dropdownItems={dropdownItems}
|
|
154
|
-
position="right"
|
|
155
|
-
isPlain
|
|
156
|
-
/>
|
|
157
|
-
);
|
|
158
|
-
return (
|
|
159
|
-
<React.Fragment>
|
|
160
|
-
<Hint>
|
|
161
|
-
<HintBody>
|
|
162
|
-
Welcome to the new documentation experience.
|
|
163
|
-
<Button variant="link" isInline>
|
|
164
|
-
Learn more about the improved features.
|
|
165
|
-
</Button>
|
|
166
|
-
</HintBody>
|
|
167
|
-
</Hint>
|
|
168
|
-
<br />
|
|
169
|
-
<Hint actions={actions}>
|
|
170
|
-
<HintBody>
|
|
171
|
-
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
|
|
172
|
-
</HintBody>
|
|
173
|
-
<HintFooter>
|
|
174
|
-
<Button variant="link" isInline>
|
|
175
|
-
Try it for 90 days
|
|
176
|
-
</Button>
|
|
177
|
-
</HintFooter>
|
|
178
|
-
</Hint>
|
|
179
|
-
</React.Fragment>
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
17
|
+
```ts file="HintBasicWithoutTitle.tsx"
|
|
183
18
|
```
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Hint,
|
|
4
|
+
HintTitle,
|
|
5
|
+
HintBody,
|
|
6
|
+
HintFooter,
|
|
7
|
+
Button,
|
|
8
|
+
Dropdown,
|
|
9
|
+
DropdownItem,
|
|
10
|
+
DropdownSeparator,
|
|
11
|
+
KebabToggle
|
|
12
|
+
} from '@patternfly/react-core';
|
|
13
|
+
|
|
14
|
+
export const HintBasicWithTitle: React.FunctionComponent = () => {
|
|
15
|
+
const [isOpen, setIsOpen] = React.useState<boolean>(false);
|
|
16
|
+
|
|
17
|
+
const onToggle = (isOpen: boolean) => {
|
|
18
|
+
setIsOpen(isOpen);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const onSelect = () => {
|
|
22
|
+
setIsOpen(!isOpen);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const dropdownItems = [
|
|
26
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
27
|
+
<DropdownItem key="action" component="button">
|
|
28
|
+
Action
|
|
29
|
+
</DropdownItem>,
|
|
30
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
31
|
+
Disabled Link
|
|
32
|
+
</DropdownItem>,
|
|
33
|
+
<DropdownItem key="disabled action" isDisabled component="button">
|
|
34
|
+
Disabled Action
|
|
35
|
+
</DropdownItem>,
|
|
36
|
+
<DropdownSeparator key="separator" />,
|
|
37
|
+
<DropdownItem key="separated link">Separated Link</DropdownItem>,
|
|
38
|
+
<DropdownItem key="separated action" component="button">
|
|
39
|
+
Separated Action
|
|
40
|
+
</DropdownItem>
|
|
41
|
+
];
|
|
42
|
+
const actions = (
|
|
43
|
+
<Dropdown
|
|
44
|
+
onSelect={onSelect}
|
|
45
|
+
toggle={<KebabToggle onToggle={onToggle} id="hint-kebab-toggle" />}
|
|
46
|
+
isOpen={isOpen}
|
|
47
|
+
dropdownItems={dropdownItems}
|
|
48
|
+
position="right"
|
|
49
|
+
isPlain
|
|
50
|
+
/>
|
|
51
|
+
);
|
|
52
|
+
return (
|
|
53
|
+
<Hint actions={actions}>
|
|
54
|
+
<HintTitle>Do more with Find it Fix it capabilities</HintTitle>
|
|
55
|
+
<HintBody>
|
|
56
|
+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
|
|
57
|
+
</HintBody>
|
|
58
|
+
<HintFooter>
|
|
59
|
+
<Button variant="link" isInline>
|
|
60
|
+
Try it for 90 days
|
|
61
|
+
</Button>
|
|
62
|
+
</HintFooter>
|
|
63
|
+
</Hint>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Hint,
|
|
4
|
+
HintBody,
|
|
5
|
+
HintFooter,
|
|
6
|
+
Button,
|
|
7
|
+
Dropdown,
|
|
8
|
+
DropdownItem,
|
|
9
|
+
DropdownSeparator,
|
|
10
|
+
KebabToggle
|
|
11
|
+
} from '@patternfly/react-core';
|
|
12
|
+
|
|
13
|
+
export const HintBasicWithoutTitle: React.FunctionComponent = () => {
|
|
14
|
+
const [isOpen, setIsOpen] = React.useState<boolean>(false);
|
|
15
|
+
|
|
16
|
+
const onToggle = (isOpen: boolean) => {
|
|
17
|
+
setIsOpen(isOpen);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const onSelect = () => {
|
|
21
|
+
setIsOpen(!isOpen);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const dropdownItems = [
|
|
25
|
+
<DropdownItem key="link">Link</DropdownItem>,
|
|
26
|
+
<DropdownItem key="action" component="button">
|
|
27
|
+
Action
|
|
28
|
+
</DropdownItem>,
|
|
29
|
+
<DropdownItem key="disabled link" isDisabled>
|
|
30
|
+
Disabled Link
|
|
31
|
+
</DropdownItem>,
|
|
32
|
+
<DropdownItem key="disabled action" isDisabled component="button">
|
|
33
|
+
Disabled Action
|
|
34
|
+
</DropdownItem>,
|
|
35
|
+
<DropdownSeparator key="separator" />,
|
|
36
|
+
<DropdownItem key="separated link">Separated Link</DropdownItem>,
|
|
37
|
+
<DropdownItem key="separated action" component="button">
|
|
38
|
+
Separated Action
|
|
39
|
+
</DropdownItem>
|
|
40
|
+
];
|
|
41
|
+
const actions = (
|
|
42
|
+
<Dropdown
|
|
43
|
+
onSelect={onSelect}
|
|
44
|
+
toggle={<KebabToggle onToggle={onToggle} id="hint-notitle-kebab-toggle" />}
|
|
45
|
+
isOpen={isOpen}
|
|
46
|
+
dropdownItems={dropdownItems}
|
|
47
|
+
position="right"
|
|
48
|
+
isPlain
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
return (
|
|
52
|
+
<React.Fragment>
|
|
53
|
+
<Hint>
|
|
54
|
+
<HintBody>
|
|
55
|
+
Welcome to the new documentation experience.
|
|
56
|
+
<Button variant="link" isInline>
|
|
57
|
+
Learn more about the improved features.
|
|
58
|
+
</Button>
|
|
59
|
+
</HintBody>
|
|
60
|
+
</Hint>
|
|
61
|
+
<br />
|
|
62
|
+
<Hint actions={actions}>
|
|
63
|
+
<HintBody>
|
|
64
|
+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
|
|
65
|
+
</HintBody>
|
|
66
|
+
<HintFooter>
|
|
67
|
+
<Button variant="link" isInline>
|
|
68
|
+
Try it for 90 days
|
|
69
|
+
</Button>
|
|
70
|
+
</HintFooter>
|
|
71
|
+
</Hint>
|
|
72
|
+
</React.Fragment>
|
|
73
|
+
);
|
|
74
|
+
};
|