@patternfly/react-core 6.0.0-prerelease.16 → 6.0.0-prerelease.18

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 (240) 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 -0
  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/FocusTrap/FocusTrap/package.json +1 -1
  91. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  92. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  93. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  94. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  95. package/dist/dynamic/helpers/constants/package.json +1 -1
  96. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  97. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  98. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  99. package/dist/dynamic/helpers/package.json +1 -1
  100. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  101. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  102. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  103. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  104. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  105. package/dist/dynamic/helpers/util/package.json +1 -1
  106. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  107. package/dist/dynamic/layouts/Flex/package.json +1 -1
  108. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  109. package/dist/dynamic/layouts/Grid/package.json +1 -1
  110. package/dist/dynamic/layouts/Level/package.json +1 -1
  111. package/dist/dynamic/layouts/Split/package.json +1 -1
  112. package/dist/dynamic/layouts/Stack/package.json +1 -1
  113. package/dist/dynamic/styles/package.json +1 -1
  114. package/dist/dynamic-modules.json +0 -2
  115. package/dist/esm/components/Card/CardHeader.d.ts +2 -0
  116. package/dist/esm/components/Card/CardHeader.d.ts.map +1 -1
  117. package/dist/esm/components/Card/CardHeader.js +2 -2
  118. package/dist/esm/components/Card/CardHeader.js.map +1 -1
  119. package/dist/esm/components/DataList/DataListAction.d.ts +0 -2
  120. package/dist/esm/components/DataList/DataListAction.d.ts.map +1 -1
  121. package/dist/esm/components/DataList/DataListAction.js +2 -2
  122. package/dist/esm/components/DataList/DataListAction.js.map +1 -1
  123. package/dist/esm/components/Dropdown/Dropdown.js +1 -1
  124. package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
  125. package/dist/esm/components/Menu/MenuContainer.js +1 -1
  126. package/dist/esm/components/Menu/MenuContainer.js.map +1 -1
  127. package/dist/esm/components/Modal/Modal.d.ts +2 -0
  128. package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
  129. package/dist/esm/components/Modal/Modal.js +1 -1
  130. package/dist/esm/components/Modal/Modal.js.map +1 -1
  131. package/dist/esm/components/Modal/ModalContent.d.ts +2 -0
  132. package/dist/esm/components/Modal/ModalContent.d.ts.map +1 -1
  133. package/dist/esm/components/Modal/ModalContent.js +2 -2
  134. package/dist/esm/components/Modal/ModalContent.js.map +1 -1
  135. package/dist/esm/components/Select/Select.js +1 -1
  136. package/dist/esm/components/Select/Select.js.map +1 -1
  137. package/dist/esm/components/index.d.ts +0 -1
  138. package/dist/esm/components/index.d.ts.map +1 -1
  139. package/dist/esm/components/index.js +0 -1
  140. package/dist/esm/components/index.js.map +1 -1
  141. package/dist/esm/deprecated/components/Tile/Tile.d.ts.map +1 -0
  142. package/dist/esm/deprecated/components/Tile/Tile.js.map +1 -0
  143. package/dist/esm/deprecated/components/Tile/index.d.ts.map +1 -0
  144. package/dist/esm/deprecated/components/Tile/index.js.map +1 -0
  145. package/dist/esm/deprecated/components/index.d.ts +1 -0
  146. package/dist/esm/deprecated/components/index.d.ts.map +1 -1
  147. package/dist/esm/deprecated/components/index.js +1 -0
  148. package/dist/esm/deprecated/components/index.js.map +1 -1
  149. package/dist/js/components/Card/CardHeader.d.ts +2 -0
  150. package/dist/js/components/Card/CardHeader.d.ts.map +1 -1
  151. package/dist/js/components/Card/CardHeader.js +2 -2
  152. package/dist/js/components/Card/CardHeader.js.map +1 -1
  153. package/dist/js/components/DataList/DataListAction.d.ts +0 -2
  154. package/dist/js/components/DataList/DataListAction.d.ts.map +1 -1
  155. package/dist/js/components/DataList/DataListAction.js +2 -2
  156. package/dist/js/components/DataList/DataListAction.js.map +1 -1
  157. package/dist/js/components/Dropdown/Dropdown.js +1 -1
  158. package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
  159. package/dist/js/components/Menu/MenuContainer.js +1 -1
  160. package/dist/js/components/Menu/MenuContainer.js.map +1 -1
  161. package/dist/js/components/Modal/Modal.d.ts +2 -0
  162. package/dist/js/components/Modal/Modal.d.ts.map +1 -1
  163. package/dist/js/components/Modal/Modal.js +1 -1
  164. package/dist/js/components/Modal/Modal.js.map +1 -1
  165. package/dist/js/components/Modal/ModalContent.d.ts +2 -0
  166. package/dist/js/components/Modal/ModalContent.d.ts.map +1 -1
  167. package/dist/js/components/Modal/ModalContent.js +2 -2
  168. package/dist/js/components/Modal/ModalContent.js.map +1 -1
  169. package/dist/js/components/Select/Select.js +1 -1
  170. package/dist/js/components/Select/Select.js.map +1 -1
  171. package/dist/js/components/index.d.ts +0 -1
  172. package/dist/js/components/index.d.ts.map +1 -1
  173. package/dist/js/components/index.js +0 -1
  174. package/dist/js/components/index.js.map +1 -1
  175. package/dist/js/deprecated/components/Tile/Tile.d.ts.map +1 -0
  176. package/dist/js/deprecated/components/Tile/Tile.js.map +1 -0
  177. package/dist/js/deprecated/components/Tile/index.d.ts.map +1 -0
  178. package/dist/js/deprecated/components/Tile/index.js.map +1 -0
  179. package/dist/js/deprecated/components/index.d.ts +1 -0
  180. package/dist/js/deprecated/components/index.d.ts.map +1 -1
  181. package/dist/js/deprecated/components/index.js +1 -0
  182. package/dist/js/deprecated/components/index.js.map +1 -1
  183. package/dist/styles/base-no-reset.css +14 -8
  184. package/dist/styles/base.css +14 -8
  185. package/dist/umd/assets/{output-KdSpiNg2.css → output-CWzd0B68.css} +9292 -9508
  186. package/dist/umd/react-core.min.js +1 -1
  187. package/helpers/package.json +1 -1
  188. package/layouts/package.json +1 -1
  189. package/next/package.json +1 -1
  190. package/package.json +6 -6
  191. package/src/components/Card/CardHeader.tsx +9 -2
  192. package/src/components/Card/examples/Card.md +23 -0
  193. package/src/components/Card/examples/CardTile.tsx +73 -0
  194. package/src/components/Card/examples/CardTileMulti.tsx +84 -0
  195. package/src/components/DataList/DataListAction.tsx +1 -5
  196. package/src/components/DataList/__tests__/DataListAction.test.tsx +21 -21
  197. package/src/components/DataList/examples/DataListActions.tsx +0 -1
  198. package/src/components/DataList/examples/DataListCheckboxes.tsx +0 -3
  199. package/src/components/DataList/examples/DataListClickableRows.tsx +0 -2
  200. package/src/components/DataList/examples/DataListExpandable.tsx +3 -18
  201. package/src/components/DataList/examples/DataListMixedExpandable.tsx +3 -18
  202. package/src/components/DataList/examples/DataListWidthModifiers.tsx +0 -2
  203. package/src/components/Dropdown/Dropdown.tsx +1 -1
  204. package/src/components/Menu/MenuContainer.tsx +1 -1
  205. package/src/components/Modal/Modal.tsx +3 -0
  206. package/src/components/Modal/ModalContent.tsx +4 -1
  207. package/src/components/Select/Select.tsx +1 -1
  208. package/src/components/index.ts +0 -1
  209. package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +3 -18
  210. package/src/{demos/TileDemo.md → deprecated/components/Tile/examples/Tile.md} +67 -2
  211. package/src/{components → deprecated/components}/Tile/examples/TileBasic.tsx +1 -1
  212. package/src/{components → deprecated/components}/Tile/examples/TileStacked.tsx +1 -1
  213. package/src/{components → deprecated/components}/Tile/examples/TileStackedWithLargeIcons.tsx +1 -1
  214. package/src/{components → deprecated/components}/Tile/examples/TileWithExtraContent.tsx +2 -1
  215. package/src/{components → deprecated/components}/Tile/examples/TileWithIcon.tsx +1 -1
  216. package/src/{components → deprecated/components}/Tile/examples/TileWithSubtext.tsx +1 -1
  217. package/src/deprecated/components/index.ts +1 -0
  218. package/dist/dynamic/components/Tile/package.json +0 -1
  219. package/dist/esm/components/Tile/Tile.d.ts.map +0 -1
  220. package/dist/esm/components/Tile/Tile.js.map +0 -1
  221. package/dist/esm/components/Tile/index.d.ts.map +0 -1
  222. package/dist/esm/components/Tile/index.js.map +0 -1
  223. package/dist/js/components/Tile/Tile.d.ts.map +0 -1
  224. package/dist/js/components/Tile/Tile.js.map +0 -1
  225. package/dist/js/components/Tile/index.d.ts.map +0 -1
  226. package/dist/js/components/Tile/index.js.map +0 -1
  227. package/src/components/Tile/examples/Tile.md +0 -48
  228. /package/dist/esm/{components → deprecated/components}/Tile/Tile.d.ts +0 -0
  229. /package/dist/esm/{components → deprecated/components}/Tile/Tile.js +0 -0
  230. /package/dist/esm/{components → deprecated/components}/Tile/index.d.ts +0 -0
  231. /package/dist/esm/{components → deprecated/components}/Tile/index.js +0 -0
  232. /package/dist/js/{components → deprecated/components}/Tile/Tile.d.ts +0 -0
  233. /package/dist/js/{components → deprecated/components}/Tile/Tile.js +0 -0
  234. /package/dist/js/{components → deprecated/components}/Tile/index.d.ts +0 -0
  235. /package/dist/js/{components → deprecated/components}/Tile/index.js +0 -0
  236. /package/src/{components → deprecated/components}/Tile/Tile.tsx +0 -0
  237. /package/src/{components → deprecated/components}/Tile/__tests__/Tile.test.tsx +0 -0
  238. /package/src/{components → deprecated/components}/Tile/__tests__/__snapshots__/Tile.test.tsx.snap +0 -0
  239. /package/src/{components → deprecated/components}/Tile/examples/Tile.css +0 -0
  240. /package/src/{components → deprecated/components}/Tile/index.ts +0 -0
