Skip to content

Commit

Permalink
docs(tile): Adds content to tile component
Browse files Browse the repository at this point in the history
  • Loading branch information
Kaelan Khiatani committed Jul 6, 2023
1 parent fe7fae9 commit bf1f512
Showing 1 changed file with 19 additions and 6 deletions.
25 changes: 19 additions & 6 deletions packages/react-core/src/components/Tile/examples/Tile.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
id: Tile
section: components
cssPrefix: pf-v5-c-tile
cssPrefix: pf-c-tile
propComponents: ['Tile']
---

Expand All @@ -10,25 +10,38 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';

## 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.

### 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="./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"
```

0 comments on commit bf1f512

Please sign in to comment.