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

package/src/components/Slider/Slider.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
-import { InputGroup, InputGroupText } from '../InputGroup';
+import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
@@ -333,11 +333,14 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (inputLabel) {
       return (
         <InputGroup>
-          {textInput}
-          <InputGroupText {...(isDisabled && { className: css(styles.modifiers.disabled) })}>
-            {' '}
-            {inputLabel}
-          </InputGroupText>
+          <InputGroupItem isFill>{textInput}</InputGroupItem>
+          <InputGroupItem isBox>
+            <InputGroupText
+              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
+            >
+              {inputLabel}
+            </InputGroupText>
+          </InputGroupItem>
         </InputGroup>
       );
     } else {

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -413,21 +413,29 @@ exports[`slider renders slider with input 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Slider value input"
-          class="pf-v5-c-form-control pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          type="number"
-          value="50"
-        />
-        <span
-          class="pf-v5-c-input-group__text"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Slider value input"
+            class="pf-v5-c-form-control pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="50"
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item pf-m-box"
         >
-           %
-        </span>
+          <span
+            class="pf-v5-c-input-group__text"
+          >
+            %
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -481,21 +489,29 @@ exports[`slider renders slider with input above thumb 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
-          <span
-            class="pf-v5-c-input-group__text"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-             %
-          </span>
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              class="pf-v5-c-form-control pf-v5-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
+          <div
+            class="pf-v5-c-input-group__item pf-m-box"
+          >
+            <span
+              class="pf-v5-c-input-group__text"
+            >
+              %
+            </span>
+          </div>
         </div>
       </div>
       <div

package/src/components/TimePicker/TimePicker.tsx

@@ -6,7 +6,7 @@ import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput, TextInputProps } from '../TextInput';
 import { KeyTypes } from '../../helpers/constants';
 import {
@@ -535,19 +535,21 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
         <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
           <InputGroup>
-            <div id={randomId}>
-              <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                <Popper
-                  appendTo={calculatedAppendTo}
-                  trigger={textInput}
-                  triggerRef={this.inputRef}
-                  popper={menuContainer}
-                  popperRef={this.menuRef}
-                  isVisible={isTimeOptionsOpen}
-                  zIndex={zIndex}
-                />
+            <InputGroupItem>
+              <div id={randomId}>
+                <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
+                  <Popper
+                    appendTo={calculatedAppendTo}
+                    trigger={textInput}
+                    triggerRef={this.inputRef}
+                    popper={menuContainer}
+                    popperRef={this.menuRef}
+                    isVisible={isTimeOptionsOpen}
+                    zIndex={zIndex}
+                  />
+                </div>
               </div>
-            </div>
+            </InputGroupItem>
           </InputGroup>
           {isInvalid && (
             <div className={css(datePickerStyles.datePickerHelperText)}>

package/src/demos/Button.md

@@ -15,7 +15,7 @@ Please note that only the button can be interacted with in this example. The use
 
 ```ts
 import React from 'react';
-import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';
+import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 const ProgressButton: React.FunctionComponent = () => {

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -11,6 +11,7 @@ import {
   Popper,
   Divider,
   InputGroup,
+  InputGroupItem,
   Button,
   ButtonVariant,
   SearchInput
@@ -151,21 +152,25 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       <MenuSearch>
         <MenuSearchInput>
           <InputGroup>
-            <SearchInput
-              value={searchInputValue}
-              placeholder="Search"
-              onChange={(_event, value) => onSearchInputChange(value)}
-              onKeyPress={onEnterPressed}
-              aria-labelledby="pf-context-selector-search-button-id-1"
-            />
-            <Button
-              variant={ButtonVariant.control}
-              aria-label="Search menu items"
-              id="pf-context-selector-search-button-id-1"
-              onClick={onSearchButtonClick}
-            >
-              <SearchIcon aria-hidden="true" />
-            </Button>
+            <InputGroupItem isFill>
+              <SearchInput
+                value={searchInputValue}
+                placeholder="Search"
+                onChange={(_event, value) => onSearchInputChange(value)}
+                onKeyPress={onEnterPressed}
+                aria-labelledby="pf-context-selector-search-button-id-1"
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant={ButtonVariant.control}
+                aria-label="Search menu items"
+                id="pf-context-selector-search-button-id-1"
+                onClick={onSearchButtonClick}
+              >
+                <SearchIcon aria-hidden="true" />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </MenuSearchInput>
       </MenuSearch>

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { DatePicker, Modal, ModalVariant, Button, TimePicker, InputGroup } from '@patternfly/react-core';
+import {
+  DatePicker,
+  Modal,
+  ModalVariant,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -42,8 +50,12 @@ export const SimpleModal = () => {
         ]}
       >
         <InputGroup>
-          <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          <InputGroupItem>
+            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          </InputGroupItem>
         </InputGroup>
       </Modal>
     </React.Fragment>

package/src/demos/DateTimePicker.md

@@ -21,16 +21,7 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time range picker
 
 ```js
-import {
-  Flex,
-  FlexItem,
-  InputGroup,
-  DatePicker,
-  isValidDate,
-  TimePicker,
-  yyyyMMddFormat,
-  updateDateTime
-} from '@patternfly/react-core';
+import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
   const [from, setFrom] = React.useState();
@@ -84,26 +75,34 @@ DateTimeRangePicker = () => {
     <Flex direction={{ default: 'column', lg: 'row' }}>
       <FlexItem>
         <InputGroup>
-          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          <InputGroupItem>
+            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
       <FlexItem>to</FlexItem>
       <FlexItem>
         <InputGroup>
-          <DatePicker
-            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-            onChange={onToDateChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
-            validators={[toValidator]}
-            aria-label="End date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          <InputGroupItem>
+            <DatePicker
+              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+              onChange={onToDateChange}
+              isDisabled={!isValidDate(from)}
+              rangeStart={from}
+              validators={[toValidator]}
+              aria-label="End date"
+              placeholder="YYYY-MM-DD"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
     </Flex>
   );
-};
+}
 ```

package/src/demos/PasswordGenerator.md

@@ -15,6 +15,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 import React from 'react';
 import {
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popper,
@@ -119,23 +120,27 @@ const PasswordGenerator: React.FunctionComponent = () => {
   const textInput = (
     <div ref={searchInputRef} id="password-input">
       <InputGroup>
-        <TextInput
-          onFocus={() => {
-            setIsAutocompleteOpen(true);
-          }}
-          isRequired
-          type={passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          onChange={onChange}
-        />
-        <Button
-          variant="control"
-          onClick={() => setPasswordHidden(!passwordHidden)}
-          aria-label={passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroupItem isFill>
+          <TextInput
+            onFocus={() => {
+              setIsAutocompleteOpen(true);
+            }}
+            isRequired
+            type={passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            onChange={onChange}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            onClick={() => setPasswordHidden(!passwordHidden)}
+            aria-label={passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     </div>
   );

package/src/demos/PrimaryDetail.md

@@ -58,6 +58,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -197,17 +198,21 @@ class PrimaryDetailFullPage extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="full-page-data-toolbar-input1"
-              id="full-page-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="full-page-data-toolbar-input1"
+                id="full-page-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -521,6 +526,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -659,17 +665,21 @@ class PrimaryDetailContentPadding extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="content-padding-data-toolbar-input1"
-              id="content-padding-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="content-padding-data-toolbar-input1"
+                id="content-padding-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -1996,6 +2006,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -2134,17 +2145,21 @@ class PrimaryDetailInlineModifier extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="inline-modifier-input"
-              id="inline-modifier-input"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="inline-modifier-input"
+                id="inline-modifier-input"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   CalendarMonth,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popover,
@@ -89,15 +90,17 @@ export const DateTimePicker: React.FunctionComponent = () => {
         hasAutoWidth
       >
         <InputGroup>
-          <TextInput
-            type="text"
-            id="date-time"
-            aria-label="date and time picker demo"
-            value={valueDate + ' ' + valueTime}
-            isReadOnly
-          />
-          {calendarButton}
-          {time}
+          <InputGroupItem>
+            <TextInput
+              type="text"
+              id="date-time"
+              aria-label="date and time picker demo"
+              value={valueDate + ' ' + valueTime}
+              isReadOnly
+            />
+          </InputGroupItem>
+          <InputGroupItem>{calendarButton}</InputGroupItem>
+          <InputGroupItem>{time}</InputGroupItem>
         </InputGroup>
       </Popover>
     </div>