@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.
- package/CHANGELOG.md +16 -0
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/AboutModal/package.json +1 -1
- package/dist/dynamic/components/Accordion/package.json +1 -1
- package/dist/dynamic/components/ActionList/package.json +1 -1
- package/dist/dynamic/components/Alert/package.json +1 -1
- package/dist/dynamic/components/Avatar/package.json +1 -1
- package/dist/dynamic/components/BackToTop/package.json +1 -1
- package/dist/dynamic/components/Backdrop/package.json +1 -1
- package/dist/dynamic/components/BackgroundImage/package.json +1 -1
- package/dist/dynamic/components/Badge/package.json +1 -1
- package/dist/dynamic/components/Banner/package.json +1 -1
- package/dist/dynamic/components/Brand/package.json +1 -1
- package/dist/dynamic/components/Breadcrumb/package.json +1 -1
- package/dist/dynamic/components/Button/package.json +1 -1
- package/dist/dynamic/components/CalendarMonth/package.json +1 -1
- package/dist/dynamic/components/Card/package.json +1 -1
- package/dist/dynamic/components/Checkbox/package.json +1 -1
- package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
- package/dist/dynamic/components/CodeBlock/package.json +1 -1
- package/dist/dynamic/components/Content/package.json +1 -1
- package/dist/dynamic/components/DataList/package.json +1 -1
- package/dist/dynamic/components/DatePicker/package.json +1 -1
- package/dist/dynamic/components/DescriptionList/package.json +1 -1
- package/dist/dynamic/components/Divider/package.json +1 -1
- package/dist/dynamic/components/Drawer/package.json +1 -1
- package/dist/dynamic/components/Dropdown/package.json +1 -1
- package/dist/dynamic/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/components/EmptyState/package.json +1 -1
- package/dist/dynamic/components/ExpandableSection/package.json +1 -1
- package/dist/dynamic/components/FileUpload/package.json +1 -1
- package/dist/dynamic/components/Form/package.json +1 -1
- package/dist/dynamic/components/FormSelect/package.json +1 -1
- package/dist/dynamic/components/HelperText/package.json +1 -1
- package/dist/dynamic/components/Hint/package.json +1 -1
- package/dist/dynamic/components/Icon/package.json +1 -1
- package/dist/dynamic/components/InputGroup/package.json +1 -1
- package/dist/dynamic/components/JumpLinks/package.json +1 -1
- package/dist/dynamic/components/Label/package.json +1 -1
- package/dist/dynamic/components/List/package.json +1 -1
- package/dist/dynamic/components/LoginPage/package.json +1 -1
- package/dist/dynamic/components/Masthead/package.json +1 -1
- package/dist/dynamic/components/Menu/package.json +1 -1
- package/dist/dynamic/components/MenuToggle/package.json +1 -1
- package/dist/dynamic/components/Modal/package.json +1 -1
- package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
- package/dist/dynamic/components/Nav/package.json +1 -1
- package/dist/dynamic/components/NotificationBadge/package.json +1 -1
- package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
- package/dist/dynamic/components/NumberInput/package.json +1 -1
- package/dist/dynamic/components/OverflowMenu/package.json +1 -1
- package/dist/dynamic/components/Page/package.json +1 -1
- package/dist/dynamic/components/Pagination/package.json +1 -1
- package/dist/dynamic/components/Panel/package.json +1 -1
- package/dist/dynamic/components/Popover/package.json +1 -1
- package/dist/dynamic/components/Progress/package.json +1 -1
- package/dist/dynamic/components/ProgressStepper/package.json +1 -1
- package/dist/dynamic/components/Radio/package.json +1 -1
- package/dist/dynamic/components/SearchInput/package.json +1 -1
- package/dist/dynamic/components/Select/package.json +1 -1
- package/dist/dynamic/components/Sidebar/package.json +1 -1
- package/dist/dynamic/components/SimpleList/package.json +1 -1
- package/dist/dynamic/components/Skeleton/package.json +1 -1
- package/dist/dynamic/components/SkipToContent/package.json +1 -1
- package/dist/dynamic/components/Slider/package.json +1 -1
- package/dist/dynamic/components/Spinner/package.json +1 -1
- package/dist/dynamic/components/Switch/package.json +1 -1
- package/dist/dynamic/components/Tabs/package.json +1 -1
- package/dist/dynamic/components/TextArea/package.json +1 -1
- package/dist/dynamic/components/TextInput/package.json +1 -1
- package/dist/dynamic/components/TextInputGroup/package.json +1 -1
- package/dist/dynamic/components/TimePicker/package.json +1 -1
- package/dist/dynamic/components/Timestamp/package.json +1 -1
- package/dist/dynamic/components/Title/package.json +1 -1
- package/dist/dynamic/components/ToggleGroup/package.json +1 -1
- package/dist/dynamic/components/Toolbar/package.json +1 -1
- package/dist/dynamic/components/Tooltip/package.json +1 -1
- package/dist/dynamic/components/TreeView/package.json +1 -1
- package/dist/dynamic/components/Truncate/package.json +1 -1
- package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
- package/dist/dynamic/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
- package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
- package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
- package/dist/dynamic/deprecated/components/Tile/package.json +1 -0
- package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
- package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
- package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
- package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
- package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
- package/dist/dynamic/helpers/constants/package.json +1 -1
- package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
- package/dist/dynamic/helpers/fileUtils/package.json +1 -1
- package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
- package/dist/dynamic/helpers/package.json +1 -1
- package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
- package/dist/dynamic/helpers/typeUtils/package.json +1 -1
- package/dist/dynamic/helpers/useInterval/package.json +1 -1
- package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
- package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
- package/dist/dynamic/helpers/util/package.json +1 -1
- package/dist/dynamic/layouts/Bullseye/package.json +1 -1
- package/dist/dynamic/layouts/Flex/package.json +1 -1
- package/dist/dynamic/layouts/Gallery/package.json +1 -1
- package/dist/dynamic/layouts/Grid/package.json +1 -1
- package/dist/dynamic/layouts/Level/package.json +1 -1
- package/dist/dynamic/layouts/Split/package.json +1 -1
- package/dist/dynamic/layouts/Stack/package.json +1 -1
- package/dist/dynamic/styles/package.json +1 -1
- package/dist/dynamic-modules.json +0 -2
- package/dist/esm/components/Card/CardHeader.d.ts +2 -0
- package/dist/esm/components/Card/CardHeader.d.ts.map +1 -1
- package/dist/esm/components/Card/CardHeader.js +2 -2
- package/dist/esm/components/Card/CardHeader.js.map +1 -1
- package/dist/esm/components/DataList/DataListAction.d.ts +0 -2
- package/dist/esm/components/DataList/DataListAction.d.ts.map +1 -1
- package/dist/esm/components/DataList/DataListAction.js +2 -2
- package/dist/esm/components/DataList/DataListAction.js.map +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js +1 -1
- package/dist/esm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/Menu/MenuContainer.js +1 -1
- package/dist/esm/components/Menu/MenuContainer.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +2 -0
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js +1 -1
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Modal/ModalContent.d.ts +2 -0
- package/dist/esm/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/esm/components/Modal/ModalContent.js +2 -2
- package/dist/esm/components/Modal/ModalContent.js.map +1 -1
- package/dist/esm/components/Select/Select.js +1 -1
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/index.d.ts +0 -1
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +0 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/deprecated/components/Tile/Tile.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Tile/Tile.js.map +1 -0
- package/dist/esm/deprecated/components/Tile/index.d.ts.map +1 -0
- package/dist/esm/deprecated/components/Tile/index.js.map +1 -0
- package/dist/esm/deprecated/components/index.d.ts +1 -0
- package/dist/esm/deprecated/components/index.d.ts.map +1 -1
- package/dist/esm/deprecated/components/index.js +1 -0
- package/dist/esm/deprecated/components/index.js.map +1 -1
- package/dist/js/components/Card/CardHeader.d.ts +2 -0
- package/dist/js/components/Card/CardHeader.d.ts.map +1 -1
- package/dist/js/components/Card/CardHeader.js +2 -2
- package/dist/js/components/Card/CardHeader.js.map +1 -1
- package/dist/js/components/DataList/DataListAction.d.ts +0 -2
- package/dist/js/components/DataList/DataListAction.d.ts.map +1 -1
- package/dist/js/components/DataList/DataListAction.js +2 -2
- package/dist/js/components/DataList/DataListAction.js.map +1 -1
- package/dist/js/components/Dropdown/Dropdown.js +1 -1
- package/dist/js/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/js/components/Menu/MenuContainer.js +1 -1
- package/dist/js/components/Menu/MenuContainer.js.map +1 -1
- package/dist/js/components/Modal/Modal.d.ts +2 -0
- package/dist/js/components/Modal/Modal.d.ts.map +1 -1
- package/dist/js/components/Modal/Modal.js +1 -1
- package/dist/js/components/Modal/Modal.js.map +1 -1
- package/dist/js/components/Modal/ModalContent.d.ts +2 -0
- package/dist/js/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/js/components/Modal/ModalContent.js +2 -2
- package/dist/js/components/Modal/ModalContent.js.map +1 -1
- package/dist/js/components/Select/Select.js +1 -1
- package/dist/js/components/Select/Select.js.map +1 -1
- package/dist/js/components/index.d.ts +0 -1
- package/dist/js/components/index.d.ts.map +1 -1
- package/dist/js/components/index.js +0 -1
- package/dist/js/components/index.js.map +1 -1
- package/dist/js/deprecated/components/Tile/Tile.d.ts.map +1 -0
- package/dist/js/deprecated/components/Tile/Tile.js.map +1 -0
- package/dist/js/deprecated/components/Tile/index.d.ts.map +1 -0
- package/dist/js/deprecated/components/Tile/index.js.map +1 -0
- package/dist/js/deprecated/components/index.d.ts +1 -0
- package/dist/js/deprecated/components/index.d.ts.map +1 -1
- package/dist/js/deprecated/components/index.js +1 -0
- package/dist/js/deprecated/components/index.js.map +1 -1
- package/dist/styles/base-no-reset.css +14 -8
- package/dist/styles/base.css +14 -8
- package/dist/umd/assets/{output-KdSpiNg2.css → output-CWzd0B68.css} +9292 -9508
- package/dist/umd/react-core.min.js +1 -1
- package/helpers/package.json +1 -1
- package/layouts/package.json +1 -1
- package/next/package.json +1 -1
- package/package.json +6 -6
- package/src/components/Card/CardHeader.tsx +9 -2
- package/src/components/Card/examples/Card.md +23 -0
- package/src/components/Card/examples/CardTile.tsx +73 -0
- package/src/components/Card/examples/CardTileMulti.tsx +84 -0
- package/src/components/DataList/DataListAction.tsx +1 -5
- package/src/components/DataList/__tests__/DataListAction.test.tsx +21 -21
- package/src/components/DataList/examples/DataListActions.tsx +0 -1
- package/src/components/DataList/examples/DataListCheckboxes.tsx +0 -3
- package/src/components/DataList/examples/DataListClickableRows.tsx +0 -2
- package/src/components/DataList/examples/DataListExpandable.tsx +3 -18
- package/src/components/DataList/examples/DataListMixedExpandable.tsx +3 -18
- package/src/components/DataList/examples/DataListWidthModifiers.tsx +0 -2
- package/src/components/Dropdown/Dropdown.tsx +1 -1
- package/src/components/Menu/MenuContainer.tsx +1 -1
- package/src/components/Modal/Modal.tsx +3 -0
- package/src/components/Modal/ModalContent.tsx +4 -1
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/index.ts +0 -1
- package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +3 -18
- package/src/{demos/TileDemo.md → deprecated/components/Tile/examples/Tile.md} +67 -2
- package/src/{components → deprecated/components}/Tile/examples/TileBasic.tsx +1 -1
- package/src/{components → deprecated/components}/Tile/examples/TileStacked.tsx +1 -1
- package/src/{components → deprecated/components}/Tile/examples/TileStackedWithLargeIcons.tsx +1 -1
- package/src/{components → deprecated/components}/Tile/examples/TileWithExtraContent.tsx +2 -1
- package/src/{components → deprecated/components}/Tile/examples/TileWithIcon.tsx +1 -1
- package/src/{components → deprecated/components}/Tile/examples/TileWithSubtext.tsx +1 -1
- package/src/deprecated/components/index.ts +1 -0
- package/dist/dynamic/components/Tile/package.json +0 -1
- package/dist/esm/components/Tile/Tile.d.ts.map +0 -1
- package/dist/esm/components/Tile/Tile.js.map +0 -1
- package/dist/esm/components/Tile/index.d.ts.map +0 -1
- package/dist/esm/components/Tile/index.js.map +0 -1
- package/dist/js/components/Tile/Tile.d.ts.map +0 -1
- package/dist/js/components/Tile/Tile.js.map +0 -1
- package/dist/js/components/Tile/index.d.ts.map +0 -1
- package/dist/js/components/Tile/index.js.map +0 -1
- package/src/components/Tile/examples/Tile.md +0 -48
- /package/dist/esm/{components → deprecated/components}/Tile/Tile.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Tile/Tile.js +0 -0
- /package/dist/esm/{components → deprecated/components}/Tile/index.d.ts +0 -0
- /package/dist/esm/{components → deprecated/components}/Tile/index.js +0 -0
- /package/dist/js/{components → deprecated/components}/Tile/Tile.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Tile/Tile.js +0 -0
- /package/dist/js/{components → deprecated/components}/Tile/index.d.ts +0 -0
- /package/dist/js/{components → deprecated/components}/Tile/index.js +0 -0
- /package/src/{components → deprecated/components}/Tile/Tile.tsx +0 -0
- /package/src/{components → deprecated/components}/Tile/__tests__/Tile.test.tsx +0 -0
- /package/src/{components → deprecated/components}/Tile/__tests__/__snapshots__/Tile.test.tsx.snap +0 -0
- /package/src/{components → deprecated/components}/Tile/examples/Tile.css +0 -0
- /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
|
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
4
4
|
|
|
5
5
|
export const TileStacked: React.FunctionComponent = () => (
|
package/src/{components → deprecated/components}/Tile/examples/TileStackedWithLargeIcons.tsx
RENAMED
|
@@ -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 {
|
|
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 +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
|
-
```
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/src/{components → deprecated/components}/Tile/__tests__/__snapshots__/Tile.test.tsx.snap
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|