Skip to content
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

Jump to bottom

[EuiTextArea] Add isClearable and icon props #7449

Merged
merged 4 commits into from
Jan 5, 2024
Merged

[EuiTextArea] Add isClearable and icon props #7449

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ea9da3
text area clearable
shahzad31 Jan 5, 2024
4c2fc10
change log
shahzad31 Jan 5, 2024
6b869c2
Misc copy tweaks
cee-chen Jan 5, 2024
e887df5
Fix clear logic to work in both controlled and uncontrolled
cee-chen Jan 5, 2024
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
1 change: 1 addition & 0 deletions changelogs/upcoming/7449.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated `EuiTextArea` to accept isClearable and icon as props
2 changes: 1 addition & 1 deletion src-docs/src/views/form_controls/text_area.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default () => {

return (
/* DisplayToggles wrapper for Docs only */
<DisplayToggles>
<DisplayToggles canClear>
<EuiTextArea
placeholder="Placeholder text"
aria-label="Use aria labels when no actual label is in use"
Expand Down
22 changes: 22 additions & 0 deletions src/components/form/text_area/text_area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import classNames from 'classnames';
import { EuiFormControlLayout } from '../form_control_layout';
import { EuiValidatableControl } from '../validatable_control';
import { useFormContext } from '../eui_form_context';
import { EuiFormControlLayoutIconsProps } from '../form_control_layout/form_control_layout_icons';

export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
CommonProps & {
Expand All @@ -25,6 +26,11 @@ export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
*/
fullWidth?: boolean;
compressed?: boolean;
/**
* Shows a button that quickly clears any input
*/
isClearable?: boolean;
icon?: EuiFormControlLayoutIconsProps['icon'];
Copy link
Member

Choose a reason for hiding this comment

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

Not a blocking question, just me being curious - what was the impetus behind adding icon as well? Is it needed in Kibana also, or was it mostly just for parity with EuiFieldText?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, it's also needed in kibana


/**
* Which direction, if at all, should the textarea resize
Expand Down Expand Up @@ -59,6 +65,8 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
placeholder,
resize = 'vertical',
rows,
isClearable,
icon,
...rest
} = props;

Expand All @@ -82,11 +90,25 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
definedRows = 6;
}

const onClear = () => {
if (rest.onChange) {
rest.onChange({
target: { value: '' },
} as React.ChangeEvent<HTMLTextAreaElement>);
}
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
};

return (
<EuiFormControlLayout
fullWidth={fullWidth}
isLoading={isLoading}
isInvalid={isInvalid}
clear={
isClearable
? { onClick: onClear, 'data-test-subj': 'clearTextAreaButton' }
: undefined
}
icon={icon}
className="euiFormControlLayout--euiTextArea"
>
<EuiValidatableControl isInvalid={isInvalid}>
Expand Down
Loading