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 { } export const InputGroupBase: React.FunctionComponent = ({ - 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 f3d4ebb205c..2426a5d9e7d 100644 --- a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx +++ b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx @@ -15,11 +15,10 @@ export interface InputGroupItemProps extends React.HTMLProps { isFill?: boolean; /** Flag to indicate if the input group item is disabled. */ isDisabled?: boolean; - } export const InputGroupItem: React.FunctionComponent = ({ - className = '', + className, children, isFill = false, isBox = false, diff --git a/packages/react-core/src/components/InputGroup/InputGroupText.tsx b/packages/react-core/src/components/InputGroup/InputGroupText.tsx index 22b34fc8a46..7b3ac759110 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 { /** Additional classes added to the input group text. */ @@ -9,25 +10,27 @@ export interface InputGroupTextProps extends React.HTMLProps = ({ - className = '', + className, component = 'span', children, + isPlain, + isDisabled, ...props }: InputGroupTextProps) => { const Component = component as any; return ( - - {children} - + + + {children} + + ); }; InputGroupText.displayName = 'InputGroupText'; diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx index 08378fd11e3..c2db8ff8e3e 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, InputGroupText, InputGroupItem, TextInput, ValidatedOptions } from '@patternfly/react-core'; export const InputGroupBasic: React.FunctionComponent = () => ( @@ -14,17 +8,13 @@ export const InputGroupBasic: React.FunctionComponent = () => ( - - @example.com - + @example.com
- - - - - + + + ( - - - % - - + + % +
); diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx index 213d19c2bef..1a3ff7bc887 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, InputGroupText, InputGroupItem, TextInput } from '@patternfly/react-core'; export const InputGroupWithSiblings: React.FunctionComponent = () => ( @@ -18,11 +11,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => ( -