@centreon/ui 23.10.34 → 23.10.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.34",
+  "version": "23.10.36",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dialog/index.tsx

@@ -12,6 +12,8 @@ import {
   CircularProgress
 } from '@mui/material';
 
+import { DataTestAttributes } from '../@types/data-attributes';
+
 interface StylesProps {
   contentWidth?: number;
 }
@@ -47,7 +49,8 @@ export type Props = {
   onConfirm: (event, value?) => void;
   open: boolean;
   submitting?: boolean;
-} & DialogProps;
+} & DialogProps &
+  DataTestAttributes;
 
 const Dialog = ({
   open,
@@ -95,7 +98,7 @@ const Dialog = ({
         {onCancel && (
           <Button
             color="primary"
-            data-testid="cancel"
+            data-testid="Cancel"
             disabled={cancelDisabled}
             onClick={onCancel}
           >
@@ -106,7 +109,7 @@ const Dialog = ({
           aria-label={labelConfirm || ''}
           className={dialogConfirmButtonClassName}
           color="primary"
-          data-testid="confirm"
+          data-testid="Confirm"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}
           onClick={onConfirm}

package/src/Form/Inputs/Text.tsx

@@ -12,6 +12,8 @@ import {
   type as variableType
 } from 'ramda';
 
+import { InputAdornment } from '@mui/material';
+
 import { TextField, useMemoComponent } from '../..';
 
 import PasswordEndAdornment from './PasswordEndAdornment';
@@ -64,16 +66,24 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const passwordEndAdornment = useCallback(
-    (): JSX.Element | null =>
-      equals(type, InputType.Password) ? (
+  const EndAdornment = useCallback((): JSX.Element | null => {
+    if (equals(type, InputType.Password)) {
+      return (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      ) : null,
-    [isVisible]
-  );
+      );
+    }
+
+    if (text?.endAdornment) {
+      return (
+        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
+      );
+    }
+
+    return null;
+  }, [isVisible]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -97,13 +107,14 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={passwordEndAdornment}
+        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
+        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}

package/src/Form/Inputs/index.tsx

@@ -35,7 +35,6 @@ export const getInput = R.cond<
     R.equals(InputType.Radio) as (b: InputType) => boolean,
     R.always(RadioInput)
   ],
-  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
     R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
@@ -44,10 +43,6 @@ export const getInput = R.cond<
     R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
   ],
-  [
-    R.equals(InputType.Password) as (b: InputType) => boolean,
-    R.always(TextInput)
-  ],
   [
     R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
     R.always(ConnectedAutocomplete)
@@ -71,7 +66,8 @@ export const getInput = R.cond<
   [
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
-  ]
+  ],
+  [R.T, R.always(TextInput)]
 ]);
 
 interface StylesProps {

package/src/Form/Inputs/models.ts

@@ -87,7 +87,9 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
+    endAdornment?: JSX.Element;
     multilineRows?: number;
+    placeholder?: string;
     type?: string;
   };
   type: InputType;

package/src/Form/storiesData.tsx

@@ -179,6 +179,10 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
+    text: {
+      endAdornment: <MailIcon />,
+      placeholder: 'Your email here'
+    },
     type: InputType.Text
   },
   {

package/src/InputField/Text/index.tsx

@@ -166,7 +166,6 @@ const TextField = forwardRef(
                 },
                 className
               ),
-              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (