From 7d2b421047f4bd9dce2b9a9f74592f50552f73f6 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Wed, 24 May 2023 10:22:07 -0400
Subject: [PATCH 1/5] feat(Input group): Simplified API

---
 .../components/InputGroup/InputGroupItem.tsx  |  6 ++--
 .../components/InputGroup/InputGroupText.tsx  |  2 +-
 .../InputGroup/examples/InputGroup.md         |  2 +-
 .../InputGroup/examples/InputGroupBasic.tsx   | 20 +++---------
 .../examples/InputGroupWithSiblings.tsx       | 27 +++-------------
 .../src/components/InputGroup/index.ts        |  1 -
 .../src/components/Slider/Slider.tsx          |  8 ++---
 .../__snapshots__/Slider.test.tsx.snap        |  4 +--
 .../cypress/integration/inputgroup.spec.ts    |  4 ---
 .../demos/InputGroupDemo/InputGroupDemo.tsx   | 31 +++++++------------
 10 files changed, 29 insertions(+), 76 deletions(-)

diff --git a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
index f3d4ebb205c..95406713942 100644
--- a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
+import { InputGroupText } from './InputGroupText';
 
 export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group item. */
@@ -15,11 +16,10 @@ export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
   isFill?: boolean;
   /** Flag to indicate if the input group item is disabled. */
   isDisabled?: boolean;
-
 }
 
 export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
-  className = '',
+  className,
   children,
   isFill = false,
   isBox = false,
@@ -38,7 +38,7 @@ export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
     )}
     {...props}
   >
-    {children}
+    {isBox ?  <InputGroupText> {children} </InputGroupText> : children}
   </div>
 );
 InputGroupItem.displayName = 'InputGroupItem';
diff --git a/packages/react-core/src/components/InputGroup/InputGroupText.tsx b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
index 22b34fc8a46..e9000667b48 100644
--- a/packages/react-core/src/components/InputGroup/InputGroupText.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
@@ -12,7 +12,7 @@ export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | H
 }
 
 export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
-  className = '',
+  className,
   component = 'span',
   children,
   ...props
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index 5095fe18168..e682570ab29 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -2,7 +2,7 @@
 id: Input group
 section: components
 cssPrefix: null
-propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
+propComponents: ['InputGroup', 'InputGroupItem']
 ---
 
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
index 08378fd11e3..37fc186036f 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import {
-  InputGroup,
-  InputGroupText,
-  InputGroupItem,
-  TextInput,
-  ValidatedOptions
-} from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const InputGroupBasic: React.FunctionComponent = () => (
   <React.Fragment>
@@ -14,16 +8,12 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       <InputGroupItem isFill>
         <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
       </InputGroupItem>
-      <InputGroupItem isBox>
-        <InputGroupText id="email-example">@example.com</InputGroupText>
-      </InputGroupItem>
+      <InputGroupItem isBox>@example.com</InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
       <InputGroupItem isBox>
-        <InputGroupText id="username">
-          <AtIcon />
-        </InputGroupText>
+        <AtIcon />
       </InputGroupItem>
       <InputGroupItem isFill>
         <TextInput
@@ -40,9 +30,7 @@ export const InputGroupBasic: React.FunctionComponent = () => (
         <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
       </InputGroupItem>
       <InputGroupItem isPlain isBox>
-        <InputGroupText id="plain-example">
-          %
-        </InputGroupText>
+        %
       </InputGroupItem>
     </InputGroup>
   </React.Fragment>
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
index 213d19c2bef..562b63a83d5 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import {
-  Button,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  InputGroupItem,
-  TextInput,
-} from '@patternfly/react-core';
+import { Button, TextArea, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
 
 export const InputGroupWithSiblings: React.FunctionComponent = () => (
   <React.Fragment>
@@ -18,11 +11,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         </Button>
       </InputGroupItem>
       <InputGroupItem isFill>
-        <TextArea
-          name="textarea1"
-          id="textarea1"
-          aria-label="textarea with buttons"
-        />
+        <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
       </InputGroupItem>
       <InputGroupItem>
         <Button variant="control">Button</Button>
@@ -39,11 +28,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         <Button variant="control">Button</Button>
       </InputGroupItem>
       <InputGroupItem isFill>
-        <TextArea
-          name="textarea2"
-          id="textarea2"
-          aria-label="textarea with 3 buttons"
-        />
+        <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />
       </InputGroupItem>
       <InputGroupItem>
         <Button variant="control">Button</Button>
@@ -52,9 +37,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
     <br />
     <InputGroup>
       <InputGroupItem isBox>
-        <InputGroupText>
-          <DollarSignIcon />
-        </InputGroupText>
+        <DollarSignIcon />
       </InputGroupItem>
       <InputGroupItem isFill>
         <TextInput
@@ -65,7 +48,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         />
       </InputGroupItem>
       <InputGroupItem isBox>
-        <InputGroupText>.00</InputGroupText>
+        .00
       </InputGroupItem>
     </InputGroup>
   </React.Fragment>
diff --git a/packages/react-core/src/components/InputGroup/index.ts b/packages/react-core/src/components/InputGroup/index.ts
index a14b2b665db..859228f31f2 100644
--- a/packages/react-core/src/components/InputGroup/index.ts
+++ b/packages/react-core/src/components/InputGroup/index.ts
@@ -1,3 +1,2 @@
 export * from './InputGroup';
-export * from './InputGroupText';
 export * from './InputGroupItem';
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 4b8472ac1f3..26b90f2075d 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/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, InputGroupItem } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
@@ -334,11 +334,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         <InputGroup>
           <InputGroupItem isFill>{textInput}</InputGroupItem>
           <InputGroupItem isBox>
-            <InputGroupText
-              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
-            >
-              {inputLabel}
-            </InputGroupText>
+            {inputLabel}
           </InputGroupItem>
         </InputGroup>
       );
diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index 9f05e7f0b7a..82445a6ee79 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -442,7 +442,7 @@ exports[`slider renders slider with input 1`] = `
           <span
             class="pf-v5-c-input-group__text"
           >
-            %
+             % 
           </span>
         </div>
       </div>
@@ -521,7 +521,7 @@ exports[`slider renders slider with input above thumb 1`] = `
             <span
               class="pf-v5-c-input-group__text"
             >
-              %
+               % 
             </span>
           </div>
         </div>
diff --git a/packages/react-integration/cypress/integration/inputgroup.spec.ts b/packages/react-integration/cypress/integration/inputgroup.spec.ts
index 26184be0d36..24d94686e76 100644
--- a/packages/react-integration/cypress/integration/inputgroup.spec.ts
+++ b/packages/react-integration/cypress/integration/inputgroup.spec.ts
@@ -2,10 +2,6 @@ describe('Input Group Demo Test', () => {
   it('Navigate to demo section', () => {
     cy.visit('http://localhost:3000/input-group-demo-nav-link');
   });
-  it.skip('Verify text input', () => {
-    cy.get('#textarea1').type('Hi');
-    cy.get('#textarea1').should('have.value', 'Hi');
-  });
 
   it('Verify number input only allows numbers', () => {
     const text = cy.get('#textInput5');
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
index 12652628a2d..877dc79c006 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
@@ -9,7 +9,6 @@ import {
   ButtonVariant,
   TextArea,
   InputGroup,
-  InputGroupText,
   InputGroupItem,
   TextInput,
   Popover,
@@ -102,8 +101,8 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
             <Dropdown
               onSelect={this.onSelect}
               isOpen={this.state.isOpen}
-              onOpenChange={(isOpen) => this.setState({ isOpen })}
-              toggle={(toggleRef) => (
+              onOpenChange={(isOpen: any) => this.setState({ isOpen })}
+              toggle={(toggleRef: any) => (
                 <MenuToggle ref={toggleRef} onClick={this.onToggle} isExpanded={this.state.isOpen}>
                   {this.state.selected ? this.state.selected : 'Dropdown'}
                 </MenuToggle>
@@ -128,16 +127,14 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         <br />
         <br />
         <InputGroup>
-          <InputGroupItem>
-            <InputGroupText>
-              <DollarSignIcon />
-            </InputGroupText>
+          <InputGroupItem isBox>
+            <DollarSignIcon />
           </InputGroupItem>
           <InputGroupItem isFill>
             <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
           </InputGroupItem>
-          <InputGroupItem>
-            <InputGroupText>.00</InputGroupText>
+          <InputGroupItem isBox>
+            .00
           </InputGroupItem>
         </InputGroup>
         <br />
@@ -147,16 +144,14 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
             <TextInput id="textInput6" type="email" aria-label="email input field" />
           </InputGroupItem>
           <InputGroupItem isBox>
-            <InputGroupText id="email-example">@example.com</InputGroupText>
+            @example.com
           </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
           <InputGroupItem isBox>
-            <InputGroupText id="username" aria-label="@">
-              <AtIcon />
-            </InputGroupText>
+            <AtIcon />
           </InputGroupItem>
           <InputGroupItem isFill>
             <TextInput
@@ -170,10 +165,8 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         <br />
         <br />
         <InputGroup>
-          <InputGroupItem>
-            <InputGroupText component="label" htmlFor="textInput9">
-              <CalendarAltIcon />
-            </InputGroupText>
+          <InputGroupItem isBox>
+            <CalendarAltIcon />
           </InputGroupItem>
           <InputGroupItem>
             <TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
@@ -216,9 +209,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
             <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
           </InputGroupItem>
           <InputGroupItem isPlain isBox>
-            <InputGroupText id="plain-example">
-              %
-            </InputGroupText>
+            %
           </InputGroupItem>
         </InputGroup>
       </React.Fragment>

From 5b24b2cc9f117fd0b3bf018576936fc959f15bbb Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 25 May 2023 19:20:36 -0400
Subject: [PATCH 2/5] updates from pr review

---
 .../src/components/InputGroup/InputGroup.tsx  |  2 +-
 .../components/InputGroup/InputGroupItem.tsx  |  3 +-
 .../components/InputGroup/InputGroupText.tsx  | 24 +++++++++------
 .../InputGroup/examples/InputGroup.md         |  2 +-
 .../InputGroup/examples/InputGroupBasic.tsx   | 12 ++++----
 .../examples/InputGroupWithSiblings.tsx       | 10 +++----
 .../src/components/InputGroup/index.ts        |  1 +
 .../src/components/Slider/Slider.tsx          | 10 ++++---
 .../demos/InputGroupDemo/InputGroupDemo.tsx   | 29 +++++++++----------
 9 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/packages/react-core/src/components/InputGroup/InputGroup.tsx b/packages/react-core/src/components/InputGroup/InputGroup.tsx
index 0dd3c7bc27e..dac2c5f5559 100644
--- a/packages/react-core/src/components/InputGroup/InputGroup.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroup.tsx
@@ -15,7 +15,7 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
-  className = '',
+  className,
   children,
   innerRef,
   ...props
diff --git a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
index 95406713942..2426a5d9e7d 100644
--- a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { InputGroupText } from './InputGroupText';
 
 export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group item. */
@@ -38,7 +37,7 @@ export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
     )}
     {...props}
   >
-    {isBox ?  <InputGroupText> {children} </InputGroupText> : children}
+    {children}
   </div>
 );
 InputGroupItem.displayName = 'InputGroupItem';
diff --git a/packages/react-core/src/components/InputGroup/InputGroupText.tsx b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
index e9000667b48..797e634cfd3 100644
--- a/packages/react-core/src/components/InputGroup/InputGroupText.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
+import { InputGroupItem } from './InputGroupItem';
 
 export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | HTMLLabelElement> {
   /** Additional classes added to the input group text. */
@@ -9,25 +10,30 @@ export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | H
   children: React.ReactNode;
   /** Component that wraps the input group text. */
   component?: React.ReactNode;
+  /** Flag to to indicate if the input group item is plain. */
+  isPlain?: boolean;
 }
 
 export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
   className,
   component = 'span',
   children,
+  isPlain,
   ...props
 }: InputGroupTextProps) => {
   const Component = component as any;
   return (
-    <Component
-      className={css(
-        styles.inputGroupText,
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
+    <InputGroupItem isPlain={isPlain} isBox={true}>
+      <Component
+        className={css(
+          styles.inputGroupText,
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Component>
+    </InputGroupItem>
   );
 };
 InputGroupText.displayName = 'InputGroupText';
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index e682570ab29..151e5d83fe8 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -2,7 +2,7 @@
 id: Input group
 section: components
 cssPrefix: null
-propComponents: ['InputGroup', 'InputGroupItem']
+propComponents: ['InputGroup', 'InputGroupItem', InputGroupText]
 ---
 
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
index 37fc186036f..c2db8ff8e3e 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import { InputGroup, InputGroupItem, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { InputGroup, InputGroupText, InputGroupItem, TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const InputGroupBasic: React.FunctionComponent = () => (
   <React.Fragment>
@@ -8,13 +8,13 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       <InputGroupItem isFill>
         <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
       </InputGroupItem>
-      <InputGroupItem isBox>@example.com</InputGroupItem>
+      <InputGroupText id="email-example">@example.com</InputGroupText>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupItem isBox>
+      <InputGroupText id="username">
         <AtIcon />
-      </InputGroupItem>
+      </InputGroupText>
       <InputGroupItem isFill>
         <TextInput
           validated={ValidatedOptions.error}
@@ -29,9 +29,9 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       <InputGroupItem isFill>
         <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
       </InputGroupItem>
-      <InputGroupItem isPlain isBox>
+      <InputGroupText id="plain-example" isPlain>
         %
-      </InputGroupItem>
+      </InputGroupText>
     </InputGroup>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
index 562b63a83d5..1a3ff7bc887 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import { Button, TextArea, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
+import { Button, TextArea, InputGroup, InputGroupText, InputGroupItem, TextInput } from '@patternfly/react-core';
 
 export const InputGroupWithSiblings: React.FunctionComponent = () => (
   <React.Fragment>
@@ -36,9 +36,9 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupItem isBox>
+      <InputGroupText>
         <DollarSignIcon />
-      </InputGroupItem>
+      </InputGroupText>
       <InputGroupItem isFill>
         <TextInput
           id="textInput-with-siblings"
@@ -47,9 +47,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
           aria-label="Dollar amount input example"
         />
       </InputGroupItem>
-      <InputGroupItem isBox>
-        .00
-      </InputGroupItem>
+      <InputGroupText>.00</InputGroupText>
     </InputGroup>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/InputGroup/index.ts b/packages/react-core/src/components/InputGroup/index.ts
index 859228f31f2..afa16b47f60 100644
--- a/packages/react-core/src/components/InputGroup/index.ts
+++ b/packages/react-core/src/components/InputGroup/index.ts
@@ -1,2 +1,3 @@
 export * from './InputGroup';
 export * from './InputGroupItem';
+export * from './InputGroupText';
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 26b90f2075d..1cfac6c4735 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/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, InputGroupItem } from '../InputGroup';
+import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
@@ -333,9 +333,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       return (
         <InputGroup>
           <InputGroupItem isFill>{textInput}</InputGroupItem>
-          <InputGroupItem isBox>
-            {inputLabel}
-          </InputGroupItem>
+          <InputGroupText
+              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
+            >
+              {inputLabel}
+          </InputGroupText>
         </InputGroup>
       );
     } else {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
index 877dc79c006..00f54a66816 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
@@ -9,6 +9,7 @@ import {
   ButtonVariant,
   TextArea,
   InputGroup,
+  InputGroupText,
   InputGroupItem,
   TextInput,
   Popover,
@@ -101,8 +102,8 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
             <Dropdown
               onSelect={this.onSelect}
               isOpen={this.state.isOpen}
-              onOpenChange={(isOpen: any) => this.setState({ isOpen })}
-              toggle={(toggleRef: any) => (
+              onOpenChange={(isOpen) => this.setState({ isOpen })}
+              toggle={(toggleRef) => (
                 <MenuToggle ref={toggleRef} onClick={this.onToggle} isExpanded={this.state.isOpen}>
                   {this.state.selected ? this.state.selected : 'Dropdown'}
                 </MenuToggle>
@@ -127,15 +128,13 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         <br />
         <br />
         <InputGroup>
-          <InputGroupItem isBox>
+          <InputGroupText>
             <DollarSignIcon />
-          </InputGroupItem>
+          </InputGroupText>
           <InputGroupItem isFill>
             <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
           </InputGroupItem>
-          <InputGroupItem isBox>
-            .00
-          </InputGroupItem>
+          <InputGroupText>.00</InputGroupText>
         </InputGroup>
         <br />
         <br />
@@ -143,16 +142,14 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
           <InputGroupItem isFill>
             <TextInput id="textInput6" type="email" aria-label="email input field" />
           </InputGroupItem>
-          <InputGroupItem isBox>
-            @example.com
-          </InputGroupItem>
+          <InputGroupText id="email-example">@example.com</InputGroupText>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <InputGroupItem isBox>
+          <InputGroupText id="username" aria-label="@">
             <AtIcon />
-          </InputGroupItem>
+          </InputGroupText>
           <InputGroupItem isFill>
             <TextInput
               validated={ValidatedOptions.error}
@@ -165,9 +162,9 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
         <br />
         <br />
         <InputGroup>
-          <InputGroupItem isBox>
+          <InputGroupText component="label" htmlFor="textInput9">
             <CalendarAltIcon />
-          </InputGroupItem>
+          </InputGroupText>
           <InputGroupItem>
             <TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
           </InputGroupItem>
@@ -208,9 +205,9 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
           <InputGroupItem isFill>
             <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
           </InputGroupItem>
-          <InputGroupItem isPlain isBox>
+          <InputGroupText isPlain id="plain-example">
             %
-          </InputGroupItem>
+          </InputGroupText>
         </InputGroup>
       </React.Fragment>
     );

From 0e6f804c764673698a02f41e16c55805a1fa930d Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 25 May 2023 19:27:42 -0400
Subject: [PATCH 3/5] add isDisabled prop to InputGroupText

---
 .../src/components/InputGroup/InputGroupText.tsx    | 13 +++++--------
 .../react-core/src/components/Slider/Slider.tsx     |  6 +-----
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/InputGroup/InputGroupText.tsx b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
index 797e634cfd3..7b3ac759110 100644
--- a/packages/react-core/src/components/InputGroup/InputGroupText.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroupText.tsx
@@ -12,6 +12,8 @@ export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | H
   component?: React.ReactNode;
   /** Flag to to indicate if the input group item is plain. */
   isPlain?: boolean;
+  /** Flag to indicate if the input group text is disabled. */
+  isDisabled?: boolean;
 }
 
 export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
@@ -19,18 +21,13 @@ export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
   component = 'span',
   children,
   isPlain,
+  isDisabled,
   ...props
 }: InputGroupTextProps) => {
   const Component = component as any;
   return (
-    <InputGroupItem isPlain={isPlain} isBox={true}>
-      <Component
-        className={css(
-          styles.inputGroupText,
-          className
-        )}
-        {...props}
-      >
+    <InputGroupItem isPlain={isPlain} isBox isDisabled={isDisabled}>
+      <Component className={css(styles.inputGroupText, className)} {...props}>
         {children}
       </Component>
     </InputGroupItem>
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 1cfac6c4735..f5e48ae0244 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -333,11 +333,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       return (
         <InputGroup>
           <InputGroupItem isFill>{textInput}</InputGroupItem>
-          <InputGroupText
-              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
-            >
-              {inputLabel}
-          </InputGroupText>
+          <InputGroupText isDisabled={isDisabled}>{inputLabel}</InputGroupText>
         </InputGroup>
       );
     } else {

From b7564518f5dcf0e9c9cb61d3f2a6360e7f43f984 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 25 May 2023 20:10:14 -0400
Subject: [PATCH 4/5] update snapshots

---
 .../Slider/_tests_/__snapshots__/Slider.test.tsx.snap         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index 82445a6ee79..9f05e7f0b7a 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -442,7 +442,7 @@ exports[`slider renders slider with input 1`] = `
           <span
             class="pf-v5-c-input-group__text"
           >
-             % 
+            %
           </span>
         </div>
       </div>
@@ -521,7 +521,7 @@ exports[`slider renders slider with input above thumb 1`] = `
             <span
               class="pf-v5-c-input-group__text"
             >
-               % 
+              %
             </span>
           </div>
         </div>

From ca603a2ab6d47d6ee490540dd09f814c5a795b14 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Wed, 31 May 2023 10:14:57 -0400
Subject: [PATCH 5/5] update from review

---
 .../react-core/src/components/InputGroup/examples/InputGroup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index 151e5d83fe8..5095fe18168 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -2,7 +2,7 @@
 id: Input group
 section: components
 cssPrefix: null
-propComponents: ['InputGroup', 'InputGroupItem', InputGroupText]
+propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';