Merge remote-tracking branch 'origin/develop' into bugfix/centeredNodeContentMenuItems-CMEM-7184

Author: haschek

CHANGELOG.md

@@ -10,6 +10,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
+-   `<InlineText />`
+    -    force children to get displayed as inline content
+-   `<StringPreviewContentBlobToggler />`
+    - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+
+### Fixed
+
+-   `<Tag />`
+    -   create more whitespace inside `small` tag
+    -   reduce visual impact of border
+-   `<StringPreviewContentBlobToggler />`
+    -    take Markdown rendering into account before testing the maximum preview length
+-   `<NodeContent />`
+    -   header-menu items are vertically centered now
 
 ### Changed
 
@@ -24,9 +38,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `<GridColumn />`
     -   `<PropertyName />` and `<PropertyValue />`
 
-### Fixed
+### Deprecated
 
--   Centered header-menu items in <NodeContent />
+-   `<StringPreviewContentBlobToggler />`
+    -    `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
 
 ## [25.0.0] - 2025-12-01
 

src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -58,7 +58,7 @@ export function ContentBlobToggler({
                     {previewContent}
                     {enableToggler && (
                         <>
-                            &hellip;{" "}
+                            {" "}&hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,30 +1,46 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
-     The preview content will be cut to this length if it is too long.
+     * The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
     /**
-     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     * The content string.
+     * If it is smaller than `previewMaxLength` this will be displayed in full, else `fullviewContent` will be displayed.
      */
     content: string;
-    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
-    firstNonEmptyLineOnly?: boolean;
-    /** If enabled the preview is rendered as markdown. */
+    /**
+     * Use only parts of `content` in the preview.
+     * `firstMarkdownSection` uses the content until the first double line return.
+     * Currently overwritten by `firstNonEmptyLineOnly`.
+     */
+    useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
+    /**
+     * If enabled the preview is rendered as Markdown.
+     */
     renderPreviewAsMarkdown?: boolean;
-    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    /**
+     * White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled.
+     */
     allowedHtmlElementsInPreview?: string[];
-    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+    /**
+     * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
     noTogglerContentSuffix?: JSX.Element;
+    /**
+     * If only the first non-empty line should be shown in the preview.
+     * This will in addition also be shortened according to `previewMaxLength`.
+     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
+     */
+    firstNonEmptyLineOnly?: boolean;
 }
 
-/** Version of the content toggler for text only content. */
+/** Version of the content toggler for text centric content. */
 export function StringPreviewContentBlobToggler({
     className = "",
     previewMaxLength,
@@ -33,21 +49,44 @@ export function StringPreviewContentBlobToggler({
     content,
     fullviewContent,
     startExtended,
-    firstNonEmptyLineOnly,
+    useOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
+    firstNonEmptyLineOnly,
 }: StringPreviewContentBlobTogglerProps) {
-    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
-    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
-    const enableToggler = previewString !== content;
+    // need to test `firstNonEmptyLineOnly` until property is removed
+    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
+        ? "firstNonEmptyLine"
+        : useOnly;
+
+    let previewString = content;
+    switch (useOnlyTest) {
+        case "firstNonEmptyLine":
+            previewString = useOnlyPart(content, regexFirstNonEmptyLine);
+            break;
+        case "firstMarkdownSection":
+            previewString = useOnlyPart(content, regexFirstMarkdownSection);
+    }
+
+    let enableToggler = previewString !== content;
+
     let previewContent = renderPreviewAsMarkdown ? (
         <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>
             {previewString}
         </Markdown>
     ) : (
         previewString
     );
+
+    if (
+        previewMaxLength &&
+        utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
+    ) {
+        previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+        enableToggler = true;
+    }
+
     if (!enableToggler && noTogglerContentSuffix) {
         previewContent = (
             <>
@@ -60,7 +99,7 @@ export function StringPreviewContentBlobToggler({
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={previewContent}
+            previewContent={<InlineText>{previewContent}</InlineText>}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}
@@ -70,17 +109,26 @@ export function StringPreviewContentBlobToggler({
     );
 }
 
-const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstNonEmptyLine = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstMarkdownSection = new RegExp("\r\n\r\n|\n\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
  */
 function firstNonEmptyLine(preview: string) {
+    return useOnlyPart(preview, regexFirstNonEmptyLine);
+}
+
+/**
+ * Returns only the first part from a preview string.
+ * Or the full string as fallback.
+ */
+function useOnlyPart(preview: string, regexTest: RegExp): string {
     const previewString = preview.trim();
-    const result = newLineRegex.exec(previewString);
-    return result !== null ? previewString.substr(0, result.index) : previewString;
+    const result = regexTest.exec(previewString);
+    return result !== null ? result.input.slice(0, result.index) : previewString;
 }
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};

src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Markdown, StringPreviewContentBlobToggler } from "../../../index";
+
+const config = {
+    title: "CMEM/ContentBlobToggler/StringPreview",
+    component: StringPreviewContentBlobToggler,
+} as Meta<typeof StringPreviewContentBlobToggler>;
+export default config;
+
+const Template: StoryFn<typeof StringPreviewContentBlobToggler> = (args) => (
+    <StringPreviewContentBlobToggler {...args} />
+);
+
+const initialTeststring =
+    "A library for GUI elements.\nIn order to create graphical user interfaces, please have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
+
+export const Default = Template.bind({});
+Default.args = {
+    content: initialTeststring,
+    fullviewContent: <Markdown htmlContentBlockProps={{ large: true }}>{initialTeststring}</Markdown>,
+    previewMaxLength: 64,
+    renderPreviewAsMarkdown: true,
+    toggleExtendText: "show more",
+    toggleReduceText: "show less",
+};

src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import {
+    StringPreviewContentBlobToggler,
+    StringPreviewContentBlobTogglerProps,
+} from "../StringPreviewContentBlobToggler";
+
+import { Default as StringPreviewContentBlobTogglerStory } from "./../stories/StringPreviewContentBlobToggler.stories";
+
+describe("StringPreviewContentBlobToggler", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should cut preview and show toggler to extend", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show more");
+    });
+    it("should display full view if `startExtended` is enabled, and show toggler to reduce", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                startExtended
+            />
+        );
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show less");
+    });
+    it('should display only first content line on `useOnly={"firstNonEmptyLine"}`', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstNonEmptyLine"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(queryByText, "In order to create");
+    });
+    it('should use first Markdown paragraph as preview content on `useOnly={"firstMarkdownSection"}` but shorten it', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstMarkdownSection"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(queryByText, "In order to create");
+        textMustNotExist(queryByText, "please have look at the documentation at");
+    });
+    it("should display full preview and no toggler if content is short enough", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustNotExist(queryByText, "show more");
+    });
+    it("should not use Markdown rendering on `renderPreviewAsMarkdown={false}`", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+                renderPreviewAsMarkdown={false}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustExist(queryByText, "show more");
+    });
+});

src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -6,15 +6,20 @@ import {
     Badge,
     Card,
     Depiction,
+    OverflowText,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
+    OverviewItemLine,
+    Tag,
+    TagList,
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
+import { Default as LineExample } from "./OverviewItemLine.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -76,3 +81,26 @@ ItemWithDepictionElement.args = {
     hasSpacing: true,
     hasCardWrapper: true,
 };
+
+export const ItemWithTags = Template.bind({});
+ItemWithTags.args = {
+    children: [
+        <OverviewItemDepiction {...DepictionExample.args} key={"depiction"} />,
+        <OverviewItemDescription key={"description"}>
+            <OverviewItemLine {...LineExample.args} />
+            <OverviewItemLine small>
+                <OverflowText>
+                    <TagList>
+                        <Tag small>Test</Tag>
+                        <Tag small>Tag</Tag>
+                        <Tag small>List</Tag>
+                    </TagList>
+                </OverflowText>
+            </OverviewItemLine>
+        </OverviewItemDescription>,
+        <OverviewItemActions children={ActionsExample.args.children[0]} key={"actions"} />,
+    ],
+    densityHigh: false,
+    hasSpacing: true,
+    hasCardWrapper: true,
+};

src/components/OverviewItem/stories/OverviewItemActions.stories.tsx

@@ -9,7 +9,7 @@ export default {
     subcomponents: { Button, IconButton, ContextMenu },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "User-interactive elements.",
         },
     },
@@ -20,7 +20,7 @@ const Template: StoryFn<typeof OverviewItemActions> = (args) => <OverviewItemAct
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
+        <IconButton name="item-remove" text="Remove this item" disruptive />,
         <Button affirmative>Other action</Button>,
     ],
 };

src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx

@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for text content.",
         },
     },

src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -9,7 +9,7 @@ export default {
     component: OverviewItemLine,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for line content.",
         },
     },