feat(mantine,website): create the EllipsisText component (#3933)

* feat(mantine,website): create the EllipsisText component

* refactor(mantine): group EllipsisText tooltipProps

packages/components-props-analyzer/src/ComponentsList.ts

@@ -97,6 +97,11 @@ const components: Component[] = [
         name: 'Alert',
         packageName: '@coveord/plasma-mantine',
     },
+    {
+        name: 'EllipsisText',
+        packageName: '@coveord/plasma-mantine',
+        propsType: 'EllipsisTextProps',
+    },
 ];
 
 export default components;

packages/mantine/src/components/ellipsis-text/EllipsisText.module.css

@@ -0,0 +1,9 @@
+.root {
+    white-space: nowrap;
+}
+
+.text {
+    flex-basis: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

packages/mantine/src/components/ellipsis-text/EllipsisText.tsx

@@ -0,0 +1,79 @@
+import {
+    Box,
+    type BoxProps,
+    type Factory,
+    polymorphicFactory,
+    type StylesApiProps,
+    Text,
+    type TextProps,
+    Tooltip,
+    type TooltipProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import {ReactNode, useRef, useState} from 'react';
+import classes from './EllipsisText.module.css';
+
+export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';
+
+export interface EllipsisTextProps
+    extends BoxProps,
+        Pick<TextProps, 'variant'>,
+        Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
+    children: ReactNode;
+    tooltipProps: Omit<TooltipProps, 'label' | 'opened'>;
+}
+
+type EllipsisTextFactory = Factory<{
+    props: EllipsisTextProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: EllipsisTextStylesNames;
+}>;
+
+const defaultProps: Partial<EllipsisTextProps> = {};
+
+export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {
+    const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps(
+        'EllipsisText',
+        defaultProps,
+        props,
+    );
+    const getStyles = useStyles<EllipsisTextFactory>({
+        name: 'EllipsisText',
+        classes,
+        props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+    });
+
+    const [showTooltip, setShowTooltip] = useState(false);
+    const textRef = useRef<HTMLDivElement>();
+
+    return (
+        <Box
+            ref={ref}
+            onMouseEnter={() => {
+                if (textRef.current && isOverflowing(textRef.current)) {
+                    setShowTooltip(true);
+                }
+            }}
+            onMouseLeave={() => setShowTooltip(false)}
+            display="flex"
+            w="100%"
+            {...getStyles('root')}
+            {...others}
+        >
+            <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>
+                <Text variant={variant} ref={textRef} {...getStyles('text')}>
+                    {children}
+                </Text>
+            </Tooltip>
+        </Box>
+    );
+});
+
+const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth;

packages/mantine/src/components/ellipsis-text/index.ts

@@ -0,0 +1 @@
+export * from './EllipsisText';

packages/mantine/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './code-editor';
 export * from './collection';
 export * from './copyToClipboard';
 export * from './date-range-picker';
+export * from './ellipsis-text';
 export * from './header';
 export * from './inline-confirm';
 export * from './menu';

packages/mantine/src/styles/Tooltip.module.css

@@ -0,0 +1,3 @@
+.tooltip {
+    word-break: break-word;
+}

packages/mantine/src/theme/Theme.tsx

@@ -74,6 +74,7 @@ import SkeletonClasses from '../styles/Skeleton.module.css';
 import StepperClasses from '../styles/Stepper.module.css';
 import TabsClasses from '../styles/Tabs.module.css';
 import TextClasses from '../styles/Text.module.css';
+import TooltipClasses from '../styles/Tooltip.module.css';
 import {NotificationVars} from '../vars/Notification.vars';
 import {TextVars} from '../vars/Text.vars';
 import {PlasmaColors} from './PlasmaColors';
@@ -371,6 +372,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 withArrow: true,
                 zIndex: 10000,
             },
+            classNames: TooltipClasses,
         }),
     },
 });

packages/website/src/Navigation.tsx

@@ -48,6 +48,7 @@ export const Navigation = () => (
         </NavLink>
         <NavLink label="Layout" leftSection={<RichUiSize16Px height={16} />} defaultOpened>
             <InternalNavLink to="/layout/BrowserPreview" label="Browser Preview" />
+            <InternalNavLink to="/layout/EllipsisText" label="Ellipsis text" />
             <InternalNavLink to="/layout/Header" label="Header" />
             <InternalNavLink to="/layout/Modal" label="Modal" />
             <InternalNavLink to="/layout/Prompt" label="Prompt" />

packages/website/src/examples/layout/EllipsisText/EllipsisText.demo.tsx

@@ -0,0 +1,11 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+
+const Demo = () => (
+    <>
+        <EllipsisText maw={250}>
+            This is a very long text that is truncated with an ellipsis. The rest is shown on hover.
+        </EllipsisText>
+        <EllipsisText maw={250}>This short text is not truncated.</EllipsisText>
+    </>
+);
+export default Demo;

packages/website/src/pages/layout/EllipsisText.tsx

@@ -0,0 +1,18 @@
+import {EllipsisTextMetadata} from '@coveord/plasma-components-props-analyzer';
+import EllipsisTextDemo from '@examples/layout/EllipsisText/EllipsisText.demo?demo';
+
+import {PageLayout} from '../../building-blocs/PageLayout';
+
+const Page = () => (
+    <PageLayout
+        section="Layout"
+        title="EllipsisText"
+        sourcePath="/packages/mantine/src/components/ellipsis-text/EllipsisText.tsx"
+        description="Allows to display text that will automatically truncate and shows a tooltip on hover if it overflows the max width."
+        id="EllipsisText"
+        propsMetadata={EllipsisTextMetadata}
+        demo={<EllipsisTextDemo />}
+    />
+);
+
+export default Page;