@centreon/ui 26.12.4 → 26.12.6

package/package.json

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

package/src/Form/Form.stories.tsx

@@ -110,3 +110,42 @@ export const exclusiveCheckboxGroup = (): JSX.Element => (
     validationSchema={object()}
   />
 );
+
+export const segmentedButtons = (): JSX.Element => (
+  <Form
+    initialValues={{
+      activeChecks: 'use_default',
+      updateMode: 'incremental'
+    }}
+    inputs={[
+      {
+        fieldName: 'activeChecks',
+        group: '',
+        label: 'Active checks enabled',
+        segmentedButtons: {
+          options: [
+            { label: 'Yes', value: 'true' },
+            { label: 'No', value: 'false' },
+            { label: 'Default', value: 'use_default' }
+          ]
+        },
+        type: InputType.SegmentedButtons
+      },
+      {
+        fieldName: 'updateMode',
+        group: '',
+        label: 'Update mode (long labels)',
+        segmentedButtons: {
+          options: [
+            { label: 'Incremental', value: 'incremental' },
+            { label: 'Replacement', value: 'replacement' },
+            { label: 'Inherit from the host template', value: 'inherit' }
+          ]
+        },
+        type: InputType.SegmentedButtons
+      }
+    ]}
+    submit={submit}
+    validationSchema={object()}
+  />
+);

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

@@ -27,38 +27,44 @@ const ValueDisplay = (): JSX.Element => {
 };
 
 interface InitializeProps {
+  columnWidth?: number;
   disabled?: boolean;
   enabled?: string;
+  segmentedOptions?: Array<{ label: string; value: string }>;
 }
 
 const initialize = ({
   enabled = 'use_default',
-  disabled = false
+  disabled = false,
+  columnWidth = 800,
+  segmentedOptions = options
 }: InitializeProps = {}): void => {
   render(
-    <Form
-      initialValues={{ enabled }}
-      inputs={[
-        {
-          dataTestId: 'enabled',
-          fieldName: 'enabled',
-          getDisabled: () => disabled,
-          group: '',
-          label: 'Notification Enabled',
-          segmentedButtons: { options },
-          type: InputType.SegmentedButtons
-        },
-        {
-          custom: { Component: ValueDisplay },
-          fieldName: 'value',
-          group: '',
-          label: 'value',
-          type: InputType.Custom
-        }
-      ]}
-      submit={rs.fn()}
-      validationSchema={object()}
-    />
+    <div style={{ width: columnWidth }}>
+      <Form
+        initialValues={{ enabled }}
+        inputs={[
+          {
+            dataTestId: 'enabled',
+            fieldName: 'enabled',
+            getDisabled: () => disabled,
+            group: '',
+            label: 'Notification Enabled',
+            segmentedButtons: { options: segmentedOptions },
+            type: InputType.SegmentedButtons
+          },
+          {
+            custom: { Component: ValueDisplay },
+            fieldName: 'value',
+            group: '',
+            label: 'value',
+            type: InputType.Custom
+          }
+        ]}
+        submit={rs.fn()}
+        validationSchema={object()}
+      />
+    </div>
   );
 };
 
@@ -104,6 +110,61 @@ describe('Segmented buttons', () => {
     expect(await button('No')).toHaveAttribute('aria-pressed', 'true');
   });
 
