diff --git a/src/components/TextAreaField/TextAreaField.css b/src/components/TextAreaField/TextAreaField.css index 042785d5..52d14473 100644 --- a/src/components/TextAreaField/TextAreaField.css +++ b/src/components/TextAreaField/TextAreaField.css @@ -9,6 +9,11 @@ font-family: var(--font-family); color: var(--secondary-text); display: flex; + align-items: center; +} + +.dcl.text-area > .title > .dui-info-tooltip__trigger { + margin-left: 7px; } .dcl.text-area > .title > .maxLength { diff --git a/src/components/TextAreaField/TextAreaField.stories.tsx b/src/components/TextAreaField/TextAreaField.stories.tsx index 9650f4db..5b07210a 100644 --- a/src/components/TextAreaField/TextAreaField.stories.tsx +++ b/src/components/TextAreaField/TextAreaField.stories.tsx @@ -28,6 +28,19 @@ storiesOf('TextArea', module) cols="50" /> )) + .add('With tooltip', () => ( + + )) .add('Without label and max length', () => ( )) diff --git a/src/components/TextAreaField/TextAreaField.tsx b/src/components/TextAreaField/TextAreaField.tsx index 477d5c2b..12a8eedb 100644 --- a/src/components/TextAreaField/TextAreaField.tsx +++ b/src/components/TextAreaField/TextAreaField.tsx @@ -5,6 +5,7 @@ import TextArea, { } from 'semantic-ui-react/dist/commonjs/addons/TextArea/TextArea' import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon' import { getInputValueLength } from '../../lib/input' +import { InfoTooltip, InfoTooltipProps } from '../InfoTooltip' import './TextAreaField.css' export type TextAreaFieldProps = TextAreaProps & { @@ -13,6 +14,7 @@ export type TextAreaFieldProps = TextAreaProps & { error?: string warning?: string info?: string + tooltip?: InfoTooltipProps } function renderMessage(props: TextAreaFieldProps) { @@ -58,6 +60,9 @@ export const TextAreaField = (props: TextAreaFieldProps): JSX.Element => { {props.label || props.maxLength !== undefined ? (
{props.label ? : null} + {props.label && props.tooltip ? ( + + ) : null} {props.maxLength ? ( {getInputValueLength(props.value)}/{props.maxLength}