@patternfly/react-core 4.202.18 → 4.202.19
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/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
- package/dist/esm/components/CalendarMonth/CalendarMonth.js +12 -4
- package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
- package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
- package/dist/js/components/CalendarMonth/CalendarMonth.js +12 -4
- package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
- package/dist/umd/react-core.js +12 -4
- package/dist/umd/react-core.min.css +460 -460
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +5 -5
- package/src/components/CalendarMonth/CalendarMonth.tsx +10 -4
- package/src/components/CalendarMonth/examples/CalendarMonth.md +9 -0
- package/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx +10 -0
- package/src/components/DescriptionList/examples/DescriptionList.md +22 -930
- package/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListBasic.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx +42 -0
- package/src/components/DescriptionList/examples/DescriptionListCompact.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx +44 -0
- package/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx +50 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx +40 -0
- package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx +45 -0
- package/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx +48 -0
- package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx +62 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
|
|
11
|
+
export const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList
|
|
13
|
+
isHorizontal
|
|
14
|
+
horizontalTermWidthModifier={{
|
|
15
|
+
default: '12ch',
|
|
16
|
+
sm: '15ch',
|
|
17
|
+
md: '20ch',
|
|
18
|
+
lg: '28ch',
|
|
19
|
+
xl: '30ch',
|
|
20
|
+
'2xl': '35ch'
|
|
21
|
+
}}
|
|
22
|
+
>
|
|
23
|
+
<DescriptionListGroup>
|
|
24
|
+
<DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>
|
|
25
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
26
|
+
</DescriptionListGroup>
|
|
27
|
+
<DescriptionListGroup>
|
|
28
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
29
|
+
<DescriptionListDescription>
|
|
30
|
+
<a href="#">mary-test</a>
|
|
31
|
+
</DescriptionListDescription>
|
|
32
|
+
</DescriptionListGroup>
|
|
33
|
+
<DescriptionListGroup>
|
|
34
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
35
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
36
|
+
</DescriptionListGroup>
|
|
37
|
+
<DescriptionListGroup>
|
|
38
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
39
|
+
<DescriptionListDescription>
|
|
40
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
41
|
+
app=MyApp
|
|
42
|
+
</Button>
|
|
43
|
+
</DescriptionListDescription>
|
|
44
|
+
</DescriptionListGroup>
|
|
45
|
+
<DescriptionListGroup>
|
|
46
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
47
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
48
|
+
</DescriptionListGroup>
|
|
49
|
+
</DescriptionList>
|
|
50
|
+
);
|
package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
|
|
11
|
+
export const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }}>
|
|
13
|
+
<DescriptionListGroup>
|
|
14
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
15
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
16
|
+
</DescriptionListGroup>
|
|
17
|
+
<DescriptionListGroup>
|
|
18
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
19
|
+
<DescriptionListDescription>
|
|
20
|
+
<a href="#">mary-test</a>
|
|
21
|
+
</DescriptionListDescription>
|
|
22
|
+
</DescriptionListGroup>
|
|
23
|
+
<DescriptionListGroup>
|
|
24
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
25
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
26
|
+
</DescriptionListGroup>
|
|
27
|
+
<DescriptionListGroup>
|
|
28
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
29
|
+
<DescriptionListDescription>
|
|
30
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
31
|
+
app=MyApp
|
|
32
|
+
</Button>
|
|
33
|
+
</DescriptionListDescription>
|
|
34
|
+
</DescriptionListGroup>
|
|
35
|
+
<DescriptionListGroup>
|
|
36
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
37
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
38
|
+
</DescriptionListGroup>
|
|
39
|
+
</DescriptionList>
|
|
40
|
+
);
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
|
|
11
|
+
export const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal columnModifier={{ lg: '3Col' }}>
|
|
13
|
+
<DescriptionListGroup>
|
|
14
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
15
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
16
|
+
</DescriptionListGroup>
|
|
17
|
+
<DescriptionListGroup>
|
|
18
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
19
|
+
<DescriptionListDescription>
|
|
20
|
+
<a href="#">mary-test</a>
|
|
21
|
+
</DescriptionListDescription>
|
|
22
|
+
</DescriptionListGroup>
|
|
23
|
+
<DescriptionListGroup>
|
|
24
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
25
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
26
|
+
</DescriptionListGroup>
|
|
27
|
+
<DescriptionListGroup>
|
|
28
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
29
|
+
<DescriptionListDescription>
|
|
30
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
31
|
+
app=MyApp
|
|
32
|
+
</Button>
|
|
33
|
+
</DescriptionListDescription>
|
|
34
|
+
</DescriptionListGroup>
|
|
35
|
+
<DescriptionListGroup>
|
|
36
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
37
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
38
|
+
</DescriptionListGroup>
|
|
39
|
+
</DescriptionList>
|
|
40
|
+
);
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
|
|
11
|
+
export const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
|
|
13
|
+
<DescriptionListGroup>
|
|
14
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
15
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
16
|
+
</DescriptionListGroup>
|
|
17
|
+
<DescriptionListGroup>
|
|
18
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
19
|
+
<DescriptionListDescription>
|
|
20
|
+
<a href="#">mary-test</a>
|
|
21
|
+
</DescriptionListDescription>
|
|
22
|
+
</DescriptionListGroup>
|
|
23
|
+
<DescriptionListGroup>
|
|
24
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
25
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
26
|
+
</DescriptionListGroup>
|
|
27
|
+
<DescriptionListGroup>
|
|
28
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
29
|
+
<DescriptionListDescription>
|
|
30
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
31
|
+
app=MyApp
|
|
32
|
+
</Button>
|
|
33
|
+
</DescriptionListDescription>
|
|
34
|
+
</DescriptionListGroup>
|
|
35
|
+
<DescriptionListGroup>
|
|
36
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
37
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
38
|
+
</DescriptionListGroup>
|
|
39
|
+
</DescriptionList>
|
|
40
|
+
);
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
|
11
|
+
import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
|
|
12
|
+
import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
|
|
13
|
+
import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
|
|
14
|
+
import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
|
|
15
|
+
|
|
16
|
+
export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
|
|
17
|
+
<DescriptionList>
|
|
18
|
+
<DescriptionListGroup>
|
|
19
|
+
<DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>
|
|
20
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
21
|
+
</DescriptionListGroup>
|
|
22
|
+
<DescriptionListGroup>
|
|
23
|
+
<DescriptionListTerm icon={<BookIcon />}>Namespace</DescriptionListTerm>
|
|
24
|
+
<DescriptionListDescription>
|
|
25
|
+
<a href="#">mary-test</a>
|
|
26
|
+
</DescriptionListDescription>
|
|
27
|
+
</DescriptionListGroup>
|
|
28
|
+
<DescriptionListGroup>
|
|
29
|
+
<DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>
|
|
30
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
31
|
+
</DescriptionListGroup>
|
|
32
|
+
<DescriptionListGroup>
|
|
33
|
+
<DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>
|
|
34
|
+
<DescriptionListDescription>
|
|
35
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
36
|
+
app=MyApp
|
|
37
|
+
</Button>
|
|
38
|
+
</DescriptionListDescription>
|
|
39
|
+
</DescriptionListGroup>
|
|
40
|
+
<DescriptionListGroup>
|
|
41
|
+
<DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>
|
|
42
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
43
|
+
</DescriptionListGroup>
|
|
44
|
+
</DescriptionList>
|
|
45
|
+
);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListTerm,
|
|
6
|
+
DescriptionListGroup,
|
|
7
|
+
DescriptionListDescription
|
|
8
|
+
} from '@patternfly/react-core';
|
|
9
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
10
|
+
|
|
11
|
+
export const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList
|
|
13
|
+
isHorizontal
|
|
14
|
+
orientation={{
|
|
15
|
+
md: 'vertical',
|
|
16
|
+
lg: 'horizontal',
|
|
17
|
+
xl: 'vertical',
|
|
18
|
+
'2xl': 'horizontal'
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<DescriptionListGroup>
|
|
22
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
23
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
24
|
+
</DescriptionListGroup>
|
|
25
|
+
<DescriptionListGroup>
|
|
26
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
27
|
+
<DescriptionListDescription>
|
|
28
|
+
<a href="#">mary-test</a>
|
|
29
|
+
</DescriptionListDescription>
|
|
30
|
+
</DescriptionListGroup>
|
|
31
|
+
<DescriptionListGroup>
|
|
32
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
33
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
34
|
+
</DescriptionListGroup>
|
|
35
|
+
<DescriptionListGroup>
|
|
36
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
37
|
+
<DescriptionListDescription>
|
|
38
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
39
|
+
app=MyApp
|
|
40
|
+
</Button>
|
|
41
|
+
</DescriptionListDescription>
|
|
42
|
+
</DescriptionListGroup>
|
|
43
|
+
<DescriptionListGroup>
|
|
44
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
45
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
46
|
+
</DescriptionListGroup>
|
|
47
|
+
</DescriptionList>
|
|
48
|
+
);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
DescriptionList,
|
|
5
|
+
DescriptionListGroup,
|
|
6
|
+
DescriptionListDescription,
|
|
7
|
+
DescriptionListTermHelpText,
|
|
8
|
+
DescriptionListTermHelpTextButton,
|
|
9
|
+
Popover
|
|
10
|
+
} from '@patternfly/react-core';
|
|
11
|
+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
|
|
12
|
+
|
|
13
|
+
export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
|
|
14
|
+
<DescriptionList>
|
|
15
|
+
<DescriptionListGroup>
|
|
16
|
+
<DescriptionListTermHelpText>
|
|
17
|
+
<Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>
|
|
18
|
+
<DescriptionListTermHelpTextButton> Name </DescriptionListTermHelpTextButton>
|
|
19
|
+
</Popover>
|
|
20
|
+
</DescriptionListTermHelpText>
|
|
21
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
22
|
+
</DescriptionListGroup>
|
|
23
|
+
<DescriptionListGroup>
|
|
24
|
+
<DescriptionListTermHelpText>
|
|
25
|
+
<Popover headerContent={<div>Namespace</div>} bodyContent={<div>Additional namespace info</div>}>
|
|
26
|
+
<DescriptionListTermHelpTextButton> Namespace </DescriptionListTermHelpTextButton>
|
|
27
|
+
</Popover>
|
|
28
|
+
</DescriptionListTermHelpText>
|
|
29
|
+
<DescriptionListDescription>
|
|
30
|
+
<a href="#">mary-test</a>
|
|
31
|
+
</DescriptionListDescription>
|
|
32
|
+
</DescriptionListGroup>
|
|
33
|
+
<DescriptionListGroup>
|
|
34
|
+
<DescriptionListTermHelpText>
|
|
35
|
+
<Popover headerContent={<div>Labels</div>} bodyContent={<div>Additional labels info</div>}>
|
|
36
|
+
<DescriptionListTermHelpTextButton> Labels </DescriptionListTermHelpTextButton>
|
|
37
|
+
</Popover>
|
|
38
|
+
</DescriptionListTermHelpText>
|
|
39
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
40
|
+
</DescriptionListGroup>
|
|
41
|
+
<DescriptionListGroup>
|
|
42
|
+
<DescriptionListTermHelpText>
|
|
43
|
+
<Popover headerContent={<div>Pod selector</div>} bodyContent={<div>Additional pod selector info</div>}>
|
|
44
|
+
<DescriptionListTermHelpTextButton> Pod selector </DescriptionListTermHelpTextButton>
|
|
45
|
+
</Popover>
|
|
46
|
+
</DescriptionListTermHelpText>
|
|
47
|
+
<DescriptionListDescription>
|
|
48
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
49
|
+
app=MyApp
|
|
50
|
+
</Button>
|
|
51
|
+
</DescriptionListDescription>
|
|
52
|
+
</DescriptionListGroup>
|
|
53
|
+
<DescriptionListGroup>
|
|
54
|
+
<DescriptionListTermHelpText>
|
|
55
|
+
<Popover headerContent={<div>Annotation</div>} bodyContent={<div>Additional annotation info</div>}>
|
|
56
|
+
<DescriptionListTermHelpTextButton> Annotation </DescriptionListTermHelpTextButton>
|
|
57
|
+
</Popover>
|
|
58
|
+
</DescriptionListTermHelpText>
|
|
59
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
60
|
+
</DescriptionListGroup>
|
|
61
|
+
</DescriptionList>
|
|
62
|
+
);
|