@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,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 DescriptionListAutoFitBasic: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isAutoFit>
|
|
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 DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isAutoFit autoFitMinModifier={{ default: '200px' }}>
|
|
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 DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}>
|
|
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 DescriptionListBasic: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList>
|
|
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,42 @@
|
|
|
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 DescriptionListColumnFill: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }}>
|
|
13
|
+
<DescriptionListGroup>
|
|
14
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
15
|
+
<DescriptionListDescription>
|
|
16
|
+
This is a long description that should wrap to multiple lines in a multi-column layout.
|
|
17
|
+
</DescriptionListDescription>
|
|
18
|
+
</DescriptionListGroup>
|
|
19
|
+
<DescriptionListGroup>
|
|
20
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
21
|
+
<DescriptionListDescription>
|
|
22
|
+
<a href="#">mary-test</a>
|
|
23
|
+
</DescriptionListDescription>
|
|
24
|
+
</DescriptionListGroup>
|
|
25
|
+
<DescriptionListGroup>
|
|
26
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
27
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
28
|
+
</DescriptionListGroup>
|
|
29
|
+
<DescriptionListGroup>
|
|
30
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
31
|
+
<DescriptionListDescription>
|
|
32
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
33
|
+
app=MyApp
|
|
34
|
+
</Button>
|
|
35
|
+
</DescriptionListDescription>
|
|
36
|
+
</DescriptionListGroup>
|
|
37
|
+
<DescriptionListGroup>
|
|
38
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
39
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
40
|
+
</DescriptionListGroup>
|
|
41
|
+
</DescriptionList>
|
|
42
|
+
);
|
|
@@ -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 DescriptionListCompact: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isCompact>
|
|
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 DescriptionListCompactHorizontal: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isCompact isHorizontal>
|
|
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 DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isAutoColumnWidths columnModifier={{ default: '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 DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid>
|
|
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 DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList 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 DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList 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,44 @@
|
|
|
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 DescriptionListDefaultTwoCol: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList
|
|
13
|
+
columnModifier={{
|
|
14
|
+
default: '2Col'
|
|
15
|
+
}}
|
|
16
|
+
>
|
|
17
|
+
<DescriptionListGroup>
|
|
18
|
+
<DescriptionListTerm>Name</DescriptionListTerm>
|
|
19
|
+
<DescriptionListDescription>Example</DescriptionListDescription>
|
|
20
|
+
</DescriptionListGroup>
|
|
21
|
+
<DescriptionListGroup>
|
|
22
|
+
<DescriptionListTerm>Namespace</DescriptionListTerm>
|
|
23
|
+
<DescriptionListDescription>
|
|
24
|
+
<a href="#">mary-test</a>
|
|
25
|
+
</DescriptionListDescription>
|
|
26
|
+
</DescriptionListGroup>
|
|
27
|
+
<DescriptionListGroup>
|
|
28
|
+
<DescriptionListTerm>Labels</DescriptionListTerm>
|
|
29
|
+
<DescriptionListDescription>example</DescriptionListDescription>
|
|
30
|
+
</DescriptionListGroup>
|
|
31
|
+
<DescriptionListGroup>
|
|
32
|
+
<DescriptionListTerm>Pod selector</DescriptionListTerm>
|
|
33
|
+
<DescriptionListDescription>
|
|
34
|
+
<Button variant="link" isInline icon={<PlusCircleIcon />}>
|
|
35
|
+
app=MyApp
|
|
36
|
+
</Button>
|
|
37
|
+
</DescriptionListDescription>
|
|
38
|
+
</DescriptionListGroup>
|
|
39
|
+
<DescriptionListGroup>
|
|
40
|
+
<DescriptionListTerm>Annotation</DescriptionListTerm>
|
|
41
|
+
<DescriptionListDescription>2 Annotations</DescriptionListDescription>
|
|
42
|
+
</DescriptionListGroup>
|
|
43
|
+
</DescriptionList>
|
|
44
|
+
);
|
|
@@ -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 DescriptionListFluidHorizontal: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal isFluid>
|
|
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 DescriptionListHorizontal: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal>
|
|
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 DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => (
|
|
12
|
+
<DescriptionList isHorizontal isAutoColumnWidths columnModifier={{ lg: '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
|
+
);
|