@centreon/ui 26.12.4 → 26.12.5

package/package.json

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

package/src/components/Header/PageHeader/PageHeader.stories.tsx

@@ -51,6 +51,15 @@ export const WithDescription: Story = {
   render: Default.render
 };
 
+export const WithInlineDescription: Story = {
+  args: {
+    description: 'Configure the hosts monitored by your platform',
+    descriptionPosition: 'inline',
+    title: 'Hosts'
+  },
+  render: Default.render
+};
+
 export const WithMenu: Story = {
   args: {
     ...WithDescription.args,

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -7,9 +7,11 @@ type PageHeaderMainProps = {
 };
 
 const PageHeaderMain = ({ children }: PageHeaderMainProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
-  return <div className={classes.pageHeaderMain}>{children}</div>;
+  return (
+    <div className={cx(classes.pageHeaderMain, 'min-w-0')}>{children}</div>
+  );
 };
 
 export { PageHeaderMain };

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -8,37 +8,80 @@ import { useStyles } from './PageHeader.styles';
 type PageHeaderTitleProps = {
   actions?: ReactNode;
   description?: string;
+  descriptionPosition?: 'below' | 'inline';
   title: string;
 };
 
 const PageHeaderTitle = ({
   actions,
   title,
-  description
+  description,
+  descriptionPosition = 'below'
 }: PageHeaderTitleProps): ReactElement => {
   const { classes } = useStyles();
 
+  const isInline = descriptionPosition === 'inline';
+
+  const descriptionElement = description && (
+    <TextOverflowTooltip label={description}>
+      <MuiTypography
+        aria-label="page header description"
+        className={classes.pageHeaderTitleDescription}
+        variant="body2"
+      >
+        {description}
+      </MuiTypography>
+    </TextOverflowTooltip>
+  );
+
+  // Inline, the title owns its typography: the `pageHeaderTitle` rules that
+  // style the `h1` of the stacked layout only apply to that layout.
+  const titleElement = isInline ? (
+    <MuiTypography
+      aria-label="page header title"
+      className="m-0 shrink-0 font-bold leading-none"
+      component="h1"
+      variant="h5"
+    >
+      {title}
+    </MuiTypography>
+  ) : (
+    <MuiTypography aria-label="page header title" variant="h1">
+      {title}
+    </MuiTypography>
+  );
+
+  const actionsElement = actions && (
+    <div className={classes.pageHeaderTitleActions}>{actions}</div>
+  );
+
+  if (isInline) {
+    return (
+      <div className="flex min-w-0 items-baseline gap-4 self-start">
+        {titleElement}
+        {description && (
+          <>
+            <span
+              aria-hidden
+              className="shrink-0 text-2xl font-light leading-none text-header-page-description"
+            >
+              |
+            </span>
+            <div className="min-w-0">{descriptionElement}</div>
+          </>
+        )}
+        {actionsElement}
+      </div>
+    );
+  }
+
   return (
     <div className={classes.pageHeaderTitle}>
       <span>
-        <MuiTypography aria-label="page header title" variant="h1">
-          {title}
-        </MuiTypography>
-        {actions && (
-          <div className={classes.pageHeaderTitleActions}>{actions}</div>
-        )}
+        {titleElement}
+        {actionsElement}
       </span>
-      {description && (
-        <TextOverflowTooltip label={description}>
-          <MuiTypography
-            aria-label="page header description"
-            className={classes.pageHeaderTitleDescription}
-            variant="body2"
-          >
-            {description}
-          </MuiTypography>
-        </TextOverflowTooltip>
-      )}
+      {descriptionElement}
     </div>
   );
 };