@indico-data/design-system 2.55.2 → 2.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.55.2",
+  "version": "2.57.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -45,6 +45,7 @@
     "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
+    "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.2.1",
     "react-data-table-component": "^7.6.2",

package/src/components/floatUI/FloatUI.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof FloatUI> = {
   component: FloatUI,
   argTypes: {
     children: {
-      control: 'object',
+      control: false,
       description:
         'An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI.',
       table: {
@@ -31,7 +31,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     floatingOptions: {
-      control: 'object',
+      control: false,
       description:
         'Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options).',
       table: {
@@ -52,7 +52,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     isPortal: {
-      control: 'boolean',
+      control: false,
       defaultValue: false,
       description:
         'Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body)',
@@ -64,7 +64,7 @@ const meta: Meta<typeof FloatUI> = {
       },
     },
     portalOptions: {
-      control: 'object',
+      control: false,
       description:
         'Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into.',
       table: {
@@ -103,6 +103,9 @@ export default meta;
 type Story = StoryObj<FloatUIProps>;
 
 export const Uncontrolled: Story = {
+  args: {
+    ariaLabel: 'Example FloatUI',
+  },
   render: (args) => (
     <FloatUI {...args} ariaLabel="Example FloatUI">
       <Button iconLeft="kabob" ariaLabel="Toggle FloatUI" variant="action" />

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -82,7 +82,7 @@ export const DatePicker = (props: DatePickerProps) => {
   const finalProps = { ...commonProps, ...rest, ...modeProps };
 
   return (
-    <>
+    <div className="date-picker-wrapper">
       {hasTimePicker && (
         <div className="time-picker-wrapper">
           <Row align="center">
@@ -96,6 +96,6 @@ export const DatePicker = (props: DatePickerProps) => {
         </div>
       )}
       <DayPicker {...finalProps} />
-    </>
+    </div>
   );
 };

package/src/components/index.ts

@@ -25,3 +25,4 @@ export { TanstackTable } from './tanstackTable';
 export { Tooltip } from './tooltip';
 export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
 export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';
+export { Truncate } from './truncate';

package/src/components/menu/Menu.stories.tsx

@@ -6,8 +6,18 @@ const meta: Meta<typeof Menu> = {
   title: 'Components/Menu',
   component: Menu,
   argTypes: {
-    children: {
+    className: {
       control: 'text',
+      description: 'The class name to apply to the Menu component.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    children: {
+      control: false,
       description:
         'The children of the Menu component, which will be automatically styled as menu-items.',
       table: {
@@ -25,6 +35,9 @@ export default meta;
 type Story = StoryObj<MenuProps>;
 
 export const Default: Story = {
+  args: {
+    className: 'custom-menu',
+  },
   render: (args) => (
     <Menu {...args}>
       <Button

package/src/components/menu/styles/Menu.scss

@@ -11,6 +11,17 @@
     width: 100%;
     text-align: left;
     border: none;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--pf-menu-rounded);
+      border-top-right-radius: var(--pf-menu-rounded);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--pf-menu-rounded);
+      border-bottom-right-radius: var(--pf-menu-rounded);
+    }
 
     &:hover {
       background: var(--pf-menu-item-hover-color);

package/src/components/truncate/Truncate.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Truncate from './Truncate.stories';
+
+<Meta title="Utilities/Truncate" name="Truncate" of={Truncate} />
+
+# Truncate
+
+The truncate component accepts a string prop and will truncate the string to fit the available space. It will add an `...` ellipsis to the end of the string. If the truncation is detected by the observer, it will show a tooltip by default, unless the `hasTooltip` prop is set to `false`.
+
+<Canvas of={Truncate.Default} />
+
+### The following props are available for the Truncate component:
+
+<Controls of={Truncate.Default} />
+
+
+## Usage
+Simply pass in a string to the `truncateString` prop.
+
+
+### With Line Clamp
+
+If you want to truncate the text to a specific number of lines, set the `lineClamp` prop to the number of lines you want to truncate to.
+
+<Canvas of={Truncate.WithLineClamp} />
+
+### No Tooltip
+
+If you want to disable the tooltip, set the `hasTooltip` prop to `false`.
+
+<Canvas of={Truncate.NoTooltip} />
+
+### Notes on Tooltips
+If a duplicate ID is provided, the tooltip will only show on the first instance of the ID.

package/src/components/truncate/Truncate.stories.tsx

@@ -0,0 +1,86 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Truncate } from './Truncate';
+import { TruncateProps } from './types';
+
+const meta: Meta<typeof Truncate> = {
+  title: 'Utilities/Truncate',
+  component: Truncate,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    truncateString: {
+      required: true,
+      control: 'text',
+      description:
+        'The string to truncate. This value will also be displayed in the tooltip when the text is truncated.',
+      table: {
+        category: 'Props',
+      },
+    },
+    lineClamp: {
+      control: 'number',
+      defaultValue: 0,
+      description:
+        'The number of lines to truncate the text to. If left blank, it will default to 1 line.',
+      table: {
+        category: 'Props',
+      },
+    },
+    tooltipId: {
+      control: 'text',
+      description:
+        'The id of the tooltip. If an ID is not provided, it will generate one from nanoid',
+      table: {
+        category: 'Props',
+      },
+    },
+    hasTooltip: {
+      control: 'boolean',
+      defaultValue: true,
+      description:
+        'Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown.',
+      table: {
+        category: 'Props',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TruncateProps>;
+
+export const Default: Story = {
+  args: {
+    lineClamp: 0,
+    hasTooltip: true,
+    tooltipId: 'truncate-tooltip',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const WithLineClamp: Story = {
+  args: {
+    lineClamp: 2,
+    hasTooltip: true,
+    tooltipId: 'truncate-tooltip-line-clamp',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const NoTooltip: Story = {
+  args: {
+    lineClamp: 2,
+    hasTooltip: false,
+    tooltipId: 'truncate-tooltip-no-tooltip',
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};

package/src/components/truncate/Truncate.tsx

@@ -0,0 +1,55 @@
+import { nanoid } from 'nanoid';
+import { useState, useEffect, CSSProperties } from 'react';
+import { Tooltip } from '../tooltip';
+import { TruncateProps } from './types';
+
+export const Truncate = ({
+  lineClamp = 0,
+  truncateString,
+  hasTooltip = true,
+  tooltipId,
+  ...rest
+}: TruncateProps) => {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const id = (tooltipId ?? nanoid()).replace(/[^a-zA-Z0-9-_]/g, '_');
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      const element = document.querySelector(`[data-tooltip-id="${id}"]`);
+      if (element) {
+        if (lineClamp === 0) {
+          setIsTruncated(element.scrollWidth > element.clientWidth);
+        } else {
+          setIsTruncated(element.scrollHeight > element.clientHeight);
+        }
+      }
+    };
+
+    checkTruncation();
+    window.addEventListener('resize', checkTruncation);
+    return () => window.removeEventListener('resize', checkTruncation);
+  }, [id, lineClamp]);
+
+  const truncateStyle = {
+    '--line-clamp': lineClamp,
+  } as CSSProperties;
+
+  return (
+    <div className="truncate-wrapper" style={truncateStyle}>
+      <span
+        data-testid={`truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`}
+        data-tooltip-id={id}
+        data-tooltip-content={isTruncated ? truncateString : undefined}
+        className={lineClamp > 0 ? 'truncate-clip' : 'truncate'}
+        {...rest}
+      >
+        {truncateString}
+      </span>
+      {isTruncated && truncateString && hasTooltip && (
+        <Tooltip data-tooltip-delay-hide={100} id={id} border="solid 1px var(--pf-border-color)">
+          {truncateString}
+        </Tooltip>
+      )}
+    </div>
+  );
+};

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { Truncate } from '../Truncate';
+
+// Mock nanoid to return a predictable ID
+jest.mock('nanoid', () => ({
+  nanoid: () => 'test-id',
+}));
+
+describe('Truncate', () => {
+  beforeAll(() => {
+    // Mock offsetWidth and scrollWidth
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 100,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      value: 200, // larger than offsetWidth to simulate overflow
+    });
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  // Only way to test is by checking testid, validated this works in app
+  it('shows truncated state when content overflows', () => {
+    render(<Truncate truncateString="This is a very long text that should be truncated" />);
+
+    // Now we can use exact IDs instead of regex
+    expect(screen.getByTestId('truncate-test-id-truncated')).toBeInTheDocument();
+
+    // Verify tooltip appears when truncated
+    expect(screen.getByTestId('truncate-test-id-truncated')).toHaveAttribute(
+      'data-tooltip-content',
+      'This is a very long text that should be truncated',
+    );
+  });
+
+  it('shows non-truncated state when content fits', () => {
+    // Override both scrollWidth and clientWidth to simulate content fitting
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      value: 100,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      value: 200,
+    });
+
+    render(<Truncate truncateString="Short text" />);
+
+    // Now we can use exact IDs
+    expect(screen.getByTestId('truncate-test-id-not-truncated')).toBeInTheDocument();
+
+    // Verify no tooltip when not truncated
+    expect(screen.getByTestId('truncate-test-id-not-truncated')).not.toHaveAttribute(
+      'data-tooltip-content',
+    );
+  });
+});

package/src/components/truncate/index.ts

@@ -0,0 +1 @@
+export { Truncate } from './Truncate';

package/src/components/truncate/styles/Truncate.scss

@@ -0,0 +1,22 @@
+.truncate-wrapper {
+  width: 100%;
+  display: block;
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    display: inline-block;
+  }
+
+  .truncate-clip {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--line-clamp);
+    line-clamp: var(--line-clamp);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+}

package/src/components/truncate/types.ts

@@ -0,0 +1,7 @@
+export interface TruncateProps {
+  lineClamp?: number;
+  truncateString: string;
+  hasTooltip?: boolean;
+  tooltipId?: string;
+  [key: string]: any;
+}

package/src/index.ts

@@ -32,7 +32,7 @@ export { Tooltip } from './components/tooltip';
 export { Pagination } from './components/pagination';
 export { CirclePulse } from './components/loading-indicators/CirclePulse';
 export { BarSpinner } from './components/loading-indicators/BarSpinner/BarSpinner';
-
+export { Truncate } from './components/truncate';
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
 

package/src/styles/index.scss

@@ -29,6 +29,7 @@
 @import '../components/tooltip/styles/Tooltip.scss';
 @import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';
 @import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
+@import '../components/truncate/styles/Truncate.scss';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';

package/src/styles/variables/themes/dark.scss

@@ -61,6 +61,7 @@
   --pf-gray-color-700: #262626;
   --pf-gray-color-800: #171717;
   --pf-gray-color-900: #0a0a0a;
+  --pf-gray-color-950: #000000; // MISSING
 
   //Red color
   --pf-red-color: #ce6068;
@@ -71,6 +72,7 @@
   --pf-red-color-300: #ebb6b8;
   --pf-red-color-350: #f39bb9;
   --pf-red-color-400: #ef76a0;
+  --pf-red-color-450: #df8d91;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
@@ -156,6 +158,23 @@
   --pf-white-color-90: rgba(255, 255, 255, 0.9);
   --pf-white-color-100: rgba(255, 255, 255, 1);
 
+  // Black color
+  --pf-black-color: #000000;
+  --pf-black-color-1: rgba(0, 0, 0, 0.01);
+  --pf-black-color-3: rgba(0, 0, 0, 0.03);
+  --pf-black-color-5: rgba(0, 0, 0, 0.05);
+  --pf-black-color-10: rgba(0, 0, 0, 0.1);
+  --pf-black-color-15: rgba(0, 0, 0, 0.15);
+  --pf-black-color-20: rgba(0, 0, 0, 0.2);
+  --pf-black-color-30: rgba(0, 0, 0, 0.3);
+  --pf-black-color-40: rgba(0, 0, 0, 0.4);
+  --pf-black-color-50: rgba(0, 0, 0, 0.5);
+  --pf-black-color-60: rgba(0, 0, 0, 0.6);
+  --pf-black-color-70: rgba(0, 0, 0, 0.7);
+  --pf-black-color-80: rgba(0, 0, 0, 0.8);
+  --pf-black-color-90: rgba(0, 0, 0, 0.9);
+  --pf-black-color-100: rgba(0, 0, 0, 1);
+
   // Utility Colors
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);