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

package/src/components/Icon/icon.scss

@@ -16,12 +16,12 @@
 }
 
 svg.#{$eccgui}-icon {
-    max-width: none;
-    flex-shrink: 0;
     flex-grow: 0;
+    flex-shrink: 0;
+    max-width: none;
 
     &:not([fill]) {
-        fill: currentColor;
+        fill: currentcolor;
     }
 }
 
@@ -54,7 +54,10 @@ svg.#{$eccgui}-icon {
 .#{$eccgui}-menu__item {
     .#{$eccgui}-button--icon,
     .#{$eccgui}-button--icon:not([class*="#{$ns}-intent-"]) {
-        &, &:hover, &:focus, &:active {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
             color: inherit;
         }
     }

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

@@ -1,8 +1,9 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { Button, Icon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
-import { Button, Icon } from "../../../index";
 
 import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 
@@ -21,7 +22,11 @@ export default {
     },
 } as Meta<typeof Icon>;
 
-const Template: StoryFn<typeof Icon> = (args) => <Icon {...args} tooltipText={args.name?.toString()} />;
+const Template: StoryFn<typeof Icon> = (args) => (
+    <OverlaysProvider>
+        <Icon {...args} tooltipText={args.name?.toString()} />
+    </OverlaysProvider>
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -29,11 +34,11 @@ Default.args = {
 };
 
 const TemplateSizes: StoryFn<typeof Icon> = (args) => (
-    <>
+    <OverlaysProvider>
         <Icon {...args} small />
         <Icon {...args} />
         <Icon {...args} large />
-    </>
+    </OverlaysProvider>
 );
 
 export const IconSizes = TemplateSizes.bind({});
@@ -43,10 +48,10 @@ IconSizes.args = {
 
 export const IconsOverview = () => {
     return (
-        <>
+        <OverlaysProvider>
             {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} />;
+                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
             })}
-        </>
+        </OverlaysProvider>
     );
 };

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

@@ -1,7 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
-import { IconButton,TestIcon } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { IconButton, TestIcon } from "../../../../index";
+
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
@@ -11,24 +14,23 @@ export default {
         text: { control: "text" },
         name: {
             control: "select",
-            options: [
-            "Test icon",
-                ...(Object.keys(canonicalIcons)),
-            ],
+            options: ["Test icon", ...Object.keys(canonicalIcons)],
             mapping: {
-            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
-                ...(Object.keys(canonicalIcons)),
-            }
+                "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
+                ...Object.keys(canonicalIcons),
+            },
         },
     },
-} as ComponentMeta<typeof IconButton>;
+} as Meta<typeof IconButton>;
 
-const Template: ComponentStory<typeof IconButton> = (args) => (
-    <IconButton {...args} />
+const Template: StoryFn<typeof IconButton> = (args) => (
+    <OverlaysProvider>
+        <IconButton {...args} />
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     name: "item-moremenu",
-    text: "Tooltip text"
-}
+    text: "Tooltip text",
+};

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

