@patternfly/react-core 6.4.1-prerelease.5 → 6.4.1-prerelease.7

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.6","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.6","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.6","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.5",
+  "version": "6.4.1-prerelease.7",
   "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": "2be14960edd09e98cd2176f7715473c14be77162"
 }

package/src/demos/AlertGroup.md

@@ -15,6 +15,6 @@ This demonstrates how you can assemble a full page view including the use of ale
 
 ### Alert group toast with notification drawer
 
-```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
+```ts file="examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx" isFullscreen
 
 ```

package/src/demos/BackToTop.md

@@ -11,5 +11,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 Note that `tabIndex={0}` is added to the scrolling `PageSection` of the page to allow keyboard users the ability to focus and scroll.
 
-```js isFullscreen file="./examples/BackToTop/BackToTopNameDemo.tsx"
+```ts file="examples/BackToTop/BackToTopNameDemo.tsx" isFullscreen
 ```

package/src/demos/CardView/CardView.md

@@ -27,5 +27,5 @@ This demonstrates how you can assemble a full page view that contains a grid of
 
 ### Card view
 
-```js file="./examples/CardView.tsx" isFullscreen
+```ts file="examples/CardView.tsx" isFullscreen
 ```

package/src/demos/DataListDemo.md

@@ -23,24 +23,24 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ### Basic
 
-```js file="./DataList/examples/DataListBasic.tsx" isFullscreen
+```ts file="DataList/examples/DataListBasic.tsx" isFullscreen
 
 ```
 
 ### Expandable control in toolbar
 
-```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+```ts file="DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 
 ```
 
 ### Actionable
 
-```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+```ts file="DataList/examples/DataListActionable.tsx" isFullscreen
 
 ```
 
 ### Static bottom pagination
 
-```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
+```ts file="DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
 
 ```

package/src/demos/DescriptionList/DescriptionList.md

@@ -12,10 +12,10 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic
 
-```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+```ts file="examples/DescriptionListBasic.tsx" isFullscreen
 ```
 
 ### In drawer
 
-```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
+```ts file="examples/DescriptionListInDrawer.tsx" isFullscreen
 ```

package/src/demos/Nav.md

@@ -19,45 +19,45 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 
 ### Default nav
 
-```js file='./examples/Nav/NavDefault.tsx' isFullscreen
+```ts file="./examples/Nav/NavDefault.tsx" isFullscreen
 ```
 
 ### Grouped nav
 
-```js file='./examples/Nav/NavGrouped.tsx' isFullscreen
+```ts file="./examples/Nav/NavGrouped.tsx" isFullscreen
 ```
 
 ### Expandable nav
 
-```js file='./examples/Nav/NavExpandable.tsx' isFullscreen
+```ts file="./examples/Nav/NavExpandable.tsx" isFullscreen
 ```
 
 ### Horizontal nav
 
-```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen
+```ts file="./examples/Nav/NavHorizontal.tsx" isFullscreen
 ```
 
 ### Horizontal subnav
 
-```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen
+```ts file="./examples/Nav/NavWithSubnav.tsx" isFullscreen
 ```
 
 ### Horizontal nav with horizontal subnav
 
-```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
+```ts file="./examples/Nav/NavHorizontalWithSubnav.tsx" isFullscreen
 ```
 
 ### Manual nav
 
-```js file='./examples/Nav/NavManual.tsx' isFullscreen
+```ts file="./examples/Nav/NavManual.tsx" isFullscreen
 ```
 
 ### Flyout nav
 
-```js file='./examples/Nav/NavFlyout.tsx' isFullscreen
+```ts file="./examples/Nav/NavFlyout.tsx" isFullscreen
 ```
 
 ### Drilldown nav
 
-```js isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 ```

package/src/demos/PrimaryDetail.md

@@ -31,32 +31,32 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Primary-detail full page
 
-```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
 ```
 
 ### Primary-detail content padding
 
-```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
 
 ```
 
 ### Primary-detail card view
 
-```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
 ```
 
 ### Primary-detail simple list in card
 
-```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail data list in card
 
-```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail inline modifier
 
-```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
 
 ```

package/src/demos/RTL/RTL.md

@@ -28,6 +28,6 @@ This demonstrates how the UI adapts to the writing mode of the page.
 
 ### Paginated table
 
-```js file="./examples/PaginatedTable.tsx" isFullscreen
+```ts file="examples/PaginatedTable.tsx" isFullscreen
 
 ```

package/src/demos/Toolbar.md

@@ -20,5 +20,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 This is an example of toolbar usage in log viewer.
 
-```js file="./examples/Toolbar/ConsoleLogViewerToolbar.tsx" isFullscreen
+```ts file="examples/Toolbar/ConsoleLogViewerToolbar.tsx" isFullscreen
 ```

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Switch } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
-export const Name = () => {
+export const BacktoTopNameDemo: React.FunctionComponent = () => {
   const [isAlwaysVisible, setIsAlwaysVisible] = useState(false);
 
   const handleChange = (_event, isChecked) => {

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