From 8a8da2b8fb5336200dac8144e7295189913db482 Mon Sep 17 00:00:00 2001 From: Antoine Boissinot <133259861+aboissinot-coveo@users.noreply.github.com> Date: Mon, 4 Nov 2024 09:54:15 -0500 Subject: [PATCH] feat(mantine): EllipsisText component supports line-clamp (#3943) --- .../ellipsis-text/EllipsisText.module.css | 4 +-- .../components/ellipsis-text/EllipsisText.tsx | 27 ++++++++++++------- .../layout/EllipsisText/EllipsisText.demo.tsx | 11 -------- .../EllipsisTextDefaultLong.demo.tsx | 4 +++ .../EllipsisTextDefaultShort.demo.tsx | 4 +++ .../EllipsisTextLineClampLong.demo.tsx | 9 +++++++ .../EllipsisTextLineClampShort.demo.tsx | 8 ++++++ .../EllipsisTextNoWrapContainer.demo.tsx | 11 ++++++++ .../website/src/pages/layout/EllipsisText.tsx | 15 +++++++++-- 9 files changed, 69 insertions(+), 24 deletions(-) delete mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisText.demo.tsx create mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultLong.demo.tsx create mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultShort.demo.tsx create mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampLong.demo.tsx create mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampShort.demo.tsx create mode 100644 packages/website/src/examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo.tsx diff --git a/packages/mantine/src/components/ellipsis-text/EllipsisText.module.css b/packages/mantine/src/components/ellipsis-text/EllipsisText.module.css index 997a967f5d..ba0ad4e1b1 100644 --- a/packages/mantine/src/components/ellipsis-text/EllipsisText.module.css +++ b/packages/mantine/src/components/ellipsis-text/EllipsisText.module.css @@ -1,8 +1,8 @@ -.root { +.noWrap { white-space: nowrap; } -.text { +.ellipsis { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/mantine/src/components/ellipsis-text/EllipsisText.tsx b/packages/mantine/src/components/ellipsis-text/EllipsisText.tsx index 0abdaea398..070ea3a3f2 100644 --- a/packages/mantine/src/components/ellipsis-text/EllipsisText.tsx +++ b/packages/mantine/src/components/ellipsis-text/EllipsisText.tsx @@ -12,13 +12,14 @@ import { useStyles, } from '@mantine/core'; import {ReactNode, useRef, useState} from 'react'; +import clsx from 'clsx'; import classes from './EllipsisText.module.css'; export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text'; export interface EllipsisTextProps extends BoxProps, - Pick, + Pick, Omit, 'variant'> { children: ReactNode; tooltipProps?: Partial>; @@ -36,11 +37,9 @@ const defaultProps: Partial = { }; export const EllipsisText = polymorphicFactory((props, ref) => { - const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps( - 'EllipsisText', - defaultProps, - props, - ); + const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} = + useProps('EllipsisText', defaultProps, props); + const getStyles = useStyles({ name: 'EllipsisText', classes, @@ -55,6 +54,9 @@ export const EllipsisText = polymorphicFactory((props, ref) const [showTooltip, setShowTooltip] = useState(false); const textRef = useRef(); + const {className: rootClass, ...rootStyles} = getStyles('root'); + const {className: textClass, ...textStyles} = getStyles('text'); + return ( ((props, ref) onMouseLeave={() => setShowTooltip(false)} display="flex" w="100%" - {...getStyles('root')} + className={clsx(rootClass, {[classes.noWrap]: !lineClamp})} + {...rootStyles} {...others} > - + {children} @@ -78,4 +87,4 @@ export const EllipsisText = polymorphicFactory((props, ref) ); }); -const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth; +const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisText.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisText.demo.tsx deleted file mode 100644 index 8e4a118393..0000000000 --- a/packages/website/src/examples/layout/EllipsisText/EllipsisText.demo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {EllipsisText} from '@coveord/plasma-mantine'; - -const Demo = () => ( - <> - - This is a very long text that is truncated with an ellipsis. The rest is shown on hover. - - This short text is not truncated. - -); -export default Demo; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultLong.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultLong.demo.tsx new file mode 100644 index 0000000000..0fb378b04c --- /dev/null +++ b/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultLong.demo.tsx @@ -0,0 +1,4 @@ +import {EllipsisText} from '@coveord/plasma-mantine'; + +const Demo = () => This is a very long text that is truncated with an ellipsis.; +export default Demo; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultShort.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultShort.demo.tsx new file mode 100644 index 0000000000..a8c8988a77 --- /dev/null +++ b/packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultShort.demo.tsx @@ -0,0 +1,4 @@ +import {EllipsisText} from '@coveord/plasma-mantine'; + +const Demo = () => This short text is not truncated.; +export default Demo; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampLong.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampLong.demo.tsx new file mode 100644 index 0000000000..0b25e397ad --- /dev/null +++ b/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampLong.demo.tsx @@ -0,0 +1,9 @@ +import {EllipsisText} from '@coveord/plasma-mantine'; + +const Demo = () => ( + + This is a very long text that is truncated with an ellipsis since clamp limit is not enough to display the full + text. + +); +export default Demo; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampShort.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampShort.demo.tsx new file mode 100644 index 0000000000..f577cc45cb --- /dev/null +++ b/packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampShort.demo.tsx @@ -0,0 +1,8 @@ +import {EllipsisText} from '@coveord/plasma-mantine'; + +const Demo = () => ( + + This is a very long text that is not truncated since clamp limit is not reached. + +); +export default Demo; diff --git a/packages/website/src/examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo.tsx b/packages/website/src/examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo.tsx new file mode 100644 index 0000000000..1442830244 --- /dev/null +++ b/packages/website/src/examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo.tsx @@ -0,0 +1,11 @@ +import {EllipsisText} from '@coveord/plasma-mantine'; +import {Chip} from '@mantine/core'; + +const Demo = () => ( + + + This is a very long text within a special container is truncated with an ellipsis. + + +); +export default Demo; diff --git a/packages/website/src/pages/layout/EllipsisText.tsx b/packages/website/src/pages/layout/EllipsisText.tsx index 0cefde2207..92df2afeb8 100644 --- a/packages/website/src/pages/layout/EllipsisText.tsx +++ b/packages/website/src/pages/layout/EllipsisText.tsx @@ -1,5 +1,9 @@ import {EllipsisTextMetadata} from '@coveord/plasma-components-props-analyzer'; -import EllipsisTextDemo from '@examples/layout/EllipsisText/EllipsisText.demo?demo'; +import EllipsisTextDefaultLongDemo from '@examples/layout/EllipsisText/EllipsisTextDefaultLong.demo?demo'; +import EllipsisTextDefaultShortDemo from '@examples/layout/EllipsisText/EllipsisTextDefaultShort.demo?demo'; +import EllipsisTextLineClampLongDemo from '@examples/layout/EllipsisText/EllipsisTextLineClampLong.demo?demo'; +import EllipsisTextLineClampShortDemo from '@examples/layout/EllipsisText/EllipsisTextLineClampShort.demo?demo'; +import EllipsisTextNoWrapContainerDemo from '@examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo?demo'; import {PageLayout} from '../../building-blocs/PageLayout'; @@ -11,7 +15,14 @@ const Page = () => ( 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={} + demo={} + examples={{ + defaultLong: , + defaultShort: , + noWrapContainer: , + lineClampLong: , + lineClampShort: , + }} /> );