@patternfly/react-core 5.0.0-alpha.104 → 5.0.0-alpha.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.104",
+  "version": "5.0.0-alpha.106",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "71527891f7cac3fdaa4b067d83c7af495e760f72"
+  "gitHead": "5627bdc7f27951dc9485026dd832585760749a66"
 }

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

@@ -6,6 +6,7 @@ import {
   AlertActionCloseButton,
   AlertVariant,
   InputGroup,
+  InputGroupItem,
   useInterval
 } from '@patternfly/react-core';
 
@@ -45,12 +46,16 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
-          Start async alerts
-        </button>
-        <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
-          Stop async alerts
-        </button>
+        <InputGroupItem>
+          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+            Start async alerts
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
+            Stop async alerts
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion aria-live="assertive">
         {alerts.map(({ title, variant, key }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
@@ -34,9 +35,11 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addAlertCollection} type="button" className={btnClasses}>
-          Add alert collection
-        </button>
+        <InputGroupItem>
+          <button onClick={addAlertCollection} type="button" className={btnClasses}>
+            Add alert collection
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
@@ -38,15 +39,21 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion>
         {alerts.map(({ title, variant, key }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
@@ -57,15 +58,21 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
@@ -38,15 +39,21 @@ export const AlertGroupToast: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (

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

@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
@@ -57,15 +58,21 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -3,7 +3,7 @@ import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
 import { MenuToggle, MenuToggleElement } from '../MenuToggle';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
@@ -259,67 +259,71 @@ export const CalendarMonth = ({
           </Button>
         </div>
         <InputGroup>
-          <div className={styles.calendarMonthHeaderMonth}>
-            <span id={hiddenMonthId} hidden>
-              Month
-            </span>
-            <Select
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
-                  isExpanded={isSelectOpen}
-                  style={{width: "140px"} as React.CSSProperties }
-                >
-                  {monthFormatted}
-                </MenuToggle>
-              )}
-              aria-labelledby={hiddenMonthId}
-              isOpen={isSelectOpen}
-              onOpenChange={(isOpen) => {
-                setIsSelectOpen(isOpen);
-                onSelectToggle(isOpen);
-              }}
-              onSelect={(ev, monthNum) => {
-                // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                // to see the SelectOption as a child so it doesn't close the Popover.
-                setTimeout(() => {
-                  setIsSelectOpen(false);
-                  onSelectToggle(false);
+          <InputGroupItem isFill>
+            <div className={styles.calendarMonthHeaderMonth}>
+              <span id={hiddenMonthId} hidden>
+                Month
+              </span>
+              <Select
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsSelectOpen(!isSelectOpen)}
+                    isExpanded={isSelectOpen}
+                    style={{ width: '140px' } as React.CSSProperties}
+                  >
+                    {monthFormatted}
+                  </MenuToggle>
+                )}
+                aria-labelledby={hiddenMonthId}
+                isOpen={isSelectOpen}
+                onOpenChange={(isOpen) => {
+                  setIsSelectOpen(isOpen);
+                  onSelectToggle(isOpen);
+                }}
+                onSelect={(ev, monthNum) => {
+                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
+                  // to see the SelectOption as a child so it doesn't close the Popover.
+                  setTimeout(() => {
+                    setIsSelectOpen(false);
+                    onSelectToggle(false);
+                    const newDate = new Date(focusedDate);
+                    newDate.setMonth(Number(monthNum as string));
+                    setFocusedDate(newDate);
+                    setHoveredDate(newDate);
+                    setShouldFocus(false);
+                    onMonthChange(ev, newDate);
+                  }, 0);
+                }}
+                selected={monthFormatted}
+              >
+                <SelectList>
+                  {longMonths.map((longMonth, index) => (
+                    <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                      {longMonth}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+            </div>
+          </InputGroupItem>
+          <InputGroupItem>
+            <div className={styles.calendarMonthHeaderYear}>
+              <TextInput
+                aria-label={yearInputAriaLabel}
+                type="number"
+                value={yearFormatted}
+                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
                   const newDate = new Date(focusedDate);
-                  newDate.setMonth(Number(monthNum as string));
+                  newDate.setFullYear(+year);
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
                   onMonthChange(ev, newDate);
-                }, 0);
-              }}
-              selected={monthFormatted}
-            >
-              <SelectList>
-                {longMonths.map((longMonth, index) => (
-                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
-                    {longMonth}
-                  </SelectOption>
-                ))}
-              </SelectList>
-            </Select>
-          </div>
-          <div className={styles.calendarMonthHeaderYear}>
-            <TextInput
-              aria-label={yearInputAriaLabel}
-              type="number"
-              value={yearFormatted}
-              onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                const newDate = new Date(focusedDate);
-                newDate.setFullYear(+year);
-                setFocusedDate(newDate);
-                setHoveredDate(newDate);
-                setShouldFocus(false);
-                onMonthChange(ev, newDate);
-              }}
-            />
-          </div>
+                }}
+              />
+            </div>
+          </InputGroupItem>
         </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
           <Button

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DatePicker/date-pick
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
-import { InputGroup } from '../InputGroup/InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
@@ -248,28 +248,32 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <TextInput
-              isDisabled={isDisabled}
-              aria-label={ariaLabel}
-              placeholder={placeholder}
-              validated={errorText.trim() ? 'error' : 'default'}
-              value={value}
-              onChange={onTextInput}
-              onBlur={onInputBlur}
-              onKeyPress={onKeyPress}
-              {...inputProps}
-            />
-            <button
-              ref={buttonRef}
-              // TODO: Removed style follow up work with issue #8457
-              className={css(buttonStyles.button, buttonStyles.modifiers.control)}
-              aria-label={buttonAriaLabel}
-              type="button"
-              onClick={() => setPopoverOpen(!popoverOpen)}
-              disabled={isDisabled}
-            >
-              <OutlinedCalendarAltIcon />
-            </button>
+            <InputGroupItem isFill>
+              <TextInput
+                isDisabled={isDisabled}
+                aria-label={ariaLabel}
+                placeholder={placeholder}
+                validated={errorText.trim() ? 'error' : 'default'}
+                value={value}
+                onChange={onTextInput}
+                onBlur={onInputBlur}
+                onKeyPress={onKeyPress}
+                {...inputProps}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <button
+                ref={buttonRef}
+                // TODO: Removed style follow up work with issue #8457
+                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                aria-label={buttonAriaLabel}
+                type="button"
+                onClick={() => setPopoverOpen(!popoverOpen)}
+                disabled={isDisabled}
+              >
+                <OutlinedCalendarAltIcon />
+              </button>
+            </InputGroupItem>
           </InputGroup>
         </div>
       </Popover>