@patternfly/react-core 6.4.1-prerelease.5 → 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.4","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.4","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.4","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.5",
+  "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": "78f4cf8ad4bc1cb5a38d5f5f46632b60fd140002"
+  "gitHead": "697a5955be055c4639eaa91756a2d01043be3ce2"
 }

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>;
 ```

package/src/layouts/Flex/examples/FlexAlignAdjacentContent.tsx

@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignAdjacentContent: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.tsx

@@ -0,0 +1,18 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignRightMultipleGroups: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlignRightSingleItem.tsx

@@ -0,0 +1,8 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignRightSingleItem: React.FunctionComponent = () => (
+  <Flex className="example-border">
+    <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

package/src/layouts/Flex/examples/FlexAlignSelfBaseline.tsx

@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfBaseline: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlignSelfCenter.tsx

@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfCenter: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlignSelfFlexEnd.tsx

@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfFlexEnd: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlignSelfStretch.tsx

@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlignSelfStretch: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAligningRight.tsx

@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAligningRight: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexAlternative.tsx

@@ -0,0 +1,11 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexAlternative: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexControlTextWidth.tsx

@@ -0,0 +1,17 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexControlTextWidth: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexFirstLastOrder.tsx

@@ -0,0 +1,13 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexFirstLastOrder: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexJustifyContentEnd.tsx

@@ -0,0 +1,10 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentEnd: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

package/src/layouts/Flex/examples/FlexJustifyContentFlexStart.tsx

@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentFlexStart: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

package/src/layouts/Flex/examples/FlexJustifyContentSpaceBetween.tsx

@@ -0,0 +1,9 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexJustifyContentSpaceBetween: React.FunctionComponent = () => (
+  <Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+    <FlexItem>Flex item</FlexItem>
+  </Flex>
+);

package/src/layouts/Flex/examples/FlexOrdering.tsx

@@ -0,0 +1,24 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexOrdering: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexResponsiveFirstLastOrder.tsx

@@ -0,0 +1,15 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexResponsiveFirstLastOrder: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexResponsiveOrdering.tsx

@@ -0,0 +1,25 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexResponsiveOrdering: React.FunctionComponent = () => (
+  <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>
+);

package/src/layouts/Flex/examples/FlexSwitchingColumnRow.tsx

@@ -0,0 +1,16 @@
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const FlexSwitchingColumnRow: React.FunctionComponent = () => (
+  <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>
+);