@patternfly/react-core 6.4.0 → 6.4.1-prerelease.1

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 (247) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/Content/package.json +1 -1
  23. package/dist/dynamic/components/DataList/package.json +1 -1
  24. package/dist/dynamic/components/DatePicker/package.json +1 -1
  25. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  26. package/dist/dynamic/components/Divider/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/TextArea/package.json +1 -1
  71. package/dist/dynamic/components/TextInput/package.json +1 -1
  72. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  73. package/dist/dynamic/components/TimePicker/package.json +1 -1
  74. package/dist/dynamic/components/Timestamp/package.json +1 -1
  75. package/dist/dynamic/components/Title/package.json +1 -1
  76. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  77. package/dist/dynamic/components/Toolbar/package.json +1 -1
  78. package/dist/dynamic/components/Tooltip/package.json +1 -1
  79. package/dist/dynamic/components/TreeView/package.json +1 -1
  80. package/dist/dynamic/components/Truncate/package.json +1 -1
  81. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  82. package/dist/dynamic/components/Wizard/package.json +1 -1
  83. package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
  84. package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
  87. package/dist/dynamic/deprecated/components/Tile/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/package.json +1 -1
  90. package/dist/dynamic/helpers/AnimationsProvider/AnimationsProvider/package.json +1 -1
  91. package/dist/dynamic/helpers/AnimationsProvider/package.json +1 -1
  92. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  93. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  94. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  95. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  96. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  97. package/dist/dynamic/helpers/constants/package.json +1 -1
  98. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  99. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  100. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  101. package/dist/dynamic/helpers/package.json +1 -1
  102. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  103. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  104. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  105. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  106. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  107. package/dist/dynamic/helpers/util/package.json +1 -1
  108. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  109. package/dist/dynamic/layouts/Flex/package.json +1 -1
  110. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  111. package/dist/dynamic/layouts/Grid/package.json +1 -1
  112. package/dist/dynamic/layouts/Level/package.json +1 -1
  113. package/dist/dynamic/layouts/Split/package.json +1 -1
  114. package/dist/dynamic/layouts/Stack/package.json +1 -1
  115. package/dist/dynamic/styles/package.json +1 -1
  116. package/dist/esm/components/Checkbox/Checkbox.d.ts +3 -0
  117. package/dist/esm/components/Checkbox/Checkbox.d.ts.map +1 -1
  118. package/dist/esm/components/Checkbox/Checkbox.js +14 -4
  119. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  120. package/dist/esm/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
  121. package/dist/esm/components/Drawer/DrawerPanelContent.js +2 -4
  122. package/dist/esm/components/Drawer/DrawerPanelContent.js.map +1 -1
  123. package/dist/esm/components/Modal/Modal.d.ts +2 -0
  124. package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
  125. package/dist/esm/components/Modal/Modal.js.map +1 -1
  126. package/dist/esm/components/Modal/ModalContent.d.ts +2 -0
  127. package/dist/esm/components/Modal/ModalContent.d.ts.map +1 -1
  128. package/dist/esm/components/Modal/ModalContent.js +2 -2
  129. package/dist/esm/components/Modal/ModalContent.js.map +1 -1
  130. package/dist/esm/components/Progress/ProgressContainer.js +2 -2
  131. package/dist/esm/components/Progress/ProgressContainer.js.map +1 -1
  132. package/dist/esm/components/Radio/Radio.d.ts +3 -0
  133. package/dist/esm/components/Radio/Radio.d.ts.map +1 -1
  134. package/dist/esm/components/Radio/Radio.js +15 -5
  135. package/dist/esm/components/Radio/Radio.js.map +1 -1
  136. package/dist/esm/components/Wizard/WizardNavItem.d.ts +1 -1
  137. package/dist/esm/components/Wizard/WizardNavItem.d.ts.map +1 -1
  138. package/dist/esm/components/Wizard/WizardNavItem.js +2 -1
  139. package/dist/esm/components/Wizard/WizardNavItem.js.map +1 -1
  140. package/dist/esm/components/Wizard/WizardStep.d.ts +1 -1
  141. package/dist/esm/components/Wizard/WizardStep.d.ts.map +1 -1
  142. package/dist/esm/components/Wizard/types.d.ts +3 -2
  143. package/dist/esm/components/Wizard/types.d.ts.map +1 -1
  144. package/dist/esm/components/Wizard/types.js +1 -0
  145. package/dist/esm/components/Wizard/types.js.map +1 -1
  146. package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts +2 -0
  147. package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
  148. package/dist/esm/helpers/FocusTrap/FocusTrap.js.map +1 -1
  149. package/dist/js/components/Checkbox/Checkbox.d.ts +3 -0
  150. package/dist/js/components/Checkbox/Checkbox.d.ts.map +1 -1
  151. package/dist/js/components/Checkbox/Checkbox.js +14 -4
  152. package/dist/js/components/Checkbox/Checkbox.js.map +1 -1
  153. package/dist/js/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
  154. package/dist/js/components/Drawer/DrawerPanelContent.js +2 -4
  155. package/dist/js/components/Drawer/DrawerPanelContent.js.map +1 -1
  156. package/dist/js/components/Modal/Modal.d.ts +2 -0
  157. package/dist/js/components/Modal/Modal.d.ts.map +1 -1
  158. package/dist/js/components/Modal/Modal.js.map +1 -1
  159. package/dist/js/components/Modal/ModalContent.d.ts +2 -0
  160. package/dist/js/components/Modal/ModalContent.d.ts.map +1 -1
  161. package/dist/js/components/Modal/ModalContent.js +2 -2
  162. package/dist/js/components/Modal/ModalContent.js.map +1 -1
  163. package/dist/js/components/Progress/ProgressContainer.js +2 -2
  164. package/dist/js/components/Progress/ProgressContainer.js.map +1 -1
  165. package/dist/js/components/Radio/Radio.d.ts +3 -0
  166. package/dist/js/components/Radio/Radio.d.ts.map +1 -1
  167. package/dist/js/components/Radio/Radio.js +15 -5
  168. package/dist/js/components/Radio/Radio.js.map +1 -1
  169. package/dist/js/components/Wizard/WizardNavItem.d.ts +1 -1
  170. package/dist/js/components/Wizard/WizardNavItem.d.ts.map +1 -1
  171. package/dist/js/components/Wizard/WizardNavItem.js +2 -1
  172. package/dist/js/components/Wizard/WizardNavItem.js.map +1 -1
  173. package/dist/js/components/Wizard/WizardStep.d.ts +1 -1
  174. package/dist/js/components/Wizard/WizardStep.d.ts.map +1 -1
  175. package/dist/js/components/Wizard/types.d.ts +3 -2
  176. package/dist/js/components/Wizard/types.d.ts.map +1 -1
  177. package/dist/js/components/Wizard/types.js +1 -0
  178. package/dist/js/components/Wizard/types.js.map +1 -1
  179. package/dist/js/helpers/FocusTrap/FocusTrap.d.ts +2 -0
  180. package/dist/js/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
  181. package/dist/js/helpers/FocusTrap/FocusTrap.js.map +1 -1
  182. package/dist/umd/assets/{output-DH8J4Va1.css → output-POOr9zB4.css} +20855 -20855
  183. package/dist/umd/react-core.min.js +1 -1
  184. package/helpers/package.json +1 -1
  185. package/layouts/package.json +1 -1
  186. package/next/package.json +1 -1
  187. package/package.json +2 -2
  188. package/src/components/Checkbox/Checkbox.tsx +21 -2
  189. package/src/components/Checkbox/__tests__/Checkbox.test.tsx +34 -0
  190. package/src/components/Drawer/DrawerPanelContent.tsx +5 -3
  191. package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx +37 -0
  192. package/src/components/Modal/Modal.tsx +2 -0
  193. package/src/components/Modal/ModalContent.tsx +4 -0
  194. package/src/components/Modal/__tests__/Modal.test.tsx +9 -0
  195. package/src/components/Modal/__tests__/ModalContent.test.tsx +17 -1
  196. package/src/components/Modal/examples/Modal.md +14 -5
  197. package/src/components/Modal/examples/ModalWithDropdown.tsx +34 -7
  198. package/src/components/Progress/ProgressContainer.tsx +2 -2
  199. package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap +1 -1
  200. package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap +1 -1
  201. package/src/components/Radio/Radio.tsx +21 -3
  202. package/src/components/Radio/__tests__/Radio.test.tsx +44 -0
  203. package/src/components/Tabs/__tests__/Tabs.test.tsx +109 -1
  204. package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +2 -2
  205. package/src/components/Tabs/examples/Tabs.md +38 -4
  206. package/src/components/Tabs/examples/TabsSeparateContent.tsx +3 -2
  207. package/src/components/Wizard/WizardNavItem.tsx +5 -2
  208. package/src/components/Wizard/WizardStep.tsx +1 -1
  209. package/src/components/Wizard/__tests__/WizardNavItem.test.tsx +6 -0
  210. package/src/components/Wizard/__tests__/WizardStep.test.tsx +2 -0
  211. package/src/components/Wizard/examples/WizardStepStatus.tsx +28 -7
  212. package/src/components/Wizard/types.tsx +3 -2
  213. package/src/demos/SearchInput/SearchInput.md +2 -487
  214. package/src/demos/SearchInput/examples/SearchInputAdvancedComposable.tsx +322 -0
  215. package/src/demos/SearchInput/examples/SearchInputAutocomplete.tsx +165 -0
  216. package/src/helpers/FocusTrap/FocusTrap.tsx +2 -0
  217. package/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx +17 -0
  218. package/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx +3 -3
  219. package/src/helpers/OUIA/OUIA.md +2 -10
  220. package/src/helpers/OUIA/examples/OuiaExample.tsx +11 -0
  221. package/src/layouts/Bullseye/examples/Bullseye.md +1 -5
  222. package/src/layouts/Bullseye/examples/BullseyeBasic.tsx +7 -0
  223. package/src/layouts/Flex/examples/Flex.md +17 -209
  224. package/src/layouts/Flex/examples/FlexAdjustingWidth.tsx +18 -0
  225. package/src/layouts/Flex/examples/FlexBasic.tsx +11 -0
  226. package/src/layouts/Flex/examples/FlexCanGrow.tsx +18 -0
  227. package/src/layouts/Flex/examples/FlexColumnGap.tsx +16 -0
  228. package/src/layouts/Flex/examples/FlexColumnLayout.tsx +9 -0
  229. package/src/layouts/Flex/examples/FlexColumnWidths.tsx +18 -0
  230. package/src/layouts/Flex/examples/FlexDefaultLayout.tsx +11 -0
  231. package/src/layouts/Flex/examples/FlexGap.tsx +16 -0
  232. package/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx +14 -0
  233. package/src/layouts/Flex/examples/FlexInline.tsx +11 -0
  234. package/src/layouts/Flex/examples/FlexNestedItems.tsx +15 -0
  235. package/src/layouts/Flex/examples/FlexNesting.tsx +15 -0
  236. package/src/layouts/Flex/examples/FlexNestingInColumns.tsx +15 -0
  237. package/src/layouts/Flex/examples/FlexRowGap.tsx +16 -0
  238. package/src/layouts/Flex/examples/FlexSpacingNone.tsx +11 -0
  239. package/src/layouts/Flex/examples/FlexSpacingXl.tsx +11 -0
  240. package/src/layouts/Flex/examples/FlexStackingElements.tsx +18 -0
  241. package/src/layouts/Level/examples/Level.md +3 -15
  242. package/src/layouts/Level/examples/LevelBasic.tsx +9 -0
  243. package/src/layouts/Level/examples/LevelWithGutters.tsx +9 -0
  244. package/src/layouts/Split/examples/Split.md +4 -34
  245. package/src/layouts/Split/examples/SplitBasic.tsx +9 -0
  246. package/src/layouts/Split/examples/SplitWithGutter.tsx +9 -0
  247. package/src/layouts/Split/examples/SplitWrappable.tsx +20 -0
