@patternfly/react-core 4.226.2 → 4.227.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 +27 -0
- package/dist/esm/components/Dropdown/DropdownToggle.d.ts.map +1 -1
- package/dist/esm/components/Dropdown/DropdownToggle.js +1 -1
- package/dist/esm/components/Dropdown/DropdownToggle.js.map +1 -1
- package/dist/js/components/Dropdown/DropdownToggle.d.ts.map +1 -1
- package/dist/js/components/Dropdown/DropdownToggle.js +1 -1
- package/dist/js/components/Dropdown/DropdownToggle.js.map +1 -1
- package/dist/umd/react-core.js +1 -1
- package/dist/umd/react-core.min.css +2763 -2763
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +5 -5
- package/src/components/Dropdown/DropdownToggle.tsx +1 -0
- package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx +18 -0
- package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap +1 -1
- package/src/components/Dropdown/examples/Dropdown.md +5 -0
- package/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx +107 -0
- package/src/components/Page/examples/Page.md +25 -12
- package/src/components/ProgressStepper/examples/ProgressStepper.md +13 -356
- package/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx +21 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx +48 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx +48 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx +59 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx +35 -0
- package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx +51 -0
- package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx +35 -0
- package/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx +62 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperBasic: React.FunctionComponent = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
id="basic-step1"
|
|
9
|
+
titleId="basic-step1-title"
|
|
10
|
+
aria-label="completed step, step with success"
|
|
11
|
+
>
|
|
12
|
+
First step
|
|
13
|
+
</ProgressStep>
|
|
14
|
+
<ProgressStep variant="info" isCurrent id="basic-step2" titleId="basic-step2-title" aria-label="step with info">
|
|
15
|
+
Second step
|
|
16
|
+
</ProgressStep>
|
|
17
|
+
<ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
|
|
18
|
+
Third step
|
|
19
|
+
</ProgressStep>
|
|
20
|
+
</ProgressStepper>
|
|
21
|
+
);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperBasicFailure: React.FunctionComponent = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
id="basic-with-failure-step1"
|
|
9
|
+
titleId="basic-with-failure-step1-title"
|
|
10
|
+
aria-label="completed step, step with success"
|
|
11
|
+
>
|
|
12
|
+
First step
|
|
13
|
+
</ProgressStep>
|
|
14
|
+
<ProgressStep
|
|
15
|
+
variant="success"
|
|
16
|
+
id="basic-with-failure-step2"
|
|
17
|
+
titleId="basic-with-failure-step2-title"
|
|
18
|
+
aria-label="completed step, step with success"
|
|
19
|
+
>
|
|
20
|
+
Second step
|
|
21
|
+
</ProgressStep>
|
|
22
|
+
<ProgressStep
|
|
23
|
+
variant="success"
|
|
24
|
+
id="basic-with-failure-step3"
|
|
25
|
+
titleId="basic-with-failure-step3-title"
|
|
26
|
+
aria-label="completed step, step with success"
|
|
27
|
+
>
|
|
28
|
+
Third step
|
|
29
|
+
</ProgressStep>
|
|
30
|
+
<ProgressStep
|
|
31
|
+
variant="danger"
|
|
32
|
+
isCurrent
|
|
33
|
+
id="basic-with-failure-step4"
|
|
34
|
+
titleId="basic-with-failure-step4-title"
|
|
35
|
+
aria-label="step with danger"
|
|
36
|
+
>
|
|
37
|
+
Fourth step
|
|
38
|
+
</ProgressStep>
|
|
39
|
+
<ProgressStep
|
|
40
|
+
variant="pending"
|
|
41
|
+
id="basic-with-failure-step5"
|
|
42
|
+
titleId="basic-with-failure-step5-title"
|
|
43
|
+
aria-label="pending step"
|
|
44
|
+
>
|
|
45
|
+
Fifth step
|
|
46
|
+
</ProgressStep>
|
|
47
|
+
</ProgressStepper>
|
|
48
|
+
);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperBasicIssue: React.FunctionComponent = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
id="basic-with-issue-step1"
|
|
9
|
+
titleId="basic-with-issue-step1-title"
|
|
10
|
+
aria-label="completed step, step with success"
|
|
11
|
+
>
|
|
12
|
+
First step
|
|
13
|
+
</ProgressStep>
|
|
14
|
+
<ProgressStep
|
|
15
|
+
variant="success"
|
|
16
|
+
id="basic-with-issue-step2"
|
|
17
|
+
titleId="basic-with-issue-step2-title"
|
|
18
|
+
aria-label="completed step, step with success"
|
|
19
|
+
>
|
|
20
|
+
Second step
|
|
21
|
+
</ProgressStep>
|
|
22
|
+
<ProgressStep
|
|
23
|
+
variant="warning"
|
|
24
|
+
id="basic-with-issue-step3"
|
|
25
|
+
titleId="basic-with-issue-step3-title"
|
|
26
|
+
aria-label="completed step, step with warning"
|
|
27
|
+
>
|
|
28
|
+
Third step
|
|
29
|
+
</ProgressStep>
|
|
30
|
+
<ProgressStep
|
|
31
|
+
variant="info"
|
|
32
|
+
isCurrent
|
|
33
|
+
id="basic-with-issue-step4"
|
|
34
|
+
titleId="basic-with-issue-step4-title"
|
|
35
|
+
aria-label="step with info"
|
|
36
|
+
>
|
|
37
|
+
Fourth step
|
|
38
|
+
</ProgressStep>
|
|
39
|
+
<ProgressStep
|
|
40
|
+
variant="pending"
|
|
41
|
+
id="basic-with-issue-step5"
|
|
42
|
+
titleId="basic-with-issue-step5-title"
|
|
43
|
+
aria-label="pending step"
|
|
44
|
+
>
|
|
45
|
+
Fifth step
|
|
46
|
+
</ProgressStep>
|
|
47
|
+
</ProgressStepper>
|
|
48
|
+
);
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => {
|
|
5
|
+
const [isVertical, setIsVertical] = React.useState(false);
|
|
6
|
+
const [isCenterAligned, setIsCenterAligned] = React.useState(false);
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<React.Fragment>
|
|
10
|
+
<Checkbox
|
|
11
|
+
label="Vertical alignment"
|
|
12
|
+
isChecked={isVertical}
|
|
13
|
+
onChange={setIsVertical}
|
|
14
|
+
aria-label="Toggle vertical alignment"
|
|
15
|
+
id="toggle-vertical"
|
|
16
|
+
name="toggle-vertical"
|
|
17
|
+
/>
|
|
18
|
+
<Checkbox
|
|
19
|
+
label="Center alignment"
|
|
20
|
+
isChecked={isCenterAligned}
|
|
21
|
+
onChange={setIsCenterAligned}
|
|
22
|
+
aria-label="Toggle center alignment"
|
|
23
|
+
id="toggle-center"
|
|
24
|
+
name="toggle-center"
|
|
25
|
+
/>
|
|
26
|
+
<br />
|
|
27
|
+
<ProgressStepper isVertical={isVertical} isCenterAligned={isCenterAligned}>
|
|
28
|
+
<ProgressStep
|
|
29
|
+
variant="success"
|
|
30
|
+
description="This is the first thing to happen"
|
|
31
|
+
id="basic-alignment-step1"
|
|
32
|
+
titleId="basic-alignment-step1-title"
|
|
33
|
+
aria-label="completed step, step with success"
|
|
34
|
+
>
|
|
35
|
+
First step
|
|
36
|
+
</ProgressStep>
|
|
37
|
+
<ProgressStep
|
|
38
|
+
variant="info"
|
|
39
|
+
isCurrent
|
|
40
|
+
description="This is the second thing to happen"
|
|
41
|
+
id="basic-alignment-step2"
|
|
42
|
+
titleId="basic-alignment-step2-title"
|
|
43
|
+
aria-label="step with info"
|
|
44
|
+
>
|
|
45
|
+
Second step
|
|
46
|
+
</ProgressStep>
|
|
47
|
+
<ProgressStep
|
|
48
|
+
variant="pending"
|
|
49
|
+
description="This is the last thing to happen"
|
|
50
|
+
id="basic-alignment-step3"
|
|
51
|
+
titleId="basic-alignment-step3-title"
|
|
52
|
+
aria-label="pending step"
|
|
53
|
+
>
|
|
54
|
+
Third step
|
|
55
|
+
</ProgressStep>
|
|
56
|
+
</ProgressStepper>
|
|
57
|
+
</React.Fragment>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperBasicWithDescription: React.FunctionComponent = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
description="This is the first thing to happen"
|
|
9
|
+
id="basic-desc-step1"
|
|
10
|
+
titleId="basic-desc-step1-title"
|
|
11
|
+
aria-label="completed step, step with success"
|
|
12
|
+
>
|
|
13
|
+
First step
|
|
14
|
+
</ProgressStep>
|
|
15
|
+
<ProgressStep
|
|
16
|
+
variant="info"
|
|
17
|
+
isCurrent
|
|
18
|
+
description="This is the second thing to happen"
|
|
19
|
+
id="basic-desc-step2"
|
|
20
|
+
titleId="basic-desc-step2-title"
|
|
21
|
+
aria-label="step with info"
|
|
22
|
+
>
|
|
23
|
+
Second step
|
|
24
|
+
</ProgressStep>
|
|
25
|
+
<ProgressStep
|
|
26
|
+
variant="pending"
|
|
27
|
+
description="This is the last thing to happen"
|
|
28
|
+
id="basic-desc-step3"
|
|
29
|
+
titleId="basic-desc-step3-title"
|
|
30
|
+
aria-label="pending step"
|
|
31
|
+
>
|
|
32
|
+
Third step
|
|
33
|
+
</ProgressStep>
|
|
34
|
+
</ProgressStepper>
|
|
35
|
+
);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ProgressStepperCompact: React.FunctionComponent = () => {
|
|
5
|
+
const [isVertical, setIsVertical] = React.useState(false);
|
|
6
|
+
const [isCenterAligned, setIsCenterAligned] = React.useState(false);
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<React.Fragment>
|
|
10
|
+
<Checkbox
|
|
11
|
+
label="Vertical alignment"
|
|
12
|
+
isChecked={isVertical}
|
|
13
|
+
onChange={setIsVertical}
|
|
14
|
+
aria-label="Toggle compact vertical alignment"
|
|
15
|
+
id="toggle-compact-vertical"
|
|
16
|
+
name="toggle-compact-vertical"
|
|
17
|
+
/>
|
|
18
|
+
<Checkbox
|
|
19
|
+
label="Center alignment"
|
|
20
|
+
isChecked={isCenterAligned}
|
|
21
|
+
onChange={setIsCenterAligned}
|
|
22
|
+
aria-label="Toggle compact center alignment"
|
|
23
|
+
id="toggle-compact-center"
|
|
24
|
+
name="toggle-compact-center"
|
|
25
|
+
/>
|
|
26
|
+
<br />
|
|
27
|
+
<ProgressStepper isCompact isVertical={isVertical} isCenterAligned={isCenterAligned}>
|
|
28
|
+
<ProgressStep
|
|
29
|
+
variant="success"
|
|
30
|
+
id="compact-step1"
|
|
31
|
+
titleId="compact-step1-title"
|
|
32
|
+
aria-label="completed step, step with success"
|
|
33
|
+
>
|
|
34
|
+
First step
|
|
35
|
+
</ProgressStep>
|
|
36
|
+
<ProgressStep
|
|
37
|
+
variant="info"
|
|
38
|
+
isCurrent
|
|
39
|
+
id="compact-step2"
|
|
40
|
+
titleId="compact-step2-title"
|
|
41
|
+
aria-label="step with info"
|
|
42
|
+
>
|
|
43
|
+
Second step
|
|
44
|
+
</ProgressStep>
|
|
45
|
+
<ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
|
|
46
|
+
Third step
|
|
47
|
+
</ProgressStep>
|
|
48
|
+
</ProgressStepper>
|
|
49
|
+
</React.Fragment>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
|
|
4
|
+
import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
|
|
5
|
+
|
|
6
|
+
export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
|
|
7
|
+
<ProgressStepper>
|
|
8
|
+
<ProgressStep
|
|
9
|
+
variant="success"
|
|
10
|
+
id="custom-step1"
|
|
11
|
+
titleId="custom-step1-title"
|
|
12
|
+
aria-label="completed step, step with success"
|
|
13
|
+
>
|
|
14
|
+
Successful completion
|
|
15
|
+
</ProgressStep>
|
|
16
|
+
<ProgressStep
|
|
17
|
+
isCurrent
|
|
18
|
+
icon={<InProgressIcon />}
|
|
19
|
+
id="custom-step2"
|
|
20
|
+
titleId="custom-step2-title"
|
|
21
|
+
aria-label="in progress"
|
|
22
|
+
>
|
|
23
|
+
In process
|
|
24
|
+
</ProgressStep>
|
|
25
|
+
<ProgressStep
|
|
26
|
+
variant="pending"
|
|
27
|
+
icon={<PendingIcon />}
|
|
28
|
+
id="custom-step3"
|
|
29
|
+
titleId="custom-step3-title"
|
|
30
|
+
aria-label="pending step"
|
|
31
|
+
>
|
|
32
|
+
Pending
|
|
33
|
+
</ProgressStep>
|
|
34
|
+
</ProgressStepper>
|
|
35
|
+
);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const PopoverProgressStep = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
id="popover-step1"
|
|
9
|
+
titleId="popover-step1-title"
|
|
10
|
+
aria-label="completed step with popover, step with success"
|
|
11
|
+
popoverRender={stepRef => (
|
|
12
|
+
<Popover
|
|
13
|
+
aria-label="First step help"
|
|
14
|
+
headerContent={<div>First step popover</div>}
|
|
15
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
16
|
+
reference={stepRef}
|
|
17
|
+
position="right"
|
|
18
|
+
/>
|
|
19
|
+
)}
|
|
20
|
+
>
|
|
21
|
+
First step
|
|
22
|
+
</ProgressStep>
|
|
23
|
+
<ProgressStep
|
|
24
|
+
variant="danger"
|
|
25
|
+
id="popover-step2"
|
|
26
|
+
titleId="popover-step2-title"
|
|
27
|
+
aria-label="completed step with popover, step with danger"
|
|
28
|
+
popoverRender={stepRef => (
|
|
29
|
+
<Popover
|
|
30
|
+
aria-label="Second step help"
|
|
31
|
+
headerContent={<div>Second step popover</div>}
|
|
32
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
33
|
+
reference={stepRef}
|
|
34
|
+
position="right"
|
|
35
|
+
/>
|
|
36
|
+
)}
|
|
37
|
+
>
|
|
38
|
+
Second step
|
|
39
|
+
</ProgressStep>
|
|
40
|
+
<ProgressStep
|
|
41
|
+
variant="info"
|
|
42
|
+
id="popover-step3"
|
|
43
|
+
titleId="popover-step3-title"
|
|
44
|
+
aria-label="step with popover"
|
|
45
|
+
popoverRender={stepRef => (
|
|
46
|
+
<Popover
|
|
47
|
+
aria-label="Third step help"
|
|
48
|
+
headerContent={<div>Third step popover</div>}
|
|
49
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
50
|
+
reference={stepRef}
|
|
51
|
+
position="right"
|
|
52
|
+
/>
|
|
53
|
+
)}
|
|
54
|
+
isCurrent
|
|
55
|
+
>
|
|
56
|
+
Third step
|
|
57
|
+
</ProgressStep>
|
|
58
|
+
<ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
|
|
59
|
+
Fourth step
|
|
60
|
+
</ProgressStep>
|
|
61
|
+
</ProgressStepper>
|
|
62
|
+
);
|