@eccenca/gui-elements 24.4.1 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

package/src/components/Icon/canonicalIconNames.tsx

@@ -23,6 +23,19 @@ const canonicalIcons = {
     "artefact-task-pivot": icons.Transpose,
     "artefact-task-unpivot": icons.Transpose,
     "artefact-task-concatenatetofile": icons.DocumentExport,
+    "artefact-task-sqlupdatequeryoperator": icons.Sql,
+    "artefact-task-customsqlexecution": icons.Sql,
+    "artefact-task-multitablemerge": icons.JoinFull,
+    "artefact-task-jsonparseroperator": icons.JsonReference,
+    "artefact-task-searchaddresses": icons.SearchLocate,
+    "artefact-task-sparkfunction": icons.Flash,
+    "artefact-task-eccencadataplatformgraphstorefileuploadoperator": icons.Upload,
+    "artefact-task-xsltoperator": icons.TransformCode,
+    "artefact-task-distinctby": icons.Filter,
+    "artefact-task-template": icons.Template,
+    "artefact-task-merge": icons.Connect,
+    "artefact-task-scheduler": icons.EventSchedule,
+    "artefact-task-sendemail": icons.Email,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -75,6 +88,7 @@ const canonicalIcons = {
     "item-execution": icons.Run,
     "item-info": icons.Information,
     "item-launch": icons.Launch,
+    "item-legend": icons.Legend,
     "item-moremenu": icons.OverflowMenuVertical,
     "item-question": icons.Help,
     "item-reload": icons.Renew,
@@ -92,8 +106,8 @@ const canonicalIcons = {
     "item-hidedetails": icons.ViewOff,
     "item-image": icons.Image,
 
-    "list-sortasc": icons.ArrowDown,
-    "list-sortdesc": icons.ArrowUp,
+    "list-sortasc": icons.ArrowUp,
+    "list-sortdesc": icons.ArrowDown,
     "list-sort": icons.ArrowsVertical,
 
     "module-accesscontrol": icons.UserAdmin,
@@ -145,8 +159,10 @@ const canonicalIcons = {
     "operation-logout": icons.Logout,
     "operation-magic": icons.MagicWand,
     "operation-merge": icons.DirectionMerge,
+    "operation-tour": icons.Tour,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
+    "operation-send": icons.Send,
     "operation-sharelink": icons.CopyLink,
     "operation-transform": icons.Calculation,
     "operation-translate": icons.Translate,
@@ -158,9 +174,13 @@ const canonicalIcons = {
     "state-confirmed": icons.ThumbsUp,
     "state-danger": icons.ErrorFilled,
     "state-declined": icons.ThumbsDown,
+    "state-flagged": icons.Flag,
     "state-info": icons.InformationFilled,
     "state-locked": icons.Locked,
     "state-partlychecked": icons.CheckboxIndeterminate,
+    "state-progress": icons.InProgress,
+    "state-progress-error": icons.InProgressError,
+    "state-progress-warning": icons.InProgressWarning,
     "state-protected": icons.DocumentProtected,
     "state-success": icons.CheckmarkFilled,
     "state-unchecked": icons.Checkbox,
@@ -168,13 +188,19 @@ const canonicalIcons = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-carettop": icons.CaretUp,
     "toggler-caretright": icons.CaretRight,
     "toggler-caretdown": icons.CaretDown,
+    "toggler-caretleft": icons.CaretLeft,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
+    "toggler-micon": icons.Microphone,
+    "toggler-micoff": icons.MicrophoneOff,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
     "toggler-list": icons.List,
+    "toggler-radio": icons.RadioButton,
+    "toggler-radio-checked": icons.RadioButtonChecked,
     "toggler-rowexpand": icons.RowExpand,
     "toggler-rowcollapse": icons.RowCollapse,
     "toggler-showless": icons.ChevronUp,

package/src/components/Icon/icon.scss

@@ -1,6 +1,12 @@
 .#{$eccgui}-icon {
     vertical-align: text-bottom;
 
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
     &.#{$eccgui}-intent--info {
         color: $eccgui-color-info-text;
     }

package/src/components/Icon/stories/Icon.stories.tsx

@@ -2,7 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, Icon } from "../../../../index";
+import {
+    Card,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    TitleSubsection,
+} from "../../../../index";
 import { Definitions } from "../../../common/Intent";
 import BaseIcon from "../BaseIcon";
 
@@ -19,7 +30,8 @@ export default {
         },
         intent: {
             control: "select",
-            options: { ...Definitions },
+            options: [...Object.keys(Definitions)],
+            mapping: { ...Definitions },
         },
     },
 } as Meta<typeof Icon>;
@@ -49,12 +61,60 @@ IconSizes.args = {
     name: "undefined",
 };
 
+/**
+ * Available icons by their canonical names.
+ * If you need another icon then use `<TestIcon /`> component.
+ */
 export const IconsOverview = () => {
+    let section = "";
+    let separation = <></>;
     return (
         <OverlaysProvider>
-            {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
-            })}
+            <FlexibleLayoutContainer
+                noEqualItemSpace
+                gapSize="small"
+                style={{ flexWrap: "wrap", justifyContent: "flex-start" }}
+            >
+                {Object.keys(canonicalIcons)
+                    .sort()
+                    .map((iconName) => {
+                        if (
+                            section !==
+                            iconName.substring(0, iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length)
+                        ) {
+                            section = iconName.substring(
+                                0,
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                            );
+                            separation = (
+                                <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>
+                                    <TitleSubsection>{section}</TitleSubsection>
+                                </FlexibleLayoutItem>
+                            );
+                        } else {
+                            separation = <></>;
+                        }
+                        return (
+                            <React.Fragment key={iconName}>
+                                {separation}
+                                <FlexibleLayoutItem growFactor={0} style={{ width: "20rem" }}>
+                                    <Card>
+                                        <OverviewItem>
+                                            <OverviewItemDepiction keepColors>
+                                                <Icon name={iconName as ValidIconName} />
+                                            </OverviewItemDepiction>
+                                            <OverviewItemDescription>
+                                                <OverviewItemLine small>
+                                                    <OverflowText>{iconName}</OverflowText>
+                                                </OverviewItemLine>
+                                            </OverviewItemDescription>
+                                        </OverviewItem>
+                                    </Card>
+                                </FlexibleLayoutItem>
+                            </React.Fragment>
+                        );
+                    })}
+            </FlexibleLayoutContainer>
         </OverlaysProvider>
     );
 };

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -5,13 +5,13 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { IconButton, TestIcon } from "../../../../index";
 