@@ -169,12 +169,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
169
169
  </DataListCell>
170
170
  ]}
171
171
  />
172
- <DataListAction
173
- aria-labelledby="ex-item1 ex-action1"
174
- id="ex-action1"
175
- aria-label="Actions"
176
- isPlainButtonAction
177
- >
172
+ <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
178
173
  <Dropdown
179
174
  isOpen={isOpen1}
180
175
  onSelect={onSelect1}
@@ -251,12 +246,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
251
246
  </DataListCell>
252
247
  ]}
253
248
  />
254
- <DataListAction
255
- aria-labelledby="ex-item2 ex-action2"
256
- id="ex-action2"
257
- aria-label="Actions"
258
- isPlainButtonAction
259
- >
249
+ <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
260
250
  <Dropdown
261
251
  isOpen={isOpen2}
262
252
  onSelect={onSelect2}
@@ -333,12 +323,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
333
323
  </DataListCell>
334
324
  ]}
335
325
  />
336
- <DataListAction
337
- aria-labelledby="ex-item3 ex-action3"
338
- id="ex-action3"
339
- aria-label="Actions"
340
- isPlainButtonAction
341
- >
326
+ <DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
342
327
  <Dropdown
343
328
  isOpen={isOpen3}
344
329
  onSelect={onSelect3}
