Merge remote-tracking branch 'origin/release/v24.0.0' into release/v2…

…4.0.0
eccenca · Nov 25, 2024 · c6d1ae4 · c6d1ae4
2 parents 4b73e54 + 5dfac83
commit c6d1ae4
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+This is a major release, and it might be not compatibel with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
+
+### Migration from v23 to v24
+
+-   upgrade Typescript to v5
+-   upgrade Node to at least v18, see **Changed** section for more info about it
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
+    -   `<GridColumn/>`
+        -   `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
+    -   `<Notification/>`
+        -   `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
+        -   `iconName`: was deprecated and now removed, use `icon` property
+    -   `<Table/>`
+        -   `size`: use only "small", "medium" or "large" as value
+    -   `<Tag/>`
+        -   `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
+    -   `IconSized` type: use `CarbonIconType`
+    -   `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
+    -   `MarkdownParserProps` interface: use `MarkdownProps`
+    -   `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
+    -   `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
+
 ### Added
 
 -   `<StringPreviewContentBlobToggler />`:
@@ -21,6 +43,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<Label />`
     -   `emphasis` property to control visual appearance of the label text
 -   basic Storybook example for `<Application* />` components
+-   `<CodeEditor />`
+    -   `setEditorView` option for compatibility to Codemirror v6
+    -   `supportCodeFolding` optional property to fold code for the supported modes e.g: `xml`, `json`, etc.
+    -   `shouldHighlightActiveLine` optional property to highlight active line where the cursor is currently in.
+    -   `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
+    -   `additionalExtensions` optional property for additional extensions to customize the editor further.
+-   `<Markdown />`
+    -   `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
 -   `$eccgui-selector-text-spot-highlight` config variable to specify selector that is used to create shortly highlighted spots
     -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
 
@@ -38,17 +68,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   upgrade to Storybook v8
     -   include a few patches for actions, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
 -   allow `next` and `legacy` as branch names
--   CodeMirror `setInstance` interface changed to `setEditorView` for semantic compatibility to version 6
--   switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
--   Added new properties to `<CodeMirror>`
-    -   `supportCodeFolding` optional property to fold code for the supported modes e.g: xml, json etc.
-    -   `shouldHighlightActiveLine` optional property to highlight active line where the cursor is currently in.
-    -   `shouldHaveMinimalSetup` optional property that imports codemirror's base minimal configurations.
-    -   `additionalExtensions` optional property for additional extensions to customize the editor further.
+-   `<CodeEditor />`
+    -   `setInstance` interface changed to `setEditorView` for semantic compatibility to Codemirror v6
 -   `<BreadcrumbItem/>`
     -   link color and separation char were adjusted
 -   `<Markdown/>`
     -   align blocks for language specific code to default code blocks
+-   switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
 
 ### Deprecated
 
@@ -78,26 +104,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   instead of `MyMultiSuggest = MultiSuggestField.ofType<MyType>()` use directly `<MultiSuggestField<MyType> {...props} />`
     -   `MultiSuggestField.ofType` also returns the original BlueprintJS `MultiSelect` element, not our version!
 
-### Migration from v23 to v24
-
--   upgrade Typescript to v5
--   upgrade Node to at least v18, see **Changed** section for more info about it
--   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
-    -   `<GridColumn/>`
-        -   `full`: was deprecated and now removed because it always uses full width if it is the only column and does not have any othe size config
-    -   `<Notification/>`
-        -   `fullWidth`: was deprecated and now removed, use `flexWidth` as replacement
-        -   `iconName`: was deprecated and now removed, use `icon` property
-    -   `<Table/>`
-        -   `size`: use only "small", "medium" or "large" as value
-    -   `<Tag/>`
-        -   `emphasized`: was deprecated and now removed, use `minimal=false` plus `emphasis="stronger"` instead
-    -   `IconSized` type: use `CarbonIconType`
-    -   `TimeUnits` type: use `ElapsedDateTimeDisplayUnits`
-    -   `MarkdownParserProps` interface: use `MarkdownProps`
-    -   `elapsedTimeSegmented` function: use `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
-    -   `simplifiedElapsedTime` function: use `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
-
 ## [23.8.0] - 2024-08-19
 
 ### Added

diff --git a/src/cmem/markdown/Markdown.tsx b/src/cmem/markdown/Markdown.tsx
@@ -9,7 +9,7 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, TestableComponent } from "../../index";
+import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -28,7 +28,8 @@ export interface MarkdownProps extends TestableComponent {
      */
     allowedElements?: string[];
     /**
-     * Do not wrap it in a content block element.
+     * Do not wrap content in a `HtmlContentBlock` component.
+     * This option is ignored if `htmlContentBlockProps` or `data-test-id` is given.
      */
     inheritBlock?: boolean;
     /**
@@ -41,6 +42,10 @@ export interface MarkdownProps extends TestableComponent {
      * Set to `false` to disable this feature.
      */
     linkTargetName?: false | string;
+    /**
+     * Configure the `HtmlContentBlock` component that is automatically used as wrapper for the parsed Markdown content.
+     */
+    htmlContentBlockProps?: Omit<HtmlContentBlockProps, "children" | "className" | "data-test-id">;
 }
 
 const configDefault = {
@@ -102,6 +107,7 @@ export const Markdown = ({
     allowedElements,
     reHypePlugins,
     linkTargetName = "_mdref",
+    htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
     const configHtml = allowHtml
@@ -162,10 +168,14 @@ export const Markdown = ({
 
     // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
-    return inheritBlock ? (
+    return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay
     ) : (
-        <HtmlContentBlock className={`${eccgui}-markdown__container`} data-test-id={otherProps["data-test-id"]}>
+        <HtmlContentBlock
+            {...htmlContentBlockProps}
+            className={`${eccgui}-markdown__container`}
+            data-test-id={otherProps["data-test-id"]}
+        >
             {markdownDisplay}
         </HtmlContentBlock>
     );

diff --git a/src/components/Application/stories/Application.stories.tsx b/src/components/Application/stories/Application.stories.tsx
@@ -17,6 +17,7 @@ import {
     Button,
     Depiction,
     Icon,
+    OverviewItem,
     WorkspaceHeader,
 } from "../../../index";
 
@@ -76,7 +77,16 @@ const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) =>
                 <code>Menu</code> with <code>MenuItem</code>s.
             </ApplicationSidebarNavigation>
 
-            <WorkspaceHeader id={"ApplicationBasicExample"} />
+            <WorkspaceHeader id={"ApplicationBasicExample"}>
+                <OverviewItem>
+                    <Depiction
+                        image={<Icon name={"application-homepage"} />}
+                        backgroundColor={"dark"}
+                        padding="medium"
+                        ratio="1:1"
+                    />
+                </OverviewItem>
+            </WorkspaceHeader>
 
             <ApplicationToolbar>
                 <ApplicationToolbarSection>

diff --git a/src/components/Typography/HtmlContentBlock.tsx b/src/components/Typography/HtmlContentBlock.tsx
@@ -7,17 +7,29 @@ import * as TypographyClassNames from "./classnames";
 // FIXME: CMEM-3742: comment + add story
 
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 
 export const HtmlContentBlock = ({

diff --git a/src/components/Typography/stories/HtmlContentBlock.stories.tsx b/src/components/Typography/stories/HtmlContentBlock.stories.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
+
+export default {
+    title: "Components/Typography/HtmlContentBlock",
+    component: HtmlContentBlock,
+    argTypes: {
+        children: { control: false },
+    },
+} as Meta<typeof HtmlContentBlock>;
+
+const Template: StoryFn<typeof HtmlContentBlock> = (args) => <HtmlContentBlock {...args} />;
+
+const testContent = (
+    <>
+        <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        <p>
+            <strong>
+                {loremIpsum({
+                    p: 2,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                })
+                    .toString()
+                    .replaceAll(" ", "")}
+            </strong>
+        </p>
+        <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+    </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: testContent,
+};
diff --git a/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx b/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx
@@ -1,26 +1,23 @@
 import React from "react";
-import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+import { WhiteSpaceContainer } from "../../../index";
+
+import { Default as HtmlContentBlockStrory } from "./HtmlContentBlock.stories";
 
 const whiteSpaceSizeOptions = {
-    control: "select",
-    options: {
+    control: { type: "select" },
+    options: ["not set", "tiny", "small", "regular", "large", "xlarge"],
+    mapping: {
         "not set": undefined,
-        tiny: "tiny",
-        small: "small",
-        regular: "regular",
-        large: "large",
-        xlarge: "xlarge",
     },
 };
 
 export default {
-    title: "Components/Typography",
-    component: WhiteSpaceContainerElement,
+    title: "Components/Typography/WhiteSpaceContainer",
+    component: WhiteSpaceContainer,
     argTypes: {
-        children: { control: "none" },
+        children: { control: false },
         marginTop: { ...whiteSpaceSizeOptions },
         marginRight: { ...whiteSpaceSizeOptions },
         marginBottom: { ...whiteSpaceSizeOptions },
@@ -30,27 +27,15 @@ export default {
         paddingBottom: { ...whiteSpaceSizeOptions },
         paddingLeft: { ...whiteSpaceSizeOptions },
     },
-} as Meta<typeof WhiteSpaceContainerElement>;
+} as Meta<typeof WhiteSpaceContainer>;
 
-const Template: StoryFn<typeof WhiteSpaceContainerElement> = (args) => (
-    <WhiteSpaceContainerElement {...args} style={{ background: "#eee" }} />
+const Template: StoryFn<typeof WhiteSpaceContainer> = (args) => (
+    <WhiteSpaceContainer {...args} style={{ background: "#eee" }} />
 );
 
-const testContent = loremIpsum({
-    p: 2,
-    avgSentencesPerParagraph: 4,
-    random: false,
-}).toString();
-
-export const WhiteSpaceContainer = Template.bind({});
-WhiteSpaceContainer.args = {
-    children: [
-        <p>{testContent}</p>,
-        <p>
-            <strong>{testContent.replaceAll(" ", "")}</strong>
-        </p>,
-        <p>{testContent}</p>,
-    ],
+export const Default = Template.bind({});
+Default.args = {
+    children: HtmlContentBlockStrory.args.children,
     paddingTop: "tiny",
     paddingRight: "small",
     paddingBottom: "regular",