@centreon/ui 23.10.79 → 23.10.80

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -70,6 +70,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
   (theme, { hasHeader }) => ({
     widgetContainer: {
       height: '100%',
+      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
@@ -89,7 +90,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 2) : theme.spacing(1, 2)
+      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
     }
   })
 );

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -134,7 +134,7 @@ const ResponsiveGauge = ({
             ...baseStyles,
             backgroundColor: theme.palette.background.paper,
             color: theme.palette.text.primary,
-            transform: 'translate(-50%, 0)'
+            transform: 'translate(-50%, -24px)'
           }}
           top={(tooltipTop || 0) - svgTop + 20}
         >

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -127,47 +127,54 @@ const ResponsiveSingleBar = ({
   const springStyle = useSpring({ width: metricBarWidth });
 
   return (
-    <Box
-      sx={{
+    <div
+      style={{
         height: '100%',
-        overflow: 'hidden',
-        position: 'relative',
-        width: '100%'
+        position: 'relative'
       }}
     >
-      <svg height={height} ref={svgRef} width={width}>
-        <Group.Group>
-          {text}
-          <animated.rect
-            data-testid={`${latestMetricData}-bar-${barColor}`}
-            fill={barColor}
-            height={barHeights[size]}
-            rx={4}
-            style={springStyle}
-            x={0}
-            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-          />
-          <Bar
-            fill="transparent"
-            height={barHeights[size]}
-            rx={4}
-            ry={4}
-            stroke={alpha(theme.palette.text.primary, 0.3)}
-            width={maxBarWidth}
-            x={0}
-            y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-          />
-          {thresholds.enabled && (
-            <Thresholds
-              hideTooltip={hideTooltip}
-              showTooltip={showTooltip}
-              size={size}
-              thresholds={thresholds}
-              xScale={xScale}
+      <Box
+        sx={{
+          height: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%'
+        }}
+      >
+        <svg height={height} ref={svgRef} width={width}>
+          <Group.Group>
+            {text}
+            <animated.rect
+              data-testid={`${latestMetricData}-bar-${barColor}`}
+              fill={barColor}
+              height={barHeights[size]}
+              rx={4}
+              style={springStyle}
+              x={0}
+              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
+            />
+            <Bar
+              fill="transparent"
+              height={barHeights[size]}
+              rx={4}
+              ry={4}
+              stroke={alpha(theme.palette.text.primary, 0.3)}
+              width={maxBarWidth}
+              x={0}
+              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
             />
-          )}
-        </Group.Group>
-      </svg>
+            {thresholds.enabled && (
+              <Thresholds
+                hideTooltip={hideTooltip}
+                showTooltip={showTooltip}
+                size={size}
+                thresholds={thresholds}
+                xScale={xScale}
+              />
+            )}
+          </Group.Group>
+        </svg>
+      </Box>
       <Fade in={tooltipOpen}>
         <Tooltip.Tooltip
           left={tooltipLeft}
@@ -175,7 +182,7 @@ const ResponsiveSingleBar = ({
             ...baseStyles,
             backgroundColor: theme.palette.background.paper,
             color: theme.palette.text.primary,
-            transform: `translate(-50%, ${isSmall ? -60 : -20}px)`,
+            transform: `translate(-50%, ${isSmall ? -100 : -120}px)`,
             zIndex: theme.zIndex.tooltip
           }}
           top={tooltipTop}
@@ -183,7 +190,7 @@ const ResponsiveSingleBar = ({
           {tooltipData}
         </Tooltip.Tooltip>
       </Fade>
-    </Box>
+    </div>
   );
 };
 

package/src/RichTextEditor/ContentEditable.tsx

@@ -16,9 +16,6 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()(
   (theme, { minInputHeight, editable, error }) => ({
     container: {
-      '& p': {
-        margin: 0
-      },
       backgroundColor: theme.palette.background.paper,
       border: error
         ? `1px solid ${theme.palette.error.main}`
@@ -41,6 +38,11 @@ const useStyles = makeStyles<StyleProps>()(
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
+    },
+    root: {
+      '& p,h1,h2,h3,h4,h5,h6,span': {
+        margin: 0
+      }
     }
   })
 );
@@ -121,11 +123,13 @@ const ContentEditable = ({
     const shouldResetEditorToInitialState =
       resetEditorToInitialStateCondition?.();
 
-    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
+    if (!shouldResetEditorToInitialState) {
       return;
     }
 
-    const newEditorState = editor.parseEditorState(initialEditorState);
+    const newEditorState = editor.parseEditorState(
+      initialEditorState || defaultState
+    );
 
     editor.setEditorState(newEditorState);
   }, [editorState]);
@@ -156,7 +160,8 @@ const ContentEditable = ({
   return (
     <div
       className={cx(
-        classes.container,
+        classes.root,
+        editable && classes.container,
         className,
         isFocused && classes.inputFocused
       )}

package/src/RichTextEditor/index.stories.tsx

@@ -67,6 +67,13 @@ withEditableFalse.args = {
   initialEditorState: JSON.stringify(initialEditorState)
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  editable: false,
+  editorState: JSON.stringify(initialEditorState)
+};
+
 const StoryWithEditableFalseLikePreview = (): JSX.Element => {
   const [editorState, setEditorState] =
     useState<EditorState>(initialEditorState);