From e9deb97feb3d9805aeaf7f25a8c27b95b09e1e44 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 14 Oct 2025 21:38:04 +0530
Subject: [PATCH 1/3] chore(flex): convert examples to typescript

---
 .../src/layouts/Flex/examples/Flex.md         | 71 ++-----------------
 .../src/layouts/Flex/examples/FlexBasic.tsx   | 11 +++
 .../Flex/examples/FlexIndividuallySpaced.tsx  | 14 ++++
 .../layouts/Flex/examples/FlexNestedItems.tsx | 15 ++++
 .../src/layouts/Flex/examples/FlexNesting.tsx | 15 ++++
 .../layouts/Flex/examples/FlexSpacingNone.tsx | 11 +++
 .../layouts/Flex/examples/FlexSpacingXl.tsx   | 11 +++
 7 files changed, 83 insertions(+), 65 deletions(-)
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx

diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md
index 7b639836198..611422b043d 100644
--- a/packages/react-core/src/layouts/Flex/examples/Flex.md
+++ b/packages/react-core/src/layouts/Flex/examples/Flex.md
@@ -11,52 +11,20 @@ import './flex.css';
 
 ### Basic
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexBasic.tsx"
 
-<Flex>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Nesting
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNesting.tsx"
 
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Nested with items
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNestedItems.tsx"
 
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Spacing
@@ -73,47 +41,20 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Individually spaced
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexIndividuallySpaced.tsx"
 
