Merge pull request #333 from eccenca/feature/prepareFinalNext-CMEM-6943

Prepare final next major (CMEM-6943)

Author: andreas-schultz

CHANGELOG.md

@@ -53,11 +53,27 @@ This is a major release, and it might be not compatible with your current usage
 
 ### Removed
 
--   removed direct replacements for legacy components (imported via @eccenca/gui-elements/src/legacy-replacements or LegacyReplacements)
+-   removed direct replacements for legacy components (imported via `@eccenca/gui-elements/src/legacy-replacements` or `LegacyReplacements`)
     -   `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
+-   `<Button />`, `<FieldItem />`, `<FieldSet />`, `<MultiSuggestField />`
+    -   removed support for old state properties `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger`
+-   `<Notification />`
+    -   removed support for old state properties `neutral`, `success`, `warning` and `danger`
+-   `<Icon />`
+    -   removed `description` and `iconTitle` properties
+-   `<OverviewItemList />`
+    -   `densityHigh` property was removed
+-   `<CodeEditor />`
+    -   static fallback for test id `codemirror-wrapper` was removed, add `data-test-id` (or your test id data attribute) always directly to `CodeEditor`.
+-   `nodeTypes` and `edgeTypes` exports were removed
+    -   use `<ReactFlow/` with `configuration`, or define it yourself
+-   SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
+    -   use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
 -   support for React Flow v10 was completely removed
 -   `<EdgeDefault />`
     -   removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
+-   `<Spinner />`
+    -   `description` property was removed because it was defined but not implemented for a very long time, but we plan to add that type of caption later
 
 ### Fixed
 
@@ -72,6 +88,10 @@ This is a major release, and it might be not compatible with your current usage
     -   support now v9 and v12 of react flow
 -   `<ReactFlowExtended />`
     -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
+-   `<Spinner />`
+    -   `color` property does not accept `intent` values anymore
+-   `<OverflowText />`
+    -   beside explicitly specified properties it allows only basic HTML element properties and testing IDs
 -   overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
 -   `getColorConfiguration()` works with CSS custom properties
 
@@ -302,6 +322,8 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
     -   use always `<Label/>` component for `label` value
 -   `<StickyNoteNode />`
     -   Refactored data structure position and dimension (breaking change)
+-   `<MiniMap />`
+    -   component supports now React Flow v9 and v12
 
 ### Deprecated
 
@@ -501,8 +523,6 @@ This is a major release, and it might be not compatible with your current usage
 -   `<MultiSuggestField />`
     -   Updated the interface with the ability to use either `selectedItems` or `prePopulateWithItems` properties, which is more logical.
     -   Fixed deferred `selectedItems` setting.
--   `<StickyNoteModal/>`
-    -   static test id `data-test-id="sticky-note-modal"` will be removed with next major version
 -   `<BreadcrumbsList />`
     -   `onItemClick` handler is only executed if breadcrumb has `href` set because this is one callback parameter and the handler would not have any information otherwise
 -   `<Depiction />`
@@ -529,6 +549,8 @@ This is a major release, and it might be not compatible with your current usage
 
 -   `<TextArea />`
     -   `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties: use the `intent` property instead.
+-   `<StickyNoteModal/>`
+    -   static test id `data-test-id="sticky-note-modal"` will be removed with next major version
 
 ## [23.6.0] - 2024-04-17
 

package.json

@@ -73,13 +73,13 @@
         "@blueprintjs/select": "^5.3.19",
         "@carbon/icons": "^11.58.0",
         "@carbon/react": "^1.80.1",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.2",
         "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "@xyflow/react": "^12.6.0",
@@ -97,7 +97,6 @@
         "react-inlinesvg": "^3.0.3",
         "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
-        "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "react-syntax-highlighter": "^15.6.1",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",

src/cmem/markdown/Markdown.tsx