package/src/layouts/Flex/examples/Flex.md CHANGED
@@ -11,52 +11,20 @@ import './flex.css';
11
11
 
12
12
  ### Basic
13
13
 
14
- ```js
15
- import { Flex, FlexItem } from '@patternfly/react-core';
14
+ ```ts file="FlexBasic.tsx"
16
15
 
17
- <Flex>
18
- <FlexItem>Flex item</FlexItem>
19
- <FlexItem>Flex item</FlexItem>
20
- <FlexItem>Flex item</FlexItem>
21
- <FlexItem>Flex item</FlexItem>
22
- <FlexItem>Flex item</FlexItem>
23
- </Flex>;
24
16
  ```
25
17
 
26
18
  ### Nesting
27
19
 
28
- ```js
29
- import { Flex, FlexItem } from '@patternfly/react-core';
20
+ ```ts file="FlexNesting.tsx"
30
21
 
31
- <Flex>
32
- <Flex>
33
- <FlexItem>Flex item</FlexItem>
34
- <FlexItem>Flex item</FlexItem>
35
- </Flex>
36
- <Flex>
37
- <FlexItem>Flex item</FlexItem>
38
- <FlexItem>Flex item</FlexItem>
39
- <FlexItem>Flex item</FlexItem>
40
- </Flex>
41
- </Flex>;
42
22
  ```