+import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
     title: "Components/IconButton",
     component: IconButton,
     argTypes: {
-        text: { control: "text" },
         name: {
             control: "select",
             options: ["Test icon", ...Object.keys(canonicalIcons)],
@@ -20,6 +20,7 @@ export default {
                 ...Object.keys(canonicalIcons),
             },
         },
+        intent: buttonStory.argTypes?.intent,
     },
 } as Meta<typeof IconButton>;
 

package/src/components/Label/label.scss

@@ -1,7 +1,7 @@
 $eccgui-size-typo-label: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-label-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-color-label-text: $eccgui-color-workspace-text;
-$eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+$eccgui-color-label-info: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
 
 .#{$eccgui}-label {
     display: block;

package/src/components/Link/link.scss

@@ -11,7 +11,7 @@
     }
 
     &:focus-visible {
-        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
         outline-offset: 1px;
     }
 }

package/src/components/Menu/menu.scss

@@ -1,30 +1,7 @@
-// uses button colors, we can remove it if we decide to use the blueprint buttons
-$button-intents: (
-    "primary": (
-        $pt-intent-primary,
-        $blue2,
-        $blue1,
-    ),
-    "success": (
-        $pt-intent-success,
-        $green2,
-        $green1,
-    ),
-    "warning": (
-        $pt-intent-warning,
-        $orange2,
-        $orange1,
-    ),
-    "danger": (
-        $pt-intent-danger,
-        $red2,
-        $red1,
-    ),
-) !default;
-$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
-$minimal-button-background-color-active: rgba($gray2, 0.3) !default;
-$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
-$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+$minimal-button-background-color-hover: eccgui-color-rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: eccgui-color-rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color-hover: eccgui-color-rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: eccgui-color-rgba($gray3, 0.3) !default;
 
 // $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -12,14 +12,13 @@ import { TestableComponent } from "../interfaces";
 
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
-/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
-export interface MultiSelectSelectionProps<T> {
+export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-interface MultiSelectCommonProps<T>
+interface MultiSuggestFieldCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
@@ -38,7 +37,7 @@ interface MultiSelectCommonProps<T>
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
-    onSelection?: (params: MultiSelectSelectionProps<T>) => void;
+    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
     /**
      * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
@@ -82,26 +81,6 @@ interface MultiSelectCommonProps<T>
      * Intent state of the multi select.
      */
     intent?: BlueprintIntent;
-    /**
-     * The input element is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The input element is displayed with success (some type of green) color scheme.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The input element is displayed with warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The input element is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Disables the input element
      */
@@ -135,12 +114,12 @@ interface MultiSelectCommonProps<T>
     limitHeightOpened?: boolean | number;
 }
 
