diff --git a/.gitignore b/.gitignore index 7749274597..041b12c0fe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .idea .vscode +.history .DS_Store *.log diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index d48512cffe..dd16dc69d1 100644 --- a/src/components/controls/TextArea/README.md +++ b/src/components/controls/TextArea/README.md @@ -28,3 +28,4 @@ | type | `string` | `-` | The control's type | | value | `string` | `-` | The control's value | | view | `'normal' \| 'clear'` | `'normal'` | The control's view. `'normal'` by default | +| note | `React.ReactNode` | `-` | An optional element displayed under the lower right corner of the control and sharing the place with the error container | diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 51f2460be7..974eeb3e42 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -48,10 +48,28 @@ $block: '.#{variables.$ns-new}text-area'; } } + &__additional { + display: flex; + justify-content: space-between; + vertical-align: top; + } + + &__note { + margin-left: auto; + } + &__error { @include mixins.text-body-1(); color: var(--g-color-text-danger); + + &:not(:last-child) { + margin-right: var(--g-spacing-2); + } + } + + &__note, + &__error { margin-top: 2px; } diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx index bea492e9ec..a12dc737a1 100644 --- a/src/components/controls/TextArea/TextArea.tsx +++ b/src/components/controls/TextArea/TextArea.tsx @@ -27,6 +27,8 @@ export type TextAreaProps = BaseInputControlProps & { minRows?: number; /** The number of maximum visible text lines for the control. Ignored if `rows` is specified */ maxRows?: number; + /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */ + note?: React.ReactNode; }; export type TextAreaPin = InputControlPin; export type TextAreaSize = InputControlSize; @@ -54,6 +56,7 @@ export const TextArea = React.forwardRef(functio className, qa, controlProps, + note, onUpdate, onChange, } = props; @@ -156,7 +159,12 @@ export const TextArea = React.forwardRef(functio /> )} - {isErrorMsgVisible &&
{error}
} + {(isErrorMsgVisible || note) && ( +
+ {isErrorMsgVisible &&
{error}
} + {note &&
{note}
} +
+ )} ); }); diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx index 9029b456c8..8f950cad79 100644 --- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx +++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx @@ -3,6 +3,7 @@ import React from 'react'; import block from 'bem-cn-lite'; import {Checkbox} from '../../../Checkbox'; +import {Text} from '../../../Text'; import {TextArea} from '../TextArea'; import type {TextAreaProps} from '../TextArea'; @@ -64,6 +65,21 @@ export function TextAreaShowcase() { controlProps={{style: {resize: 'vertical'}}} rows={4} /> +