@patternfly/react-core 6.4.0-prerelease.2 → 6.4.0-prerelease.3

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.4.0-prerelease.1","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.4.0-prerelease.2","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.4.0-prerelease.1","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.4.0-prerelease.2","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.4.0-prerelease.1","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.4.0-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.0-prerelease.2",
+  "version": "6.4.0-prerelease.3",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "1e63105aae6b8ac5c6896743bb06fda4c825714b"
+  "gitHead": "1127a29191a3f597052c8784e898356e001ff6e4"
 }

package/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Alert, AlertGroup, AlertVariant, InputGroup } from '@patternfly/react-core';
+import { Alert, AlertGroup, AlertVariant, Flex, FlexItem } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 interface AlertInfo {
@@ -41,17 +41,23 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-      </InputGroup>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </FlexItem>
+        <FlexItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </FlexItem>
+        <FlexItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
         {alerts.map(({ title, variant, key }) => (
           <Alert variant={variant} title={title} key={key} />

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -35,13 +35,13 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
           <button onClick={addAlertCollection} type="button" className={btnClasses}>
             Add alert collection
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -39,23 +39,23 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add single success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add single danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add single info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -58,23 +58,23 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add single success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add single danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add single info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -39,23 +39,23 @@ export const AlertGroupToast: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add toast success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add toast danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add toast info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup hasAnimations isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (
           <Alert

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -5,8 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup,
-  InputGroupItem
+  Flex,
+  FlexItem
 } from '@patternfly/react-core';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
@@ -58,23 +58,23 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
 
   return (
     <Fragment>
-      <InputGroup style={{ marginBottom: '16px' }}>
-        <InputGroupItem>
+      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>
+        <FlexItem>
           <button onClick={addSuccessAlert} type="button" className={btnClasses}>
             Add toast success alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addDangerAlert} type="button" className={btnClasses}>
             Add toast danger alert
           </button>
-        </InputGroupItem>
-        <InputGroupItem>
+        </FlexItem>
+        <FlexItem>
           <button onClick={addInfoAlert} type="button" className={btnClasses}>
             Add toast info alert
           </button>
-        </InputGroupItem>
-      </InputGroup>
+        </FlexItem>
+      </Flex>
       <AlertGroup
         hasAnimations
         isToast