@patternfly/react-core 6.4.1-prerelease.8 → 6.4.1

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

@@ -11,20 +11,52 @@ import './flex.css';
 
 ### Basic
 
-```ts file="FlexBasic.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<Flex>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+</Flex>;
 ```
 
 ### Nesting
 
-```ts file="FlexNesting.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexNestedItems.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
@@ -41,206 +73,574 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Individually spaced
 
-```ts file="FlexIndividuallySpaced.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexSpacingXl.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexSpacingNone.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
 ### Row gap
 
-```ts file="FlexRowGap.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexColumnGap.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexGap.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexDefaultLayout.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexInline.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexCanGrow.tsx"
-
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+<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
 
-```ts file="FlexAdjustingWidth.tsx"
-
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+<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
 
-```ts file="FlexColumnWidths.tsx"
-
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+<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
 
 ### Column layout
 
-```ts file="FlexColumnLayout.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<Flex direction={{ default: 'column' }}>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+</Flex>;
 ```
 
 ### Stacking elements
 
-```ts file="FlexStackingElements.tsx"
-
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+<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
 
-```ts file="FlexNestingInColumns.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
 ### Switching between direction column and row
 
-```ts file="FlexSwitchingColumnRow.tsx"
+```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>;
 ```
 
 ### Controlling width of text
 
-```ts file="FlexControlTextWidth.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAligningRight.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAlignRightSingleItem.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<Flex className="example-border">
+  <FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+</Flex>;
 ```
 
 ### Align right on multiple groups
 
-```ts file="FlexAlignRightMultipleGroups.tsx"
-
+```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>;
 ```
 
 ### Align adjacent content
 
-```ts file="FlexAlignAdjacentContent.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAlignSelfFlexEnd.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAlignSelfCenter.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAlignSelfBaseline.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexAlignSelfStretch.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexJustifyContentEnd.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexJustifyContentSpaceBetween.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+  <FlexItem>Flex item</FlexItem>
+</Flex>;
 ```
 
 ### Justify content flex start
 
-```ts file="FlexJustifyContentFlexStart.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexFirstLastOrder.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexResponsiveFirstLastOrder.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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
 
-```ts file="FlexOrdering.tsx"
-
+```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>;
 ```
 
 ### Responsive ordering
 
-```ts file="FlexResponsiveOrdering.tsx"
-
+```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>;
 ```
 
 ### Alternative components
 
-```ts file="FlexAlternative.tsx"
+```js
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+<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/Level/examples/Level.md

@@ -11,12 +11,24 @@ import './level.css';
 
 ### Basic
 
-```ts file="LevelBasic.tsx"
-
+```js
+import { Level, LevelItem } from '@patternfly/react-core';
+
+<Level>
+  <LevelItem>Level Item</LevelItem>
+  <LevelItem>Level Item</LevelItem>
+  <LevelItem>Level Item</LevelItem>
+</Level>;
 ```
 
 ### With gutters
 
-```ts file="LevelWithGutters.tsx"
+```js
+import { Level, LevelItem } from '@patternfly/react-core';
 
+<Level hasGutter>
+  <LevelItem>Level Item</LevelItem>
+  <LevelItem>Level Item</LevelItem>
+  <LevelItem>Level Item</LevelItem>
+</Level>;
 ```