@centreon/ui 24.4.1-MON-21276-create-basic-token.0 → 24.4.1-MON-23337-uniformize-metric-selection.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-21276-create-basic-token.0",
+  "version": "24.4.1-MON-23337-uniformize-metric-selection.3",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/Content.tsx

@@ -1,6 +1,7 @@
+import { useTranslation } from 'react-i18next';
+
 import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';
-import { Typography, TypographyTypeMap } from '@mui/material';
 
 interface Props {
   labelLoading: string;
@@ -10,42 +11,24 @@ interface Props {
   succeeded: boolean;
 }
 
-interface WrapperLabelProps {
-  label: string;
-}
-
-const WrapperLabel = ({
-  label,
-  ...rest
-}: WrapperLabelProps & TypographyTypeMap['props']): JSX.Element => {
-  return <Typography {...rest}>{label}</Typography>;
-};
-
 const Content = ({
   succeeded,
   labelSucceeded,
   labelSave,
   loading,
-  labelLoading,
-  ...rest
-}: Props & TypographyTypeMap['props']): JSX.Element | string | null => {
+  labelLoading
+}: Props): JSX.Element | string | null => {
+  const { t } = useTranslation();
+
   if (loading) {
-    return <WrapperLabel label={labelLoading} {...rest} />;
+    return t(labelLoading);
   }
 
   if (succeeded) {
-    return labelSucceeded ? (
-      <WrapperLabel label={labelSucceeded} {...rest} />
-    ) : (
-      <CheckIcon />
-    );
+    return labelSucceeded ? t(labelSucceeded) : <CheckIcon />;
   }
 
-  return labelSave ? (
-    <WrapperLabel label={labelSave} {...rest} />
-  ) : (
-    <SaveIcon />
-  );
+  return labelSave ? t(labelSave) : <SaveIcon />;
 };
 
 export default Content;

package/src/Button/Save/index.tsx

@@ -1,7 +1,7 @@
 import { any, isEmpty, isNil, not, or, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme, Tooltip, TypographyTypeMap } from '@mui/material';
+import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
 import { getNormalizedId } from '../../utils';
@@ -18,12 +18,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
 interface Props extends Record<string, unknown> {
   className?: string;
   labelLoading?: string;
-  labelProps?: TypographyTypeMap['props'];
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
-  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -47,8 +45,6 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
-  startIcon = true,
-  labelProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -77,9 +73,7 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={
-            startIcon && <StartIcon startIconConfig={startIconConfig} />
-          }
+          startIcon={<StartIcon startIconConfig={startIconConfig} />}
           variant="contained"
           {...rest}
         >
@@ -88,8 +82,7 @@ const SaveButton = ({
             labelSave,
             labelSucceeded,
             loading,
-            succeeded,
-            ...labelProps
+            succeeded
           })}
         </LoadingButton>
       </div>

package/src/components/Modal/Modal.styles.ts

@@ -24,9 +24,9 @@ const useStyles = makeStyles<{
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
       bottom: props?.bottom ?? 0,
+      height: 'calc(100vh - 90px)',
       left: props?.left ?? 0,
       margin: 0,
-      maxHeight: 'unset',
       maxWidth: 'unset',
       position: 'absolute',
       right: props?.right ?? 0,
@@ -50,11 +50,13 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     bottom: 0,
+    bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'sticky'
+    position: 'fixed',
+    right: theme.spacing(2)
   },
   modalBody: {
     '& > p': {