-/** @deprecated (v25) use MultiSuggestFieldProps */
-export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
+export type MultiSuggestFieldProps<T> = MultiSuggestFieldCommonProps<T> &
     (
         | {
               /**
-               * Predefined selected values
+               * Predefined selected values.
+               * `prePopulateWithItems` cannot be used then.
                */
               selectedItems?: T[];
               prePopulateWithItems?: never;
@@ -148,17 +127,22 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
         | {
               selectedItems?: never;
               /**
-               * When set to true will set the multi-select value with all the items provided
+               * When set to `true` will set the multi-select value with all the items provided.
+               * `selectedItems` cannot be used then.
                */
               prePopulateWithItems?: boolean;
           }
     );
 
 /**
- * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
- * New name for this component is `MultiSuggestField`.
+ * Element behaves very similar to `SuggestField` but allows multiple selections.
+ * Its value does not represent a string but a stack of objects.
+ *
+ * Example usage: input field for user created tags.
+ *
+ * Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
  */
-function MultiSelect<T>({
+export function MultiSuggestField<T>({
     items,
     selectedItems: externalSelectedItems,
     prePopulateWithItems,
@@ -173,10 +157,6 @@ function MultiSelect<T>({
     noResultText = "No results.",
     newItemCreationText = "Add new item",
     newItemPostfix = " (new item)",
-    hasStatePrimary,
-    hasStateDanger,
-    hasStateSuccess,
-    hasStateWarning,
     disabled,
     createNewItemFromQuery,
     requestDelay = 0,
@@ -189,7 +169,7 @@ function MultiSelect<T>({
     limitHeightOpened,
     intent,
     ...otherMultiSelectProps
-}: MultiSelectProps<T>) {
+}: MultiSuggestFieldProps<T>) {
     // Options created by a user
     const createdItems = useRef<T[]>([]);
     // Options passed ouside (f.e. from the backend)
@@ -212,24 +192,6 @@ function MultiSelect<T>({
         timeoutId?: number;
     }>({});
 
-    let stateIntent;
-    switch (true) {
-        case hasStatePrimary:
-            stateIntent = BlueprintIntent.PRIMARY;
-            break;
-        case hasStateSuccess:
-            stateIntent = BlueprintIntent.SUCCESS;
-            break;
-        case hasStateWarning:
-            stateIntent = BlueprintIntent.WARNING;
-            break;
-        case hasStateDanger:
-            stateIntent = BlueprintIntent.DANGER;
-            break;
-        default:
-            break;
-    }
-
     /** Update external items when they change
      *  e.g for auto-complete when query change
      */
@@ -479,7 +441,8 @@ function MultiSelect<T>({
             <IconButton
                 disabled={disabled}
                 name="operation-clear"
-                data-test-id={dataTestId ? dataTestId + "_clearance" : "clear-all-items"} // @deprecated (v25) automatically set test id will be removed
+                data-test-id={dataTestId ? dataTestId + "_clearance" : undefined}
+                data-testid={dataTestid ? dataTestid + "_clearance" : undefined}
                 onClick={handleClear}
             />
         ) : undefined;
@@ -520,10 +483,10 @@ function MultiSelect<T>({
                     "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
                     ...inputProps,
                 } as React.InputHTMLAttributes<HTMLInputElement>,
-                className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+                className: `${eccgui}-multisuggestfield ${eccgui}-multiselect` + (className ? ` ${className}` : ""),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent: intent || stateIntent,
+                intent: intent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,
@@ -584,8 +547,8 @@ function MultiSelect<T>({
 
 // we still return the Blueprint element here because it was already used like that
 /**
- * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ * @deprecated (v26) use directly <MultiSuggestField<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
  */
-MultiSelect.ofType = BlueprintMultiSelect.ofType;
+MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
 
-export default MultiSelect;
+export default MultiSuggestField;

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -29,7 +29,7 @@ export default {
     component: MultiSuggestField,
     argTypes: {
         items: {
-            control: "none",
+            control: false,
         },
         intent: {
             ...helpersArgTypes.exampleIntent,

package/src/components/MultiSuggestField/index.ts

@@ -0,0 +1 @@
+export * from "./../MultiSelect/MultiSelect";

package/src/components/Notification/Notification.stories.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
+import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
     component: Notification,
     argTypes: {
         message: {
-            control: "none",
+            control: false,
         },
         icon: {
             ...helpersArgTypes.exampleIcon,
@@ -33,29 +33,43 @@ ExampleWithMessage.args = {
 export const ExampleWithChildren = TemplateFull.bind({});
 ExampleWithChildren.args = {
     children: (
-        <HtmlContentBlock>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-        </HtmlContentBlock>
+        <>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+                <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+            <br />
+            <Markdown
+                htmlContentBlockProps={{
+                    style: {
+                        maxHeight: "25vh",
+                        overflow: "auto",
+                    },
+                }}
+            >
+                {"```\n" + loremIpsum({ random: false }) + "\n```"}
+            </Markdown>
+        </>
     ),
     onDismiss: false, // workaround for undefined function in Storybook
+    actions: [<></>],
 };
 
 export const ExampleNeutralMessage = TemplateFull.bind({});
 ExampleNeutralMessage.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    neutral: true,
+    intent: "neutral",
 };
 
 export const ExampleWithActions = TemplateFull.bind({});
 ExampleWithActions.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    danger: true,
+    intent: "danger",
     actions: [
         <Button text="Something" key="b1" />,
         <Spacing size="tiny" vertical />,
-        <Button text="Important" hasStateDanger key="b2" />,
+        <Button text="Important" intent="danger" key="b2" />,
     ],
 };

package/src/components/Notification/Notification.tsx

@@ -29,29 +29,6 @@ export interface NotificationProps
      * Intent state of the notification.
      */
     intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger" | "info">;
-    /**
-     * Notification has a neutral color scheme.
-     * @deprecated (v25) use `intent="neutral"` instead.
-     */
-    neutral?: boolean;
-    /**
-     * Notification is a success info.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    success?: boolean;
-    /**
-     * Notification is a warning alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    warning?: boolean;
-    /**
-     * Notification is a danger alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    danger?: boolean;
     /**
      * Notification uses the the given space more flexible.
      * Default notification is displayed in min and max limits.
@@ -79,42 +56,17 @@ export const Notification = ({
     children,
     className,
     message,
-    success = false,
-    warning = false,
-    danger = false,
-    neutral = false,
     flexWidth = false,
     icon,
     timeout,
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
-    intent,
+    intent = "info",
     ...otherProps
 }: NotificationProps) => {
-    let intentLevel: string = IntentClassNames.INFO;
-    let iconSymbol = "state-info";
-    switch (true) {
-        case success:
-            intentLevel = IntentClassNames.SUCCESS;
-            iconSymbol = "state-success";
-            break;
-        case warning:
-            intentLevel = IntentClassNames.WARNING;
-            iconSymbol = "state-warning";
-            break;
-        case danger:
-            intentLevel = IntentClassNames.DANGER;
-            iconSymbol = "state-danger";
-            break;
-        case neutral:
-            intentLevel = IntentClassNames.NEUTRAL;
-            break;
-    }
-
-    const intents: Array<NotificationProps["intent"]> = ["info", "success", "warning", "danger"];
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-    const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : iconSymbol;
+    const intentIconSymbol = intent !== "neutral" ? `state-${intent}` : false;
 
     let notificationIcon = icon !== false ? icon : undefined;
     if (icon !== false && !notificationIcon && !!intentIconSymbol) {
@@ -136,7 +88,7 @@ export const Notification = ({
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
-                (intentClass || intentLevel) +
+                intentClass +
                 (className ? ` ${className}` : "") +
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)

package/src/components/Notification/notification.scss

@@ -3,6 +3,10 @@
 @use "sass:math";
 @import "~@blueprintjs/core/src/components/toast/toast";
 
+.#{$ns}-toast-message {
+    min-width: 0;
+}
+
 .#{$eccgui}-notification {
     width: 100%;
     min-width: math.div(4, 16) * 100vw;
@@ -10,9 +14,9 @@
     margin-top: $eccgui-size-block-whitespace;
     font-size: 1rem;
     line-height: $eccgui-size-typo-base-lineheight;
-    color: $eccgui-color-application-text;
-    background-color: $eccgui-color-application-background;
-    border-color: $eccgui-color-application-text;
+    color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
+    border-color: $eccgui-color-workspace-text;
     border-style: solid;
     border-width: 1px 1px 1px 0.25rem;
 
@@ -69,20 +73,27 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin: -10px; // TODO: use blueprint var ofr toast padding here
+    margin: -0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__messagebody {
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    min-width: 0;
+    padding: 0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__actions {
     flex-grow: 0;
     flex-shrink: 0;
 
-    .#{$ns}-button:not([class*="intent"]) {
+    .#{$ns}-button:not([class*="intent"]):not(:disabled) {
         color: inherit;
     }
 }
+
+@media print {
+    .#{$eccgui}-notification__actions {
+        display: none;
+    }
+}