@indico-data/design-system 3.6.2 → 3.6.4

package/package.json

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

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

@@ -71,6 +71,16 @@ const meta: Meta = {
         },
       },
     },
+    positionStrategy: {
+      control: 'select',
+      options: ['absolute', 'fixed'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'absolute | fixed',
+        },
+      },
+    },
     children: {
       control: false,
       table: {

package/src/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
+import { PlacesType, Tooltip as ReactTooltip, PositionStrategy } from 'react-tooltip';
 
 export interface TooltipProps {
   id: string;
@@ -9,14 +9,16 @@ export interface TooltipProps {
   delayShow?: number;
   /** The delay in milliseconds before the tooltip is hidden */
   delayHide?: number;
-  children: React.ReactNode;
   /** 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;
 }
 
@@ -30,6 +32,7 @@ export const Tooltip = ({
   width = 'max-content',
   maxWidth,
   opacity = 1,
+  positionStrategy = 'absolute',
   ...rest
 }: TooltipProps) => {
   return (
@@ -51,6 +54,7 @@ export const Tooltip = ({
       delayShow={delayShow}
       delayHide={delayHide}
       opacity={opacity}
+      positionStrategy={positionStrategy}
       {...rest}
     >
       {children}

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

@@ -13,7 +13,7 @@ const meta: Meta<typeof Truncate> = {
     ),
   ],
   argTypes: {
-    truncateString: {
+    children: {
       required: true,
       control: 'text',
       table: {
@@ -43,7 +43,7 @@ type Story = StoryObj<TruncateProps>;
 export const Default: Story = {
   args: {
     numLines: 1,
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -51,7 +51,7 @@ export const Default: Story = {
 export const NoTruncate: Story = {
   args: {
     numLines: 1,
-    truncateString: 'No truncate',
+    children: 'No truncate',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -59,7 +59,7 @@ export const NoTruncate: Story = {
 export const WithNumLines: Story = {
   args: {
     numLines: 2,
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -71,7 +71,7 @@ export const WithTooltipOptions: Story = {
       place: 'right',
       width: '150px',
     },
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -82,7 +82,7 @@ export const NoTooltip: Story = {
     tooltipOptions: {
       disabled: true,
     },
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -93,7 +93,7 @@ export const TruncateWithTooltipWidth: Story = {
     tooltipOptions: {
       width: 'calc(100% - 40px)',
     },
-    truncateString:
+    children:
       '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

@@ -6,8 +6,8 @@ import classNames from 'classnames';
 
 export const Truncate = ({
   numLines = 1,
-  truncateString,
   tooltipOptions = {},
+  children,
   ...rest
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(false);
@@ -47,11 +47,11 @@ export const Truncate = ({
         })}
         {...rest}
       >
-        {truncateString}
+        {children}
       </span>
-      {isTruncated && truncateString && !tooltipOptions.disabled && (
+      {isTruncated && children && !tooltipOptions.disabled && (
         <Tooltip {...tooltipOptions} id={id}>
-          {truncateString}
+          {children}
         </Tooltip>
       )}
     </div>

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

@@ -25,7 +25,7 @@ describe('Truncate', () => {
 
   // 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" />);
+    render(<Truncate>This is a very long text that should be truncated</Truncate>);
 
     // Now we can use exact IDs instead of regex
     expect(screen.getByTestId('truncate-test-id-truncated')).toBeInTheDocument();
@@ -42,7 +42,7 @@ describe('Truncate', () => {
       value: 200,
     });
 
-    render(<Truncate truncateString="Short text" />);
+    render(<Truncate>Short text</Truncate>);
 
     // Now we can use exact IDs
     expect(screen.getByTestId('truncate-test-id-not-truncated')).toBeInTheDocument();

package/src/components/truncate/types.ts

@@ -3,9 +3,8 @@ 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. */
   numLines?: number;
-  /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
-  truncateString: 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;
+  /** The children to display. This will be displayed in the truncate component. */
+  children: React.ReactNode;
 }