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

[EuiTextArea] Add alert icon when isInvalid and isLoading support #6679

Merged
merged 3 commits into from
Apr 4, 2023
Merged

[EuiTextArea] Add alert icon when isInvalid and isLoading support #6679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79f6fbc
EuiTextArea: add form control layout icons to bottom-right corner
cee-chen Apr 4, 2023
16470f8
Add `isLoading` prop support
cee-chen Apr 4, 2023
efac898
changelog
cee-chen Apr 4, 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 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 canLoading={false}>
<DisplayToggles>
<EuiTextArea
placeholder="Placeholder text"
aria-label="Use aria labels when no actual label is in use"
Expand Down
20 changes: 14 additions & 6 deletions src/components/form/text_area/__snapshots__/text_area.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiTextArea is rendered 1`] = `
<textarea
aria-label="aria-label"
class="euiTextArea euiTextArea--resizeVertical testClass1 testClass2"
data-test-subj="test subject string"
rows="6"
/>
<div
class="euiFormControlLayout euiFormControlLayout--euiTextArea"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<textarea
aria-label="aria-label"
class="euiTextArea euiTextArea--resizeVertical testClass1 testClass2"
data-test-subj="test subject string"
rows="6"
/>
</div>
</div>
`;
9 changes: 9 additions & 0 deletions src/components/form/text_area/_text_area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@
}
}

.euiFormControlLayout--euiTextArea {
height: auto;

.euiFormControlLayoutIcons {
top: auto;
bottom: $euiFormControlPadding;
}
}

// resize modifiers
$textareaResizing: (
vertical: 'resizeVertical',
Expand Down
37 changes: 24 additions & 13 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 @@ -9,11 +9,14 @@
import React, { TextareaHTMLAttributes, Ref, FunctionComponent } from 'react';
import { CommonProps } from '../../common';
import classNames from 'classnames';

import { EuiFormControlLayout } from '../form_control_layout';
import { EuiValidatableControl } from '../validatable_control';
import { useFormContext } from '../eui_form_context';

export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
CommonProps & {
isLoading?: boolean;
isInvalid?: boolean;
/**
* Expand to fill 100% of the parent.
Expand Down Expand Up @@ -50,6 +53,7 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
fullWidth = defaultFullWidth,
id,
inputRef,
isLoading,
isInvalid,
name,
placeholder,
Expand Down Expand Up @@ -79,18 +83,25 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
}

return (
<EuiValidatableControl isInvalid={isInvalid}>
<textarea
className={classes}
{...rest}
rows={definedRows}
name={name}
id={id}
ref={inputRef}
placeholder={placeholder}
>
{children}
</textarea>
</EuiValidatableControl>
<EuiFormControlLayout
fullWidth={fullWidth}
isLoading={isLoading}
isInvalid={isInvalid}
className="euiFormControlLayout--euiTextArea"
>
<EuiValidatableControl isInvalid={isInvalid}>
<textarea
className={classes}
{...rest}
rows={definedRows}
name={name}
id={id}
ref={inputRef}
placeholder={placeholder}
>
{children}
</textarea>
</EuiValidatableControl>
</EuiFormControlLayout>
);
};
2 changes: 2 additions & 0 deletions upcoming_changelogs/6679.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Updated `EuiTextArea` to display an alert icon when `isInvalid`
- Updated `EuiTextArea` to support the `isLoading` prop