@patternfly/react-core 6.0.0-prerelease.2 → 6.0.0-prerelease.20

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -19,7 +19,7 @@ import {
   Icon
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
+import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';

package/src/demos/examples/Card/CardUtilizationDemo4.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';
-import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
 
 export const CardUtilizationDemo4: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -15,7 +15,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -16,13 +16,11 @@ import {
   Sidebar,
   SidebarContent,
   SidebarPanel,
-  getResizeObserver,
   DrawerContext
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
-const JumpLinksWrapper = ({ offsetHeight, headings }) => {
+const JumpLinksWrapper = ({ headings }) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
 
   return (
@@ -30,7 +28,6 @@ const JumpLinksWrapper = ({ offsetHeight, headings }) => {
       isVertical={true}
       label="Jump to section"
       scrollableRef={drawerContentRef}
-      offset={offsetHeight}
       expandable={{ default: 'expandable', md: 'nonExpandable' }}
     >
       {headings.map((heading) => (
@@ -46,23 +43,9 @@ const JumpLinksWrapper = ({ offsetHeight, headings }) => {
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
-  const [offsetHeight, setOffsetHeight] = React.useState(0);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef();
 
-  React.useEffect(() => {
-    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-    const drawerToggleSection = document.getElementById('drawer-toggle');
-
-    getResizeObserver(
-      masthead,
-      () => {
-        setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
-      },
-      true
-    );
-  }, []);
-
   const onCloseClick = () => {
     setIsExpanded(false);
   };
@@ -92,14 +75,14 @@ export const JumpLinksWithDrawer = () => {
             <Sidebar>
               <SidebarPanel variant="sticky">
                 <PageSection>
-                  <JumpLinksWrapper offsetHeight={offsetHeight} headings={headings} />
+                  <JumpLinksWrapper headings={headings} />
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>
                 <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }}>
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
-                <PageSection>
+                <PageSection hasOverflowScroll>
                   <Content>
                     {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>

package/src/deprecated/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
+cssPrefix: ['pf-v6-c-chip', 'pf-v6-c-chip-group']
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 deprecated: true

package/src/deprecated/components/DragDrop/Draggable.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
 // import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
-const cssDraggingBackgroundColor = { name: '--pf-v5-c-draggable--m-dragging--BackgroundColor' };
+const cssDraggingBackgroundColor = { name: `--${styles.draggable}--m-dragging--BackgroundColor` };
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */

package/src/deprecated/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-v5-c-modal-box
+cssPrefix: pf-v6-c-modal-box
 propComponents: ['Modal']
 ouia: true
 deprecated: true

package/src/{demos/TileDemo.md → deprecated/components/Tile/examples/Tile.md}

@@ -1,15 +1,80 @@
 ---
 id: Tile
 section: components
+cssPrefix: pf-v6-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. Use the [card](/components/card#cards-as-tiles) component instead.
+
+## 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[]>([]);

package/src/{components → deprecated/components}/Tile/examples/TileBasic.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">

package/src/{components → deprecated/components}/Tile/examples/TileStacked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const TileStacked: React.FunctionComponent = () => (

package/src/{components → deprecated/components}/Tile/examples/TileStackedWithLargeIcons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const TileStackedWithLargeIcons: React.FunctionComponent = () => (

package/src/{components → deprecated/components}/Tile/examples/TileWithExtraContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Tile, Flex } from '@patternfly/react-core';
+import { Flex } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const TileWithExtraContent: React.FunctionComponent = () => (

package/src/{components → deprecated/components}/Tile/examples/TileWithIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '@patternfly/react-core';
+import { Tile } from '@patternfly/react-core/deprecated';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const TileWithIcon: React.FunctionComponent = () => (

package/src/{components → deprecated/components}/Tile/examples/TileWithSubtext.tsx

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

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-v5-c-wizard
+cssPrefix: pf-v6-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ouia: true

package/src/deprecated/components/index.ts

@@ -2,4 +2,5 @@ export * from './Chip';
 export * from './DragDrop';
 export * from './Modal';
 export * from './DualListSelector';
+export * from './Tile';
 export * from './Wizard';

package/src/helpers/constants.ts

@@ -1,14 +1,14 @@
-import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm';
-import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
-import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
-import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
-
-import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_sm';
-import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_md';
-import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_lg';
-import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_xl';
-import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_height_2xl';
+import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_sm';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
+import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_2xl';
+
+import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_sm';
+import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_md';
+import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_lg';
+import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_xl';
+import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_2xl';
 
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';

package/dist/dynamic/components/Tile/package.json

@@ -1 +0,0 @@
-{"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.1","private":true}

package/dist/esm/components/Tile/Tile.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/esm/components/Tile/Tile.js.map

@@ -1 +0,0 @@
-{"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"}

package/dist/esm/components/Tile/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/esm/components/Tile/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/js/components/Tile/Tile.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/js/components/Tile/Tile.js.map

@@ -1 +0,0 @@
-{"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"}

package/dist/js/components/Tile/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/js/components/Tile/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tile/index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB"}

package/src/components/Tile/examples/Tile.md

@@ -1,48 +0,0 @@
----
-id: Tile
-section: components
-cssPrefix: pf-v5-c-tile
-propComponents: ['Tile']
----
-
-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';
-
-## 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"
-```