@indico-data/design-system 3.6.1 → 3.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.6.1",
+  "version": "3.6.3",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/tooltip/Tooltip.stories.tsx

@@ -16,6 +16,24 @@ const meta: Meta = {
         },
       },
     },
+    width: {
+      control: 'text',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    maxWidth: {
+      control: 'text',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
     place: {
       control: 'select',
       options: ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom'],
@@ -53,12 +71,13 @@ const meta: Meta = {
         },
       },
     },
-    zIndex: {
-      control: 'number',
+    positionStrategy: {
+      control: 'select',
+      options: ['absolute', 'fixed'],
       table: {
         category: 'Props',
         type: {
-          summary: 'number',
+          summary: 'absolute | fixed',
         },
       },
     },
@@ -80,12 +99,7 @@ type Story = StoryObj<typeof Tooltip>;
 
 export const Default: Story = {
   args: {
-    place: 'bottom',
     id: 'tooltip-1',
-    clickToShow: false,
-    delayShow: 0,
-    delayHide: 0,
-    zIndex: 1000,
   },
 
   render: (args) => {
@@ -103,3 +117,57 @@ export const Default: Story = {
     );
   },
 };
+
+export const TooltipWithWidth: Story = {
+  args: {
+    id: 'tooltip-1',
+    width: '100%',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col xs={12}>
+            <Button ariaLabel="Tooltip Button" data-tooltip-id="tooltip-1">
+              Tooltip!
+            </Button>
+            <Tooltip {...args} place="bottom-start">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum
+              dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
+              amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
+              consectetur adipisicing elit. Quisquam, quos.
+            </Tooltip>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const TooltipWithMaxWidth: Story = {
+  args: {
+    id: 'tooltip-1',
+    maxWidth: '200px',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col xs={12}>
+            <Button ariaLabel="Tooltip Button" data-tooltip-id="tooltip-1">
+              Tooltip!
+            </Button>
+            <Tooltip {...args} place="bottom-start">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum
+              dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
+              amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet
+              consectetur adipisicing elit. Quisquam, quos.
+            </Tooltip>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/tooltip/Tooltip.tsx

@@ -1,6 +1,7 @@
-import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
+import { CSSProperties } from 'react';
+import { PlacesType, Tooltip as ReactTooltip, PositionStrategy } from 'react-tooltip';
 
-interface TooltipProps {
+export interface TooltipProps {
   id: string;
   /** Whether the tooltip should be shown on click */
   clickToShow?: boolean;
@@ -8,12 +9,16 @@ interface TooltipProps {
   delayShow?: number;
   /** The delay in milliseconds before the tooltip is hidden */
   delayHide?: number;
-  children: React.ReactNode;
-  /** This is an override for the z-index of the tooltip */
-  zIndex?: number;
   /** The placement of the tooltip */
   place?: PlacesType;
+  /** The width of the tooltip */
+  width?: CSSProperties['width'];
+  /** The max width of the tooltip */
+  maxWidth?: CSSProperties['maxWidth'];
+  /** The position strategy of the tooltip */
+  positionStrategy?: PositionStrategy;
   /** The content of the tooltip */
+  children: React.ReactNode;
   [key: string]: any;
 }
 
@@ -23,8 +28,11 @@ export const Tooltip = ({
   delayShow,
   delayHide,
   children,
-  zIndex = 1000,
   place = 'top',
+  width = 'max-content',
+  maxWidth,
+  opacity = 1,
+  positionStrategy = 'absolute',
   ...rest
 }: TooltipProps) => {
   return (
@@ -32,13 +40,21 @@ export const Tooltip = ({
       style={{
         backgroundColor: 'var(--pf-semantic-background-inverted)',
         color: 'var(--pf-semantic-font-inverted)',
-        zIndex,
+        width,
+        maxWidth,
+        boxSizing: 'border-box',
+        textWrap: 'wrap',
+        wordWrap: 'break-word',
+        zIndex: 1000,
       }}
+      className="tooltip"
       id={id}
       place={place}
       openOnClick={clickToShow}
       delayShow={delayShow}
       delayHide={delayHide}
+      opacity={opacity}
+      positionStrategy={positionStrategy}
       {...rest}
     >
       {children}

package/src/components/truncate/Truncate.mdx

@@ -13,22 +13,30 @@ The truncate component accepts a string prop and will truncate the string to fit
 
 <Controls of={Truncate.Default} />
 
-
 ## Usage
+
 Simply pass in a string to the `truncateString` prop.
 
+## No Truncate
+
+If the string is shorter than the available space, it will not be truncated.
+
+<Canvas of={Truncate.NoTruncate} />
 
-### With Line Clamp
+### With Num Lines
 
-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.
+If you want to truncate the text to a specific number of lines, set the `numLines` prop to the number of lines you want to truncate to.
 
-<Canvas of={Truncate.WithLineClamp} />
+<Canvas of={Truncate.WithNumLines} />
+
+### With Tooltip Options
+
+If you want to customize the tooltip, set the `tooltipOptions` prop to the options you want to use.
+
+<Canvas of={Truncate.WithTooltipOptions} />
 
 ### No Tooltip
 
-If you want to disable the tooltip, set the `hasTooltip` prop to `false`.
+If you want to disable the tooltip, set the `tooltipOptions` prop to `{ disabled: true }`.
 
 <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

@@ -7,7 +7,7 @@ const meta: Meta<typeof Truncate> = {
   component: Truncate,
   decorators: [
     (Story) => (
-      <div style={{ width: '300px' }}>
+      <div style={{ width: '300px', border: '1px solid black', padding: '10px' }}>
         <Story />
       </div>
     ),
@@ -20,22 +20,15 @@ const meta: Meta<typeof Truncate> = {
         category: 'Props',
       },
     },
-    lineClamp: {
+    numLines: {
       control: 'number',
-      defaultValue: 0,
+      defaultValue: 1,
       table: {
         category: 'Props',
       },
     },
-    tooltipId: {
-      control: 'text',
-      table: {
-        category: 'Props',
-      },
-    },
-    hasTooltip: {
-      control: 'boolean',
-      defaultValue: true,
+    tooltipOptions: {
+      control: 'object',
       table: {
         category: 'Props',
       },
@@ -49,19 +42,35 @@ type Story = StoryObj<TruncateProps>;
 
 export const Default: Story = {
   args: {
-    lineClamp: 0,
-    hasTooltip: true,
-    tooltipId: 'truncate-tooltip',
+    numLines: 1,
+    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const NoTruncate: Story = {
+  args: {
+    numLines: 1,
+    truncateString: 'No truncate',
+  },
+  render: (args) => <Truncate {...args} />,
+};
+
+export const WithNumLines: Story = {
+  args: {
+    numLines: 2,
     truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
 
-export const WithLineClamp: Story = {
+export const WithTooltipOptions: Story = {
   args: {
-    lineClamp: 2,
-    hasTooltip: true,
-    tooltipId: 'truncate-tooltip-line-clamp',
+    numLines: 1,
+    tooltipOptions: {
+      place: 'right',
+      width: '150px',
+    },
     truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
@@ -69,10 +78,23 @@ export const WithLineClamp: Story = {
 
 export const NoTooltip: Story = {
   args: {
-    lineClamp: 2,
-    hasTooltip: false,
-    tooltipId: 'truncate-tooltip-no-tooltip',
+    numLines: 1,
+    tooltipOptions: {
+      disabled: true,
+    },
     truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
+
+export const TruncateWithTooltipWidth: Story = {
+  args: {
+    numLines: 1,
+    tooltipOptions: {
+      width: 'calc(100% - 40px)',
+    },
+    truncateString:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+  },
+  render: (args) => <Truncate {...args} />,
+};

package/src/components/truncate/Truncate.tsx

@@ -1,51 +1,56 @@
-import { useState, useEffect, CSSProperties } from 'react';
+import { useState, useEffect, CSSProperties, useMemo, useRef } from 'react';
 import { Tooltip } from '../tooltip';
 import { TruncateProps } from './types';
 import { v4 as uuidv4 } from 'uuid';
+import classNames from 'classnames';
+
 export const Truncate = ({
-  lineClamp = 0,
+  numLines = 1,
   truncateString,
-  hasTooltip = true,
-  tooltipId,
+  tooltipOptions = {},
   ...rest
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(false);
-  const id = (tooltipId ?? uuidv4()).replace(/[^a-zA-Z0-9-_]/g, '_');
+  const id = useMemo(() => uuidv4().replace(/[^a-zA-Z0-9-_]/g, '_'), []);
+  const ref = useRef<HTMLSpanElement>(null);
 
   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);
-        }
+      const element = ref.current;
+      if (!element) return;
+
+      if (numLines === 1) {
+        setIsTruncated(element.scrollWidth > element.clientWidth);
+      } else {
+        setIsTruncated(element.scrollHeight > element.clientHeight);
       }
     };
 
     checkTruncation();
     window.addEventListener('resize', checkTruncation);
     return () => window.removeEventListener('resize', checkTruncation);
-  }, [id, lineClamp]);
+  }, [id, numLines]);
 
   const truncateStyle = {
-    '--line-clamp': lineClamp,
+    '--line-clamp': numLines,
   } as CSSProperties;
 
   return (
     <div className="truncate-wrapper" style={truncateStyle}>
       <span
+        ref={ref}
         data-testid={`truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`}
         data-tooltip-id={id}
-        data-tooltip-content={isTruncated ? truncateString : undefined}
-        className={lineClamp > 0 ? 'truncate-clip' : 'truncate'}
+        className={classNames('truncate', {
+          'truncate--multi-line': numLines > 1,
+          'truncate--single-line': numLines === 1,
+        })}
         {...rest}
       >
         {truncateString}
       </span>
-      {isTruncated && truncateString && hasTooltip && (
-        <Tooltip data-tooltip-delay-hide={0} id={id}>
+      {isTruncated && truncateString && !tooltipOptions.disabled && (
+        <Tooltip {...tooltipOptions} id={id}>
           {truncateString}
         </Tooltip>
       )}

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

@@ -29,12 +29,6 @@ describe('Truncate', () => {
 
     // 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', () => {
@@ -52,10 +46,5 @@ describe('Truncate', () => {
 
     // 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/styles/Truncate.scss

@@ -7,20 +7,20 @@
   }
 
   .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%;
+
+    &--multi-line {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--line-clamp);
+      line-clamp: var(--line-clamp);
+    }
+
+    &--single-line {
+      display: inline-block;
+      white-space: nowrap;
+    }
   }
 }

package/src/components/truncate/types.ts

@@ -1,11 +1,11 @@
+import { TooltipProps } from '../tooltip/Tooltip';
+
 export interface TruncateProps {
   /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
-  lineClamp?: number;
+  numLines?: number;
   /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
   truncateString: string;
-  /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
-  hasTooltip?: boolean;
-  /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
-  tooltipId?: string;
+  /** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
+  tooltipOptions?: Partial<TooltipProps> & { disabled?: boolean };
   [key: string]: any;
 }

package/src/styles/globals.scss

@@ -73,12 +73,3 @@ a,
 .theme {
   background-color: var(--pf-semantic-background-primary);
 }
-
-// Tooltip
-.react-tooltip {
-  z-index: 5;
-  background-color: var(--pf-semantic-background-inverted);
-  color: var(--pf-semantic-font-inverted);
-  opacity: 1 !important;
-  text-wrap: wrap;
-}