43
23
 
44
24
  ### Nested with items
45
25
 
46
- ```js
47
- import { Flex, FlexItem } from '@patternfly/react-core';
26
+ ```ts file="FlexNestedItems.tsx"
48
27
 
49
- <Flex>
50
- <Flex>
51
- <FlexItem>Flex item</FlexItem>
52
- <FlexItem>Flex item</FlexItem>
53
- </Flex>
54
- <FlexItem>Flex item</FlexItem>
55
- <FlexItem>Flex item</FlexItem>
56
- <Flex>
57
- <FlexItem>Flex item</FlexItem>
58
- </Flex>
59
- </Flex>;
60
28
  ```
61
29
 
62
30
  ### Spacing
@@ -73,252 +41,92 @@ The flex layout provides two ways of spacing its direct children.
73
41
 
74
42
  ### Individually spaced
75
43
 
76
- ```js
77
- import { Flex, FlexItem } from '@patternfly/react-core';
44
+ ```ts file="FlexIndividuallySpaced.tsx"
78
45
 
79
- <Flex>
80
- <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
81
- <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
82
- <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
83
- <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
84
- <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
85
- <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
86
- <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
87
- <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
88
- </Flex>;
89
46
  ```
90
47
 
91
48
  ### Spacing xl
92
49
 
