Merge pull request #1037 from lumapps/feat/add-white-space-customisation-for-text-component

feat(text): add whiteSpace support

Author: gcornut

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+-   Text: add style customisation with `whiteSpace` props
 -   Add new design token `medium` for `font-weight`.
 
 ### Fixed

packages/lumx-core/src/scss/components/text/_index.scss

@@ -3,11 +3,14 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-text {
+    white-space: var(--lumx-text-white-space);
+
     &--is-truncated {
+        --lumx-text-white-space: nowrap;
+
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
     }
 
     &--is-truncated-multiline {
@@ -19,7 +22,7 @@
     }
 
     &--no-wrap {
-        white-space: nowrap;
+        --lumx-text-white-space: nowrap;
     }
 
     // Fix icon alignment

packages/lumx-react/src/components/index.ts

@@ -172,6 +172,19 @@ export const Kind = {
 } as const;
 export type Kind = ValueOf<typeof Kind>;
 
+/**
+ * All available white-space values
+ * */
+export const WhiteSpace = {
+    normal: 'normal',
+    nowrap: 'nowrap',
+    pre: 'pre',
+    'pre-wrap': 'pre-wrap',
+    'pre-line': 'pre-line',
+    'break-spaces': 'break-spaces',
+};
+export type WhiteSpace = ValueOf<typeof WhiteSpace>;
+
 /**
  * Re-exporting some utils types.
  */

packages/lumx-react/src/components/text/Text.stories.tsx

@@ -6,9 +6,10 @@ import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { ColorPalette, ColorVariant, Icon } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, WhiteSpace } from '@lumx/react';
 import { mdiEarth, mdiHeart } from '@lumx/icons';
 import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
 import { Text } from './Text';
 
@@ -22,6 +23,7 @@ export default {
         typography: allTypographyArgType,
         color: colorArgType,
         colorVariant: colorVariantArgType,
+        whiteSpace: getSelectArgType(WhiteSpace),
     },
 };
 
@@ -71,6 +73,29 @@ export const NoWrap = {
     },
 };
 
+/**
+ * Long text with line breaks
+ */
+export const AllWhiteSpace = {
+    args: {
+        ...Default.args,
+        children: `
+        But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she,
+        'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—
+      `,
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'whiteSpace', options: Object.values(WhiteSpace) },
+            },
+            tableStyle: { width: 500, tableLayout: 'fixed' },
+            firstColStyle: { width: 100 },
+            cellStyle: { border: '1px solid #000', width: '100%' },
+        }),
+    ],
+};
+
 /**
  * Long text with single line truncate ellipsis
  */

packages/lumx-react/src/components/text/Text.test.tsx

@@ -61,6 +61,12 @@ describe(`<${Text.displayName}>`, () => {
             expect(element).toHaveClass('lumx-text--no-wrap');
         });
 
+        it('should render with custom whiteSpace', () => {
+            const { element } = setup({ whiteSpace: 'pre-wrap' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveStyle({ '--lumx-text-white-space': 'pre-wrap' });
+        });
+
         it('should wrap icons with spaces', () => {
             const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
             // Spaces have been inserted around the icon.

packages/lumx-react/src/components/text/Text.tsx

@@ -1,6 +1,6 @@
 import React, { Children, Fragment, forwardRef } from 'react';
 
-import { Icon, ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Icon, ColorPalette, ColorVariant, Typography, WhiteSpace } from '@lumx/react';
 import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
 import {
     getFontColorClassName,
@@ -41,6 +41,12 @@ export interface TextProps extends GenericProps {
      * (automatically activated when single line text truncate is activated).
      */
     noWrap?: boolean;
+    /**
+     * WhiteSpace variant
+     * Ignored when `noWrap` is set to true
+     * Ignored when `truncate` is set to true or lines: 1
+     * */
+    whiteSpace?: WhiteSpace;
 }
 
 /**
@@ -75,6 +81,7 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
         noWrap,
         typography,
         truncate,
+        whiteSpace,
         style,
         ...forwardedProps
     } = props;
@@ -88,6 +95,15 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
     const isTruncatedMultiline = !!truncateLinesStyle;
     const isTruncated = !!truncate;
 
+    /**
+     * Add custom white-space style if specified
+     * Disabled if noWrap is specified
+     * Disabled if truncated on one-line
+     * */
+    const whiteSpaceStyle = !noWrap &&
+        !(isTruncated && !isTruncatedMultiline) &&
+        whiteSpace && { '--lumx-text-white-space': whiteSpace };
+
     return (
         <Component
             ref={ref as React.Ref<any>}
@@ -102,7 +118,7 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
                 colorClass,
                 noWrap && `${CLASSNAME}--no-wrap`,
             )}
-            style={{ ...truncateLinesStyle, ...style }}
+            style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
             {...forwardedProps}
         >
             {children &&