Skip to content

chore(flex): convert examples to typescript part-1 #12058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 3 commits into from
Oct 21, 2025
Merged

chore(flex): convert examples to typescript part-1 #12058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9deb97
chore(flex): convert examples to typescript
Mash707 Oct 14, 2025
12b4917
converted examples
Mash707 Oct 14, 2025
f3c592b
converted examples
Mash707 Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 17 additions & 209 deletions packages/react-core/src/layouts/Flex/examples/Flex.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,52 +11,20 @@ import './flex.css';

### Basic

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexBasic.tsx"

<Flex>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
</Flex>;
```

### Nesting

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexNesting.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexNestedItems.tsx"

<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
Expand All @@ -73,252 +41,92 @@ The flex layout provides two ways of spacing its direct children.

### Individually spaced

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexIndividuallySpaced.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexSpacingXl.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexSpacingNone.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexRowGap.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexColumnGap.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexGap.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexDefaultLayout.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexInline.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexCanGrow.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexAdjustingWidth.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexColumnWidths.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexColumnLayout.tsx"

<Flex direction={{ default: 'column' }}>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
</Flex>;
```

### Stacking elements

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexStackingElements.tsx"

<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

```js
import { Flex, FlexItem } from '@patternfly/react-core';
```ts file="FlexNestingInColumns.tsx"

<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
Expand Down
18 changes: 18 additions & 0 deletions packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Flex, FlexItem } from '@patternfly/react-core';

export const FlexAdjustingWidth: React.FunctionComponent = () => (
<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>
);
11 changes: 11 additions & 0 deletions packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Flex, FlexItem } from '@patternfly/react-core';

export const FlexBasic: React.FunctionComponent = () => (
<Flex>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
</Flex>
);
18 changes: 18 additions & 0 deletions packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Flex, FlexItem } from '@patternfly/react-core';

export const FlexCanGrow: React.FunctionComponent = () => (
<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>
);
16 changes: 16 additions & 0 deletions packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Flex, FlexItem } from '@patternfly/react-core';

export const FlexColumnGap: React.FunctionComponent = () => (
<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>
);
9 changes: 9 additions & 0 deletions packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Flex, FlexItem } from '@patternfly/react-core';

export const FlexColumnLayout: React.FunctionComponent = () => (
<Flex direction={{ default: 'column' }}>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
<FlexItem>Flex item</FlexItem>
</Flex>
);
Loading
Loading