@patternfly/react-core 6.4.1-prerelease.4 → 6.4.1-prerelease.6

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.1-prerelease.5","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.1-prerelease.5","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.1-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.4",
+  "version": "6.4.1-prerelease.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "02cbfa51ba9eef5bf6df2996fbd18737f7c42278"
+  "gitHead": "697a5955be055c4639eaa91756a2d01043be3ce2"
 }

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -19,29 +19,21 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 A toggle is collapsed until it is selected by a user.
 
-```ts
-import { MenuToggle } from '@patternfly/react-core';
-
-<MenuToggle>Collapsed</MenuToggle>
-
+```ts file="MenuToggleCollapsed.tsx"
 ```
 
 ### Expanded toggle
 
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
-```ts
-import { MenuToggle } from '@patternfly/react-core';
-
-<MenuToggle isExpanded>Expanded</MenuToggle>;
-
+```ts file ="MenuToggleExpanded.tsx"
 ```
 
 ### Small toggle
 
 You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
 
-```ts file="./MenuToggleSmall.tsx"
+```ts file="MenuToggleSmall.tsx"
 
 ```
 
@@ -49,32 +41,21 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
-```ts
-import { MenuToggle } from '@patternfly/react-core';
-
-<MenuToggle isDisabled>Disabled</MenuToggle>
-
+```ts file="MenuToggleDisabled.tsx"
 ```
 
 ### With a badge
 
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle, Badge } from '@patternfly/react-core';
-
-<Fragment>
-  <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
-  <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
-</Fragment>
+```ts file="MenuToggleBadge.tsx"
 ```
 
 ### Settings toggle
 
 To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-```ts file="./MenuToggleSettings.tsx"
+```ts file="MenuToggleSettings.tsx"
 
 ```
 
@@ -84,7 +65,7 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts file="./MenuToggleCustomIcon.tsx"
+```ts file="MenuToggleCustomIcon.tsx"
 
 ```
 
@@ -94,37 +75,14 @@ You can also pass images into the `icon` property. The following example passes
 
 This can be used alongside a text label that provides more context for the image.
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-
-<Fragment>
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
-</Fragment>
+```ts file="MenuToggleAvatarText.tsx"
 ```
 
 ### Variant styles
 
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-
-<Fragment>
-  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-  <MenuToggle variant="primary" isExpanded>
-    Expanded
-  </MenuToggle>{' '}
-  <MenuToggle variant="primary" isDisabled>
-    Disabled
-  </MenuToggle>
-</Fragment>
-
+```ts file="MenuToggleVariantStyles.tsx"
 ```
 
 ### Plain toggle with icon
@@ -133,39 +91,14 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-<Fragment>
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
-  {' '}
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
-  {' '}
-  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
-</Fragment>
+```ts file="MenuTogglePlainIcon.tsx"
 ```
 
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-
-<Fragment>
-  <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
-    Disabled
-  </MenuToggle>{' '}
-  <MenuToggle variant="plainText" aria-label="Plain menu toggle">
-    Custom text
-  </MenuToggle>{' '}
-  <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
-    Custom text (expanded)
-  </MenuToggle>
-</Fragment>
+```ts file="MenuTogglePlainTextLabel.tsx"
 ```
 
 ### Split toggle with checkbox
@@ -216,14 +149,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
-```ts
-import { MenuToggle } from '@patternfly/react-core';
-
-<div style={{ height: "80px" }}>
-  <MenuToggle isFullHeight aria-label="Full height menu toggle">
-    Full height
-  </MenuToggle>
-</div>
+```ts file="MenuToggleFullHeight.tsx"
 ```
 
 ### Full width toggle
