@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
+);

package/src/layouts/Stack/examples/stack.css

@@ -1,15 +1,15 @@
-.ws-react-l-stack {
+.ws-react-f-stack {
   min-height: 30em;
   display: flex;
   flex-direction: column;
 }
 
-.ws-react-l-stack > .pf-v6-l-stack {
+.ws-react-f-stack > .pf-v6-l-stack {
   flex-grow: 1;
 }
 
-.ws-react-l-stack .pf-v6-l-stack,
-.ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
+.ws-react-f-stack .pf-v6-l-stack,
+.ws-react-f-stack .pf-v6-l-stack > .pf-v6-l-stack__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);
 }