Skip to content

chore(grid,stack): update examples flags from js to ts #12199

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
nicolethoen merged 2 commits into from
Jan 9, 2026
+139 −120
Merged

chore(grid,stack): update examples flags from js to ts #12199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d021f8
chore(grid,stack): update examples flags from js to ts
Mash707 Jan 6, 2026
8d9179c
chore(grid,stack): update examples flags from js to ts
Mash707 Jan 6, 2026
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
112 changes: 8 additions & 104 deletions packages/react-core/src/layouts/Grid/examples/Grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,134 +12,38 @@ import './grid.css';

### Basic

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid>
<GridItem span={8}>span = 8</GridItem>
<GridItem span={4} rowSpan={2}>
span = 4, rowSpan = 2
</GridItem>
<GridItem span={2} rowSpan={3}>
span = 2, rowSpan = 3
</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={4}>span = 4</GridItem>
</Grid>;
```ts file="GridBasic.tsx"
```

### With gutters

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter>
<GridItem span={8}>span = 8</GridItem>
<GridItem span={4} rowSpan={2}>
span = 4, rowSpan = 2
</GridItem>
<GridItem span={2} rowSpan={3}>
span = 2, rowSpan = 3
</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={4}>span = 4</GridItem>
</Grid>;
```ts file="GridWithGutters.tsx"
```

### With overrides

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid sm={6} md={4} lg={3} xl2={1}>
<GridItem span={3} rowSpan={2}>
span = 3 rowSpan= 2
</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
</Grid>;
```ts file="GridWithOverrides.tsx"
```

## Ordering

### Standard ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
<GridItem order={{ default: '2' }}>Item A</GridItem>
<GridItem>Item B</GridItem>
<GridItem order={{ default: '-1' }}>Item C</GridItem>
</Grid>;
```ts file="GridStandardOrdering.tsx"
```

### Responsive ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={3}>
<GridItem order={{ lg: '2' }}>Item A</GridItem>
<GridItem>Item B</GridItem>
<GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
</Grid>;
```ts file="GridResponsiveOrdering.tsx"
```

### Grouped ordering

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid hasGutter span={12}>
<Grid hasGutter span={6} order={{ default: '2' }}>
<GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
<GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
<GridItem>Set 1, Item C</GridItem>
<GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
</Grid>
<Grid hasGutter span={6}>
<GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
<GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
<GridItem>Set 2, Item C</GridItem>
<GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
</Grid>
</Grid>;
```ts file="GridGroupingOrdering.tsx"

```
Comment on lines +42 to 44
Copy link

@coderabbitai coderabbitai bot Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Extra blank line after code fence.

There's an unnecessary blank line (line 43) between the code fence closing and the next section. This is inconsistent with the other examples in the file.

🔎 Proposed fix 
 ```ts file="GridGroupingOrdering.tsx"
-

</details>

<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
🤖 Prompt for AI Agents 
In @packages/react-core/src/layouts/Grid/examples/Grid.md around lines 42 - 44,
Remove the extra blank line immediately following the closing triple-backtick of
the GridGroupingOrdering.tsx code fence in Grid.md so the closing ``` is
directly followed by the next section; locate the code fence that wraps
GridGroupingOrdering.tsx and delete the single blank line between the fence and
the subsequent content to match the other examples.


### Alternative components