@@ -232,16 +158,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
-```ts
-import { MenuToggle } from '@patternfly/react-core';
-
-const fullWidth: React.FunctionComponent = () => {
-  return (
-    <MenuToggle isFullWidth aria-label="Full width menu toggle" >
-      Full width
-    </MenuToggle>
-  );
-}
+```ts file="MenuToggleFullWidth.tsx"
 ```
 
 ### Typeahead toggle

package/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx

@@ -0,0 +1,15 @@
+import { Fragment } from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+
+export const MenuToggleAvatarText: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
+      Ned Username
+    </MenuToggle>{' '}
+    <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
+      Ned Username
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleBadge.tsx

@@ -0,0 +1,9 @@
+import { Fragment } from 'react';
+import { MenuToggle, Badge } from '@patternfly/react-core';
+
+export const MenuToggleBadge: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
+    <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx

@@ -0,0 +1,3 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleDisabled.tsx

@@ -0,0 +1,3 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleExpanded.tsx

@@ -0,0 +1,3 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;

package/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx

@@ -0,0 +1,9 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleFullHeight: React.FunctionComponent = () => (
+  <div style={{ height: '80px' }}>
+    <MenuToggle isFullHeight aria-label="Full height menu toggle">
+      Full height
+    </MenuToggle>
+  </div>
+);

package/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx

@@ -0,0 +1,7 @@
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleFullWidth: React.FunctionComponent = () => (
+  <MenuToggle isFullWidth aria-label="Full width menu toggle">
+    Full width
+  </MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx

@@ -0,0 +1,11 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const MenuTogglePlainIcon: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab" />{' '}
+    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab" />{' '}
+    <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab" />
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx

@@ -0,0 +1,16 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
+      Disabled
+    </MenuToggle>{' '}
+    <MenuToggle variant="plainText" aria-label="Plain menu toggle">
+      Custom text
+    </MenuToggle>{' '}
+    <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
+      Custom text (expanded)
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx

@@ -0,0 +1,14 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleVariantStyles: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
+    <MenuToggle variant="primary" isExpanded>
+      Expanded
+    </MenuToggle>{' '}
+    <MenuToggle variant="primary" isDisabled>
+      Disabled
+    </MenuToggle>
+  </Fragment>
+);

package/src/layouts/Flex/examples/Flex.md

@@ -133,322 +133,114 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Switching between direction column and row
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex direction={{ default: 'column', lg: 'row' }}>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <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>;
+```ts file="FlexSwitchingColumnRow.tsx"
+
 ```
 
 ### Controlling width of text
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexControlTextWidth.tsx"
 
-<Flex direction={{ default: 'column', lg: 'row' }}>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam
-      dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
-    </FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Flex alignment
 
 ### Aligning right
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAligningRight.tsx"
 
-<Flex className="example-border">
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Align right on single item
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignRightSingleItem.tsx"
 
-<Flex className="example-border">
-  <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Align right on multiple groups
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex align={{ default: 'alignRight' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex align={{ default: 'alignRight' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
+```ts file="FlexAlignRightMultipleGroups.tsx"
+
 ```
 
 ### Align adjacent content
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignAdjacentContent.tsx"
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self flex end
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfFlexEnd.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfFlexEnd' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self center
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfCenter.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self baseline
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfBaseline.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfBaseline' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ### Align self stretch
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlignSelfStretch.tsx"
 
-<Flex>
-  <Flex direction={{ default: 'column' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-  <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfStretch' }}>
-    <FlexItem>Flex item</FlexItem>
-    <FlexItem>Flex item</FlexItem>
-  </Flex>
-</Flex>;
 ```
 
 ## Flex justification
 
 ### Justify content flex end
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentEnd.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Justify content space between
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentSpaceBetween.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ### Justify content flex start
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexJustifyContentFlexStart.tsx"
 
-<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-  <FlexItem>Flex item</FlexItem>
-</Flex>;
 ```
 
 ## Flex item order
 
 ### First last ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexFirstLastOrder.tsx"
 
-<Flex className="example-border">
-  <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>
-    Item A
-  </FlexItem>
-  <FlexItem>Item B</FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>
-    Item C
-  </FlexItem>
-</Flex>;
 ```
 
 ### Responsive first last ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexResponsiveFirstLastOrder.tsx"
 
-<Flex className="example-border">
-  <FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>
-    Item A
-  </FlexItem>
-  <FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>
-    Item B
-  </FlexItem>
-  <FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>
-    Item C
-  </FlexItem>
-</Flex>;
 ```
 
 ### Ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex className="example-border">
-  <Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className="example-border">
-    <FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>
-    <FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>
-    <FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>
-    <FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>
-      Set 1, Item D
-    </FlexItem>
-  </Flex>
-  <Flex spacer={{ lg: 'spacerMd' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 2, Item A
-    </FlexItem>
-    <FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>
-    <FlexItem>Set 2, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
-      Set 2, Item D
-    </FlexItem>
-  </Flex>
-</Flex>;
+```ts file="FlexOrdering.tsx"
+
 ```
 
 ### Responsive ordering
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex className="example-border">
-  <Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 1, Item A
-    </FlexItem>
-    <FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>
-    <FlexItem>Set 1, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>
-  </Flex>
-
-  <Flex spacer={{ default: 'spacerMd' }} className="example-border">
-    <FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
-      Set 2, Item A
-    </FlexItem>
-    <FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>
-    <FlexItem>Set 2, Item C</FlexItem>
-    <FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
-      Set 2, Item D
-    </FlexItem>
-  </Flex>
-</Flex>;
+```ts file="FlexResponsiveOrdering.tsx"
+
 ```
 
 ### Alternative components
 
-```js
-import { Flex, FlexItem } from '@patternfly/react-core';
+```ts file="FlexAlternative.tsx"
 
-<Flex component="ul">
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-  <FlexItem component="li">Flex item</FlexItem>
-</Flex>;
 ```