+  it('sizes to its labels, not to its column', async () => {
+    initialize({ columnWidth: 800 });
+
+    const group = await screen.findByTestId('enabled');
+    const widths = (
+      await Promise.all(['Yes', 'No', 'Default'].map(button))
+    ).map((element) => element.getBoundingClientRect().width);
+
+    // Three equal segments of at least 104px (26 spacing units), left aligned in the column
+    // (a pixel apart at most: the group overlaps the borders of its buttons).
+    expect(Math.max(...widths) - Math.min(...widths)).toBeLessThanOrEqual(1);
+    expect(Math.min(...widths)).toBeGreaterThanOrEqual(104);
+    expect(group.getBoundingClientRect().width).toBeLessThan(400);
+    expect(group.getBoundingClientRect().left).toBe(
+      (await screen.findByText('Notification Enabled')).getBoundingClientRect()
+        .left
+    );
+  });
+
+  it('stays inside a column narrower than its segments', async () => {
+    initialize({ columnWidth: 200 });
+
+    const group = await screen.findByTestId('enabled');
+    const wrapper = group.parentElement as HTMLElement;
+
+    expect(wrapper.getBoundingClientRect().width).toBeLessThanOrEqual(200);
+    expect(wrapper.scrollWidth).toBeGreaterThan(wrapper.clientWidth);
+    expect((await button('Default')).scrollWidth).toBeLessThanOrEqual(
+      (await button('Default')).clientWidth
+    );
+  });
+
+  it('widens every segment to the longest label, without wrapping', async () => {
+    const longLabel = 'Inherit from the host template';
+
+    initialize({
+      segmentedOptions: [
+        { label: 'Yes', value: 'true' },
+        { label: 'No', value: 'false' },
+        { label: longLabel, value: 'use_default' }
+      ]
+    });
+
+    const yes = await button('Yes');
+    const long = await button(longLabel);
+
+    expect(
+      Math.abs(
+        yes.getBoundingClientRect().width - long.getBoundingClientRect().width
+      )
+    ).toBeLessThanOrEqual(1);
+    expect(long.scrollWidth).toBeLessThanOrEqual(long.clientWidth);
+    expect(long.getBoundingClientRect().height).toBe(28);
+  });
+
   it('does not change when disabled', async () => {
     initialize({ disabled: true });
 

package/src/Form/Inputs/SegmentedButtons.tsx

@@ -33,35 +33,39 @@ const SegmentedButtons = ({
     Component: (
       <FormGroup>
         <FormLabel>{t(label)}</FormLabel>
-        <ButtonGroup
-          aria-label={t(label)}
-          // As wide as its column, up to what three labels need.
-          className="max-w-[412px]"
-          color="primary"
-          data-testid={dataTestId}
-          disabled={disabled}
-          fullWidth
-          size="small"
-        >
-          {segmentedButtons?.options.map(
-            ({ label: optionLabel, value: optionValue }) => {
-              const isSelected = equals(value, optionValue);
+        {/* In a column narrower than the segments, the group scrolls inside it
+            rather than overflowing into what is next to it. */}
+        <div className="max-w-full self-start overflow-x-auto">
+          <ButtonGroup
+            aria-label={t(label)}
+            // Equal segments, each as wide as the longest label (26 spacing
+            // units, 104px, at least), whatever the width of the column.
+            className="inline-grid auto-cols-[minmax(calc(var(--spacing)*26),1fr)] grid-flow-col"
+            color="primary"
+            data-testid={dataTestId}
+            disabled={disabled}
+            size="small"
+          >
+            {segmentedButtons?.options.map(
+              ({ label: optionLabel, value: optionValue }) => {
+                const isSelected = equals(value, optionValue);
 
-              return (
-                <Button
-                  aria-pressed={isSelected}
-                  className="h-7 px-3 py-0 font-medium text-sm leading-[21px] normal-case"
-                  data-testid={`${dataTestId}-${optionValue}`}
-                  key={optionValue}
-                  onClick={select(optionValue)}
-                  variant={isSelected ? 'contained' : 'outlined'}
-                >
-                  {t(optionLabel)}
-                </Button>
-              );
-            }
-          )}
-        </ButtonGroup>
+                return (
+                  <Button
+                    aria-pressed={isSelected}
+                    className="h-7 whitespace-nowrap px-3 py-0 font-medium text-sm leading-[21px] normal-case"
+                    data-testid={`${dataTestId}-${optionValue}`}
+                    key={optionValue}
+                    onClick={select(optionValue)}
+                    variant={isSelected ? 'contained' : 'outlined'}
+                  >
+                    {t(optionLabel)}
+                  </Button>
+                );
+              }
+            )}
+          </ButtonGroup>
+        </div>
       </FormGroup>
     ),
     memoProps: [value, disabled, segmentedButtons, additionalMemoProps]

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>
   );
 };