@patternfly/react-core 6.1.0-prerelease.5 → 6.1.0-prerelease.6

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.5","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.5","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.4","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.5",
+  "version": "6.1.0-prerelease.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.1.0-prerelease.2",
-    "@patternfly/react-styles": "^6.1.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.1.0-prerelease.1",
+    "@patternfly/react-icons": "^6.1.0-prerelease.3",
+    "@patternfly/react-styles": "^6.1.0-prerelease.2",
+    "@patternfly/react-tokens": "^6.1.0-prerelease.2",
     "focus-trap": "7.6.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.2",
+    "@patternfly/patternfly": "6.1.0-prerelease.4",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "62ed6ddebb30b6436da315e9e41897c1ac7561a8"
+  "gitHead": "53da56fdc7b7b149101c9d1156b5999dda3ba579"
 }

package/src/components/Checkbox/examples/CheckboxReversed.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CheckboxReversed: React.FunctionComponent = () => (
-  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+  <Checkbox labelPosition="start" label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
 );

package/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;
 }
 

package/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';

package/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();
+});

package/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

package/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;
 }
 

package/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';

package/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();
+});

package/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"