Skip to content

Commit a6e0821

Browse files
mcokermcoker
authored
fix(split/stack): add component prop to StackItem/SplitItem (#11170)
1 parent 71f786c commit a6e0821

File tree

8 files changed

+131
-27
lines changed

8 files changed

+131
-27
lines changed

‎packages/react-core/src/layouts/Split/Split.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import { css } from '@patternfly/react-styles';
55
export interface SplitProps extends React.HTMLProps<HTMLDivElement> {
66
/** Adds space between children. */
77
hasGutter?: boolean;
8-
/** Allows children to wrap */
8+
/** Allows children to wrap. */
99
isWrappable?: boolean;
10-
/** content rendered inside the Split layout */
10+
/** content rendered inside the split layout. */
1111
children?: React.ReactNode;
12-
/** additional classes added to the Split layout */
12+
/** Additional classes added to the split layout. */
1313
className?: string;
14-
/** Sets the base component to render. defaults to div */
14+
/** Sets the base component to render. Defaults to div. */
1515
component?: React.ReactNode;
1616
}
1717

‎packages/react-core/src/layouts/Split/SplitItem.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Split/split';
33
import { css } from '@patternfly/react-styles';
44

55
export interface SplitItemProps extends React.HTMLProps<HTMLDivElement> {
6-
/** Flag indicating if this Split Layout item should fill the available horizontal space. */
6+
/** Flag indicating if this split layout item should fill the available horizontal space. */
77
isFilled?: boolean;
8-
/** content rendered inside the Split Layout Item */
8+
/** Content rendered inside the split layout item. */
99
children?: React.ReactNode;
10-
/** additional classes added to the Split Layout Item */
10+
/** Additional classes added to the split layout item. */
1111
className?: string;
12+
/** Sets the base component to render. Defaults to div. */
13+
component?: React.ReactNode;
1214
}
1315

1416
export const SplitItem: React.FunctionComponent<SplitItemProps> = ({
1517
isFilled = false,
1618
className = '',
1719
children = null,
20+
component = 'div',
1821
...props
19-
}: SplitItemProps) => (
20-
<div {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
21-
{children}
22-
</div>
23-
);
22+
}: SplitItemProps) => {
23+
const Component = component as any;
24+
return (
25+
<Component {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
26+
{children}
27+
</Component>
28+
);
29+
};
2430
SplitItem.displayName = 'SplitItem';

‎packages/react-core/src/layouts/Split/__tests__/Split.test.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,21 @@ test('Wrappable', () => {
5151
);
5252
expect(asFragment()).toMatchSnapshot();
5353
});
54+
55+
test('component on Split', () => {
56+
const { asFragment } = render(
57+
<Split component="span">
58+
<SplitItem>Basic content</SplitItem>
59+
</Split>
60+
);
61+
expect(asFragment()).toMatchSnapshot();
62+
});
63+
64+
test('component on SplitItem', () => {
65+
const { asFragment } = render(
66+
<Split>
67+
<SplitItem component="span">Basic content</SplitItem>
68+
</Split>
69+
);
70+
expect(asFragment()).toMatchSnapshot();
71+
});

‎packages/react-core/src/layouts/Split/__tests__/__snapshots__/Split.test.tsx.snap‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,34 @@ exports[`Wrappable 1`] = `
9393
</DocumentFragment>
9494
`;
9595

