@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

package/src/components/Dialog/AlertDialog.tsx

@@ -1,20 +1,22 @@
-import React from 'react';
-import {Definitions as IntentStates, IntentTypes} from "../../common/Intent";
-import SimpleDialog, { SimpleDialogProps } from './SimpleDialog';
+import React from "react";
+
+import { Definitions as IntentStates, IntentTypes } from "../../common/Intent";
+
+import SimpleDialog, { SimpleDialogProps } from "./SimpleDialog";
 
 export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
-  /**
-   * set to true if alert dialog displays a success message
-   */
-  success?: boolean;
-  /**
-   *  set to true if alert dialog displays a warning
-   */
-  warning?: boolean;
-  /**
-   * set to true if alert dialog displays a strong message about errors or disruptive actions
-   */
-  danger?: boolean;
+    /**
+     * set to true if alert dialog displays a success message
+     */
+    success?: boolean;
+    /**
+     *  set to true if alert dialog displays a warning
+     */
+    warning?: boolean;
+    /**
+     * set to true if alert dialog displays a strong message about errors or disruptive actions
+     */
+    danger?: boolean;
 }
 
 // @deprecated
@@ -26,23 +28,24 @@ export type IAlertDialogProps = AlertDialogProps;
  */
 export const AlertDialog = ({
     children,
-    success=false,
-    warning=false,
-    danger=false,
+    success = false,
+    warning = false,
+    danger = false,
     ...otherProps
 }: AlertDialogProps) => {
     let intentLevel: IntentTypes = IntentStates.INFO;
-    if (success) { intentLevel = IntentStates.SUCCESS; }
-    if (warning) { intentLevel = IntentStates.WARNING; }
-    if (danger) { intentLevel = IntentStates.DANGER; }
+    if (success) {
+        intentLevel = IntentStates.SUCCESS;
+    }
+    if (warning) {
+        intentLevel = IntentStates.WARNING;
+    }
+    if (danger) {
+        intentLevel = IntentStates.DANGER;
+    }
 
     return (
-        <SimpleDialog
-            size="tiny"
-            preventSimpleClosing={true}
-            intent={intentLevel}
-            {...otherProps}
-        >
+        <SimpleDialog size="tiny" preventSimpleClosing={true} intent={intentLevel} {...otherProps}>
             {children}
         </SimpleDialog>
     );

package/src/components/Dialog/Modal.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import {
     Classes as BlueprintClassNames,
-    IOverlayState as BlueprintOverlayState,
-    Overlay as BlueprintOverlay,
-    OverlayProps as BlueprintOverlayProps,
+    Overlay2 as BlueprintOverlay,
+    Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
 import { Utilities } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
 
-export interface ModalProps extends BlueprintOverlayProps, BlueprintOverlayState {
+export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
     /**
      * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
@@ -63,6 +63,8 @@ export const Modal = ({
     usePortal = true,
     forceTopPosition = false,
     onOpening,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...otherProps
 }: ModalProps) => {
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
@@ -125,7 +127,7 @@ export const Modal = ({
                 {...wrapperDivProps}
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
-                data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...{ "data-test-id": dataTestId ?? "simpleDialogWidget", "data-testid": dataTestid }}
                 {...focusableProps}
                 tabIndex={0}
             >

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,4 +1,4 @@
-import React, {BaseSyntheticEvent} from "react";
+import React, { BaseSyntheticEvent } from "react";
 
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -131,7 +131,7 @@ export const modalPreventEvents = {
     onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
-    onClick: (event: BaseSyntheticEvent) => event.stopPropagation()
+    onClick: (event: BaseSyntheticEvent) => event.stopPropagation(),
 };
 
 export default SimpleDialog;

package/src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,31 +1,34 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
-import AlertDialog from "./../AlertDialog";
+import { AlertDialog } from "./../../../../index";
 import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
 
 export default {
     title: "Components/Dialog/AlertDialog",
     component: AlertDialog,
     argTypes: {
-        headerOptions: { table: { disable: true }},
-        children: { table: { disable: true }},
-        actions: { table: { disable: true }},
-        hasBorder: { table: { disable: true }},
-        isOpen: { table: { disable: true }},
-        usePortal: { table: { disable: true }},
-        notifications: { table: { disable: true }},
-        preventSimpleClosing	: { table: { disable: true }},
-        intent: { table: { disable: true }},
-        overlayClassName: { table: { disable: true }},
-        preventBackdrop: { table: { disable: true }},
+        headerOptions: { table: { disable: true } },
+        children: { table: { disable: true } },
+        actions: { table: { disable: true } },
+        hasBorder: { table: { disable: true } },
+        isOpen: { table: { disable: true } },
+        usePortal: { table: { disable: true } },
+        notifications: { table: { disable: true } },
+        preventSimpleClosing: { table: { disable: true } },
+        intent: { table: { disable: true } },
+        overlayClassName: { table: { disable: true } },
+        preventBackdrop: { table: { disable: true } },
     },
-} as ComponentMeta<typeof AlertDialog>;
+} as Meta<typeof AlertDialog>;
 
-const Template: ComponentStory<typeof AlertDialog> = (args) => (
-    <div style={{height: "400px"}}>
-        <AlertDialog {...args} />
-    </div>
+const Template: StoryFn<typeof AlertDialog> = (args) => (
+    <OverlaysProvider>
+        <div style={{ height: "400px" }}>
+            <AlertDialog {...args} />
+        </div>
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,28 +1,33 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Modal, Card } from "./../../../../index";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
+import { Card, Modal } from "./../../../../index";
+
 export default {
     title: "Components/Dialog/Modal",
     component: Modal,
     argTypes: {
         children: {
             control: "none",
-            description: "Elements to include into the modal container."
-        }
+            description: "Elements to include into the modal container.",
+        },
     },
-} as ComponentMeta<typeof Modal>;
+} as Meta<typeof Modal>;
 
-const Template: ComponentStory<typeof Modal> = (args) => (
-    <div style={{height: "400px"}}>
-        <Modal {...args} />
-    </div>
+const Template: StoryFn<typeof Modal> = (args) => (
+    <OverlaysProvider>
+        <div style={{ height: "400px" }}>
+            <Modal {...args} />
+        </div>
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     isOpen: true,
     usePortal: false,
-    children: <Card {...SimpleCard.args} />
+    children: <Card {...SimpleCard.args} />,
 };

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
+
 import { SimpleDialog } from "./../../../../index";
-import storyModal from "./Modal.stories";
-import { Default as CardContentExample } from "./../../Card/stories/CardContent.stories";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";
+import { Default as CardContentExample } from "./../../Card/stories/CardContent.stories";
 import { Default as CardOptionExample } from "./../../Card/stories/CardOptions.stories";
+import storyModal from "./Modal.stories";
 
 export default {
     title: "Components/Dialog/SimpleDialog",
@@ -16,14 +18,16 @@ export default {
         },
         actions: {
             control: "none",
-        }
+        },
     },
-} as ComponentMeta<typeof SimpleDialog>;
+} as Meta<typeof SimpleDialog>;
 
-const Template: ComponentStory<typeof SimpleDialog> = (args) => (
-    <div style={{height: "400px"}}>
-        <SimpleDialog {...args} />
-    </div>
+const Template: StoryFn<typeof SimpleDialog> = (args) => (
+    <OverlaysProvider>
+        <div style={{ height: "400px" }}>
+            <SimpleDialog {...args} />
+        </div>
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});

package/src/components/Form/FieldItem.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import Label, { LabelProps } from "../Label/Label";
-import {ClassNames as IntentClassNames} from "../../common/Intent";
+
+import { ClassNames as IntentClassNames } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {TestableComponent} from "../interfaces";
+import { TestableComponent } from "../interfaces";
+import Label, { LabelProps } from "../Label/Label";
 
 /*
     FIXME: Improve development convenience and prevent development errors
@@ -18,42 +19,42 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
      * Set primary state.
      * This is not routed through automatically.
      */
-    hasStatePrimary?: boolean
+    hasStatePrimary?: boolean;
     /**
      * Set success state.
      * This is not routed through automatically.
      */
-    hasStateSuccess?: boolean
+    hasStateSuccess?: boolean;
     /**
      * Set warning state.
      * This is not routed through automatically.
      */
-    hasStateWarning?: boolean
+    hasStateWarning?: boolean;
     /**
      * Set danger state.
      * This is not routed through automatically.
      */
-    hasStateDanger?: boolean
+    hasStateDanger?: boolean;
     /**
      * Is disabled.
      * The included inout element nedd to set disabled directly itself.
      * This is not routed through automatically.
      */
-    disabled?: boolean
+    disabled?: boolean;
     /**
      * Used to set properties for the `Label` element that is used.
      */
-    labelProps?: LabelProps
+    labelProps?: LabelProps;
     /**
      * Text for user help.
      * Is displayed between label and input element.
      */
-    helperText?: string | JSX.Element
+    helperText?: string | JSX.Element;
     /**
      * Feedback notification.
      * Is displayed below the included input element.
      */
-    messageText?: string
+    messageText?: string;
 }
 
 /**
@@ -113,7 +114,9 @@ export const FieldItem = ({
     return (
         <div
             className={
-                `${eccgui}-fielditem` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-fielditem--disabled` : "")
+                `${eccgui}-fielditem` +
+                (className ? " " + className : "") +
+                (disabled ? ` ${eccgui}-fielditem--disabled` : "")
             }
             {...otherProps}
         >
@@ -123,6 +126,6 @@ export const FieldItem = ({
             {notification}
         </div>
     );
-}
+};
 
 export default FieldItem;

package/src/components/Form/FieldItemRow.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,12 +12,7 @@ export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * Allows to display `FieldItem` children horizontally in one row.
  */
-export const FieldItemRow = ({
-    children,
-    className,
-    justifyItemWidths = false,
-    ...otherProps
-}: FieldItemRowProps) => {
+export const FieldItemRow = ({ children, className, justifyItemWidths = false, ...otherProps }: FieldItemRowProps) => {
     return (
         <div
             className={
@@ -29,6 +25,6 @@ export const FieldItemRow = ({
             {children}
         </div>
     );
-}
+};
 
 export default FieldItemRow;

package/src/components/Form/FieldSet.tsx

@@ -1,43 +1,44 @@
 import React from "react";
-import {ClassNames as IntentClassNames} from "../../common/Intent";
+
+import { ClassNames as IntentClassNames } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
     /**
-    * Displays the fieldset inside a box.
-    * Background color of the box is set automatically regarding the set intent state.
-    */
-    boxed?: boolean,
+     * Displays the fieldset inside a box.
+     * Background color of the box is set automatically regarding the set intent state.
+     */
+    boxed?: boolean;
     /**
-    * The fieldsetsection is displayed with primary color scheme.
-    */
+     * The fieldsetsection is displayed with primary color scheme.
+     */
     hasStatePrimary?: boolean;
     /**
-    * The fieldset section is displayed with success (some type of green) color scheme.
-    */
+     * The fieldset section is displayed with success (some type of green) color scheme.
+     */
     hasStateSuccess?: boolean;
     /**
-    * The fieldset section is displayed with warning (some type of orange) color scheme.
-    */
+     * The fieldset section is displayed with warning (some type of orange) color scheme.
+     */
     hasStateWarning?: boolean;
     /**
-    * The fieldsetsection is displayed with danger (some type of red) color scheme.
-    */
+     * The fieldsetsection is displayed with danger (some type of red) color scheme.
+     */
     hasStateDanger?: boolean;
     /**
-    * Optional helper text. If given then it is displayed after the title.
-    */
-    helperText?: string | JSX.Element,
+     * Optional helper text. If given then it is displayed after the title.
+     */
+    helperText?: string | JSX.Element;
     /**
-    * Optional notification text.
-    * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
-    */
-    messageText?: string | JSX.Element,
+     * Optional notification text.
+     * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
+     */
+    messageText?: string | JSX.Element;
     /**
-    * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
-    *
-    */
-    title?: string | JSX.Element,
+     * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
+     *
+     */
+    title?: string | JSX.Element;
 }
 
 /**
@@ -108,6 +109,6 @@ export const FieldSet = ({
             {fielditems}
         </fieldset>
     );
-}
+};
 
 export default FieldSet;

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { FieldItem, TextField } from '../../../../index';
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { FieldItem, TextField } from "../../../../index";
 
 export default {
     title: "Forms/FieldItem",
@@ -10,18 +11,16 @@ export default {
         children: {
             control: "none",
         },
-    }
+    },
 } as ComponentMeta<typeof FieldItem>;
 
-const Template: ComponentStory<typeof FieldItem> = (args) => (
-    <FieldItem {...args} />
-);
+const Template: ComponentStory<typeof FieldItem> = (args) => <FieldItem {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-    children : <TextField />,
-    messageText : <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    children: <TextField />,
+    messageText: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     helperText: <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
     labelProps: {
-        text: "Input label"
-    }
+        text: "Input label",
+    },
 };

package/src/components/Form/Stories/FieldItemRow.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import FieldItem from '../FieldItem'
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import FieldItem from "../FieldItem";
 import FieldItemRow from "../FieldItemRow";
+
 import { Default as FieldItemStory } from "./FieldItem.stories";
 
 export default {
@@ -10,22 +12,19 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Elements to include into the Accordion component"
+            description: "Elements to include into the Accordion component",
         },
-    }
-
+    },
 } as ComponentMeta<typeof FieldItemRow>;
 
-const Template: ComponentStory<typeof FieldItemRow> = (args) => (
-    <FieldItemRow {...args} />
-);
+const Template: ComponentStory<typeof FieldItemRow> = (args) => <FieldItemRow {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-    children : [
+    children: [
         <>
-            <FieldItem {...FieldItemStory.args}/>
-            <FieldItem {...FieldItemStory.args}/>
-            <FieldItem {...FieldItemStory.args}/>
-        </>
-    ]
+            <FieldItem {...FieldItemStory.args} />
+            <FieldItem {...FieldItemStory.args} />
+            <FieldItem {...FieldItemStory.args} />
+        </>,
+    ],
 };

package/src/components/Form/Stories/FieldSet.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import { FieldSet, TitleSubsection, FieldItem, FieldItemRow } from '../../../../index';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index";
+
 import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
 import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories";
 
@@ -12,19 +14,14 @@ export default {
         children: {
             control: "none",
         },
-    }
+    },
 } as Meta<typeof FieldSet>;
 
-const Template: StoryFn<typeof FieldSet> = (args) => (
-    <FieldSet {...args} />
-);
+const Template: StoryFn<typeof FieldSet> = (args) => <FieldSet {...args} />;
 export const Default = Template.bind({});
 Default.args = {
     title: <TitleSubsection>Fieldset title</TitleSubsection>,
-    children: [
-        <FieldItem {...SimpleFieldItemExample.args} />,
-        <FieldItemRow {...SimpleFieldItemRowExample.args} />
-    ],
+    children: [<FieldItem {...SimpleFieldItemExample.args} />, <FieldItemRow {...SimpleFieldItemRowExample.args} />],
     messageText: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     helperText: <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
 };

package/src/components/Form/form.scss

@@ -3,11 +3,12 @@ $eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !def
 $eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
 
 @import "~@blueprintjs/core/src/components/forms/common";
-
 @import "~@blueprintjs/core/src/components/forms/control-group";
+
 // already used in own component @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 @import "~@blueprintjs/core/src/components/forms/file-input";
 @import "~@blueprintjs/core/src/components/forms/form-group";
+
 // already used in own component @import "~@blueprintjs/core/src/components/forms/input-group"; // TextField
 // already used in own component @import "~@blueprintjs/core/src/components/forms/input"; // TextField
 @import "~@blueprintjs/core/src/components/forms/label";
@@ -20,8 +21,8 @@ form {
 .#{$eccgui}-fielditem,
 .#{$eccgui}-fieldset {
     display: block;
-    max-width: 100%;
     min-width: 0;
+    max-width: 100%;
 
     &:not(:last-child) {
         margin-bottom: $eccgui-size-block-whitespace;
@@ -47,6 +48,7 @@ form {
     &:not(:first-child) {
         margin-top: $eccgui-size-block-whitespace * 0.25;
     }
+
     &:not(:last-child) {
         margin-bottom: $eccgui-size-block-whitespace * 0.25;
     }
@@ -69,10 +71,10 @@ form {
 
 .#{$eccgui}-fieldset {
     legend {
-        width: 100%;
-        color: $eccgui-color-applicationheader-text;
         display: block;
         float: left;
+        width: 100%;
+        color: $eccgui-color-applicationheader-text;
     }
 
     &.#{$eccgui}-fieldset--boxed {
@@ -130,26 +132,25 @@ form {
 
 .#{$eccgui}-fieldset__fielditems {
     &:not(:first-child) {
-        &:before {
-            content: " ";
-            height: $eccgui-size-block-whitespace;
+        &::before {
             display: block;
+            height: $eccgui-size-block-whitespace;
             clear: both;
+            content: " ";
         }
     }
 }
 
 .#{$eccgui}-fielditem__row {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
+    flex-flow: row nowrap;
     align-items: flex-end;
+    justify-content: flex-start;
     margin: 0 -1 * $eccgui-size-block-whitespace * 0.5;
 
     & > .#{$eccgui}-fielditem {
-        flex-shrink: 1;
         flex-grow: 1;
+        flex-shrink: 1;
         margin: 0 $eccgui-size-block-whitespace * 0.5;
     }