@eccenca/gui-elements 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0 → 25.0.0-featurecolorwheelinputcmem7327.1

package/src/components/RadioButton/RadioButton.tsx

@@ -1,13 +1,25 @@
 import React from "react";
 import { Radio as BlueprintRadioButton, RadioProps as BlueprintRadioProps } from "@blueprintjs/core";
+import classNames from "classnames";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type RadioButtonProps = BlueprintRadioProps;
+export interface RadioButtonProps extends BlueprintRadioProps {
+    /**
+     * Hide the indicator.
+     * The element cannot be identified as radio input then but a click on the children can be easily processed via `onChange` event.
+     */
+    hideIndicator?: boolean;
+}
 
-export const RadioButton = ({ children, className = "", ...restProps }: RadioButtonProps) => {
+export const RadioButton = ({ children, className = "", hideIndicator = false, ...restProps }: RadioButtonProps) => {
     return (
-        <BlueprintRadioButton {...restProps} className={`${eccgui}-radiobutton ` + className}>
+        <BlueprintRadioButton
+            {...restProps}
+            className={classNames(`${eccgui}-radiobutton`, className, {
+                [`${eccgui}-radiobutton--hidden-indicator`]: hideIndicator,
+            })}
+        >
             {children}
         </BlueprintRadioButton>
     );

package/src/components/RadioButton/radiobutton.scss

@@ -29,3 +29,16 @@
         }
     }
 }
+
+.#{$eccgui}-radiobutton--hidden-indicator {
+    &:not(.#{$ns}-align-right) {
+        padding-inline-start: 0;
+    }
+    &:not(.#{$ns}-align-left) {
+        padding-inline-end: 0;
+    }
+
+    input ~ .#{$ns}-control-indicator {
+        visibility: hidden;
+    }
+}

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
     title: "Components/Tabs/TabTitle",
@@ -9,7 +9,7 @@ export default {
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};

package/src/components/Typography/_reset.scss

@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 

package/src/components/Typography/typography.scss

