@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.40

package/src/helpers/OUIA/OUIA.md

@@ -1,6 +1,6 @@
 ---
 id: Open UI Automation
-section: developer-resources
+section: developer-guides
 ---
 import { Fragment } from 'react';
 
@@ -54,6 +54,7 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [FormSelect](/components/forms/form-select)
@@ -68,7 +69,6 @@ component.
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
-* [Text](/components/text)
 * [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)

package/src/helpers/OUIA/ouia.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useSSRSafeId } from '../useSSRSafeId';
 
 type OuiaId = number | string;
 
@@ -10,22 +10,11 @@ export interface OUIAProps {
   ouiaSafe?: boolean;
 }
 
-let uid = 0;
 const ouiaPrefix = 'OUIA-Generated-';
-const ouiaIdByRoute: any = {};
 
-/** Get props to conform to OUIA spec
- *
- * For functional components, use the useOUIAProps function instead
- *
- * In class based components, create a state variable ouiaStateId to create a static generated ID:
- * state = {
- *  ouiaStateId: getDefaultOUIAId(Chip.displayName)
- * }
- * This generated ID should remain alive as long as the component is not unmounted.
- *
- * Then add the attributes to the component
- * {...getOUIAProps('OverflowChip', this.props.ouiaId !== undefined ? this.props.ouiaId : this.state.ouiaStateId)}
+/**
+ * Get props to conform to OUIA spec.
+ * For functional components, use the useOUIAProps hook instead.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
@@ -40,8 +29,8 @@ export function getOUIAProps(componentType: string, id: OuiaId, ouiaSafe: boolea
 }
 
 /**
- * Hooks version of the getOUIAProps function that also memoizes the generated ID
- * Can only be used in functional components
+ * Hooks version of the getOUIAProps function with SSR-safe ID generation.
+ * Can only be used in functional components.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
@@ -55,43 +44,26 @@ export const useOUIAProps = (componentType: string, id?: OuiaId, ouiaSafe: boole
 });
 
 /**
- * Returns the ID or the memoized generated ID
+ * Returns the provided ID or a deterministic SSR-safe generated OUIA ID.
+ * Uses React.useId() under the hood for consistent server/client rendering.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
  * @param {string} variant Optional variant to add to the generated ID
  */
 export const useOUIAId = (componentType: string, id?: OuiaId, variant?: string) => {
-  const defaultOUIAId = useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
-  return id ?? defaultOUIAId;
+  const generatedId = useSSRSafeId(`${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}`);
+  return id ?? generatedId;
 };
 
+let uid = 0;
+
 /**
- * Returns a generated id based on the URL location
+ * Legacy counter-based OUIA ID generator for class components that cannot use hooks.
+ * Prefer useOUIAId or useOUIAProps for functional components.
  *
- * @param {string} componentType OUIA component type
- * @param {string} variant Optional variant to add to the generated ID
+ * @deprecated Use useOUIAId in functional components instead.
  */
 export function getDefaultOUIAId(componentType: string, variant?: string) {
-  /*
-  ouiaIdByRoute = {
-    [route+componentType]: [number]
-  }
-  */
-  try {
-    let key;
-    if (typeof window !== 'undefined') {
-      // browser environments
-      key = `${window.location.href}-${componentType}-${variant || ''}`;
-    } else {
-      // node/SSR environments
-      key = `${componentType}-${variant || ''}`;
-    }
-    if (!ouiaIdByRoute[key]) {
-      ouiaIdByRoute[key] = 0;
-    }
-    return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++ouiaIdByRoute[key]}`;
-  } catch (exception) {
-    return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
-  }
+  return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
 }

package/src/helpers/SSRSafeIds/SSRSafeIds.tsx

@@ -0,0 +1,24 @@
+import { useSSRSafeId } from '../useSSRSafeId';
+
+const ouiaPrefix = 'OUIA-Generated-';
+
+export interface SSRSafeIdsProps {
+  /** Prefix for the generated component ID */
+  prefix: string;
+  /** OUIA component type. If provided, a stable OUIA ID will be generated. */
+  ouiaComponentType?: string;
+  /** Children render function receiving (generatedId, generatedOuiaId?) */
+  children: (id: string, ouiaId?: string) => React.ReactNode;
+}
+
+/**
+ * Provides SSR/Strict-Mode-safe IDs for class components via render props.
+ * Uses useSSRSafeId() (React.useId) for both component ID and OUIA ID,
+ * ensuring consistent values between server and client rendering.
+ */
+export const SSRSafeIds = ({ prefix, ouiaComponentType, children }: SSRSafeIdsProps) => {
+  const id = useSSRSafeId(prefix);
+  const ouiaId = useSSRSafeId(ouiaComponentType ? `${ouiaPrefix}${ouiaComponentType}-` : 'pf-unused-');
+  return (children(id, ouiaComponentType ? ouiaId : undefined) as React.ReactElement) ?? null;
+};
+SSRSafeIds.displayName = 'SSRSafeIds';

package/src/helpers/index.ts

@@ -8,6 +8,8 @@ export * from './OUIA/ouia';
 export * from './util';
 export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
+export * from './useSSRSafeId';
+export * from './SSRSafeIds/SSRSafeIds';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
 export * from './useInterval';

package/src/helpers/useSSRSafeId.ts

@@ -0,0 +1,18 @@
+import { useId, useState } from 'react';
+
+const reactUseId: (() => string) | undefined = typeof useId === 'function' ? useId : undefined;
+
+let counter = 0;
+
+/**
+ * SSR-safe ID generation hook. Uses React.useId() when available (React 18+)
+ * for guaranteed SSR/CSR match. Falls back to a counter-based approach for React 17.
+ */
+export const useSSRSafeId: (prefix?: string) => string = reactUseId
+  ? function useSSRSafeId(prefix = 'pf-'): string {
+      return `${prefix}${reactUseId!()}`;
+    }
+  : function useSSRSafeId(prefix = 'pf-'): string {
+      const [id] = useState(() => `${prefix}${++counter}`);
+      return id;
+    };

package/src/layouts/Bullseye/examples/Bullseye.md

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

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-v6-l-bullseye,
-.ws-react-l-bullseye .pf-v6-l-bullseye > div {
+.ws-react-f-bullseye .pf-v6-l-bullseye,
+.ws-react-f-bullseye .pf-v6-l-bullseye > 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/Flex/examples/Flex.md

@@ -1,7 +1,8 @@
 ---
 id: Flex
 cssPrefix: pf-v6-l-flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Flex', 'FlexItem']
 ---
 

package/src/layouts/Flex/examples/flex.css

@@ -1,9 +1,9 @@
-.ws-react-l-flex .pf-v6-l-flex {
+.ws-react-f-flex .pf-v6-l-flex {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-flex .pf-v6-l-flex > div,
-.ws-react-l-flex .example-border {
+.ws-react-f-flex .pf-v6-l-flex > div,
+.ws-react-f-flex .example-border {
   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/Gallery/examples/Gallery.md

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

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

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

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

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

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

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

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

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