npm - @patternfly/react-core - Versions diffs - 6.5.0-prerelease.3 → 6.5.0-prerelease.30 - Mend

@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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 (615) hide show

package/src/layouts/Gallery/examples/Gallery.md CHANGED Viewed

@@ -1,7 +1,8 @@
 ---
 id: Gallery
 cssPrefix: pf-v6-l-gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---
@@ -11,123 +12,32 @@ import './gallery.css';
 ### Basic
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryBasic.tsx"
 ```
 ### With gutters
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery hasGutter>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryWithGutters.tsx"
 ```
 ### Adjusting min widths
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery
-  hasGutter
-  minWidths={{
-    md: '100px',
-    lg: '150px',
-    xl: '200px',
-    '2xl': '300px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinWidths.tsx"
 ```
 ### Adjusting max widths
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery
-  hasGutter
-  maxWidths={{
-    md: '280px',
-    lg: '320px',
-    '2xl': '400px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMaxWidths.tsx"
 ```
 ### Adjusting min and max widths
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery
-  hasGutter
-  minWidths={{
-    default: '100%',
-    md: '100px',
-    xl: '300px'
-  }}
-  maxWidths={{
-    md: '200px',
-    xl: '1fr'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinMaxWidths.tsx"
 ```
 ### Alternative components
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-<Gallery component="ul">
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAlternativeComponents.tsx"
 ```

package/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryAdjustingMaxWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    maxWidths={{
+      md: '280px',
+      lg: '320px',
+      '2xl': '400px'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryAdjustingMinMaxWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    minWidths={{
+      default: '100%',
+      md: '100px',
+      xl: '300px'
+    }}
+    maxWidths={{
+      md: '200px',
+      xl: '1fr'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryAdjustingMinWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    minWidths={{
+      md: '100px',
+      lg: '150px',
+      xl: '200px',
+      '2xl': '300px'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryAlternativeComponents: React.FunctionComponent = () => (
+  <Gallery component="ul">
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryBasic.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryBasic: React.FunctionComponent = () => (
+  <Gallery>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryWithGutters.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+export const GalleryWithGutters: React.FunctionComponent = () => (
+  <Gallery hasGutter>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/gallery.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.ws-react-l-gallery .pf-v6-l-gallery {
+.ws-react-f-gallery .pf-v6-l-gallery {
   padding: var(--pf-t--global--spacer--md);
 }
-.ws-react-l-gallery .pf-v6-l-gallery > div {
+.ws-react-f-gallery .pf-v6-l-gallery > div {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Grid/examples/Grid.md CHANGED Viewed

@@ -1,7 +1,8 @@
 ---
 id: Grid
 cssPrefix: pf-v6-l-grid
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Grid', 'GridItem']
 ---
@@ -11,134 +12,38 @@ import './grid.css';
 ### Basic
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridBasic.tsx"
 ```
 ### With gutters
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid hasGutter>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridWithGutters.tsx"
 ```
 ### With overrides
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid sm={6} md={4} lg={3} xl2={1}>
-  <GridItem span={3} rowSpan={2}>
-    span = 3 rowSpan= 2
-  </GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-</Grid>;
+```ts file="GridWithOverrides.tsx"
 ```
 ## Ordering
 ### Standard ordering
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid hasGutter span={3}>
-  <GridItem order={{ default: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridStandardOrdering.tsx"
 ```
 ### Responsive ordering
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid hasGutter span={3}>
-  <GridItem order={{ lg: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridResponsiveOrdering.tsx"
 ```
 ### Grouped ordering
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid hasGutter span={12}>
-  <Grid hasGutter span={6} order={{ default: '2' }}>
-    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
-    <GridItem>Set 1, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
-  </Grid>
-  <Grid hasGutter span={6}>
-    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
-    <GridItem>Set 2, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
-  </Grid>
-</Grid>;
+```ts file="GridGroupingOrdering.tsx"
 ```
 ### Alternative components
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-<Grid component="ul">
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-</Grid>;
+```ts file="GridAlternativeComponents.tsx"
 ```

package/src/layouts/Grid/examples/GridAlternativeComponents.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridAlternativeComponents: React.FunctionComponent = () => (
+  <Grid component="ul">
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridBasic.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridBasic: React.FunctionComponent = () => (
+  <Grid>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridGroupingOrdering.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridGroupingOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={12}>
+    <Grid hasGutter span={6} order={{ default: '2' }}>
+      <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
+      <GridItem>Set 1, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
+    </Grid>
+    <Grid hasGutter span={6}>
+      <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
+      <GridItem>Set 2, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
+    </Grid>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridResponsiveOrdering.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridResponsiveOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ lg: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridStandardOrdering.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridStandardOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ default: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithGutters.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridWithGutters: React.FunctionComponent = () => (
+  <Grid hasGutter>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithOverrides.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+export const GridWithOverrides: React.FunctionComponent = () => (
+  <Grid sm={6} md={4} lg={3} xl2={1}>
+    <GridItem span={3} rowSpan={2}>
+      span = 3 rowSpan= 2
+    </GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/grid.css CHANGED Viewed

@@ -1,5 +1,5 @@
-.ws-react-l-grid > .pf-v6-l-grid,
-.ws-react-l-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
+.ws-react-f-grid > .pf-v6-l-grid,
+.ws-react-f-grid > .pf-v6-l-grid > .pf-v6-l-grid__item {
   min-height: 75px;
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);

package/src/layouts/Level/examples/Level.md CHANGED Viewed

@@ -1,7 +1,8 @@
 ---
 id: Level
 cssPrefix: pf-v6-l-level
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Level', 'LevelItem']
 ---

package/src/layouts/Level/examples/level.css CHANGED Viewed

@@ -1,13 +1,13 @@
-.ws-react-l-level {
+.ws-react-f-level {
   padding: var(--pf-t--global--spacer--sm);
 }
-.ws-react-l-level .pf-v6-l-level {
+.ws-react-f-level .pf-v6-l-level {
   min-height: 160px;
 }
-.ws-react-l-level .pf-v6-l-level,
-.ws-react-l-level .pf-v6-l-level > div {
+.ws-react-f-level .pf-v6-l-level,
+.ws-react-f-level .pf-v6-l-level > div {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Split/examples/Split.md CHANGED Viewed

@@ -1,7 +1,8 @@
 ---
 id: Split
 cssPrefix: pf-v6-l-split
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Split', 'SplitItem']
 ---

package/src/layouts/Split/examples/split.css CHANGED Viewed

@@ -1,5 +1,5 @@
-.ws-react-l-split .pf-v6-l-split,
-.ws-react-l-split .pf-v6-l-split > .pf-v6-l-split__item {
+.ws-react-f-split .pf-v6-l-split,
+.ws-react-f-split .pf-v6-l-split > .pf-v6-l-split__item {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Stack/examples/Stack.md CHANGED Viewed

@@ -1,7 +1,8 @@
 ---
 id: Stack
 cssPrefix: pf-v6-l-stack
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Stack', 'StackItem']
 ---
@@ -11,24 +12,10 @@ import './stack.css';
 ### Basic
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-<Stack>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackBasic.tsx"
 ```
 ### With gutter
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-<Stack hasGutter>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackWithGutter.tsx"
 ```

package/src/layouts/Stack/examples/StackBasic.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+export const StackBasic: React.FunctionComponent = () => (
+  <Stack>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);

package/src/layouts/Stack/examples/StackWithGutter.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+export const StackWithGutter: React.FunctionComponent = () => (
+  <Stack hasGutter>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);