@@ -1,15 +1,80 @@
1
1
  ---
2
2
  id: Tile
3
3
  section: components
4
+ cssPrefix: pf-v6-c-tile
5
+ propComponents: ['Tile']
6
+ deprecated: true
4
7
  ---
5
8
 
9
+ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
10
+ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
11
+ import './Tile.css';
12
+
13
+ **Note:** Tile has been deprecated. Use the [card](/components/card#cards-as-tiles) component instead.
14
+
15
+ ## Examples
16
+
17
+ Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
18
+
19
+ ### Basic tile
20
+
21
+ Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.
22
+
23
+ ```ts file="./TileBasic.tsx"
24
+
25
+ ```
26
+
27
+ ### With subtext
28
+
29
+ Tile subtext can provide users with additional context. To add subtext, pass a short description to the `<Tile>` component.
30
+
31
+ ```ts file="./TileWithSubtext.tsx"
32
+
33
+ ```
34
+
35
+ ### With icon
36
+
37
+ Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property.
38
+
39
+ ```ts file="./TileWithIcon.tsx"
40
+
41
+ ```
42
+
43
+ ### With stacked icon
44
+
45
+ You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property.
46
+
47
+ ```ts file="./TileStacked.tsx"
48
+
49
+ ```
50
+
51
+ ### With large icons
52
+
53
+ You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property.
54
+
55
+ Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied.
56
+
57
+ ```ts file="./TileStackedWithLargeIcons.tsx"
58
+
59
+ ```
60
+
61
+ ### With long subtext
62
+
63
+ To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into `<Tile>`.
64
+
65
+ You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks.
66
+
67
+ ```ts file="./TileWithExtraContent.tsx"
68
+
69
+ ```
70
+
6
71
  ## Demos
7
72
 
8
73
  ### Tiles with single selection
9
74
 
10
75
  ```ts
11
76
  import React from 'react';
12
- import { Tile } from '@patternfly/react-core';
77
+ import { Tile } from '@patternfly/react-core/deprecated';
13
78
 
14
79
  const TileSingleSelect: React.FunctionComponent = () => {
15
80
  const [selectedId, setSelectedId] = React.useState<string>('');
@@ -40,7 +105,7 @@ const TileSingleSelect: React.FunctionComponent = () => {
40
105
 
41
106
  ```ts
42
107
  import React from 'react';
43
- import { Tile } from '@patternfly/react-core';
108
+ import { Tile } from '@patternfly/react-core/deprecated';
44
109
 
45
110
  const TileMultiSelect: React.FunctionComponent = () => {
46
111
  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Tile } from '@patternfly/react-core';
2
+ import { Tile } from '@patternfly/react-core/deprecated';
3
3
 
4
4
  export const TileBasic: React.FunctionComponent = () => (
5
5
  <div role="listbox" aria-label="Basic tiles">
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Tile } from '@patternfly/react-core';
2
+ import { Tile } from '@patternfly/react-core/deprecated';
3
3
  import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4
4
 
5
5
  export const TileStacked: React.FunctionComponent = () => (
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Tile } from '@patternfly/react-core';
2
+ import { Tile } from '@patternfly/react-core/deprecated';
3
3
  import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4
4
 
5
5
  export const TileStackedWithLargeIcons: React.FunctionComponent = () => (
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { Tile, Flex } from '@patternfly/react-core';
2
+ import { Flex } from '@patternfly/react-core';
3
+ import { Tile } from '@patternfly/react-core/deprecated';
3
4
  import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
4
5
 
5
6
  export const TileWithExtraContent: React.FunctionComponent = () => (
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Tile } from '@patternfly/react-core';
2
+ import { Tile } from '@patternfly/react-core/deprecated';
3
3
  import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
4
4
 
5
5
  export const TileWithIcon: React.FunctionComponent = () => (
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Tile } from '@patternfly/react-core';
2
+ import { Tile } from '@patternfly/react-core/deprecated';
3
3
 
4
4
  export const TileWithSubtext: React.FunctionComponent = () => (
5
5
  <div role="listbox" aria-label="Tiles with subtext">
@@ -2,4 +2,5 @@ export * from './Chip';
2
2
  export * from './DragDrop';
3
3
  export * from './Modal';
4
4
  export * from './DualListSelector';
5
+ export * from './Tile';
5
6
  export * from './Wizard';
@@ -1 +0,0 @@
1
- {"name":"@patternfly/react-core-tile-dynamic","main":"../../../js/components/Tile/index.js","module":"../../../esm/components/Tile/index.js","typings":"../../../esm/components/Tile/index.d.ts","version":"6.0.0-prerelease.15","private":true}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CA+BnD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,8DAA0D;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAqB/C,MAAM,CAAC,MAAM,IAAI,GAAuC,CAAC,EAU7C,EAAE,EAAE;QAVyC,EACvD,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,EACd,SAAS,OAEC,EADP,KAAK,cAT+C,qGAUxD,CADS;IACO,OAAA,CACf,2CACE,IAAI,EAAC,QAAQ,mBACE,UAAU,IACrB,CAAC,UAAU,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC,IACnD,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,IAAI,EACX,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,cAAc,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EAC5C,SAAS,CACV,EACD,QAAQ,EAAE,CAAC,IACP,KAAK;QAET,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC;YAC1E,IAAI,IAAI,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAG,IAAI,CAAO;YAC3D,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,IAAG,KAAK,CAAO,CAChD;QACL,QAAQ,IAAI,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAG,QAAQ,CAAO,CAC/D,CACP,CAAA;CAAA,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CA+BnD,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAqBxC,MAAM,IAAI,GAAuC,CAAC,EAU7C,EAAE,EAAE;QAVyC,EACvD,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,UAAU,EACV,UAAU,EACV,cAAc,EACd,SAAS,OAEC,EADP,KAAK,sBAT+C,qGAUxD,CADS;IACO,OAAA,CACf,2CACE,IAAI,EAAC,QAAQ,mBACE,UAAU,IACrB,CAAC,UAAU,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC,IACnD,SAAS,EAAE,IAAA,kBAAG,EACZ,cAAM,CAAC,IAAI,EACX,UAAU,IAAI,cAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,UAAU,IAAI,cAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,cAAc,IAAI,cAAM,CAAC,SAAS,CAAC,SAAS,EAC5C,SAAS,CACV,EACD,QAAQ,EAAE,CAAC,IACP,KAAK;QAET,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,UAAU,EAAE,SAAS,IAAI,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC;YAC1E,IAAI,IAAI,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,QAAQ,CAAC,IAAG,IAAI,CAAO;YAC3D,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,SAAS,CAAC,IAAG,KAAK,CAAO,CAChD;QACL,QAAQ,IAAI,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,QAAQ,CAAC,IAAG,QAAQ,CAAO,CAC/D,CACP,CAAA;CAAA,CAAC;AA/BW,QAAA,IAAI,QA+Bf;AACF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB"}
@@ -1,48 +0,0 @@
1
- ---
2
- id: Tile
3
- section: components
4
- cssPrefix: pf-v6-c-tile
5
- propComponents: ['Tile']
6
- ---
7
-
8
- import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
9
- import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
10
- import './Tile.css';
11
-
12
- ## Examples
13
-
14
- Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
15
-
16
- ### Basic tile
17
- Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.
18
- ```ts file="./TileBasic.tsx"
19
- ```
20
-
21
- ### With subtext
22
- Tile subtext can provide users with additional context. To add subtext, pass a short description to the `<Tile>` component.
23
- ```ts file="./TileWithSubtext.tsx"
24
- ```
25
-
26
- ### With icon
27
- Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property.
28
- ```ts file="./TileWithIcon.tsx"
29
- ```
30
-
31
- ### With stacked icon
32
- You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property.
33
- ```ts file="./TileStacked.tsx"
34
- ```
35
-
36
- ### With large icons
37
- You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property.
38
-
39
- Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied.
40
- ```ts file="./TileStackedWithLargeIcons.tsx"
41
- ```
42
-
43
- ### With long subtext
44
- To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into `<Tile>`.
45
-
46
- You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks.
47
- ```ts file="./TileWithExtraContent.tsx"
48
- ```