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

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