Merge pull request #361 from eccenca/feature/extendActivityControl-CMEM-7150

Additions and changes for Mapping Creator (CMEM-7150)

Author: haschek

CHANGELOG.md

@@ -8,14 +8,24 @@ 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
+ -   `<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`
+-   `<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
 
@@ -24,6 +34,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   reduce visual impact of border
 -   `<StringPreviewContentBlobToggler />`
     -   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 />`
@@ -34,6 +49,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### 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 />`

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 {
@@ -210,13 +223,9 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             >
                 {activityActions &&
                     activityActions.map((action, idx) => {
-                        return (
+                        const actionButtonRef = React.useRef(null);
+                        const ActionButton = () => (
                             <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}
@@ -226,10 +235,28 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                                 intent={action.hasStateWarning ? "warning" : undefined}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
-                                    placement: "bottom",
+                                    placement: "bottom"
                                 }}
+                                active={action.active}
                             />
-                        );
+                        )
+                        return action.notification ?
+                            <>
+                                <span key={idx} 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 key={idx} />
                     })}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
@@ -241,11 +268,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}
                                 />

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",
+};

src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import { createPopper } from "@popperjs/core";
+
+import { CLASSPREFIX as eccgui, ContextOverlayProps, TestableComponent, TooltipSize, WhiteSpaceContainer } from "../../index";
+
+export interface DecoupledOverlayProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        TestableComponent,
+        Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal" | "paddingSize"> {
+    /**
+     * Element that should be used. The step content is displayed as a tooltip instead of a modal.
+     * In case of an array, the first match is highlighted. */
+    targetSelectorOrElement: string | Element;
+    /**
+     * The size of the overlay.
+     * */
+    size?: TooltipSize;
+}
+
+/**
+ * Use an overlay popover without the necessity to use a target that need to be rendered in place.
+ * The target is referenced by a selector string or element object.
+ * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
+ * It is always displayed, close it by removement.
+ */
+export const DecoupledOverlay = ({
+    targetSelectorOrElement,
+    usePortal = true,
+    portalContainer = document.body,
+    minimal = false,
+    placement = "auto",
+    size = "large",
+    paddingSize,
+    children,
+}: DecoupledOverlayProps) => {
+    const overlayRef = React.useCallback(
+        (overlay: HTMLDivElement | null) => {
+            const target =
+                typeof targetSelectorOrElement === "string"
+                    ? document.querySelector(targetSelectorOrElement)
+                    : targetSelectorOrElement;
+            if (overlay && target) {
+                createPopper(target, overlay, {
+                    placement: placement,
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 15],
+                            },
+                        },
+                    ],
+                });
+            }
+        },
+        [targetSelectorOrElement]
+    );
+
+    const overlay = (
+        <div
+            className={
+                `${eccgui}-decoupled-overlay` +
+                ` ${eccgui}-decoupled-overlay--${size}` +
+                ` ${BlueprintClasses.POPOVER}` +
+                (minimal ? ` ${BlueprintClasses.MINIMAL}` : "")
+            }
+            role="tooltip"
+            ref={overlayRef}
+        >
+            {!minimal && (
+                <div
+                    className={`${eccgui}-decoupled-overlay__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    data-popper-arrow
+                    aria-hidden
+                />
+            )}
+            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-decoupled-overlay__content`}>
+                {paddingSize ? (
+                    <WhiteSpaceContainer
+                        paddingTop={paddingSize}
+                        paddingRight={paddingSize}
+                        paddingBottom={paddingSize}
+                        paddingLeft={paddingSize}
+                    >
+                        {children}
+                    </WhiteSpaceContainer>
+                ) : children}
+            </div>
+        </div>
+    );
+
+    return usePortal ? createPortal(overlay, portalContainer) : overlay;
+};
+
+export default DecoupledOverlay;

src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -0,0 +1,46 @@
+.#{$eccgui}-decoupled-overlay__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-decoupled-overlay {
+    &.#{$prefix-blueprintjs}-popover {
+        z-index: 8001;
+    }
+
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+
+    &:has(.#{$eccgui}-decoupled-overlay__arrow) {
+        .#{$eccgui}-decoupled-overlay__content {
+            min-height: 30px; // height of blueprint arrow
+        }
+    }
+}
+
+.#{$eccgui}-decoupled-overlay__content {
+    padding: 0.1px; // force margins of children to stay inside
+}