@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {ComponentMeta, ComponentStory} from "@storybook/react";
+
+import {AutoCompleteField, IAutoCompleteFieldProps} from "../AutoCompleteField";
+import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter";
+import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
+
+const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
+    title: "Components/AutoCompleteField",
+    component: AutoCompleteField,
+    argTypes: {
+    },
+}
+
+const Template: ComponentStory<typeof AutoCompleteField> = (args) => (
+    <AutoCompleteField {...args}></AutoCompleteField>
+);
+
+export const Default = Template.bind({});
+export const AdaptQueryAfterSelection = Template.bind({})
+export const AllowReset = Template.bind({})
+export const AllowCustomValues = Template.bind({})
+
+// Renders string values as string
+const defaultRenderer = (item: string) => item
+
+const defaultArgs: IAutoCompleteFieldProps<string, string> = {
+    itemRenderer: (item: string) => `Rendered item: ${item}`,
+    itemValueRenderer: (item: string) => `Selected item: ${item}`,
+    itemValueString: (item: string) => `Query: ${item}`,
+    onSearch: (query: string) => {
+        const multiWord = extractSearchWords(query, true)
+        return ["search item A", "search element B", "search object C"]
+            .filter(word => matchesAllWords(word.toLowerCase(), multiWord))
+    },
+    onChange: elem => {
+        console.log(`Entry '${elem}' selected!`)
+    },
+    itemValueSelector: defaultRenderer,
+    noResultText: "No result"
+}
+
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const adaptQueryAfterSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    resetQueryToValue: (selectedValue: string) => selectedValue
+}
+
+// Allows to reset a selection
+const resetSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    reset: {
+        resetValue: "",
+        resetButtonText: "Clear selected value",
+        resettableValue: (value: string) => true
+    }
+}
+
+const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    createNewItem: {
+        itemRenderer: createNewItemRendererFactory(
+            (query: string) => `Create new item: ${query}`,
+            "item-add-artefact"
+        ),
+        itemFromQuery: item => item,
+    }
+}
+
+Default.args = defaultArgs;
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection
+AllowReset.args = resetSelection
+AllowCustomValues.args = allowCustomValues
+
+export default AutoCompleteFieldStory

package/src/components/Button/Button.tsx

@@ -52,7 +52,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     /**
     * Object with additional properties for the tooltip.
     */
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>;
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
@@ -79,7 +79,7 @@ function Button({
   icon,
   rightIcon,
   tooltip = null,
-  tooltipProperties,
+  tooltipProps,
   ...restProps
 }: ButtonProps & AnchorOrButtonProps) {
   let intention;
@@ -117,7 +117,7 @@ function Button({
   );
 
   return (tooltip && !restProps.loading) ? (
-    <Tooltip content={tooltip} {...tooltipProperties}>
+    <Tooltip content={tooltip} {...tooltipProps}>
       <span>{button}</span>
     </Tooltip>
   ) : (

package/src/components/Button/button.scss

@@ -1,11 +1,14 @@
+@use "sass:color";
+@use "sass:map";
+
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
-$button-padding: ($pt-grid-size / 2) $pt-grid-size; // !default;
+$button-padding: ($pt-grid-size * 0.5) $pt-grid-size; // !default;
 $button-border-radius: $pt-border-radius;
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
-// $button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
-// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
+// $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
+// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
 // $button-intent-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.4), inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
@@ -44,10 +47,44 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 // $button-outlined-border-intent-opacity: 0.6 !default;
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
+$button-intents: (
+  "primary": ($eccgui-color-accent, color.scale($eccgui-color-accent, $lightness: -20%), color.scale($eccgui-color-accent, $lightness: -40%)),
+  "success": ($eccgui-color-success-text, color.scale($eccgui-color-success-text, $lightness: -20%), color.scale($eccgui-color-success-text, $lightness: -40%)),
+  "warning": ($eccgui-color-warning-text, color.scale($eccgui-color-warning-text, $lightness: -20%), color.scale($eccgui-color-warning-text, $lightness: -40%)),
+  "danger": ($eccgui-color-danger-text, color.scale($eccgui-color-danger-text, $lightness: -20%), color.scale($eccgui-color-danger-text, $lightness: -40%))
+);
+
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button.#{$ns}-large {
-    min-height: mini-units(6);
+.#{$ns}-button {
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+    // special case override: blueprint do not use configured colors here
+    &.#{$ns}-intent-warning {
+      @include pt-button-intent(map.get($button-intents, "warning")...);
+
+      &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
+        fill: rgba($white, 0.7);
+      }
+
+      &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
+        @include pt-button-intent(map.get($button-intents, "warning")...);
+      }
+
+      &.#{$ns}-minimal,
+      &.#{$ns}-outlined {
+        background: none;
+        box-shadow: none;
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+
+        &:disabled,
+        &.#{$ns}-disabled {
+            color: rgba($eccgui-color-warning-text, 0.39);
+        }
+      }
+    }
 }
 
 .#{$ns}-button-text {