@@ -1,9 +1,10 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { TestIcon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
-import { TestIcon } from "../../../index";
 
 export default {
     title: "Components/Icon/TestIcon",
@@ -19,7 +20,11 @@ export default {
     },
 } as Meta<typeof TestIcon>;
 
-const Template: StoryFn<typeof TestIcon> = (args) => <TestIcon {...args} />;
+const Template: StoryFn<typeof TestIcon> = (args) => (
+    <OverlaysProvider>
+        <TestIcon {...args} />
+    </OverlaysProvider>
+);
 
 export const TestingAnIcon = Template.bind({});
 TestingAnIcon.args = {

package/src/components/Iframe/Iframe.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {TestableComponent} from "../interfaces";
+import { TestableComponent } from "../interfaces";
 import Spinner from "../Spinner/Spinner";
 
 export interface IframeProps extends TestableComponent {
@@ -23,68 +24,81 @@ export interface IframeProps extends TestableComponent {
     // Set iframe background color, need to be a valid CSS color definition
     backgroundColor?: string;
     // native (forwarded) properties of HTML iframe element
-    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">
+    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">;
 }
 
 /**
  * Display iframe but shows a spinner as long as it is not loaded.
  */
-export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
-    title,
-    className = "",
-    useViewportHeight,
-    useAvailableSpace = false,
-    useContentHeight = false,
-    backgroundColor = "",
-    htmlIframeProps = {},
-    ...otherReactProps
-}: IframeProps, ref) => {
-    const [isLoaded, setIsLoaded] = useState<boolean>(false);
-    const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
-    const newRef = React.useRef<HTMLIFrameElement>(null);
-    useEffect(() => {
-        const iframeRef = ref??newRef;
-        if(iframeRef && "current" in iframeRef && iframeRef.current) {
-            if (!!backgroundColor && isLoaded) {
-                const iframeDocStyle = iframeRef?.current?.contentDocument?.documentElement?.style;
-                const iframeBodyStyle = iframeRef?.current?.contentDocument?.body?.style;
-                if (iframeDocStyle && iframeBodyStyle) {
-                    iframeDocStyle.backgroundColor = backgroundColor;
-                    iframeBodyStyle.backgroundColor = backgroundColor;
+export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(
+    (
+        {
+            title,
+            className = "",
+            useViewportHeight,
+            useAvailableSpace = false,
+            useContentHeight = false,
+            backgroundColor = "",
+            htmlIframeProps = {},
+            ...otherReactProps
+        }: IframeProps,
+        ref
+    ) => {
+        const [isLoaded, setIsLoaded] = useState<boolean>(false);
+        const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+        const newRef = React.useRef<HTMLIFrameElement>(null);
+        useEffect(() => {
+            const iframeRef = ref ?? newRef;
+            if (iframeRef && "current" in iframeRef && iframeRef.current) {
+                if (!!backgroundColor && isLoaded) {
+                    const iframeDocStyle = iframeRef?.current?.contentDocument?.documentElement?.style;
+                    const iframeBodyStyle = iframeRef?.current?.contentDocument?.body?.style;
+                    if (iframeDocStyle && iframeBodyStyle) {
+                        iframeDocStyle.backgroundColor = backgroundColor;
+                        iframeBodyStyle.backgroundColor = backgroundColor;
+                    }
                 }
+                setContentHeight(iframeRef.current.contentWindow?.document?.body?.scrollHeight);
             }
-            setContentHeight(iframeRef.current.contentWindow?.document?.body?.scrollHeight);
-        }
-    }, [ref, isLoaded, backgroundColor]);
-    const classNames = `${eccgui}-iframe` +
-        (!!useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
-        (!!useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
-    const { onLoad = ()=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
-    return (
-        <div className={classNames}>
-            {!isLoaded && <Spinner />}
-            <iframe
-                className={className??undefined}
-                ref={ref??newRef}
-                title={title}
-                {...otherOriginalIframeProps}
-                {...otherReactProps}
-                onLoad={(e) => { setIsLoaded(true); onLoad(e); }}
-                style={{
-                    ...(style??{}),
-                    ...(!isLoaded ? {
-                        visibility: "hidden",
-                        position: "absolute",
-                        left: "-10000em",
-                    } as React.CSSProperties : {}),
-                    ...((useContentHeight && !!contentHeight) ? {
-                        height: `${contentHeight}px`,
-                    } : {})
-                }}
-                scrolling={(useContentHeight && !!contentHeight) ? "no" : "yes"}
-            />
-        </div>
-    );
-});
+        }, [ref, isLoaded, backgroundColor]);
+        const classNames =
+            `${eccgui}-iframe` +
+            (useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
+            (useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
+        const { onLoad = () => {}, style, ...otherOriginalIframeProps } = htmlIframeProps;
+        return (
+            <div className={classNames}>
+                {!isLoaded && <Spinner />}
+                <iframe
+                    className={className ?? undefined}
+                    ref={ref ?? newRef}
+                    title={title}
+                    {...otherOriginalIframeProps}
+                    {...otherReactProps}
+                    onLoad={(e) => {
+                        setIsLoaded(true);
+                        onLoad(e);
+                    }}
+                    style={{
+                        ...(style ?? {}),
+                        ...(!isLoaded
+                            ? ({
+                                  visibility: "hidden",
+                                  position: "absolute",
+                                  left: "-10000em",
+                              } as React.CSSProperties)
+                            : {}),
+                        ...(useContentHeight && !!contentHeight
+                            ? {
+                                  height: `${contentHeight}px`,
+                              }
+                            : {}),
+                    }}
+                    scrolling={useContentHeight && !!contentHeight ? "no" : "yes"}
+                />
+            </div>
+        );
+    }
+);
 
 export default Iframe;

package/src/components/Iframe/IframeModal.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import SimpleDialog, {SimpleDialogProps} from "../Dialog/SimpleDialog";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {Iframe, IframeProps} from "./Iframe";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import SimpleDialog, { SimpleDialogProps } from "../Dialog/SimpleDialog";
+
+import { Iframe, IframeProps } from "./Iframe";
 
 export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     // The title of the dialog
@@ -13,14 +15,14 @@ export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     // Forward properties to Iframe component
     compIframeProps?: Omit<IframeProps, "title" | "src" | "htmlIframeProps"> & React.RefAttributes<HTMLIFrameElement>;
     // native (forwarded) properties of HTL iframe element
-    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">
+    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">;
 }
 
 /** Modal that contains an iframe and supports full screen mode. */
 export const IframeModal = ({
     title,
     src,
-    className="",
+    className = "",
     startFullscreen = false,
     compIframeProps = {},
     htmlIframeProps = {},
@@ -28,13 +30,7 @@ export const IframeModal = ({
     size = "large",
     ...otherSimpleDialogProps
 }: IframeModalProps) => {
-    const {
-        useViewportHeight,
-        useAvailableSpace,
-        useContentHeight,
-        ref,
-        ...otherCompIframeProps
-    } = compIframeProps;
+    const { useViewportHeight, useAvailableSpace, useContentHeight, ref, ...otherCompIframeProps } = compIframeProps;
     const internalRef = React.useRef<HTMLIFrameElement>(null);
     const iframeRef = ref ?? internalRef;
 
@@ -43,10 +39,7 @@ export const IframeModal = ({
             hasBorder
             title={title}
             headerOptions={headerOptions}
-            className={
-                `${eccgui}-iframemodal` +
-                (className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-iframemodal` + (className ? ` ${className}` : "")}
             showFullScreenToggler={true}
             startInFullScreenMode={startFullscreen}
             {...otherSimpleDialogProps}
@@ -54,15 +47,15 @@ export const IframeModal = ({
             <Iframe
                 title={title}
                 src={src}
-                useAvailableSpace={(!useViewportHeight && !useContentHeight) ? true : useAvailableSpace}
+                useAvailableSpace={!useViewportHeight && !useContentHeight ? true : useAvailableSpace}
                 useContentHeight={useContentHeight}
                 useViewportHeight={useViewportHeight}
                 htmlIframeProps={htmlIframeProps}
                 {...otherCompIframeProps}
-                ref={ref??iframeRef}
+                ref={ref ?? iframeRef}
             />
         </SimpleDialog>
-    )
-}
+    );
+};
 
 export default IframeModal;

package/src/components/Iframe/iframe.scss

@@ -24,10 +24,7 @@ $eccgui-iframereduction: "#{mini-units(8)} - #{$eccgui-size-card-spacing} - #{$b
 
 .#{eccgui}-iframe--useavailablespace {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     width: auto;
     height: auto;
 }

package/src/components/InteractionGate/InteractionGate.stories.tsx

@@ -1,32 +1,34 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import { InteractionGate, Spinner, Link, Button, HtmlContentBlock } from "./../../index";
+import { Button, HtmlContentBlock, InteractionGate, Link, Spinner } from "./../../index";
 
 export default {
-  title: "Components/InteractionGate",
-  component: InteractionGate,
-  subcomponents: { Spinner },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Any sub lements, could contain elements that provide options for user interactions."
-      }
-  },
+    title: "Components/InteractionGate",
+    component: InteractionGate,
+    subcomponents: { Spinner },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Any sub lements, could contain elements that provide options for user interactions.",
+        },
+    },
 } as ComponentMeta<typeof InteractionGate>;
 
-const Template: ComponentStory<typeof InteractionGate> = (args) => (
-  <InteractionGate {...args}></InteractionGate>
-);
+const Template: ComponentStory<typeof InteractionGate> = (args) => <InteractionGate {...args}></InteractionGate>;
 
 export const Default = Template.bind({});
 Default.args = {
     children: (
         <HtmlContentBlock>
             <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-            <p><Link href="https://example.net">Link</Link></p>
-            <p><Button onClick={() => alert("click")}>Button</Button></p>
+            <p>
+                <Link href="https://example.net">Link</Link>
+            </p>
+            <p>
+                <Button onClick={() => alert("click")}>Button</Button>
+            </p>
         </HtmlContentBlock>
-    )
-}
+    ),
+};

package/src/components/InteractionGate/InteractionGate.tsx

@@ -1,9 +1,12 @@
-import React, { useRef, useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+
 // FIXME: re-evaluate if polyfill is necessary
 // we currently need a polyfill for inert because Firefox do not support it natively atm
 // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert#browser_compatibility
 import "wicg-inert";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Spinner, { SpinnerProps } from "./../Spinner/Spinner";
 
 export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "inert"> {
@@ -44,9 +47,9 @@ export const InteractionGate = ({
     useEffect(() => {
         // we currently cannot add inert property directly to the div because react types module seem not to know it
         if (inert) {
-            domRef.current!.setAttribute('inert', '');
+            domRef.current!.setAttribute("inert", "");
         } else {
-            domRef.current!.removeAttribute('inert');
+            domRef.current!.removeAttribute("inert");
         }
     }, [inert]);
 
@@ -68,9 +71,11 @@ export const InteractionGate = ({
             >
                 {children}
             </div>
-            {showSpinner && <Spinner showLocalBackdrop={true} {...spinnerProps} className={`${eccgui}-interactiongate__spinner`} />}
+            {showSpinner && (
+                <Spinner showLocalBackdrop={true} {...spinnerProps} className={`${eccgui}-interactiongate__spinner`} />
+            )}
         </div>
     );
-}
+};
 
 export default InteractionGate;

package/src/components/Label/Label.stories.tsx

@@ -1,21 +1,16 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-  Label
-} from "../../index";
+import { Label } from "../../index";
 
 export default {
-  title: "Forms/Label",
-  component: Label,
-  argTypes: {
-  },
+    title: "Forms/Label",
+    component: Label,
+    argTypes: {},
 } as ComponentMeta<typeof Label>;
 
-const Template: ComponentStory<typeof Label> = (args) => (
-    <Label {...args} />
-);
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -24,4 +19,4 @@ Default.args = {
     tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
     disabled: false,
     htmlFor: "inputid",
-}
+};

package/src/components/Label/Label.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 import Icon from "../Icon/Icon";
+import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
@@ -60,16 +61,21 @@ export const Label = ({
         </>
     );
 
-    return (!!text || !!info || !!tooltip || !!children) ? React.createElement(
-        htmlElementstring,
-        {
-            className: `${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : ""),
-            ...otherLabelProps,
-        },
-        labelContent
+    return !!text || !!info || !!tooltip || !!children ? (
+        React.createElement(
+            htmlElementstring,
+            {
+                className:
+                    `${eccgui}-label` +
+                    (className ? " " + className : "") +
+                    (disabled ? ` ${eccgui}-label--disabled` : ""),
+                ...otherLabelProps,
+            },
+            labelContent
+        )
     ) : (
         <></>
-    )
-}
+    );
+};
 
 export default Label;

package/src/components/Label/label.scss

@@ -24,19 +24,21 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
 .#{$eccgui}-label__text {
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
         display: block;
-        min-width: 0;
-        max-width: none;
         flex-grow: 0;
         flex-shrink: 1;
+        min-width: 0;
+        max-width: none;
     }
 }
 
 .#{$eccgui}-label__info {
     color: $eccgui-color-label-info;
-    &:before {
+
+    &::before {
         content: "(";
     }
-    &:after {
+
+    &::after {
         content: ")";
     }
 
@@ -46,10 +48,10 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
         display: block;
-        min-width: 0;
-        max-width: none;
         flex-grow: 0;
         flex-shrink: 1;
+        min-width: 0;
+        max-width: none;
     }
 }
 
@@ -62,10 +64,10 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
-        min-width: 0;
-        max-width: none;
         flex-grow: 0;
         flex-shrink: 0;
+        min-width: 0;
+        max-width: none;
     }
 }
 

package/src/components/Link/Link.tsx

@@ -1,30 +1,22 @@
 import React from "react";
-import {
-    Link as CarbonLink,
-    LinkProps as CarbonLinkProps,
-} from "carbon-components-react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Link as CarbonLink, LinkProps as CarbonLinkProps } from "carbon-components-react";
+
 import { openInNewTab } from "../../common/utils/openInNewTab";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface LinkProps extends CarbonLinkProps {};
+export type LinkProps = CarbonLinkProps;
 
-export const Link = ({
-    className = "",
-    children,
-    href,
-    onClick,
-    ...otherProps
-}: CarbonLinkProps) => {
+export const Link = ({ className = "", children, href, onClick, ...otherProps }: CarbonLinkProps) => {
     return (
-      <CarbonLink
-        className={`${eccgui}-link ` + className}
-        {...otherProps}
-        href={href}
-        onClick={(e: React.MouseEvent<HTMLAnchorElement>) => openInNewTab(e, onClick, href)}
-      >
-        {children}
-      </CarbonLink>
+        <CarbonLink
+            className={`${eccgui}-link ` + className}
+            {...otherProps}
+            href={href}
+            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => openInNewTab(e, onClick, href)}
+        >
+            {children}
+        </CarbonLink>
     );
-}
+};
 
 export default Link;