93
- ```js
94
- import { Flex, FlexItem } from '@patternfly/react-core';
50
+ ```ts file="FlexSpacingXl.tsx"
95
51
 
96
- <Flex spaceItems={{ default: 'spaceItemsXl' }}>
97
- <FlexItem>Flex item</FlexItem>
98
- <FlexItem>Flex item</FlexItem>
99
- <FlexItem>Flex item</FlexItem>
100
- <FlexItem>Flex item</FlexItem>
101
- <FlexItem>Flex item</FlexItem>
102
- </Flex>;
103
52
  ```
104
53
 
105
54
  ### Spacing none
106
55
 
107
- ```js
108
- import { Flex, FlexItem } from '@patternfly/react-core';
56
+ ```ts file="FlexSpacingNone.tsx"
109
57
 
110
- <Flex spaceItems={{ default: 'spaceItemsNone' }}>
111
- <FlexItem>Flex item</FlexItem>
112
- <FlexItem>Flex item</FlexItem>
113
- <FlexItem>Flex item</FlexItem>
114
- <FlexItem>Flex item</FlexItem>
115
- <FlexItem>Flex item</FlexItem>
116
- </Flex>;
117
58
  ```
118
59
 
119
60
  ### Flex gap spacing
120
61
 
121
62
  ### Row gap
122
63
 