package/src/components/Card/card.scss

@@ -49,7 +49,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__header {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
@@ -83,7 +83,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__content {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
@@ -95,7 +95,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing/4;
+    padding: $eccgui-size-card-spacing * 0.25;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
@@ -103,7 +103,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -133,7 +133,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  ContextMenu,
+  MenuItem,
+} from "../../index";
+
+export default {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  subcomponents: { MenuItem },
+  argTypes: {
+      children: {
+          control: "none",
+      }
+  },
+} as ComponentMeta<typeof ContextMenu>;
+
+const Template: ComponentStory<typeof ContextMenu> = (args) => (
+    <ContextMenu {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <MenuItem key="m0" text={"First option"} />,
+        <MenuItem key="m1" text={"Item two"}>
+            <MenuItem key="m0" text={"First sub option"} />
+            <MenuItem key="m1" text={"Sub item two"} />
+        </MenuItem>
+    ]
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -1,20 +1,54 @@
-import React from "react";
+import React, {ReactElement} from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import ContextOverlay from "./ContextOverlay";
+import { TestableComponent } from "../interfaces";
+import ContextOverlay, { ContextOverlayProps } from "./ContextOverlay";
 import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface ContextMenuProps {
-    togglerElement?: ValidIconName | JSX.Element
-    [key: string]: any
+interface ContextMenuProps extends TestableComponent {
+    /**
+     * Addional CSS class names.
+     */
+    className?: string;
+    /**
+     * The elements of the context menu.
+     * They will be wrapped in a `Menu` element automatically.
+     */
+    children?: JSX.Element | JSX.Element[];
+    /**
+     * Toggler that need to be used to display menu.
+     * If a valid icon name is used then the icon element is displayed.
+     * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
+     */
+    togglerElement?: ValidIconName | JSX.Element;
+    /**
+     * Text displayed as title or tooltip on toggler element.
+     */
+    togglerText?: string;
+    /**
+     * Toggler element is displayed larger than normal.
+     */
+    togglerLarge?: boolean;
+    /**
+     * Tooltip on toggler element is display as HTML title, not as extra tooltip element.
+     */
+    tooltipAsTitle?: boolean;
+    /**
+     * Props to spread to `ContextOverlay` that is used to display the dropdown.
+     */
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
 }
 
+/**
+ * Element displays menu items after toggler is clicked.
+ */
 function ContextMenu({
     children,
     className = "",
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
+    contextOverlayProps,
     togglerLarge = false,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
@@ -22,7 +56,12 @@ function ContextMenu({
     ...restProps
 }: ContextMenuProps) {
     return (
-        <ContextOverlay {...restProps} className={`${eccgui}-contextmenu ` + className}>
+        <ContextOverlay
+            {...restProps}
+            {...contextOverlayProps}
+            className={`${eccgui}-contextmenu ` + className}
+            content={<Menu>{children}</Menu>}
+        >
             {typeof togglerElement === "string" ? (
                 <IconButton
                     tooltipAsTitle={tooltipAsTitle}
@@ -32,9 +71,8 @@ function ContextMenu({
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (
-                { togglerElement }
+                togglerElement as ReactElement
             )}
-            <Menu>{children}</Menu>
         </ContextOverlay>
     );
 }

package/src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import {
+    PopoverPosition,
+    PopoverInteractionKind,
+    PopperModifiers,
+} from "@blueprintjs/core";
+import {
+    PlacementOptions
+} from "@blueprintjs/popover2";
+
+import {
+  ContextOverlay,
+  HtmlContentBlock,
+  Button
+} from "../../index";
+
+export default {
+  title: "Components/ContextOverlay",
+  component: ContextOverlay,
+  argTypes: {
+      className: {
+          control: "string",
+          description: "A space-delimited list of class names to pass along to a child element."
+      },
+      defaultIsOpen: {
+          control: "boolean",
+          description: "Initial opened state when uncontrolled."
+      },
+      isOpen: {
+          control: "boolean",
+          description: "Whether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property."
+      },
+      interactionKind: {
+          control: "select",
+          options: {UNDEFINED: undefined, ...PopoverInteractionKind},
+          description: "The kind of interaction that triggers the display of the popover."
+      },
+      canEscapeKeyClose: {
+          control: "boolean",
+          description: "Whether pressing the esc key should invoke `onClose`."
+      },
+      onClose: {
+          control: "none",
+          description: "A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key (if enabled).",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
+          }
+      },
+      onInteraction: {
+          control: "none",
+          description: "Callback invoked in controlled mode when the popover open state would change due to user interaction.",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "(nextOpenState: boolean, e?: React.SyntheticEvent<HTMLElement>) => void" },
+          }
+      },
+      children: {
+          control: "none",
+      },
+      content: {
+          control: "none",
+          description: "Elements for overlay content."
+      },
+      minimal: {
+          control: "boolean",
+          description: "Whether to apply minimal styling to this popover or tooltip. Minimal popovers do not have an arrow pointing to their target and use a subtler animation."
+      },
+      placement: {
+          control: "select",
+          options: PlacementOptions,
+          description: "The placement (relative to the target) at which the popover should appear. Mutually exclusive with `position` prop."
+      },
+      /*
+      position: {
+          control: "select",
+          options: {UNDEFINED: undefined, ...PopoverPosition},
+          description: "The position (relative to the target) at which the popover should appear. Mutually exclusive with `placement` prop."
+      },
+      */
+      usePortal: {
+          control: "boolean",
+          description: "Whether the popover should be rendered inside a Portal attached to `portalContainer` prop."
+      },
+      modifiers: {
+          control: "object",
+          description: "Popper modifier options, passed directly to internal Popper instance. See https://popper.js.org/docs/v2/modifiers/ for complete details.",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "PopperModifiers" },
+          }
+      },
+      hasBackdrop: {
+          control: "boolean",
+          description: "Enables an invisible overlay beneath the popover that captures clicks and prevents interaction with the rest of the document until the popover is closed, only available with `PopoverInteractionKind.CLICK`."
+      },
+      rootBoundary: {
+          control: "select",
+          options: {UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document"},
+          description: "A root boundary element supplied to the `flip` and `preventOverflow` modifiers, shorthand for overriding Popper.js modifier options. See: https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary",
+          table: {
+              defaultValue: { summary: "viewport" },
+              type: { summary: "RootBoundary" },
+          }
+      },
+      positioningStrategy: {
+          control: "select",
+          options: {UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed"},
+          description: "Popper.js positioning strategy. See: https://popper.js.org/docs/v2/constructors/#strategy",
+          table: {
+              defaultValue: { summary: "absolute" },
+              type: { summary: "PositioningStrategy" },
+          }
+      },
+  },
+} as ComponentMeta<typeof ContextOverlay>;
+
+const Template: ComponentStory<typeof ContextOverlay> = (args) => (
+    <ContextOverlay {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <Button>Target</Button>,
+    content: (
+        <HtmlContentBlock style={{maxWidth: "40em", padding: "0.5rem"}}>
+            Overlay:
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+    //position: PopoverPosition.RIGHT,
+    placement: "auto-start",
+    usePortal: true,
+    minimal: false,
+    defaultIsOpen: false,
+    modifiers: {
+        flip: {
+            enabled: true
+        },
+        preventOverflow: {
+            enabled: true,
+        }
+    } as PopperModifiers,
+    rootBoundary: "viewport",
+    hasBackdrop: false,
+}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,23 +1,30 @@
 import React from 'react';
-import { Popover as BlueprintPropover, Position as BlueprintPosition } from "@blueprintjs/core";
+import {
+    Popover2 as BlueprintPropover,
+    Popover2Props as BlueprintPopoverProps,
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-/*
-
-    @see https://blueprintjs.com/docs/#core/components/popover for list of
-    properties
-
-*/
+export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
+    /**
+     * `target` element to use as toggler for the overlay display.
+     */
+    children?: JSX.Element;
+}
 
+/**
+ * Element displays connected content by interacting with a target element.
+ * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
+ */
 function ContextOverlay({
     children,
     className='',
     ...restProps
-}: any) {
+}: ContextOverlayProps) {
 
     return (
         <BlueprintPropover
-            position={BlueprintPosition.BOTTOM}
+            placement="bottom"
             {...restProps}
             className={`${eccgui}-contextoverlay ` + className}
         >

package/src/components/ContextOverlay/contextoverlay.scss

@@ -1,15 +1,27 @@
 /*
-$popover-background-color: $white !default;
-$dark-popover-background-color: $dark-gray4 !default;
+$pt-popover2-background-color: $white !default;
+$pt-dark-popover2-background-color: $dark-gray4 !default;
 */
 
-@import "~@blueprintjs/core/src/components/popover/popover";
+@import "~@blueprintjs/popover2/src/popover2";
 
-.#{$ns}-popover-wrapper {
+.#{$ns}-popover2-content {
     max-width: 100%;
 }
 
-.#{$ns}-popover-target {
+.#{$ns}-popover2-target {
     cursor: pointer;
     max-width: 100%;
 }
+
+.#{$ns}-submenu.#{$ns}-popover > .#{$ns}-popover-content {
+    // fix for submenu items in overlays/popovers
+    background-color: $pt-popover2-background-color;
+}
+
+.#{$ns}-overlay-start-focus-trap,
+.#{$ns}-overlay-end-focus-trap {
+    &:focus-visible {
+        outline: none;
+    }
+}

package/src/components/Dialog/SimpleDialog.tsx

@@ -16,6 +16,7 @@ import {
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 import {TestableComponent} from "../interfaces";
+import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -49,6 +50,10 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
     wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    /** If a full screen toggler is shown that will allow to switch to full screen mode. */
+    showFullScreenToggler?: boolean
+    /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
+    startInFullScreenMode?: boolean
 }
 
 /**
@@ -66,8 +71,13 @@ function SimpleDialog({
     preventSimpleClosing = false,
     intent,
     headerOptions,
+    showFullScreenToggler = false,
+    startInFullScreenMode = false,
+    size,
     ...otherProps
 }: SimpleDialogProps) {
+    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
+    const showToggler = startInFullScreenMode || showFullScreenToggler
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
     return (
         <Modal
@@ -76,21 +86,32 @@ function SimpleDialog({
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
+            size={displayFullscreen ? "fullscreen" : size}
         >
             <Card className={intentClassName}
             >
-                {(title || headerOptions) && (
+                {(title || headerOptions || showToggler) ? (
                     <CardHeader>
                         <CardTitle
                             className={intentClassName}
                         >
                             {title}
                         </CardTitle>
-                        {headerOptions && (
-                            <CardOptions>{headerOptions}</CardOptions>
+                        {(headerOptions || showToggler) ? (
+                            <CardOptions>
+                                { headerOptions }
+                                {showToggler && (
+                                    <IconButton
+                                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                                        onClick={() => setDisplayFullscreen(!displayFullscreen)}
+                                    />
+                                )}
+                            </CardOptions>
+                        ) : (
+                            <></>
                         )}
                     </CardHeader>
-                )}
+                ) : null}
                 {hasBorder && <Divider />}
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}

package/src/components/Dialog/dialog.scss

@@ -1,12 +1,14 @@
+@use "sass:math";
+
 // our vars
-$eccgui-size-modal-tiny-width: 4/16 * 100vw !default;
-$eccgui-size-modal-tiny-height: 1/9 * 100vh !default;
-$eccgui-size-modal-small-width: 6/16 * 100vw !default;
-$eccgui-size-modal-small-height: 2/9 * 100vh !default;
-$eccgui-size-modal-regular-width: 6/16 * 100vw !default;
-$eccgui-size-modal-regular-height: 3/9 * 100vh !default;
-$eccgui-size-modal-large-width: 8/16 * 100vw !default;
-$eccgui-size-modal-large-height: 6/9 * 100vh !default;
+$eccgui-size-modal-tiny-width: math.div(4, 16) * 100vw !default;
+$eccgui-size-modal-tiny-height:  math.div(1, 9) * 100vh !default;
+$eccgui-size-modal-small-width:  math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-small-height:  math.div(2, 9) * 100vh !default;
+$eccgui-size-modal-regular-width:  math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-regular-height:  math.div(3, 9) * 100vh !default;
+$eccgui-size-modal-large-width:  math.div(8, 16) * 100vw !default;
+$eccgui-size-modal-large-height:  math.div(6, 9) * 100vh !default;
 $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";