```js
import { Grid, GridItem } from '@patternfly/react-core';

<Grid component="ul">
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
</Grid>;
```ts file="GridAlternativeComponents.tsx"
```
11 changes: 11 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridAlternativeComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridAlternativeComponents: React.FunctionComponent = () => (
<Grid component="ul">
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
<GridItem component="li">Grid item</GridItem>
</Grid>
);
22 changes: 22 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridBasic: React.FunctionComponent = () => (
<Grid>
<GridItem span={8}>span = 8</GridItem>
<GridItem span={4} rowSpan={2}>
span = 4, rowSpan = 2
</GridItem>
<GridItem span={2} rowSpan={3}>
span = 2, rowSpan = 3
</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={4}>span = 4</GridItem>
</Grid>
);
18 changes: 18 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridGroupingOrdering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridGroupingOrdering: React.FunctionComponent = () => (
<Grid hasGutter span={12}>
<Grid hasGutter span={6} order={{ default: '2' }}>
<GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
<GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
<GridItem>Set 1, Item C</GridItem>
<GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
</Grid>
<Grid hasGutter span={6}>
<GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
<GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
<GridItem>Set 2, Item C</GridItem>
<GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
</Grid>
</Grid>
);
9 changes: 9 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridResponsiveOrdering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridResponsiveOrdering: React.FunctionComponent = () => (
<Grid hasGutter span={3}>
<GridItem order={{ lg: '2' }}>Item A</GridItem>
<GridItem>Item B</GridItem>
<GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
</Grid>
);
9 changes: 9 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridStandardOrdering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridStandardOrdering: React.FunctionComponent = () => (
<Grid hasGutter span={3}>
<GridItem order={{ default: '2' }}>Item A</GridItem>
<GridItem>Item B</GridItem>
<GridItem order={{ default: '-1' }}>Item C</GridItem>
</Grid>
);
22 changes: 22 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridWithGutters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridWithGutters: React.FunctionComponent = () => (
<Grid hasGutter>
<GridItem span={8}>span = 8</GridItem>
<GridItem span={4} rowSpan={2}>
span = 4, rowSpan = 2
</GridItem>
<GridItem span={2} rowSpan={3}>
span = 2, rowSpan = 3
</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={2}>span = 2</GridItem>
<GridItem span={4}>span = 4</GridItem>
<GridItem span={4}>span = 4</GridItem>
</Grid>
);
20 changes: 20 additions & 0 deletions packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Grid, GridItem } from '@patternfly/react-core';

export const GridWithOverrides: React.FunctionComponent = () => (
<Grid sm={6} md={4} lg={3} xl2={1}>
<GridItem span={3} rowSpan={2}>
span = 3 rowSpan= 2
Copy link

@coderabbitai coderabbitai bot Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent spacing in text content.

The spacing around the equals sign is inconsistent: "span = 3" uses spaces while "rowSpan= 2" is missing a space before the equals sign.

🔎 Proposed fix 
-      span = 3 rowSpan= 2
+      span = 3 rowSpan = 2
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
span = 3 rowSpan= 2
span = 3 rowSpan = 2
🤖 Prompt for AI Agents 
In @packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx at line
6, The text content in the GridWithOverrides example has inconsistent spacing
around assignment-like tokens: "span = 3" vs "rowSpan= 2"; update the example in
GridWithOverrides (where "span" and "rowSpan" appear) to use consistent spacing
around equals (e.g., "span = 3" and "rowSpan = 2") so both tokens match the
repo's spacing style.

</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
<GridItem>Grid Item</GridItem>
</Grid>
);
18 changes: 2 additions & 16 deletions packages/react-core/src/layouts/Stack/examples/Stack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,10 @@ import './stack.css';

### Basic

```js
import { Stack, StackItem } from '@patternfly/react-core';

<Stack>
<StackItem>content</StackItem>
<StackItem isFilled>pf-m-fill</StackItem>
<StackItem>content</StackItem>
</Stack>;
```ts file="StackBasic.tsx"
```

### With gutter

```js
import { Stack, StackItem } from '@patternfly/react-core';

<Stack hasGutter>
<StackItem>content</StackItem>
<StackItem isFilled>pf-m-fill</StackItem>
<StackItem>content</StackItem>
</Stack>;
```ts file="StackWithGutter.tsx"
```
9 changes: 9 additions & 0 deletions packages/react-core/src/layouts/Stack/examples/StackBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Stack, StackItem } from '@patternfly/react-core';

export const StackBasic: React.FunctionComponent = () => (
<Stack>
<StackItem>content</StackItem>
<StackItem isFilled>pf-m-fill</StackItem>
<StackItem>content</StackItem>
</Stack>
);
9 changes: 9 additions & 0 deletions packages/react-core/src/layouts/Stack/examples/StackWithGutter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Stack, StackItem } from '@patternfly/react-core';

export const StackWithGutter: React.FunctionComponent = () => (
<Stack hasGutter>
<StackItem>content</StackItem>
<StackItem isFilled>pf-m-fill</StackItem>
<StackItem>content</StackItem>
</Stack>
);
Loading