123
- ```js
124
- import { Flex, FlexItem } from '@patternfly/react-core';
64
+ ```ts file="FlexRowGap.tsx"
125
65
 
126
- <Flex rowGap={{ default: 'rowGap2xl' }}>
127
- <FlexItem>Flex item</FlexItem>
128
- <FlexItem>Flex item</FlexItem>
129
- <FlexItem>Flex item</FlexItem>
130
- <FlexItem>Flex item</FlexItem>
131
- <FlexItem>Flex item</FlexItem>
132
- <FlexItem>Flex item</FlexItem>
133
- <FlexItem>Flex item</FlexItem>
134
- <FlexItem>Flex item</FlexItem>
135
- <FlexItem>Flex item</FlexItem>
136
- <FlexItem>Flex item</FlexItem>
137
- </Flex>;
138
66
  ```
139
67
 
140
68
  ### Column gap
141
69
 
142
- ```js
143
- import { Flex, FlexItem } from '@patternfly/react-core';
70
+ ```ts file="FlexColumnGap.tsx"
144
71
 
145
- <Flex columnGap={{ default: 'columnGap2xl' }}>
146
- <FlexItem>Flex item</FlexItem>
147
- <FlexItem>Flex item</FlexItem>
148
- <FlexItem>Flex item</FlexItem>
149
- <FlexItem>Flex item</FlexItem>
150
- <FlexItem>Flex item</FlexItem>
151
- <FlexItem>Flex item</FlexItem>
152
- <FlexItem>Flex item</FlexItem>
153
- <FlexItem>Flex item</FlexItem>
154
- <FlexItem>Flex item</FlexItem>
155
- <FlexItem>Flex item</FlexItem>
156
- </Flex>;
157
72
  ```
158
73
 
159
74
  ### Gap
160
75
 
161
- ```js
162
- import { Flex, FlexItem } from '@patternfly/react-core';
76
+ ```ts file="FlexGap.tsx"
163
77
 
164
- <Flex gap={{ default: 'gap2xl' }}>
165
- <FlexItem>Flex item</FlexItem>
166
- <FlexItem>Flex item</FlexItem>
167
- <FlexItem>Flex item</FlexItem>
168
- <FlexItem>Flex item</FlexItem>
169
- <FlexItem>Flex item</FlexItem>
170
- <FlexItem>Flex item</FlexItem>
171
- <FlexItem>Flex item</FlexItem>
172
- <FlexItem>Flex item</FlexItem>
173
- <FlexItem>Flex item</FlexItem>
174
- <FlexItem>Flex item</FlexItem>
175
- </Flex>;
176
78
  ```
177
79
 
178
80
  ### Flex layout modifiers
179
81
 
180
82
  ### Default layout
181
83
 
182
- ```js
183
- import { Flex, FlexItem } from '@patternfly/react-core';
84
+ ```ts file="FlexDefaultLayout.tsx"
184
85
 
185
- <Flex className="example-border">
186
- <FlexItem>Flex item</FlexItem>
187
- <FlexItem>Flex item</FlexItem>
188
- <FlexItem>Flex item</FlexItem>
189
- <FlexItem>Flex item</FlexItem>
190
- <FlexItem>Flex item</FlexItem>
191
- </Flex>;
192
86
  ```
193
87
 
194
88
  ### Inline
195
89
 
196
- ```js
197
- import { Flex, FlexItem } from '@patternfly/react-core';
90
+ ```ts file="FlexInline.tsx"
198
91
 
199
- <Flex className="example-border" display={{ default: 'inlineFlex' }}>
200
- <FlexItem>Flex item</FlexItem>
201
- <FlexItem>Flex item</FlexItem>
202
- <FlexItem>Flex item</FlexItem>
203
- <FlexItem>Flex item</FlexItem>
204
- <FlexItem>Flex item</FlexItem>
205
- </Flex>;
206
92
  ```
207
93
 
208
94
  ### Using canGrow
209
95
 
210
- ```js
211
- import { Flex, FlexItem } from '@patternfly/react-core';
96
+ ```ts file="FlexCanGrow.tsx"
212
97
 
213
- <Flex>
214
- <Flex grow={{ default: 'grow' }}>
215
- <FlexItem>Flex item</FlexItem>
216
- <FlexItem>Flex item</FlexItem>
217
- <FlexItem>Flex item</FlexItem>
218
- </Flex>
219
- <Flex>
220
- <FlexItem>Flex item</FlexItem>
221
- <FlexItem>Flex item</FlexItem>
222
- </Flex>
223
- <Flex>
224
- <FlexItem>Flex item</FlexItem>
225
- </Flex>
226
- </Flex>;
227
98
  ```
