Merge remote-tracking branch 'origin/develop' into release/v25.1.0

Author: haschek

.storybook/preview.js

@@ -19,7 +19,14 @@ export const decorators = [
 ];
 
 export const parameters = {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    options: {
+        storySort: {
+            order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
+        },
+    },
+    actions: {
+        argTypesRegex: "^on[A-Z].*",
+    },
     controls: {
         matchers: {
             color: /(background|color)$/i,

CHANGELOG.md

@@ -8,27 +8,53 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+-   `<ActivityControlWidget />`
+    -   Add parameter `active` to activity control action to set the `active` state of its button.
+    -   action now can have a `active` and `notification` property
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
 -   `<InlineText />`
-    -    force children to get displayed as inline content
+    -   force children to get displayed as inline content
+ -   `<DecoupledOverlay />`
+    -   similar to `ContextOverlay` component but not directly linked to a React element, it specifies the target in the DOM to get connected lazy
 -   `<StringPreviewContentBlobToggler />`
-    - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+    -   `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+-   `<ContextOverlay />`
+    -   `paddingSize` property to add easily some white space
+-   CSS custom properties
+    -   beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
+-   new icons:
+    -   `state-confirmed-all`
+    -   `state-declined-all`
 
 ### 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
+    -   take Markdown rendering into account before testing the maximum preview length
+-   `<CodeEditor />`
+    -   fix `disabled` property update
+-   `<VisualTour />`
+    -   fix color of buttons to move to previous/next step
+    -   take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
+-   `<Link />`
+    -   stabilize font size for on hover state
+    -   use correct font sizes when `size` property is set
 -   `Typography`
-      -   adjust displaying fallback symbols in different browsers
+    -   adjust displaying fallback symbols in different browsers
+-   `<CodeMirror />`
+    -   use the latest provided `onChange` function
 
 ### Changed
 
+-   `<MultiSelect />`:
+    -   Change default filter predicate to match multi-word queries.
+-   `<EdgeDefault />`
+    -   reduce stroke width to only 1px
 -   automatically hide user interaction elements in print view
     -   all application header components except `<WorkspaceHeader />`
     -   `<CardActions />` and `<CardOptions />`
@@ -43,7 +69,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Deprecated
 
 -   `<StringPreviewContentBlobToggler />`
-    -    `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+    -   `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
 
 ## [25.0.0] - 2025-12-01
 

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,17 +1,20 @@
 import React from "react";
 
-import { ValidIconName } from "../../components/Icon/canonicalIconNames";
-import { IconProps } from "../../components/Icon/Icon";
-import { TestIconProps } from "../../components/Icon/TestIcon";
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ValidIconName} from "../../components/Icon/canonicalIconNames";
+import {IconProps} from "../../components/Icon/Icon";
+import {TestIconProps} from "../../components/Icon/TestIcon";
+import {TestableComponent} from "../../components/interfaces";
+import {ProgressBarProps} from "../../components/ProgressBar/ProgressBar";
+import {SpinnerProps} from "../../components/Spinner/Spinner";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {
     Card,
     ContextMenu,
+    DecoupledOverlay,
     IconButton,
     MenuItem,
+    Notification,
+    NotificationProps,
     OverflowText,
     OverviewItem,
     OverviewItemActions,
@@ -97,14 +100,24 @@ interface IActivityContextMenu extends TestableComponent {
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
     action: () => void;
-    // The tooltip that should be shown over the action icon
+    // The tooltip that should be shown over the action icon on hover
     tooltip?: string;
     // The icon of the action button
     icon: ValidIconName | React.ReactElement<TestIconProps>;
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
     hasStateWarning?: boolean;
+    // Active state
+    active?: boolean
+    /** A notification that is shown in an overlay pointing at the activity action button. */
+    notification?: {
+        message: string
+        onClose: () => void
+        intent?: NotificationProps["intent"]
+        // Timeout in ms before notification is closed. Default: none
+        timeout?: number
+    }
 }
 
 interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -209,28 +222,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
             >
                 {activityActions &&
-                    activityActions.map((action, idx) => {
-                        return (
-                            <IconButton
-                                key={
-                                    typeof action.icon === "string"
-                                        ? action.icon
-                                        : action["data-test-id"] ?? action["data-testid"] ?? idx
-                                }
-                                data-test-id={action["data-test-id"]}
-                                data-testid={action["data-testid"]}
-                                name={action.icon}
-                                text={action.tooltip}
-                                onClick={action.action}
-                                disabled={action.disabled}
-                                intent={action.hasStateWarning ? "warning" : undefined}
-                                tooltipProps={{
-                                    hoverOpenDelay: 200,
-                                    placement: "bottom",
-                                }}
-                            />
-                        );
-                    })}
+                    activityActions.map((action, idx) => <ActivityActionButton
+                            key={idx}
+                            action={action}
+                        />
+                    )}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
@@ -241,11 +237,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={
-                                        typeof menuAction.icon === "string"
-                                            ? menuAction.icon
-                                            : menuAction["data-test-id"] ?? idx
-                                    }
+                                    key={idx}
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />
@@ -267,3 +259,44 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
         <div className={classname}>{widget}</div>
     );
 }
+
+interface ActivityActionButtonProps {
+    action: ActivityControlWidgetAction
+}
+
+const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+    const actionButtonRef = React.useRef(null);
+    const ActionButton = () => (
+        <IconButton
+            data-test-id={action["data-test-id"]}
+            data-testid={action["data-testid"]}
+            name={action.icon}
+            text={action.tooltip}
+            onClick={action.action}
+            disabled={action.disabled}
+            intent={action.hasStateWarning ? "warning" : undefined}
+            tooltipProps={{
+                hoverOpenDelay: 200,
+                placement: "bottom"
+            }}
+            active={action.active}
+        />
+    )
+    return action.notification ?
+        <>
+                                <span ref={actionButtonRef}>
+                                    <ActionButton/>
+                                </span>
+            {actionButtonRef.current && (
+                <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
+                    <Notification
+                        message={action.notification.message}
+                        intent={action.notification.intent ?? "neutral"}
+                        onDismiss={action.notification.onClose}
+                        timeout={action.notification.timeout}
+                    />
+                </DecoupledOverlay>
+            )}
+        </> :
+        <ActionButton/>
+}

src/components/Application/_colors.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 
 :root {
+    // creating css custom properties from palette colors
     @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
@@ -12,4 +13,18 @@
             }
         }
     }
+
+    // set aliases for base colors
+    --#{$eccgui}-color-primary: #{$eccgui-color-primary};
+    --#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast};
+    --#{$eccgui}-color-accent: #{$eccgui-color-accent};
+    --#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast};
+    --#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text};
+    --#{$eccgui}-color-success-background: #{$eccgui-color-success-background};
+    --#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text};
+    --#{$eccgui}-color-info-background: #{$eccgui-color-info-background};
+    --#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text};
+    --#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background};
+    --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
+    --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }

src/components/ContextOverlay/ContextOverlay.tsx

@@ -7,7 +7,7 @@ import {
     Utils as BlueprintUtils,
 } from "@blueprintjs/core";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index";
 
 export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
     /**
@@ -24,6 +24,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Currently experimental.
      */
     usePlaceholder?: boolean;
+    /**
+     * Adds white space to each side of the overlay content.
+     * For more control use `WhiteSpaceContainer` directly as wrapper for the content children.
+     */
+    paddingSize?: WhiteSpaceContainerProps["paddingTop"];
 }
 
 /**
@@ -36,6 +41,8 @@ export const ContextOverlay = ({
     preventTopPosition,
     className = "",
     usePlaceholder = false,
+    paddingSize,
+    content,
     ...otherPopoverProps
 }: ContextOverlayProps) => {
     const placeholderRef = React.useRef<HTMLElement>(null);
@@ -169,6 +176,18 @@ export const ContextOverlay = ({
     ) : (
         <BlueprintPopover
             placement="bottom"
+            content={content ? (
+                paddingSize ? (
+                        <WhiteSpaceContainer
+                            paddingTop={paddingSize}
+                            paddingRight={paddingSize}
+                            paddingBottom={paddingSize}
+                            paddingLeft={paddingSize}
+                        >
+                            {content}
+                        </WhiteSpaceContainer>
+                    ) : content
+            ) : undefined}
             {...otherPopoverProps}
             className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}

src/components/DecoupledOverlay/DecoupledOverlay.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { DecoupledOverlay, DecoupledOverlayProps, Tag, WhiteSpaceContainer } from "../../../index";
+
+export default {
+    title: "Components/DecoupledOverlay",
+    component: DecoupledOverlay,
+    argTypes: {},
+} as Meta<typeof DecoupledOverlay>;
+
+const Template: StoryFn<typeof DecoupledOverlay> = (args: DecoupledOverlayProps) => {
+    return (
+        <>
+            <Tag id={"decoupledTarget"}>Decoupled target</Tag>
+            <DecoupledOverlay {...args} />
+        </>
+    );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+    children: (
+        <WhiteSpaceContainer marginTop={"small"} marginRight={"small"} marginBottom={"small"} marginLeft={"small"}>
+            Decoupled overlay
+        </WhiteSpaceContainer>
+    ),
+    targetSelectorOrElement: "#decoupledTarget",
+};