feat(Text): add maxLines prop (#5018)

closes #5017

Author: Lukas742

packages/main/src/components/Text/Text.cy.tsx

@@ -31,5 +31,35 @@ describe('Text', () => {
       .should('have.css', 'overflow', 'hidden');
   });
 
+  it('maxLines', () => {
+    cy.mount(
+      <Text data-testid="text" style={{ width: '300px' }}>
+        {longText}
+      </Text>
+    );
+    cy.findByTestId('text').invoke('outerHeight').should('equal', 240);
+
+    cy.mount(
+      <Text data-testid="text" style={{ width: '300px' }} maxLines={0}>
+        {longText}
+      </Text>
+    );
+    cy.findByTestId('text').invoke('outerHeight').should('equal', 240);
+    cy.mount(
+      <Text data-testid="text" style={{ width: '300px' }} maxLines={1}>
+        {longText}
+      </Text>
+    );
+    cy.findByTestId('text').invoke('outerHeight').should('equal', 16);
+    cy.mount(
+      <Text data-testid="text" style={{ width: '300px' }} maxLines={4}>
+        {longText}
+      </Text>
+    );
+    cy.findByTestId('text').invoke('outerHeight').should('equal', 64);
+  });
+
   cypressPassThroughTestsFactory(Text);
 });
+
+const longText = `If "renderWhitespace" is set to true, there will be thirteen white spaces after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`;

packages/main/src/components/Text/Text.jss.ts

@@ -28,5 +28,11 @@ export const TextStyles = {
     '&$renderWhitespace': {
       whiteSpace: 'pre'
     }
+  },
+  maxLines: {
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    WebkitLineClamp: 'var(--_ui5wcr_maxLines)'
   }
 };

packages/main/src/components/Text/index.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import { createUseStyles } from 'react-jss';
 import type { CommonProps } from '../../interfaces/index.js';
@@ -18,6 +18,10 @@ export interface TextPropTypes extends CommonProps {
    * Defines whether the text wraps when there is not enough space.
    */
   wrapping?: boolean;
+  /**
+   * Limits the number of lines for wrapping texts.
+   */
+  maxLines?: number;
 }
 
 const useStyles = createUseStyles(TextStyles, { name: 'Text' });
@@ -26,28 +30,28 @@ const useStyles = createUseStyles(TextStyles, { name: 'Text' });
  * <br />__Note:__ Line breaks will always be visualized except when the wrapping property is set to false. In addition, tabs and whitespace can be preserved by setting the renderWhitespace property to true.
  */
 const Text = forwardRef<HTMLSpanElement, TextPropTypes>((props, ref) => {
-  const { children, renderWhitespace, wrapping, className, style, slot, ...rest } = props;
-
+  const { children, renderWhitespace, wrapping = true, className, style, maxLines, ...rest } = props;
   const classes = useStyles();
   const classNameString = clsx(
     classes.text,
     wrapping === false && classes.noWrap,
     renderWhitespace && classes.renderWhitespace,
+    typeof maxLines === 'number' && classes.maxLines,
     className
   );
 
   return (
-    <span ref={ref} style={style} className={classNameString} slot={slot} {...rest}>
+    <span
+      ref={ref}
+      style={{ '--_ui5wcr_maxLines': typeof maxLines === 'number' ? maxLines : undefined, ...style } as CSSProperties}
+      className={classNameString}
+      {...rest}
+    >
       {children}
     </span>
   );
 });
 
-Text.defaultProps = {
-  renderWhitespace: false,
-  wrapping: true
-};
-
 Text.displayName = 'Text';
 
 export { Text };