feat: add helper text

src/components/input/MultiSelectChipInput.tsx

@@ -11,12 +11,14 @@ import {
   Typography,
 } from '@mui/material';
 
+import { useBuilderTranslation } from '@/config/i18n';
 import {
   MULTI_SELECT_CHIP_ADD_BUTTON_ID,
   MULTI_SELECT_CHIP_CONTAINER_ID,
   MULTI_SELECT_CHIP_INPUT_ID,
   buildMultiSelectChipsSelector,
 } from '@/config/selectors';
+import { BUILDER } from '@/langs/constants';
 
 import { useMultiSelectChipInput } from './MultiSelectChipInput.hook';
 
@@ -31,6 +33,7 @@ export const MultiSelectChipInput = ({
   label,
   onSave,
 }: Props): JSX.Element | null => {
+  const { t } = useBuilderTranslation();
   const {
     values,
     currentValue,
@@ -68,12 +71,12 @@ export const MultiSelectChipInput = ({
       {...params}
       variant="outlined"
       label={label}
+      helperText={t(BUILDER.ITEM_TAGS_HELPER_TEXT)}
       inputProps={{
         ...params.inputProps,
         value: currentValue,
       }}
       error={hasError}
-      // helperText={error}
       sx={{
         // Avoid to resize the textfield on hover when next tag will be on new line.
         '& .MuiAutocomplete-input': {

src/langs/constants.ts

@@ -308,6 +308,7 @@ export const BUILDER = {
   ITEM_TAGS_CHIP_BUTTON_EDIT: 'ITEM_TAGS_CHIP_BUTTON_EDIT',
   ITEM_TAGS_TITLE: 'ITEM_TAGS_TITLE',
   ITEM_TAGS_LABEL: 'ITEM_TAGS_LABEL',
+  ITEM_TAGS_HELPER_TEXT: 'ITEM_TAGS_HELPER_TEXT',
   ITEM_TAGS_MISSING_WARNING: 'ITEM_TAGS_MISSING_WARNING',
   ITEMS_GRID_ITEMS_PER_PAGE_TITLE: 'ITEMS_GRID_ITEMS_PER_PAGE_TITLE',
   ITEMS_TABLE_ACTIONS_HEADER: 'ITEMS_TABLE_ACTIONS_HEADER',

src/langs/en.json

@@ -161,6 +161,7 @@
   "ITEM_TAGS_CHIP_BUTTON_EDIT": "Edit Tags",
   "ITEM_TAGS_TITLE": "Tags",
   "ITEM_TAGS_LABEL": "Edit tags",
+  "ITEM_TAGS_HELPER_TEXT": "Use the 'Enter' key to add a new tag",
   "ITEM_TAGS_MISSING_WARNING": "Add at least one tag to better explain who could use your publication",
   "ITEMS_GRID_ITEMS_PER_PAGE_TITLE": "Items per page",
   "ITEMS_TABLE_ACTIONS_HEADER": "Actions",