@patternfly/react-core 4.202.17 → 4.202.20

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.
Files changed (95) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  3. package/dist/esm/components/CalendarMonth/CalendarMonth.js +12 -4
  4. package/dist/esm/components/CalendarMonth/CalendarMonth.js.map +1 -1
  5. package/dist/esm/components/NumberInput/NumberInput.d.ts +2 -0
  6. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  7. package/dist/esm/components/NumberInput/NumberInput.js +2 -2
  8. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  9. package/dist/js/components/CalendarMonth/CalendarMonth.d.ts.map +1 -1
  10. package/dist/js/components/CalendarMonth/CalendarMonth.js +12 -4
  11. package/dist/js/components/CalendarMonth/CalendarMonth.js.map +1 -1
  12. package/dist/js/components/NumberInput/NumberInput.d.ts +2 -0
  13. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  14. package/dist/js/components/NumberInput/NumberInput.js +2 -2
  15. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  16. package/dist/umd/react-core.js +14 -6
  17. package/dist/umd/react-core.min.js +2 -2
  18. package/package.json +5 -5
  19. package/src/components/CalendarMonth/CalendarMonth.tsx +10 -4
  20. package/src/components/CalendarMonth/examples/CalendarMonth.md +9 -0
  21. package/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx +10 -0
  22. package/src/components/ContextSelector/examples/ContextSelector.md +3 -279
  23. package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx +84 -0
  24. package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx +85 -0
  25. package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx +91 -0
  26. package/src/components/DescriptionList/examples/DescriptionList.md +22 -930
  27. package/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx +40 -0
  28. package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx +40 -0
  29. package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx +40 -0
  30. package/src/components/DescriptionList/examples/DescriptionListBasic.tsx +40 -0
  31. package/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx +42 -0
  32. package/src/components/DescriptionList/examples/DescriptionListCompact.tsx +40 -0
  33. package/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx +40 -0
  34. package/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx +40 -0
  35. package/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx +40 -0
  36. package/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx +40 -0
  37. package/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx +40 -0
  38. package/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx +44 -0
  39. package/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx +40 -0
  40. package/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx +40 -0
  41. package/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx +40 -0
  42. package/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx +50 -0
  43. package/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx +40 -0
  44. package/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx +40 -0
  45. package/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx +40 -0
  46. package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx +45 -0
  47. package/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx +48 -0
  48. package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx +62 -0
  49. package/src/components/Divider/examples/Divider.md +15 -68
  50. package/src/components/Divider/examples/DividerInsetMedium.tsx +4 -0
  51. package/src/components/Divider/examples/DividerInsetVariousBreakpoints.tsx +13 -0
  52. package/src/components/Divider/examples/DividerUsingDiv.tsx +4 -0
  53. package/src/components/Divider/examples/DividerUsingHr.tsx +4 -0
  54. package/src/components/Divider/examples/DividerUsingLi.tsx +10 -0
  55. package/src/components/Divider/examples/DividerVerticalFlex.tsx +10 -0
  56. package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx +10 -0
  57. package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +18 -0
  58. package/src/components/FormSelect/__tests__/FormSelect.test.tsx +0 -1
  59. package/src/components/List/__tests__/List.test.tsx +33 -33
  60. package/src/components/List/__tests__/__snapshots__/List.test.tsx.snap +33 -64
  61. package/src/components/Menu/__tests__/Menu.test.tsx +37 -33
  62. package/src/components/Menu/__tests__/__snapshots__/Menu.test.tsx.snap +3 -36
  63. package/src/components/Modal/__tests__/Modal.test.tsx +65 -67
  64. package/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx +13 -10
  65. package/src/components/Nav/__tests__/Nav.test.tsx +185 -214
  66. package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +877 -1729
  67. package/src/components/NotificationDrawer/__tests__/NotificationDrawer.test.tsx +13 -15
  68. package/src/components/NotificationDrawer/__tests__/NotificationDrawerBody.test.tsx +13 -15
  69. package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx +21 -27
  70. package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroupList.test.tsx +13 -15
  71. package/src/components/NotificationDrawer/__tests__/NotificationDrawerHeader.test.tsx +25 -27
  72. package/src/components/NotificationDrawer/__tests__/NotificationDrawerList.test.tsx +17 -19
  73. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx +20 -27
  74. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemBody.test.tsx +17 -13
  75. package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx +30 -25
  76. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawer.test.tsx.snap +3 -5
  77. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerBody.test.tsx.snap +3 -5
  78. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap +9 -11
  79. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroupList.test.tsx.snap +3 -5
  80. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap +16 -18
  81. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerList.test.tsx.snap +7 -8
  82. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap +3 -5
  83. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemBody.test.tsx.snap +6 -8
  84. package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap +12 -14
  85. package/src/components/NumberInput/NumberInput.tsx +4 -0
  86. package/src/components/NumberInput/examples/NumberInput.md +8 -0
  87. package/src/components/OverflowMenu/__tests__/OverflowMenu.test.tsx +15 -12
  88. package/src/components/OverflowMenu/__tests__/OverflowMenuControl.test.tsx +9 -8
  89. package/src/components/OverflowMenu/__tests__/OverflowMenuGroup.test.tsx +17 -18
  90. package/src/components/OverflowMenu/__tests__/OverflowMenuItem.test.tsx +10 -9
  91. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenu.test.tsx.snap +6 -16
  92. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuControl.test.tsx.snap +3 -15
  93. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuItem.test.tsx.snap +3 -17
  94. package/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap +0 -16
  95. package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuGroup.test.tsx.snap +0 -33
package/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListBasic.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx ADDED
@@ -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
+ );
package/src/components/DescriptionList/examples/DescriptionListCompact.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx ADDED
@@ -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
+ );
package/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListHorizontal.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 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
+ );
package/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.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 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
+ );