228
99
 
229
100
  ### Adjusting width
230
101
 
231
- ```js
232
- import { Flex, FlexItem } from '@patternfly/react-core';
102
+ ```ts file="FlexAdjustingWidth.tsx"
233
103
 
234
- <Flex>
235
- <Flex flex={{ default: 'flex_1' }}>
236
- <FlexItem>Flex item</FlexItem>
237
- </Flex>
238
- <Flex flex={{ default: 'flex_1' }}>
239
- <FlexItem>Flex item</FlexItem>
240
- <FlexItem>Flex item</FlexItem>
241
- </Flex>
242
- <Flex flex={{ default: 'flex_1' }}>
243
- <FlexItem>Flex item</FlexItem>
244
- <FlexItem>Flex item</FlexItem>
245
- <FlexItem>Flex item</FlexItem>
246
- </Flex>
247
- </Flex>;
248
104
  ```
249
105
 
250
106
  ### Specifying column widths
251
107
 
252
- ```js
253
- import { Flex, FlexItem } from '@patternfly/react-core';
108
+ ```ts file="FlexColumnWidths.tsx"
254
109
 
255
- <Flex>
256
- <Flex flex={{ default: 'flex_1' }}>
257
- <FlexItem>Flex item</FlexItem>
258
- </Flex>
259
- <Flex flex={{ default: 'flex_2' }}>
260
- <FlexItem>Flex item</FlexItem>
261
- <FlexItem>Flex item</FlexItem>
262
- </Flex>
263
- <Flex flex={{ default: 'flex_3' }}>
264
- <FlexItem>Flex item</FlexItem>
265
- <FlexItem>Flex item</FlexItem>
266
- <FlexItem>Flex item</FlexItem>
267
- </Flex>
268
- </Flex>;
269
110
  ```
270
111
 
271
112
  ## Column layout modifiers
272
113
 
273
114
  ### Column layout
274
115
 
275
- ```js
276
- import { Flex, FlexItem } from '@patternfly/react-core';
116
+ ```ts file="FlexColumnLayout.tsx"
277
117
 
278
- <Flex direction={{ default: 'column' }}>
279
- <FlexItem>Flex item</FlexItem>
280
- <FlexItem>Flex item</FlexItem>
281
- <FlexItem>Flex item</FlexItem>
282
- </Flex>;
283
118
  ```
284
119
 
285
120
  ### Stacking elements
286
121
 
287
- ```js
288
- import { Flex, FlexItem } from '@patternfly/react-core';
122
+ ```ts file="FlexStackingElements.tsx"
289
123
 
290
- <Flex direction={{ default: 'column' }}>
291
- <Flex>
292
- <FlexItem>Flex item</FlexItem>
293
- <FlexItem>Flex item</FlexItem>
294
- <FlexItem>Flex item</FlexItem>
295
- </Flex>
296
- <Flex>
297
- <FlexItem>Flex item</FlexItem>
298
- <FlexItem>Flex item</FlexItem>
299
- </Flex>
300
- <Flex>
301
- <FlexItem>Flex item</FlexItem>
302
- </Flex>
303
- </Flex>;
304
124
  ```
305
125
 
306
126
  ### Nesting elements in columns
307
127
 
308
- ```js
309
- import { Flex, FlexItem } from '@patternfly/react-core';
128
+ ```ts file="FlexNestingInColumns.tsx"
310
129
 
