@centreon/ui 23.10.22-MON-19195-save-dashboard-changes.2 → 23.10.22-MON-19195-save-dashboard-changes.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.22-MON-19195-save-dashboard-changes.2",
+  "version": "23.10.22-MON-19195-save-dashboard-changes.3",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-export default {
+const meta = {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,8 +26,13 @@ export default {
 
   component: ButtonSave,
 
+  parameters: {
+    chromatic: { delay: 300 }
+  },
   title: 'Button/Save'
-} as ComponentMeta<typeof ButtonSave>;
+};
+
+export default meta;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -42,7 +47,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" />
+  <ButtonSave labelSave="Save" size="medium" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -50,7 +55,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" />
+  <ButtonSave loading labelLoading="Loading" size="medium" />
 );
 
 export const succeededWithText = (): JSX.Element => (

package/src/Button/Save/index.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
 
 interface Props extends Record<string, unknown> {
   className?: string;
+  hasStartIcon?: boolean;
   labelLoading?: string;
   labelSave?: string;
   labelSucceeded?: string;
@@ -45,6 +46,7 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
+  hasStartIcon = true,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -70,9 +72,11 @@ const SaveButton = ({
           data-testid={labelSave}
           id={getNormalizedId(labelSave)}
           loading={loading}
-          loadingPosition={labelLoading && rest.startIcon ? 'start' : 'center'}
+          loadingPosition={labelLoading && hasStartIcon ? 'start' : 'center'}
           size={size}
-          startIcon={<StartIcon startIconConfig={startIconConfig} />}
+          startIcon={
+            hasStartIcon && <StartIcon startIconConfig={startIconConfig} />
+          }
           variant="contained"
           {...rest}
         >

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -70,7 +70,7 @@ const DashboardForm = ({
           .max(
             180,
             (p) =>
-              `${p.label} ${t(labelMustBeMost)} ${p.max} ${labelCharacters}`
+              `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
         name: Yup.string()

package/src/components/Modal/Modal.stories.tsx

@@ -13,7 +13,10 @@ const meta: Meta<typeof Modal> = {
       options: ['small', 'medium', 'large']
     }
   },
-  component: Modal
+  component: Modal,
+  parameters: {
+    chromatic: { delay: 300 }
+  }
 };
 
 export default meta;

package/src/components/Modal/ModalActions.tsx

@@ -30,12 +30,6 @@ const ModalActions = ({
 }: ModalActionsProps): ReactElement => {
   const { classes } = useStyles();
 
-  const icon = isDanger
-    ? {
-        startIcon: undefined
-      }
-    : null;
-
   return (
     <div className={classes.modalActions}>
       {children || (
@@ -54,13 +48,12 @@ const ModalActions = ({
             aria-label="confirm"
             color={isDanger ? 'error' : 'primary'}
             data-testid="confirm_confirmation"
+            hasStartIcon={!isDanger}
             labelLoading={labels?.loading}
             labelSave={labels?.confirm}
             loading={isLoading}
-            size="small"
             type="submit"
             onClick={() => onConfirm?.()}
-            {...icon}
           />
         </>
       )}