@eccenca/gui-elements 23.0.0-rc.1 → 23.0.0-rc.3

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/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";

package/src/components/Form/FieldItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
@@ -21,7 +21,7 @@ interface IProps extends TestableComponent {
     children: JSX.Element | JSX.Element[] | null
     className?: string
     disabled?: boolean
-    labelAttributes?: object
+    labelProps?: LabelProps
     helperText?: string | JSX.Element
     messageText?: string
 }
@@ -34,7 +34,7 @@ function FieldItem({
     children,
     className,
     disabled,
-    labelAttributes = {},
+    labelProps,
     helperText,
     messageText,
     ...otherProps
@@ -57,7 +57,7 @@ function FieldItem({
             break;
     }
 
-    const label = <Label {...labelAttributes} disabled={disabled} />;
+    const label = <Label {...labelProps} disabled={disabled} />;
 
     const userhelp =
         helperText &&

package/src/components/Form/form.scss

@@ -45,10 +45,10 @@ form {
 
 .#{$eccgui}-fielditem__inputfields {
     &:not(:first-child) {
-        margin-top: $eccgui-size-block-whitespace / 4;
+        margin-top: $eccgui-size-block-whitespace * 0.25;
     }
     &:not(:last-child) {
-        margin-bottom: $eccgui-size-block-whitespace / 4;
+        margin-bottom: $eccgui-size-block-whitespace * 0.25;
     }
 }
 
@@ -76,7 +76,7 @@ form {
     }
 
     &.#{$eccgui}-fieldset--boxed {
-        padding: $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace
+        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace $eccgui-size-block-whitespace
             $eccgui-size-block-whitespace;
         background-color: $data-table-zebra-color;
 
@@ -125,7 +125,7 @@ form {
 
 .#{$eccgui}-fieldset__helpertext,
 .#{$eccgui}-fieldset__message {
-    margin-top: $eccgui-size-block-whitespace / 4;
+    margin-top: $eccgui-size-block-whitespace * 0.25;
 }
 
 .#{$eccgui}-fieldset__fielditems {
@@ -145,12 +145,12 @@ form {
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: flex-end;
-    margin: 0 -1 * $eccgui-size-block-whitespace/2;
+    margin: 0 -1 * $eccgui-size-block-whitespace * 0.5;
 
     & > .#{$eccgui}-fielditem {
         flex-shrink: 1;
         flex-grow: 1;
-        margin: 0 $eccgui-size-block-whitespace/2;
+        margin: 0 $eccgui-size-block-whitespace * 0.5;
     }
 
     &:not(:last-child) {

package/src/components/Icon/Icon.tsx

@@ -6,24 +6,40 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
 
 export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
-    // The CSS class name.
-    className?: string,
-    // Canonical icon name
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[],
-    // description for SVG as accessibility fallback
-    description?: string,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean,
-    // Add tooltip text to icon
+    /**
+     * Add tooltip text to icon
+     */
     tooltipText?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Other tooltip properties
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>,
-    // Intent state of icon (currently only success, info, warning and danger are implemented in style rules)
+    /**
+     * Intent state of icon.
+     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
+     */
     intent?: IntentTypes
+    /**
+     * Display large icon version.
+     */
+    large?: boolean,
+    /**
+     * Display small icon version.
+     */
+    small?: boolean,
+    /**
+     * Additional CSS classes.
+     */
+    className?: string,
+    /**
+     * Description for icon as accessibility fallback.
+     */
+    description?: string,
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
 }
 
 /** Returns the first icon that exists or the fallback icon. */
@@ -56,8 +72,7 @@ function Icon({
     large = false,
     small = false,
     tooltipText,
-    tooltipOpenDelay,
-    tooltipProperties,
+    tooltipProps,
     intent,
     ...restProps
 }: IconProps) {
@@ -85,7 +100,7 @@ function Icon({
         />
     );
     return tooltipText ? (
-        <Tooltip content={tooltipText} hoverOpenDelay={tooltipOpenDelay} {...tooltipProperties}>
+        <Tooltip content={tooltipText} {...tooltipProps}>
             <span>{icon}</span>
         </Tooltip>
     ) : (

package/src/components/Icon/IconButton.tsx

@@ -4,24 +4,30 @@ import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from "./Icon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends ButtonProps {
-    // Canonical icon name
+interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[]
-    className?: string
-    // Tooltip text
+    /**
+     * Button text, will be displayed as tooltip.
+     */
     text?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean
-    // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
+    /**
+     * If `text` should be set as HTML `title` attribute instead of attaching it as tooltip.
+     * If true then `tooltipProps` is ignored.
+     */
     tooltipAsTitle?: boolean
-    // If set, button will become an anchor button. FIXME: CMEM-3742: Setting this parameter should not change the type of the button. Split into several components.
-    href?: string
-    // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
+    /**
+     * Description for icon as accessibility fallback.
+     * If not set then `text` is used.
+     */
     description?: string
+    /**
+     * Button is displayed with minimal styles (no borders, no background color).
+     */
+    minimal?: boolean;
 }
 
 /** A button with an icon instead of text. */
@@ -29,10 +35,10 @@ function IconButton({
     className = "",
     name = "undefined",
     text,
-    tooltipProperties,
+    tooltipProps,
     description,
-    tooltipOpenDelay = 1000,
     tooltipAsTitle = false,
+    minimal=true,
     ...restProps
 }: IconButtonProps & AnchorOrButtonProps) {
     return (
@@ -45,13 +51,12 @@ function IconButton({
                     small={restProps.small}
                     large={restProps.large}
                     tooltipText={tooltipAsTitle ? undefined : text}
-                    tooltipOpenDelay={tooltipOpenDelay}
-                    tooltipProperties={!!tooltipProperties ? tooltipProperties : {}}
+                    tooltipProps={!!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000}}
                     description={description ? description : text}
                 />
             }
             className={`${eccgui}-button--icon ` + className}
-            minimal
+            minimal={minimal}
         />
     );
 }