311
- <Flex>
312
- <Flex direction={{ default: 'column' }}>
313
- <FlexItem>Flex item</FlexItem>
314
- <FlexItem>Flex item</FlexItem>
315
- <FlexItem>Flex item</FlexItem>
316
- </Flex>
317
- <Flex direction={{ default: 'column' }}>
318
- <FlexItem>Flex item</FlexItem>
319
- <FlexItem>Flex item</FlexItem>
320
- </Flex>
321
- </Flex>;
322
130
  ```
323
131
 
324
132
  ## Responsive layout modifiers
package/src/layouts/Flex/examples/FlexAdjustingWidth.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexAdjustingWidth: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex flex={{ default: 'flex_1' }}>
6
+ <FlexItem>Flex item</FlexItem>
7
+ </Flex>
8
+ <Flex flex={{ default: 'flex_1' }}>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ </Flex>
12
+ <Flex flex={{ default: 'flex_1' }}>
13
+ <FlexItem>Flex item</FlexItem>
14
+ <FlexItem>Flex item</FlexItem>
15
+ <FlexItem>Flex item</FlexItem>
16
+ </Flex>
17
+ </Flex>
18
+ );
package/src/layouts/Flex/examples/FlexBasic.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexBasic: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ </Flex>
11
+ );
package/src/layouts/Flex/examples/FlexCanGrow.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexCanGrow: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex grow={{ default: 'grow' }}>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ </Flex>
10
+ <Flex>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ </Flex>
14
+ <Flex>
15
+ <FlexItem>Flex item</FlexItem>
16
+ </Flex>
17
+ </Flex>
18
+ );
package/src/layouts/Flex/examples/FlexColumnGap.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexColumnGap: React.FunctionComponent = () => (
4
+ <Flex columnGap={{ default: 'columnGap2xl' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ <FlexItem>Flex item</FlexItem>
14
+ <FlexItem>Flex item</FlexItem>
15
+ </Flex>
16
+ );
package/src/layouts/Flex/examples/FlexColumnLayout.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexColumnLayout: React.FunctionComponent = () => (
4
+ <Flex direction={{ default: 'column' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ </Flex>
9
+ );
package/src/layouts/Flex/examples/FlexColumnWidths.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexColumnWidths: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex flex={{ default: 'flex_1' }}>
6
+ <FlexItem>Flex item</FlexItem>
7
+ </Flex>
8
+ <Flex flex={{ default: 'flex_2' }}>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ </Flex>
12
+ <Flex flex={{ default: 'flex_3' }}>
13
+ <FlexItem>Flex item</FlexItem>
14
+ <FlexItem>Flex item</FlexItem>
15
+ <FlexItem>Flex item</FlexItem>
16
+ </Flex>
17
+ </Flex>
18
+ );
package/src/layouts/Flex/examples/FlexDefaultLayout.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexDefaultLayout: React.FunctionComponent = () => (
4
+ <Flex className="example-border">
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ </Flex>
11
+ );
package/src/layouts/Flex/examples/FlexGap.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexGap: React.FunctionComponent = () => (
4
+ <Flex gap={{ default: 'gap2xl' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ <FlexItem>Flex item</FlexItem>
14
+ <FlexItem>Flex item</FlexItem>
15
+ </Flex>
16
+ );
package/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexIndividuallySpaced: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
6
+ <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
7
+ <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
8
+ <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
9
+ <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
10
+ <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
11
+ <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
12
+ <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
13
+ </Flex>
14
+ );
package/src/layouts/Flex/examples/FlexInline.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexInline: React.FunctionComponent = () => (
4
+ <Flex className="example-border" display={{ default: 'inlineFlex' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ </Flex>
11
+ );
package/src/layouts/Flex/examples/FlexNestedItems.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexNestedItems: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ </Flex>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ <Flex>
12
+ <FlexItem>Flex item</FlexItem>
13
+ </Flex>
14
+ </Flex>
15
+ );
package/src/layouts/Flex/examples/FlexNesting.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexNesting: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ </Flex>
9
+ <Flex>
10
+ <FlexItem>Flex item</FlexItem>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ </Flex>
14
+ </Flex>
15
+ );
package/src/layouts/Flex/examples/FlexNestingInColumns.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexNestingInColumns: React.FunctionComponent = () => (
4
+ <Flex>
5
+ <Flex direction={{ default: 'column' }}>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ </Flex>
10
+ <Flex direction={{ default: 'column' }}>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ </Flex>
14
+ </Flex>
15
+ );
package/src/layouts/Flex/examples/FlexRowGap.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexRowGap: React.FunctionComponent = () => (
4
+ <Flex rowGap={{ default: 'rowGap2xl' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ <FlexItem>Flex item</FlexItem>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ <FlexItem>Flex item</FlexItem>
14
+ <FlexItem>Flex item</FlexItem>
15
+ </Flex>
16
+ );
package/src/layouts/Flex/examples/FlexSpacingNone.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexSpacingNone: React.FunctionComponent = () => (
4
+ <Flex spaceItems={{ default: 'spaceItemsNone' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ </Flex>
11
+ );
package/src/layouts/Flex/examples/FlexSpacingXl.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexSpacingXl: React.FunctionComponent = () => (
4
+ <Flex spaceItems={{ default: 'spaceItemsXl' }}>
5
+ <FlexItem>Flex item</FlexItem>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ <FlexItem>Flex item</FlexItem>
10
+ </Flex>
11
+ );
package/src/layouts/Flex/examples/FlexStackingElements.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import { Flex, FlexItem } from '@patternfly/react-core';
2
+
3
+ export const FlexStackingElements: React.FunctionComponent = () => (
4
+ <Flex direction={{ default: 'column' }}>
5
+ <Flex>
6
+ <FlexItem>Flex item</FlexItem>
7
+ <FlexItem>Flex item</FlexItem>
8
+ <FlexItem>Flex item</FlexItem>
9
+ </Flex>
10
+ <Flex>
11
+ <FlexItem>Flex item</FlexItem>
12
+ <FlexItem>Flex item</FlexItem>
13
+ </Flex>
14
+ <Flex>
15
+ <FlexItem>Flex item</FlexItem>
16
+ </Flex>
17
+ </Flex>
18
+ );
package/src/layouts/Level/examples/Level.md CHANGED
@@ -11,24 +11,12 @@ import './level.css';
11
11
 
12
12
  ### Basic
13
13
 
14
- ```js
15
- import { Level, LevelItem } from '@patternfly/react-core';
16
-
17
- <Level>
18
- <LevelItem>Level Item</LevelItem>
19
- <LevelItem>Level Item</LevelItem>
20
- <LevelItem>Level Item</LevelItem>
21
- </Level>;
14
+ ```ts file="LevelBasic.tsx"
15
+
22
16
  ```