-<Flex>
-  <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
-  <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
-  <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
-  <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
-  <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
-  <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
-  <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
-</Flex>;
 ```
 
 ### Spacing xl
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexSpacingXl.tsx"
 
-<Flex spaceItems={{ default: 'spaceItemsXl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Spacing none
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexSpacingNone.tsx"
 
-<Flex spaceItems={{ default: 'spaceItemsNone' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Flex gap spacing
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx b/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
new file mode 100644
index 00000000000..ac6e9eea82a
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexBasic: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx b/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx
new file mode 100644
index 00000000000..2aacf1aa1be
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx
@@ -0,0 +1,14 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexIndividuallySpaced: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
+    <FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
+    <FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
+    <FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
+    <FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
+    <FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
+    <FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
+    <FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx
new file mode 100644
index 00000000000..b12357c893a
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNestedItems.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNestedItems: React.FunctionComponent = () => (
+  <Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx
new file mode 100644
index 00000000000..09b22af5d97
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNesting.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNesting: React.FunctionComponent = () => (
+  <Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx b/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx
new file mode 100644
index 00000000000..ccbac452b34
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexSpacingNone.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSpacingNone: React.FunctionComponent = () => (
+  <Flex spaceItems={{ default: 'spaceItemsNone' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx b/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx
new file mode 100644
index 00000000000..8276b4bc7a1
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexSpacingXl.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSpacingXl: React.FunctionComponent = () => (
+  <Flex spaceItems={{ default: 'spaceItemsXl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

From 12b491723c6bfeb539b1f2a36b6c1d5513fe0f9c Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 14 Oct 2025 21:53:08 +0530
Subject: [PATCH 2/3] converted examples

---
 .../src/layouts/Flex/examples/Flex.md         | 116 ++----------------
 .../Flex/examples/FlexAdjustingWidth.tsx      |  18 +++
 .../src/layouts/Flex/examples/FlexCanGrow.tsx |  18 +++
 .../layouts/Flex/examples/FlexColumnGap.tsx   |  16 +++
 .../Flex/examples/FlexColumnWidths.tsx        |  18 +++
 .../Flex/examples/FlexDefaultLayout.tsx       |  11 ++
 .../src/layouts/Flex/examples/FlexGap.tsx     |  16 +++
 .../src/layouts/Flex/examples/FlexInline.tsx  |  11 ++
 .../src/layouts/Flex/examples/FlexRowGap.tsx  |  16 +++
 9 files changed, 132 insertions(+), 108 deletions(-)
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexGap.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexInline.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx

diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md
index 611422b043d..f46d36e5d7d 100644
--- a/packages/react-core/src/layouts/Flex/examples/Flex.md
+++ b/packages/react-core/src/layouts/Flex/examples/Flex.md
@@ -61,152 +61,52 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Row gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexRowGap.tsx"
 
-<Flex rowGap={{ default: 'rowGap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Column gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnGap.tsx"
 
-<Flex columnGap={{ default: 'columnGap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Gap
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexGap.tsx"
 
-<Flex gap={{ default: 'gap2xl' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Flex layout modifiers
 
 ### Default layout
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexDefaultLayout.tsx"
 
-<Flex className="example-border">
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Inline
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexInline.tsx"
 
-<Flex className="example-border" display={{ default: 'inlineFlex' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Using canGrow
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexCanGrow.tsx"
 
-<Flex>
-  <Flex grow={{ default: 'grow' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Adjusting width
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAdjustingWidth.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Specifying column widths
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnWidths.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_2' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex flex={{ default: 'flex_3' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Column layout modifiers
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx b/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
new file mode 100644
index 00000000000..5e4422ea1a3
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAdjustingWidth: React.FunctionComponent = () => (
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx b/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
new file mode 100644
index 00000000000..b61e11ebd6d
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexCanGrow: React.FunctionComponent = () => (
+  <Flex>
+    <Flex grow={{ default: 'grow' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
new file mode 100644
index 00000000000..d58d57b6cf1
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnGap: React.FunctionComponent = () => (
+  <Flex columnGap={{ default: 'columnGap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx
new file mode 100644
index 00000000000..d87ec7cb0be
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnWidths.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnWidths: React.FunctionComponent = () => (
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_2' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex flex={{ default: 'flex_3' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx b/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx
new file mode 100644
index 00000000000..528913ff874
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexDefaultLayout.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexDefaultLayout: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx
new file mode 100644
index 00000000000..72129afb7d8
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexGap: React.FunctionComponent = () => (
+  <Flex gap={{ default: 'gap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx b/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx
new file mode 100644
index 00000000000..1d4a4b74276
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexInline.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexInline: React.FunctionComponent = () => (
+  <Flex className="example-border" display={{ default: 'inlineFlex' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx b/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx
new file mode 100644
index 00000000000..620dce53279
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexRowGap.tsx
@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexRowGap: React.FunctionComponent = () => (
+  <Flex rowGap={{ default: 'rowGap2xl' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

From f3c592b2c68bbf49ea16d320c5e88b4e737558de Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 14 Oct 2025 21:57:14 +0530
Subject: [PATCH 3/3] converted examples

---
 .../src/layouts/Flex/examples/Flex.md         | 39 ++-----------------
 .../Flex/examples/FlexColumnLayout.tsx        |  9 +++++
 .../Flex/examples/FlexNestingInColumns.tsx    | 15 +++++++
 .../Flex/examples/FlexStackingElements.tsx    | 18 +++++++++
 4 files changed, 45 insertions(+), 36 deletions(-)
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx
 create mode 100644 packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx

diff --git a/packages/react-core/src/layouts/Flex/examples/Flex.md b/packages/react-core/src/layouts/Flex/examples/Flex.md
index f46d36e5d7d..30d0a0fa3cd 100644
--- a/packages/react-core/src/layouts/Flex/examples/Flex.md
+++ b/packages/react-core/src/layouts/Flex/examples/Flex.md
@@ -113,53 +113,20 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Column layout
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexColumnLayout.tsx"
 
-<Flex direction={{ default: 'column' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Stacking elements
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexStackingElements.tsx"
 
-<Flex direction={{ default: 'column' }}>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Nesting elements in columns
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexNestingInColumns.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Responsive layout modifiers
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx b/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
new file mode 100644
index 00000000000..936e5aabf5e
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexColumnLayout: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx b/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx
new file mode 100644
index 00000000000..16e97e0895e
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexNestingInColumns.tsx
@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexNestingInColumns: React.FunctionComponent = () => (
+  <Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx b/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx
new file mode 100644
index 00000000000..e3c742e5614
--- /dev/null
+++ b/packages/react-core/src/layouts/Flex/examples/FlexStackingElements.tsx
@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexStackingElements: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem>Flex item</FlexItem>
+    </Flex>
+  </Flex>
+);