From 34f5d8665b4bb24d1f6ca8f1ba3d99fa8ccc24c9 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 15 Sep 2026 16:23:53 +0200 Subject: [PATCH] improvement(constrainedtext): take an explicit alignment and the Text styling props Alignment could only be inherited from the container or forced to centre, so a caller had no way to state it. Add `align: 'start' | 'center' | 'end'`, keeping `centered` as a deprecated alias; with neither set the rule stays `inherit`. Accept the Text props natively and forward them to the internal wrapper, so `variant` and its neighbours no longer need a second Text nested inside `text` while `color` arrives as a prop. Removing the file's `// @ts-nocheck` surfaced an import of `utility-types`, which is not a dependency of this package and had no other importer. It is replaced with a native indexed access type. Co-Authored-By: Claude Opus 5 (1M context) --- .../Constrainedtext.component.tsx | 86 ++++++++----------- src/lib/components/text/Text.component.tsx | 2 +- src/lib/index.ts | 1 + 3 files changed, 37 insertions(+), 52 deletions(-) diff --git a/src/lib/components/constrainedtext/Constrainedtext.component.tsx b/src/lib/components/constrainedtext/Constrainedtext.component.tsx index 0f2d531472..d7b4feb608 100644 --- a/src/lib/components/constrainedtext/Constrainedtext.component.tsx +++ b/src/lib/components/constrainedtext/Constrainedtext.component.tsx @@ -1,33 +1,36 @@ -// @ts-nocheck -import { $PropertyType } from 'utility-types'; import { useCallback, useState } from 'react'; import styled from 'styled-components'; import { Tooltip } from '../tooltip/Tooltip.component'; import { Props as TooltipProps } from '../tooltip/Tooltip.component'; -import { Text } from '../text/Text.component'; -import { CoreUITheme } from '../../style/theme'; +import { Text, TextProps } from '../text/Text.component'; + +type Align = 'start' | 'center' | 'end'; type Props = { text: string | number | JSX.Element | JSX.Element[]; - tooltipStyle?: $PropertyType; - tooltipPlacement?: $PropertyType; + tooltipStyle?: TooltipProps['overlayStyle']; + tooltipPlacement?: TooltipProps['placement']; lineClamp?: number; + align?: Align; + /** @deprecated use `align="center"` instead. */ centered?: boolean; - color?: keyof CoreUITheme; -}; +} & TextProps; + // for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/ // it should work on all major navigator, despite the --webkit prefix // just in case if we don't use line clamp we can just use the classic way -const ConstrainedTextContainer = styled.div` +const ConstrainedTextContainer = styled.div<{ + $lineClamp: number; + $align?: Align; +}>` overflow: hidden; text-overflow: ellipsis; - /* inherit, not left: this is a rule on the element, so a hard-coded value - silently outranks whatever alignment the container set -- a table cell - declaring textAlign: center kept left-aligned text with nothing to explain - why. The centered prop stays as an explicit override, for a container that - sets no alignment of its own. */ - text-align: ${(props) => (props.$centered ? 'center' : 'inherit')}; + /* inherit when no align is given: this is a rule on the element, so a + hard-coded value silently outranks whatever alignment the container set -- + a table cell declaring textAlign: center kept left-aligned text with + nothing to explain why. */ + text-align: ${(props) => props.$align ?? 'inherit'}; ${(props) => props.$lineClamp > 1 @@ -59,39 +62,34 @@ function isEllipsisActive(element: HTMLDivElement) { ); } -function getConstrainedTextContainer( - constrainedTextRef, - lineClamp, - text, - centered, -) { - return ( - - {text} - - ); -} - function ConstrainedText({ text, tooltipStyle, tooltipPlacement, lineClamp = 1, - color, + align, centered = false, + ...textProps }: Props): JSX.Element { const [displayToolTip, setDisplayToolTip] = useState(false); const constrainedTextRef = useCallback( - (element) => { + (element: HTMLDivElement | null) => { element && text && setDisplayToolTip(isEllipsisActive(element)); }, [text], ); + const constrainedText = ( + + + {text} + + + ); return ( {displayToolTip ? ( @@ -100,24 +98,10 @@ function ConstrainedText({ overlayStyle={tooltipStyle} placement={tooltipPlacement} > - - {getConstrainedTextContainer( - constrainedTextRef, - lineClamp, - text, - centered, - )} - + {constrainedText} ) : ( - - {getConstrainedTextContainer( - constrainedTextRef, - lineClamp, - text, - centered, - )} - + constrainedText )} ); diff --git a/src/lib/components/text/Text.component.tsx b/src/lib/components/text/Text.component.tsx index 12808aaf5f..b694fe95e7 100644 --- a/src/lib/components/text/Text.component.tsx +++ b/src/lib/components/text/Text.component.tsx @@ -47,7 +47,7 @@ type Props = { status?: Status; id?: string; } & TextProps; -type TextProps = { +export type TextProps = { color?: keyof CoreUITheme; variant?: TextVariant; isEmphazed?: boolean; diff --git a/src/lib/index.ts b/src/lib/index.ts index 6f6ceb9924..2056e48a14 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -70,6 +70,7 @@ export { Text, Link, } from './components/text/Text.component'; +export type { TextProps } from './components/text/Text.component'; export { Card } from './components/card/Card.component'; export { PrettyBytes } from './components/prettybytes/PrettyBytes.component'; export { Icon } from './components/icon/Icon.component';