23
17
 
24
18
  ### With gutters
25
19
 
26
- ```js
27
- import { Level, LevelItem } from '@patternfly/react-core';
20
+ ```ts file="LevelWithGutters.tsx"
28
21
 
29
- <Level hasGutter>
30
- <LevelItem>Level Item</LevelItem>
31
- <LevelItem>Level Item</LevelItem>
32
- <LevelItem>Level Item</LevelItem>
33
- </Level>;
34
22
  ```
package/src/layouts/Level/examples/LevelBasic.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import { Level, LevelItem } from '@patternfly/react-core';
2
+
3
+ export const LevelBasic: React.FunctionComponent = () => (
4
+ <Level>
5
+ <LevelItem>Level Item</LevelItem>
6
+ <LevelItem>Level Item</LevelItem>
7
+ <LevelItem>Level Item</LevelItem>
8
+ </Level>
9
+ );
package/src/layouts/Level/examples/LevelWithGutters.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import { Level, LevelItem } from '@patternfly/react-core';
2
+
3
+ export const LevelWithGutters: React.FunctionComponent = () => (
4
+ <Level hasGutter>
5
+ <LevelItem>Level Item</LevelItem>
6
+ <LevelItem>Level Item</LevelItem>
7
+ <LevelItem>Level Item</LevelItem>
8
+ </Level>
9
+ );