@centreon/ui 26.12.2 → 26.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.2",
+  "version": "26.12.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/CollapsibleGroup.tsx

@@ -10,7 +10,6 @@ import {
 
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
 import type { Group } from './Inputs/models';
 
@@ -23,22 +22,6 @@ interface Props {
   isCollapsible: boolean;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  expandCollapseIcon: {
-    justifySelf: 'flex-end'
-  },
-  groupTitleContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  title: {},
-  tooltip: {
-    maxWidth: theme.spacing(60)
-  }
-}));
-
 const CollapsibleGroup = ({
   children,
   isCollapsible,
@@ -47,7 +30,6 @@ const CollapsibleGroup = ({
   defaultIsOpen = false,
   className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
   const { t } = useTranslation();
 
   const [isOpen, setIsOpen] = useState(isCollapsible && defaultIsOpen);
@@ -56,7 +38,7 @@ const CollapsibleGroup = ({
     setIsOpen((currentIsOpen) => !currentIsOpen);
   };
 
-  const containerClassName = className || '';
+  const containerClassName = `flex items-center gap-x-2 ${className || ''}`;
 
   const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
@@ -66,7 +48,7 @@ const CollapsibleGroup = ({
       isCollapsible ? (
         <ListItemButton
           aria-label={group?.name}
-          className={`${cx(classes.groupTitleContainer, containerClassName)} bg-background-listing-header`}
+          className={`${containerClassName} bg-background-listing-header rounded-lg`}
           dense
           disableGutters
           disableRipple
@@ -75,18 +57,9 @@ const CollapsibleGroup = ({
           {containerComponentChildren}
         </ListItemButton>
       ) : (
-        <Box className={cx(classes.groupTitleContainer, containerClassName)}>
-          {containerComponentChildren}
-        </Box>
+        <Box className={containerClassName}>{containerComponentChildren}</Box>
       ),
-    [
-      isCollapsible,
-      classes.groupTitleContainer,
-      containerClassName,
-      cx,
-      group?.name,
-      toggle
-    ]
+    [isCollapsible, containerClassName, group?.name, toggle]
   );
 
   return (
@@ -100,7 +73,7 @@ const CollapsibleGroup = ({
             data-testid={`${group?.name}-header`}
           >
             <Typography
-              className="groupText scroll-m-12 snap-start"
+              className="groupText scroll-m-12 snap-start text-base font-medium"
               variant="h6"
               {...group?.titleAttributes}
               data-section-group-form-id={group?.name}
@@ -110,7 +83,7 @@ const CollapsibleGroup = ({
             {group?.EndIcon && (
               <Tooltip
                 classes={{
-                  tooltip: classes.tooltip
+                  tooltip: 'max-w-120'
                 }}
                 placement="top"
                 title={group?.TooltipContent ? <group.TooltipContent /> : ''}

package/src/Form/Form.browser.test.tsx

@@ -1,15 +1,19 @@
 import { Typography } from '@mui/material';
 
+import { ThemeMode, userAtom } from '@centreon/ui-context';
+
 import { faker } from '@faker-js/faker';
 import { rs } from '@rstest/core';
 import { render } from '@test-setup/render';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useFormikContext } from 'formik';
+import { createStore, Provider } from 'jotai';
 import { object } from 'yup';
 
 import type { SelectEntry } from '..';
 import { Button } from '../components';
+import ThemeProvider from '../ThemeProvider';
 import { Form } from './Form';
 import { type InputProps, InputType } from './Inputs/models';
 
@@ -443,3 +447,107 @@ describe('Form with sections', () => {
     );
   });
 });
+
+// The theme mode comes from the user atom, and the Tailwind tokens from the
+// `dark` class on the document.
+const initializeFormTitles = (themeMode: ThemeMode): void => {
+  const store = createStore();
+  store.set(userAtom, { ...store.get(userAtom), themeMode });
+
+  document.documentElement.classList.toggle(
+    'dark',
+    themeMode === ThemeMode.dark
+  );
+
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Form
+          areGroupsOpen
+          groups={[{ name: 'Titles section', order: 1 }]}
+          initialValues={{ gridField: '', topLevelField: '' }}
+          inputs={[
+            {
+              additionalLabel: 'Top level block title',
+              fieldName: 'topLevelField',
+              group: 'Titles section',
+              label: 'Top level field',
+              type: InputType.Text
+            },
+            {
+              fieldName: '',
+              grid: {
+                columns: [
+                  {
+                    additionalLabel: 'Grid block title',
+                    fieldName: 'gridField',
+                    label: 'Grid field',
+                    type: InputType.Text
+                  }
+                ]
+              },
+              group: 'Titles section',
+              label: 'Grid',
+              type: InputType.Grid
+            }
+          ]}
+          isCollapsible
+          submit={rs.fn()}
+          validationSchema={object()}
+        />
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+const textPrimaryColor = {
+  [ThemeMode.dark]: 'rgb(255, 255, 255)',
+  [ThemeMode.light]: 'rgb(0, 0, 0)'
+};
+
+[ThemeMode.light, ThemeMode.dark].forEach((themeMode) => {
+  describe(`Form titles in ${themeMode} mode`, () => {
+    beforeEach(() => {
+      expect.hasAssertions();
+    });
+    beforeEach(() => initializeFormTitles(themeMode));
+
+    afterEach(() => {
+      document.documentElement.classList.remove('dark');
+    });
+
+    it('displays the section title in 16px medium on a 24px line', async () => {
+      const title = await screen.findByText('Titles section');
+
+      expect(title).toHaveStyle({
+        fontSize: '16px',
+        fontWeight: '500',
+        lineHeight: '24px'
+      });
+    });
+
+    it('rounds the collapsible section header with an 8px radius', async () => {
+      expect(await screen.findByLabelText('Titles section')).toHaveStyle({
+        borderRadius: '8px'
+      });
+    });
+
+    it('displays the grid block title in 16px bold with the text colour', async () => {
+      expect(await screen.findByText('Grid block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+
+    it('displays the top level block title like the grid block title', async () => {
+      expect(await screen.findByText('Top level block title')).toHaveStyle({
+        color: textPrimaryColor[themeMode],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px'
+      });
+    });
+  });
+});

package/src/Form/Inputs/Grid.tsx

@@ -45,8 +45,7 @@ const Grid = ({
           <Box key={key as string} sx={{ width: '100%' }}>
             {field.additionalLabel && (
               <Typography
-                className={field?.additionalLabelClassName}
-                sx={{ color: 'primary.main', marginBottom: 0.5 }}
+                className={`mb-1 text-base font-bold text-text-primary ${field?.additionalLabelClassName || ''}`}
                 variant="h6"
               >
                 {field.additionalLabel}

package/src/Form/Inputs/index.tsx

@@ -26,7 +26,6 @@ import {
   toPairs
 } from 'ramda';
 import { Fragment, useMemo } from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { GroupDirection } from '..';
 import CollapsibleGroup from '../CollapsibleGroup';
@@ -104,42 +103,6 @@ export const getInput = cond<
   [T, always(TextInput)]
 ]);
 
-interface StylesProps {
-  groupDirection?: GroupDirection;
-}
-
-const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
-  additionalLabel: {
-    marginBottom: theme.spacing(0.5)
-  },
-  buttons: {
-    columnGap: theme.spacing(2),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end'
-  },
-  divider: {
-    margin: equals(groupDirection, GroupDirection.Horizontal)
-      ? theme.spacing(0, 2)
-      : theme.spacing(2, 0)
-  },
-  groups: {
-    display: 'flex',
-    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
-      ? 'row'
-      : 'column'
-  },
-  inputs: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: theme.spacing(2, 0),
-    rowGap: theme.spacing(2)
-  },
-  inputWrapper: {
-    width: '100%'
-  }
-}));
-
 interface Props {
   areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
@@ -161,7 +124,7 @@ const Inputs = ({
   areGroupsOpen,
   inputsClassName
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ groupDirection });
+  const isHorizontal = equals(groupDirection, GroupDirection.Horizontal);
   const formikContext = useFormikContext<FormikValues>();
 
   const groupsName = pluck('name', groups);
@@ -217,7 +180,7 @@ const Inputs = ({
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
-    <div className={classes.groups}>
+    <div className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'}`}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
         const hasGroupTitle = not(isNil(groupName));
 
@@ -238,7 +201,9 @@ const Inputs = ({
                 hasGroupTitle={hasGroupTitle}
                 isCollapsible={isCollapsible}
               >
-                <div className={cx(classes.inputs, inputsClassName)}>
+                <div
+                  className={`flex flex-col my-4 gap-y-4 ${inputsClassName || ''}`}
+                >
                   {groupedInputs.map((inputProps) => {
                     const key =
                       isNotNil(inputProps.label) || isNotEmpty(inputProps.label)
@@ -257,14 +222,11 @@ const Inputs = ({
                     const Input = getInput(inputProps.type);
 
                     return (
-                      <div className={classes.inputWrapper} key={key as string}>
+                      <div className="w-full" key={key as string}>
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={cx(
-                              classes.additionalLabel,
-                              inputProps?.additionalLabelClassName
-                            )}
-                            variant="body1"
+                            className={`mb-1 text-base font-bold text-text-primary ${inputProps?.additionalLabelClassName || ''}`}
+                            variant="h6"
                           >
                             {inputProps.additionalLabel}
                           </Typography>
@@ -282,13 +244,9 @@ const Inputs = ({
               hasGroupTitle &&
               not(equals(lastGroup, groupName as string)) && (
                 <Divider
-                  className={classes.divider}
+                  className={isHorizontal ? 'my-0 mx-4' : 'my-4 mx-0'}
                   flexItem
-                  orientation={
-                    equals(groupDirection, GroupDirection.Horizontal)
-                      ? 'vertical'
-                      : 'horizontal'
-                  }
+                  orientation={isHorizontal ? 'vertical' : 'horizontal'}
                 />
               )}
           </Fragment>