Skip to content

feat(Input group): Simplified API #9176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 31, 2023
Merged

feat(Input group): Simplified API #9176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d2b421
feat(Input group): Simplified API
May 24, 2023
5b24b2c
updates from pr review
May 25, 2023
0e6f804
add isDisabled prop to InputGroupText
May 25, 2023
b756451
update snapshots
May 26, 2023
ca603a2
update from review
May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/InputGroup/InputGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
}

export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
className = '',
className,
children,
innerRef,
...props
Expand Down
3 changes: 1 addition & 2 deletions packages/react-core/src/components/InputGroup/InputGroupItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,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,
Expand Down
23 changes: 13 additions & 10 deletions packages/react-core/src/components/InputGroup/InputGroupText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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. */
Expand All @@ -9,25 +10,27 @@ 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;
/** Flag to indicate if the input group text is disabled. */
isDisabled?: boolean;
}

export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
className = '',
className,
component = 'span',
Comment on lines +20 to 21
Copy link
Contributor

@thatblindgeye thatblindgeye May 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add props to InputGroupItem to pass down to InputGroupText? With the API update the className and component won't be able to be modified.

Copy link
Contributor Author

@tlabaj tlabaj May 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @mcoker do you think that is necessary? What is the use case where we would not want to use span?

children,
isPlain,
isDisabled,
...props
}: InputGroupTextProps) => {
const Component = component as any;
return (
<Component
className={css(
styles.inputGroupText,
className
)}
{...props}
>
{children}
</Component>
<InputGroupItem isPlain={isPlain} isBox isDisabled={isDisabled}>
<Component className={css(styles.inputGroupText, className)} {...props}>
{children}
</Component>
</InputGroupItem>
);
};
InputGroupText.displayName = 'InputGroupText';
28 changes: 8 additions & 20 deletions packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,20 @@
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 = () => (
<React.Fragment>
<InputGroup>
<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>
<InputGroupText id="email-example">@example.com</InputGroupText>
</InputGroup>
<br />
<InputGroup>
<InputGroupItem isBox>
<InputGroupText id="username">
<AtIcon />
</InputGroupText>
</InputGroupItem>
<InputGroupText id="username">
<AtIcon />
</InputGroupText>
<InputGroupItem isFill>
<TextInput
validated={ValidatedOptions.error}
Expand All @@ -39,11 +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">
%
</InputGroupText>
</InputGroupItem>
<InputGroupText id="plain-example" isPlain>
%
</InputGroupText>
</InputGroup>
</React.Fragment>
);
33 changes: 7 additions & 26 deletions packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => (
<React.Fragment>
Expand All @@ -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>
Expand All @@ -39,23 +28,17 @@ 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>
</InputGroupItem>
</InputGroup>
<br />
<InputGroup>
<InputGroupItem isBox>
<InputGroupText>
<DollarSignIcon />
</InputGroupText>
</InputGroupItem>
<InputGroupText>
<DollarSignIcon />
</InputGroupText>
<InputGroupItem isFill>
<TextInput
id="textInput-with-siblings"
Expand All @@ -64,9 +47,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
aria-label="Dollar amount input example"
/>
</InputGroupItem>
<InputGroupItem isBox>
<InputGroupText>.00</InputGroupText>
</InputGroupItem>
<InputGroupText>.00</InputGroupText>
</InputGroup>
</React.Fragment>
);
2 changes: 1 addition & 1 deletion packages/react-core/src/components/InputGroup/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export * from './InputGroup';
export * from './InputGroupText';
export * from './InputGroupItem';
export * from './InputGroupText';
8 changes: 1 addition & 7 deletions packages/react-core/src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,13 +333,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
return (
<InputGroup>
<InputGroupItem isFill>{textInput}</InputGroupItem>
<InputGroupItem isBox>
<InputGroupText
{...(isDisabled && { className: css(styles.modifiers.disabled) })}
>
{inputLabel}
</InputGroupText>
</InputGroupItem>
<InputGroupText isDisabled={isDisabled}>{inputLabel}</InputGroupText>
</InputGroup>
);
} else {
Expand Down
4 changes: 0 additions & 4 deletions packages/react-integration/cypress/integration/inputgroup.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
40 changes: 14 additions & 26 deletions ...ages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,36 +128,28 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
<br />
<br />
<InputGroup>
<InputGroupItem>
<InputGroupText>
<DollarSignIcon />
</InputGroupText>
</InputGroupItem>
<InputGroupText>
<DollarSignIcon />
</InputGroupText>
<InputGroupItem isFill>
<TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
</InputGroupItem>
<InputGroupItem>
<InputGroupText>.00</InputGroupText>
</InputGroupItem>
<InputGroupText>.00</InputGroupText>
</InputGroup>
<br />
<br />
<InputGroup>
<InputGroupItem isFill>
<TextInput id="textInput6" type="email" aria-label="email input field" />
</InputGroupItem>
<InputGroupItem isBox>
<InputGroupText id="email-example">@example.com</InputGroupText>
</InputGroupItem>
<InputGroupText id="email-example">@example.com</InputGroupText>
</InputGroup>
<br />
<br />
<InputGroup>
<InputGroupItem isBox>
<InputGroupText id="username" aria-label="@">
<AtIcon />
</InputGroupText>
</InputGroupItem>
<InputGroupText id="username" aria-label="@">
<AtIcon />
</InputGroupText>
<InputGroupItem isFill>
<TextInput
validated={ValidatedOptions.error}
Expand All @@ -170,11 +162,9 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
<br />
<br />
<InputGroup>
<InputGroupItem>
<InputGroupText component="label" htmlFor="textInput9">
<CalendarAltIcon />
</InputGroupText>
</InputGroupItem>
<InputGroupText component="label" htmlFor="textInput9">
<CalendarAltIcon />
</InputGroupText>
<InputGroupItem>
<TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
</InputGroupItem>
Expand Down Expand Up @@ -215,11 +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 id="plain-example">
%
</InputGroupText>
</InputGroupItem>
<InputGroupText isPlain id="plain-example">
%
</InputGroupText>
</InputGroup>
</React.Fragment>
);
Expand Down