96+
exports[`component on Split 1`] = `
97+
<DocumentFragment>
98+
<span
99+
class="pf-v6-l-split"
100+
>
101+
<div
102+
class="pf-v6-l-split__item"
103+
>
104+
Basic content
105+
</div>
106+
</span>
107+
</DocumentFragment>
108+
`;
109+
110+
exports[`component on SplitItem 1`] = `
111+
<DocumentFragment>
112+
<div
113+
class="pf-v6-l-split"
114+
>
115+
<span
116+
class="pf-v6-l-split__item"
117+
>
118+
Basic content
119+
</span>
120+
</div>
121+
</DocumentFragment>
122+
`;
123+
96124
exports[`isFilled 1`] = `
97125
<DocumentFragment>
98126
<div

‎packages/react-core/src/layouts/Stack/Stack.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles';
55
export interface StackProps extends React.HTMLProps<HTMLDivElement> {
66
/** Adds space between children. */
77
hasGutter?: boolean;
8-
/** content rendered inside the Stack layout */
8+
/** Content rendered inside the stack layout. */
99
children?: React.ReactNode;
10-
/** additional classes added to the Stack layout */
10+
/** Additional classes added to the stack layout. */
1111
className?: string;
12-
/** Sets the base component to render. defaults to div */
12+
/** Sets the base component to render. Defaults to div. */
1313
component?: React.ReactNode;
1414
}
1515

‎packages/react-core/src/layouts/Stack/StackItem.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Stack/stack';
33
import { css } from '@patternfly/react-styles';
44

55
export interface StackItemProps extends React.HTMLProps<HTMLDivElement> {
6-
/** Flag indicating if this Stack Layout item should fill the available vertical space. */
6+
/** Flag indicating if this stack layout item should fill the available vertical space. */
77
isFilled?: boolean;
8-
/** additional classes added to the Stack Layout Item */
8+
/** Additional classes added to the stack layout item. */
99
children?: React.ReactNode;
10-
/** content rendered inside the Stack Layout Item */
10+
/** Content rendered inside the stack layout item. */
1111
className?: string;
12+
/** Sets the base component to render. Defaults to div. */
13+
component?: React.ReactNode;
1214
}
1315

1416
export const StackItem: React.FunctionComponent<StackItemProps> = ({
1517
isFilled = false,
1618
className = '',
1719
children = null,
20+
component = 'div',
1821
...props
19-
}: StackItemProps) => (
20-
<div {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
21-
{children}
22-
</div>
23-
);
22+
}: StackItemProps) => {
23+
const Component = component as any;
24+
return (
25+
<Component {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
26+
{children}
27+
</Component>
28+
);
29+
};
2430
StackItem.displayName = 'StackItem';

‎packages/react-core/src/layouts/Stack/__tests__/Stack.test.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
33
import { Stack } from '../Stack';
44
import { StackItem } from '../StackItem';
55

6-
test('isMain set to true', () => {
6+
test('isFilled set to true', () => {
77
const { asFragment } = render(
88
<Stack>
99
<StackItem isFilled>Filled content</StackItem>
@@ -12,7 +12,7 @@ test('isMain set to true', () => {
1212
expect(asFragment()).toMatchSnapshot();
1313
});
1414

15-
test('isMain defaults to false', () => {
15+
test('isFilled defaults to false', () => {
1616
const { asFragment } = render(
1717
<Stack>
1818
<StackItem>Basic content</StackItem>
@@ -29,3 +29,21 @@ test('gutter', () => {
2929
);
3030
expect(asFragment()).toMatchSnapshot();
3131
});
32+
33+
test('component on Stack', () => {
34+
const { asFragment } = render(
35+
<Stack component="span">
36+
<StackItem>Basic content</StackItem>
37+
</Stack>
38+
);
39+
expect(asFragment()).toMatchSnapshot();
40+
});
41+
42+
test('component on StackItem', () => {
43+
const { asFragment } = render(
44+
<Stack>
45+
<StackItem component="span">Basic content</StackItem>
46+
</Stack>
47+
);
48+
expect(asFragment()).toMatchSnapshot();
49+
});

‎packages/react-core/src/layouts/Stack/__tests__/__snapshots__/Stack.test.tsx.snap‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`component on Stack 1`] = `
4+
<DocumentFragment>
5+
<span
6+
class="pf-v6-l-stack"
7+
>
8+
<div
9+
class="pf-v6-l-stack__item"
10+
>
11+
Basic content
12+
</div>
13+
</span>
14+
</DocumentFragment>
15+
`;
16+
17+
exports[`component on StackItem 1`] = `
18+
<DocumentFragment>
19+
<div
20+
class="pf-v6-l-stack"
21+
>
22+
<span
23+
class="pf-v6-l-stack__item"
24+
>
25+
Basic content
26+
</span>
27+
</div>
28+
</DocumentFragment>
29+
`;
30+
331
exports[`gutter 1`] = `
432
<DocumentFragment>
533
<div
@@ -14,7 +42,7 @@ exports[`gutter 1`] = `
1442
</DocumentFragment>
1543
`;
1644

17-
exports[`isMain defaults to false 1`] = `
45+
exports[`isFilled defaults to false 1`] = `
1846
<DocumentFragment>
1947
<div
2048
class="pf-v6-l-stack"
@@ -28,7 +56,7 @@ exports[`isMain defaults to false 1`] = `
2856
</DocumentFragment>
2957
`;
3058

31-
exports[`isMain set to true 1`] = `
59+
exports[`isFilled set to true 1`] = `
3260
<DocumentFragment>
3361
<div
3462
class="pf-v6-l-stack"

0 commit comments

Comments
 (0)