feat: Add tooltip with text area (#535)

decentraland · May 3, 2024 · 7ba2345 · 7ba2345
1 parent 6c3a2b9
commit 7ba2345
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git 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
@@ -28,6 +28,19 @@ storiesOf('TextArea', module)
       cols="50"
     />
   ))
+  .add('With tooltip', () => (
+    <TextAreaField
+      value={textAreaValue}
+      label="Description"
+      rows="10"
+      cols="50"
+      maxLength={300}
+      tooltip={{
+        content: 'This is a tooltip',
+        position: 'top center'
+      }}
+    />
+  ))
   .add('Without label and max length', () => (
     <TextAreaField maxLength={300} value={textAreaValue} rows="10" cols="50" />
   ))

diff --git 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 ? (
         <div className="title">
           {props.label ? <label>{props.label}</label> : null}
+          {props.label && props.tooltip ? (
+            <InfoTooltip {...props.tooltip} />
+          ) : null}
           {props.maxLength ? (
             <span className="maxLength">
               {getInputValueLength(props.value)}/{props.maxLength}