@@ -1,21 +1,16 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-/**
- * Recreate the old type to provide support until next major
- */
-import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
-import { PluggableList as PluggableListUnified } from "unified";
+import { PluggableList } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
-type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -41,7 +36,6 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
-     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -61,9 +55,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableListUnified,
+    rehypePlugins: [] as PluggableList,
     allowedElements: [
         // default markdown
         "a",
@@ -173,9 +167,7 @@ export const Markdown = ({
     };
 
     if (reHypePlugins) {
-        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
-            reHypePlugins as PluggableListUnified
-        );
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
     }
 
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;

src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -21,7 +21,6 @@ import {
     ApplicationContainer,
     EdgeTools,
     MiniMap,
-    MiniMapV12,
     NodeTools,
     ReactFlowExtended,
     ReactFlowExtendedProps,
@@ -459,8 +458,12 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
         [reactflowInstance]
     );
 
+    const { style, ...otherProps } = args;
+    const { height, width, ...otherStyles } = style ?? {};
+
     const reactFlowExtendedProps = {
-        ...args,
+        ...otherProps,
+        style: otherStyles,
         defaultZoom: 1,
         elements,
         onLoad,
@@ -470,10 +473,12 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
 
     return (
         <ApplicationContainer monitorDropzonesFor={args.dropzoneFor} style={{ background: "white" }}>
-            <ReactFlowExtended {...reactFlowExtendedProps}>
-                <MiniMap flowInstance={reactflowInstance} enableNavigation={true} />
-                <BackgroundV9 variant={BackgroundVariantV9.Lines} gap={16} />
-            </ReactFlowExtended>
+            <div style={{ height, width }}>
+                <ReactFlowExtended {...reactFlowExtendedProps}>
+                    <MiniMap flowInstance={reactflowInstance} enableNavigation={true} />
+                    <BackgroundV9 variant={BackgroundVariantV9.Dots} gap={16} />
+                </ReactFlowExtended>
+            </div>
             {edgeTools}
         </ApplicationContainer>
     );
@@ -498,8 +503,8 @@ const ReactFlowExampleV12: FC<ReactFlowExtendedProps> = (args) => {
         <ApplicationContainer monitorDropzonesFor={args.dropzoneFor} style={{ background: "white" }}>
             <div style={{ height, width }}>
                 <ReactFlowExtended {...reactFlowExtendedProps}>
-                    <MiniMapV12 enableNavigation />
-                    <BackgroundV12 variant={BackgroundVariantV12.Lines} gap={16} />
+                    <MiniMap enableNavigation />
+                    <BackgroundV12 variant={BackgroundVariantV12.Dots} gap={16} />
                 </ReactFlowExtended>
             </div>
         </ApplicationContainer>

src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -118,7 +118,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                     </Button>,
                 ]}
                 {...simpleDialogProps}
-                data-test-id={(simpleDialogProps ?? {})["data-test-id"] ?? "sticky-note-modal"} // @deprecated (v25) we remove this automatically set testid
             >
                 <FieldItem
                     key="note"

src/common/scss/_color-functions.scss

@@ -86,14 +86,39 @@
  * Created to replace them easily for CSS custom properties.
  */
 @function eccgui-color-rgba($color, $alpha) {
-    @return eccgui-color-mix($color 100% * $alpha, transparent);
+    @if $alpha > 0 {
+        @return eccgui-color-mix($color 100% * $alpha, transparent);
+    } @else {
+        // workaround: we need to prevent `0%` because it will reduced to `0` by some CSS minifiers and leads to invalid color-mix values
+        @return eccgui-color-mix($color, transparent 100%);
+    }
+}
+
+$debug-rgba-values: "yes";
+
+/**
+ * Split between rgba(red, green, blue, alpha) and rgba(color, alpha).
+ */
+@function rgba($r, $g, $b: "undefined", $a: 1) {
+    // check if old notation is used
+    @if meta.variable-exists("r") and meta.variable-exists("g") and $b == "undefined" {
+        // rgba(color, alpha) was used
+        // forward to our color check splitter
+        @return rgba-extended($r, $g);
+    } @else {
+        // rgba(r, g, b, a) is used -> rgb(r g b / a)
+        // @see https://developer.mozilla.org/de/docs/Web/CSS/color_value/rgb
+        $color-new-notation: rgb(#{$r} #{$g} #{$b} / #{$a});
+
+        @return $color-new-notation;
+    }
 }
 
 /**
  * Overwrite SCSS built-in rgba function to support colors by custom properties and CSS color methods.
  * TODO: we need to check if this is future proof, maybe this bahaviour is not planned by Dart Sass library.
  */
-@function rgba($color, $alpha) {
+@function rgba-extended($color, $alpha) {
     @if meta.type-of($color) == "color" {
         // value is SASS color value, we use SASS color functionality
         $alphacolor: color.change($color, $alpha: $alpha);
@@ -102,7 +127,10 @@
             $alphacolor: transparent;
         }
 
-        @debug "Color value $color is not defined by CSS custom property: rgba(#{$color}, #{$alpha}) -> #{$alphacolor}";
+        @if $debug-rgba-values == "yes" {
+            @warn "Color value $color is not defined by CSS custom property: rgba(#{$color}, #{$alpha}) -> #{$alphacolor}";
+        }
+
         @return $alphacolor;
     } @else {
         // value is not a SASS color value, we use CSS color method

src/components/Application/stories/ColorPalettes.stories.tsx

@@ -435,7 +435,7 @@ const ColorPaletteConfigurator = ({
                 togglerElement={
                     <IconButton
                         name="state-warning"
-                        hasStateWarning
+                        intent="warning"
                         badge={warningsDistance.length + warningsContrast.length}
                         badgeProps={{
                             intent: "warning",

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -34,9 +34,6 @@ export interface CodeAutocompleteFieldSuggestionBase {
     description?: string;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionBase */
-export type ISuggestionBase = CodeAutocompleteFieldSuggestionBase;
-
 /** Same as CodeAutocompleteFieldSuggestionBase, but with the query that was used to fetch this suggestion. */
 export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends CodeAutocompleteFieldSuggestionBase {
     // The query this result was filtered by
@@ -47,9 +44,6 @@ export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends Code
     length: number;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionWithReplacementInfo */
-export type ISuggestionWithReplacementInfo = CodeAutocompleteFieldSuggestionWithReplacementInfo;
-
 /** The suggestions for a specific substring of the given input string. */
 export interface CodeAutocompleteFieldReplacementResult {
     // The range of the input string that should be replaced
@@ -63,9 +57,6 @@ export interface CodeAutocompleteFieldReplacementResult {
     replacements: CodeAutocompleteFieldSuggestionBase[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldReplacementResult */
-export type IReplacementResult = CodeAutocompleteFieldReplacementResult;
-
 export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     // Repeats the input string from the corresponding request
     inputString: string;
@@ -74,9 +65,6 @@ export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     replacementResults: CodeAutocompleteFieldReplacementResult[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldPartialAutoCompleteResult */
-export type IPartialAutoCompleteResult = CodeAutocompleteFieldPartialAutoCompleteResult;
-
 /** Validation result */
 export interface CodeAutocompleteFieldValidationResult {
     // If the input value is valid or not
@@ -91,13 +79,7 @@ export interface CodeAutocompleteFieldValidationResult {
     };
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldValidationResult */
-export type IValidationResult = CodeAutocompleteFieldValidationResult;
-
-/**
- * @deprecated (v25) use `CodeAutocompleteFieldProps` instead.
- */
-export interface AutoSuggestionProps {
+export interface CodeAutocompleteFieldProps {
     /** Additional class name.
      */
     className?: string;
@@ -180,9 +162,12 @@ interface RequestMetaData {
 }
 
 /**
- * @deprecated (support already removed) use `CodeAutocompleteField` as replacement.
+ * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor.
+ *
+ * Example usage: input of a path string offering auto-completion for each single part of the path.
  */
-const AutoSuggestion = ({
+export const CodeAutocompleteField = ({
     className,
     label,
     initialValue,
@@ -206,8 +191,8 @@ const AutoSuggestion = ({
     reInitOnInitialValueChange = false,
     height,
     readOnly,
-    outerDivAttributes
-}: AutoSuggestionProps) => {
+    outerDivAttributes,
+}: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
     const dropdownXYoffset = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
@@ -625,7 +610,7 @@ const AutoSuggestion = ({
                     handleEscapePressed();
                     break;
                 default:
-                //do nothing
+                    //do nothing
                     closeDropDown();
             }
         }
@@ -675,15 +660,15 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
-        readOnly
+        readOnly,
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
             id={id}
             ref={autoSuggestionDivRef}
-            className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            className={`${eccgui}-codeautocompletefield ${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
             {...outerDivAttributes}
         >
             <div
@@ -750,12 +735,12 @@ const AutoSuggestion = ({
                         {label}
                         &nbsp;
                         {(pathValidationPending || suggestionsPending) && (
-                            <Spinner size="tiny" position="inline" description="Validating value path" />
+                            <Spinner size="tiny" position="inline" />
                         )}
                     </>
                 ),
             }}
-            hasStateDanger={hasError}
+            intent={hasError ? "danger" : undefined}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}
@@ -765,4 +750,4 @@ const AutoSuggestion = ({
     );
 };
 
-export default AutoSuggestion;
+export default CodeAutocompleteField;