@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
 }
 
 code {

package/src/components/VisualTour/VisualTour.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { createPortal } from "react-dom";
-import { Classes as BlueprintClasses } from "@blueprintjs/core";
-import { createPopper } from "@popperjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
@@ -14,6 +12,7 @@ import {
     CardHeader,
     CardOptions,
     CardTitle,
+    DecoupledOverlay,
     IconButton,
     Markdown,
     ModalSize,
@@ -130,7 +129,7 @@ export const VisualTour = ({
                     <Button
                         key={"next"}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         onClick={() => {
                             setCurrentStepIndex(currentStepIndex + 1);
                         }}
@@ -144,7 +143,7 @@ export const VisualTour = ({
                         text={closeLabel}
                         onClick={closeTour}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         rightIcon={"navigation-close"}
                     />
                 ),
@@ -292,25 +291,6 @@ interface StepPopoverProps {
 
 /** Popover that is displayed and points at the highlighted element. */
 const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: StepPopoverProps) => {
-    const tooltipRef = React.useCallback(
-        (tooltip: HTMLDivElement | null) => {
-            if (tooltip) {
-                createPopper(highlightedElement, tooltip, {
-                    placement: "auto",
-                    modifiers: [
-                        {
-                            name: "offset",
-                            options: {
-                                offset: [0, 15],
-                            },
-                        },
-                    ],
-                });
-            }
-        },
-        [highlightedElement]
-    );
-
     const backdropRef = React.useCallback(
         (backdrop: HTMLDivElement | null) => {
             const highlightStencil = () => {
@@ -340,39 +320,39 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
         [highlightedElement]
     );
 
+    // map to only tooltip size because the `DecoupledOverlay` only supports them
+    let overlaySize: TooltipSize = "large";
+    switch (step.size) {
+        case "tiny":
+            overlaySize = "small";
+            break;
+        case "regular":
+            overlaySize = "medium";
+            break;
+        case "xlarge":
+        case "fullscreen":
+            overlaySize = "large";
+            break;
+    }
+
     return createPortal(
         <div className={`${eccgui}-visual-tour`}>
             <div className={`${eccgui}-visual-tour__focushelper`} ref={backdropRef} />
             <div>
                 <div className={`${eccgui}-visual-tour__backdrop`} />
             </div>
-            <div
-                className={
-                    `${eccgui}-visual-tour__overlay` +
-                    ` ${eccgui}-visual-tour__overlay--${step.size ?? "large"}` +
-                    ` ${BlueprintClasses.POPOVER}`
-                }
-                role="tooltip"
-                ref={tooltipRef}
-            >
-                <div
-                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
-                    data-popper-arrow
-                    aria-hidden
-                />
-                <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
-                    <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
-                        <CardHeader>
-                            <CardTitle>{step.title}</CardTitle>
-                            <CardOptions>{titleOption}</CardOptions>
-                        </CardHeader>
-                        <CardContent>
-                            <StepContent step={step} />
-                        </CardContent>
-                        <CardActions inverseDirection>{actionButtons}</CardActions>
-                    </Card>
-                </div>
-            </div>
+            <DecoupledOverlay targetSelectorOrElement={highlightedElement} size={overlaySize} usePortal={false}>
+                <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
+                    <CardHeader>
+                        <CardTitle>{step.title}</CardTitle>
+                        <CardOptions>{titleOption}</CardOptions>
+                    </CardHeader>
+                    <CardContent>
+                        <StepContent step={step} />
+                    </CardContent>
+                    <CardActions inverseDirection>{actionButtons}</CardActions>
+                </Card>
+            </DecoupledOverlay>
         </div>,
         document.body
     );

package/src/components/VisualTour/visualTour.scss

@@ -31,40 +31,6 @@
     opacity: 0;
 }
 
-.#{$eccgui}-visual-tour__arrow {
-    &::before {
-        background: $card-background-color;
-    }
-
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
-        bottom: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
-        left: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
-        top: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
-        right: -0.5 * $eccgui-size-block-whitespace;
-    }
-}
-
-.#{$eccgui}-visual-tour__overlay {
-    z-index: 8002; // 2 over application header
-    &--small {
-        @extend .#{$eccgui}-tooltip--small;
-    }
-
-    &--medium {
-        @extend .#{$eccgui}-tooltip--medium;
-    }
-
-    &--large {
-        @extend .#{$eccgui}-tooltip--large;
-    }
-}
-
 .#{$eccgui}-card__content {
     .#{$eccgui}-visual-tour__overlay__content & {
         max-height: 45vh;

package/src/components/index.scss

@@ -5,6 +5,7 @@
 @import "./Card/card";
 @import "./Chat/chat";
 @import "./Checkbox/checkbox";
+@import "./DecoupledOverlay/decoupledoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./FlexibleLayout/flexiblelayout";
@@ -32,6 +33,7 @@
 @import "./Tabs/tabs";
 @import "./Tag/tag";
 @import "./TextField/textfield";
+@import "./ColorField/colorfield";
 @import "./TagInput/taginput";
 @import "./Toolbar/toolbar";
 @import "./Tooltip/tooltip";

package/src/components/index.ts

@@ -7,8 +7,10 @@ export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
+export * from "./ColorField/ColorField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
+export * from "./DecoupledOverlay/DecoupledOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
 export * from "./FlexibleLayout";

package/src/configuration/_customproperties.scss

@@ -0,0 +1,32 @@
+/**
+ * We mirror our SCSS variables here to improve availability in inline styles
+ * and module styles without included SCSS config stack.
+ * Colors are set in `src/components/Application/_colors.scss`.
+ */
+
+:root {
+    --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
+    --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
+    --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
+    --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
+    --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
+    --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
+    --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
+    --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
+    --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
+    --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
+    --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
+    --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
+}

package/src/configuration/stories/customproperties.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import CssCustomProperties from "../../common/utils/CssCustomProperties";
+import {
+    Section,
+    SectionHeader,
+    Spacing,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    TitleSubsection,
+} from "../../components";
+import { CLASSPREFIX as eccgui } from "../../index";
+
+const groups: { title: string; filterName: (name: string) => boolean }[] = [
+    {
+        title: "Typography",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-typo`),
+    },
+    {
+        title: "Font weights and spacing",
+        filterName: (name) => name.startsWith(`--${eccgui}-font`),
+    },
+    {
+        title: "Whitespace",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`),
+    },
+    {
+        title: "Color aliases",
+        filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
+    },
+    {
+        title: "Opacity",
+        filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
+    },
+    {
+        title: "Palette colors",
+        filterName: (name) => name.startsWith(`--${eccgui}-color-palette`),
+    },
+];
+
+const CssCustomPropertiesOverview = () => {
+    return (
+        <>
+            {groups.map(({ title, filterName }) => {
+                const properties = new CssCustomProperties({
+                    selectorText: ":root",
+                    filterName,
+                    removeDashPrefix: false,
+                    returnObject: false,
+                }).customProperties() as string[][];
+
+                return (
+                    <React.Fragment key={title}>
+                        <Section>
+                            <SectionHeader>
+                                <TitleSubsection>{title}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="tiny" />
+                            <TableContainer>
+                                <Table columnWidths={["60%", "40%"]}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableHeader>CSS custom property</TableHeader>
+                                            <TableHeader>Current value</TableHeader>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {properties.map(([name, value]) => (
+                                            <TableRow key={name}>
+                                                <TableCell>
+                                                    <code>{name}</code>
+                                                </TableCell>
+                                                <TableCell>
+                                                    {name.startsWith(`--${eccgui}-color`) && (
+                                                        <span
+                                                            style={{
+                                                                display: "inline-block",
+                                                                width: `var(--${eccgui}-size-block-whitespace)`,
+                                                                height: `var(--${eccgui}-size-block-whitespace)`,
+                                                                backgroundColor: value,
+                                                                verticalAlign: "middle",
+                                                                marginRight: `var(--${eccgui}-size-inline-whitespace)`,
+                                                                border: "1px solid currentColor",
+                                                            }}
+                                                        />
+                                                    )}
+                                                    <code>{value}</code>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Section>
+                        <Spacing size="large" />
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+/**
+ * We mirror our SCSS configuration variables as CSS custom vars.
+ * This way they can be easily used for inline styles or in CSS modules without SCSS includes.
+ */
+export default {
+    title: "Configuration/CSS Custom Properties",
+    component: CssCustomPropertiesOverview,
+} as Meta<typeof CssCustomPropertiesOverview>;
+
+export const Default: StoryFn = () => <CssCustomPropertiesOverview />;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -227,10 +227,11 @@ export const CodeEditor = ({
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
     const [view, setView] = React.useState<EditorView | undefined>();
-    const currentView = React.useRef<EditorView>()
-    currentView.current = view
-    const currentReadOnly = React.useRef(readOnly)
-    currentReadOnly.current = readOnly
+    const currentView = React.useRef<EditorView>();
+    currentView.current = view;
+    const currentReadOnly = React.useRef(readOnly);
+    currentReadOnly.current = readOnly;
+    //const currentDisabled = React.useRef(disabled);
     const [showPreview, setShowPreview] = React.useState<boolean>(false);
     // CodeMirror Compartments in order to allow for re-configuration after initialization
     const readOnlyCompartment = React.useRef<Compartment>(compartment())
@@ -377,7 +378,7 @@ export const CodeEditor = ({
             }
 
             if (disabled) {
-                view.dom.className += ` ${eccgui}-disabled`;
+                view.dom.classList.add(`${eccgui}-disabled`);
             }
 
             if (intent) {
@@ -432,7 +433,14 @@ export const CodeEditor = ({
     }, [tabIntentSize])
 
     React.useEffect(() => {
-        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current);
+        if (view?.dom) {
+            if (disabled) {
+                view.dom.classList.add(`${eccgui}-disabled`);
+            } else {
+                view.dom.classList.remove(`${eccgui}-disabled`);
+            }
+        }
     }, [disabled])
 
     React.useEffect(() => {

package/src/extensions/react-flow/_config.scss

@@ -8,9 +8,9 @@ $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
 $reactflow-edge-rendering: geometricprecision !default;
-$reactflow-edge-stroke-width-default: 2px !default;
-$reactflow-edge-stroke-width-hover: 2px !default;
-$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-width-default: 1px !default;
+$reactflow-edge-stroke-width-hover: 1px !default;
+$reactflow-edge-stroke-width-selected: 1px !default;
 $reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
 $reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
 $reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -81,9 +81,11 @@ export const EdgeLabel = memo(
                         })}
                     </div>
                 )}
-                <div className={`${eccgui}-graphviz__edge-label__text`} title={title}>
-                    {typeof text === "string" ? <OverflowText>{text}</OverflowText> : text}
-                </div>
+                {(title || text) && (
+                    <div className={`${eccgui}-graphviz__edge-label__text`} title={title??undefined}>
+                        {text && (typeof text === "string" ? <OverflowText>{text}</OverflowText> : text)}
+                    </div>
+                )}
                 {!!actions && <div className={`${eccgui}-graphviz__edge-label__aux`}>{actions}</div>}
             </div>
         );

package/src/extensions/react-flow/edges/_edges.scss

@@ -258,6 +258,7 @@ path.react-flow__edge-path-highlight {
     min-height: $reactflow-node-basesize;
     max-height: $reactflow-node-basesize * 13;
     padding: $eccgui-size-block-whitespace * 0.5;
+    overflow-y: auto;
 }
 
 // Arrows
@@ -288,6 +289,7 @@ path.react-flow__edge-path-highlight {
     width: auto;
     max-width: 20rem;
     height: 0.5 * $reactflow-node-largesize;
+    padding: 0 $eccgui-size-block-whitespace * 0.25;
     font-size: $reactflow-node-font-size;
     color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
     background-color: var(--#{$eccgui}-reactflow-edge-label-color-background, #{$card-background-color});
@@ -330,7 +332,6 @@ path.react-flow__edge-path-highlight {
     display: inline-flex;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-left: 2px;
     .#{$eccgui}-depiction__image {
         height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
 
@@ -342,7 +343,7 @@ path.react-flow__edge-path-highlight {
 .#{$eccgui}-graphviz__edge-label__text {
     flex-grow: 1;
     flex-shrink: 1;
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
+    margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;

package/src/index.scss

@@ -9,6 +9,7 @@
 // == load default configuration ===============================================
 
 @import "./configuration/variables";
+@import "./configuration/customproperties"; // mirror config as custom properties
 
 // == Necessary imports from libraries =========================================