moved Tile to deprecated dir

Author: kmcfaul

packages/react-core/src/components/Card/examples/Card.md

@@ -19,6 +19,7 @@ ouia: true
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ## Examples
 
@@ -178,3 +179,9 @@ Dividers can be placed between sections of the card.
 ```ts file='./CardWithDividers.tsx'
 
 ```
+
+### Cards as tiles
+
+```ts file='./CardTile.tsx'
+
+```

packages/react-core/src/components/Card/examples/CardTile.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTile: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
+  const id1 = 'tile-1';
+  const id2 = 'tile-2';
+  const id3 = 'tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="tile-example-1" isSelectable isSelected={isChecked === id1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'tile-example-1',
+            name: id1,
+            variant: 'single',
+            onChange
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-2" isSelectable isSelected={isChecked === id2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'tile-example-2',
+            name: id2,
+            variant: 'single',
+            onChange
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'tile-example-3',
+            name: id3,
+            variant: 'single',
+            onChange
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

packages/react-core/src/components/Tile/examples/Tile.md

@@ -65,7 +65,6 @@ export * from './Switch';
 export * from './Tabs';
 export * from './TextArea';
 export * from './TextInput';
-export * from './Tile';
 export * from './TimePicker';
 export * from './Timestamp';
 export * from './Title';

packages/react-core/src/components/index.ts

@@ -1,15 +1,80 @@
 ---
 id: Tile
 section: components
+cssPrefix: pf-v5-c-tile
+propComponents: ['Tile']
+deprecated: true
 ---
 
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import './Tile.css';
+
+Note: Tile has been deprecated, please use the [Card](/components/card) component.
+
+## Examples
+
+Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
+
+### Basic tile
+
+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`.
+
+```ts file="./TileBasic.tsx"
+
+```
+
+### With subtext
+
+Tile subtext can provide users with additional context. To add subtext, pass a short description to the `<Tile>` component.
+
+```ts file="./TileWithSubtext.tsx"
+
+```
+
+### With icon
+
+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.
+
+```ts file="./TileWithIcon.tsx"
+
+```
+
+### With stacked icon
+
+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.
+
+```ts file="./TileStacked.tsx"
+
+```
+
+### With large icons
+
+You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property.
+
+Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied.
+
+```ts file="./TileStackedWithLargeIcons.tsx"
+
+```
+
+### With long subtext
+
+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>`.
+
+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.
+
+```ts file="./TileWithExtraContent.tsx"
+
+```
+
 ## Demos
 
 ### Tiles with single selection
 
 ```ts
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 
 const TileSingleSelect: React.FunctionComponent = () => {
   const [selectedId, setSelectedId] = React.useState<string>('');
@@ -40,7 +105,7 @@ const TileSingleSelect: React.FunctionComponent = () => {
 
 ```ts
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 
 const TileMultiSelect: React.FunctionComponent = () => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]);

…/react-core/src/components/Tile/Tile.tsx …/src/deprecated/components/Tile/Tile.tsxpackages/react-core/src/components/Tile/Tile.tsx renamed to packages/react-core/src/deprecated/components/Tile/Tile.tsx packages/react-core/src/components/Tile/Tile.tsx renamed to packages/react-core/src/deprecated/components/Tile/Tile.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 
 export const TileBasic: React.FunctionComponent = () => (
   <div role="listbox" aria-label="Basic tiles">