fix(split/stack): add component prop to StackItem/SplitItem

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

@@ -5,13 +5,13 @@ import { css } from '@patternfly/react-styles';
 export interface SplitProps extends React.HTMLProps<HTMLDivElement> {
   /** Adds space between children. */
   hasGutter?: boolean;
-  /** Allows children to wrap */
+  /** Allows children to wrap. */
   isWrappable?: boolean;
-  /** content rendered inside the Split layout */
+  /** content rendered inside the split layout. */
   children?: React.ReactNode;
-  /** additional classes added to the Split layout */
+  /** Additional classes added to the split layout. */
   className?: string;
-  /** Sets the base component to render. defaults to div */
+  /** Sets the base component to render. Defaults to div. */
   component?: React.ReactNode;
 }
 

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

@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Split/split';
 import { css } from '@patternfly/react-styles';
 
 export interface SplitItemProps extends React.HTMLProps<HTMLDivElement> {
-  /** Flag indicating if this Split Layout item should fill the available horizontal space. */
+  /** Flag indicating if this split layout item should fill the available horizontal space. */
   isFilled?: boolean;
-  /** content rendered inside the Split Layout Item */
+  /** Content rendered inside the split layout item. */
   children?: React.ReactNode;
-  /** additional classes added to the Split Layout Item */
+  /** Additional classes added to the split layout item. */
   className?: string;
+  /** Sets the base component to render. Defaults to div. */
+  component?: React.ReactNode;
 }
 
 export const SplitItem: React.FunctionComponent<SplitItemProps> = ({
   isFilled = false,
   className = '',
   children = null,
+  component = 'div',
   ...props
-}: SplitItemProps) => (
-  <div {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
-    {children}
-  </div>
-);
+}: SplitItemProps) => {
+  const Component = component as any;
+  return (
+    <Component {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
+      {children}
+    </Component>
+  );
+};
 SplitItem.displayName = 'SplitItem';

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

@@ -51,3 +51,21 @@ test('Wrappable', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('component on Split', () => {
+  const { asFragment } = render(
+    <Split component="span">
+      <SplitItem>Basic content</SplitItem>
+    </Split>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('component on SplitItem', () => {
+  const { asFragment } = render(
+    <Split>
+      <SplitItem component="span">Basic content</SplitItem>
+    </Split>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -93,6 +93,34 @@ exports[`Wrappable 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component on Split 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-l-split"
+  >
+    <div
+      class="pf-v6-l-split__item"
+    >
+      Basic content
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component on SplitItem 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-l-split"
+  >
+    <span
+      class="pf-v6-l-split__item"
+    >
+      Basic content
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`isFilled 1`] = `
 <DocumentFragment>
   <div

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

@@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles';
 export interface StackProps extends React.HTMLProps<HTMLDivElement> {
   /** Adds space between children. */
   hasGutter?: boolean;
-  /** content rendered inside the Stack layout */
+  /** Content rendered inside the stack layout. */
   children?: React.ReactNode;
-  /** additional classes added to the Stack layout */
+  /** Additional classes added to the stack layout. */
   className?: string;
-  /** Sets the base component to render. defaults to div */
+  /** Sets the base component to render. Defaults to div. */
   component?: React.ReactNode;
 }
 

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

@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Stack/stack';
 import { css } from '@patternfly/react-styles';
 
 export interface StackItemProps extends React.HTMLProps<HTMLDivElement> {
-  /** Flag indicating if this Stack Layout item should fill the available vertical space. */
+  /** Flag indicating if this stack layout item should fill the available vertical space. */
   isFilled?: boolean;
-  /** additional classes added to the Stack Layout Item */
+  /** Additional classes added to the stack layout item. */
   children?: React.ReactNode;
-  /** content rendered inside the Stack Layout Item */
+  /** Content rendered inside the stack layout item. */
   className?: string;
+  /** Sets the base component to render. Defaults to div. */
+  component?: React.ReactNode;
 }
 
 export const StackItem: React.FunctionComponent<StackItemProps> = ({
   isFilled = false,
   className = '',
   children = null,
+  component = 'div',
   ...props
-}: StackItemProps) => (
-  <div {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
-    {children}
-  </div>
-);
+}: StackItemProps) => {
+  const Component = component as any;
+  return (
+    <Component {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
+      {children}
+    </Component>
+  );
+};
 StackItem.displayName = 'StackItem';

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

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Stack } from '../Stack';
 import { StackItem } from '../StackItem';
 
-test('isMain set to true', () => {
+test('isFilled set to true', () => {
   const { asFragment } = render(
     <Stack>
       <StackItem isFilled>Filled content</StackItem>
@@ -12,7 +12,7 @@ test('isMain set to true', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('isMain defaults to false', () => {
+test('isFilled defaults to false', () => {
   const { asFragment } = render(
     <Stack>
       <StackItem>Basic content</StackItem>
@@ -29,3 +29,21 @@ test('gutter', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('component on Stack', () => {
+  const { asFragment } = render(
+    <Stack component="span">
+      <StackItem>Basic content</StackItem>
+    </Stack>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('component on StackItem', () => {
+  const { asFragment } = render(
+    <Stack>
+      <StackItem component="span">Basic content</StackItem>
+    </Stack>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`component on Stack 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-l-stack"
+  >
+    <div
+      class="pf-v6-l-stack__item"
+    >
+      Basic content
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component on StackItem 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-l-stack"
+  >
+    <span
+      class="pf-v6-l-stack__item"
+    >
+      Basic content
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`gutter 1`] = `
 <DocumentFragment>
   <div
@@ -14,7 +42,7 @@ exports[`gutter 1`] = `
 </DocumentFragment>
 `;
 
-exports[`isMain defaults to false 1`] = `
+exports[`isFilled defaults to false 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-l-stack"
@@ -28,7 +56,7 @@ exports[`isMain defaults to false 1`] = `
 </DocumentFragment>
 `;
 
-exports[`isMain set to true 1`] = `
+exports[`isFilled set to true 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-l-stack"