@eccenca/gui-elements 25.0.0 → 25.1.0-rc.0

package/src/components/Tag/tag.scss

@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};
@@ -151,7 +155,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +215,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +235,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {
@@ -267,3 +271,9 @@ $tag-round-adjustment: 0 !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

package/src/components/TextReducer/TextReducer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {render, RenderResult} from "@testing-library/react";
+import { render, RenderResult } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
@@ -9,10 +9,10 @@ import { Default as TextReducerStory } from "./TextReducer.stories";
 describe("TextReducer", () => {
     const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).not.toBeNull();
-    }
+    };
     const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).toBeNull();
-    }
+    };
     it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
         const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
         textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");

package/src/components/Typography/InlineText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({ className = "", children, ...otherProps }: InlineTextProps) => {
+    return (
+        <div {...otherProps} className={`${eccgui}-typography__inlinetext` + (className ? " " + className : "")}>
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

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/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/src/components/Typography/stories/InlineText.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InlineText } from "../InlineText";
+
+import overflowTextConfig from "./OverflowText.stories";
+
+const config = {
+    title: "Components/Typography/InlineText",
+    component: InlineText,
+    argTypes: {
+        children: overflowTextConfig.argTypes?.children,
+    },
+} as Meta<typeof InlineText>;
+export default config;
+
+const Template: StoryFn<typeof InlineText> = (args) => <InlineText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <div>
+            <div>Block line 1.</div>
+            <div>Block line 2.</div>
+        </div>
+    ),
+};

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 {
@@ -68,6 +73,11 @@ mark {
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+    font-size: $eccgui-size-typo-subtitle;
+    line-height: $eccgui-size-typo-subtitle-lineheight;
+}
+
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
@@ -223,9 +233,9 @@ table {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     overflow-wrap: normal;
     white-space: nowrap;
-    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -241,8 +251,8 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     direction: rtl;
     unicode-bidi: embed;
 
@@ -263,6 +273,22 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+
+        & + * {
+            &::before {
+                content: " ";
+            }
+        }
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,15 +1,14 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
-import { EditorState, Extension, Compartment } from "@codemirror/state";
+import { Compartment,EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
-import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
-import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -31,9 +30,10 @@ import {
     adaptedLineNumbers,
     adaptedLintGutter,
     adaptedPlaceholder,
-    compartment,
     adaptedSyntaxHighlighting,
+    compartment,
 } from "./tests/codemirrorTestHelper";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
 export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,12 +1,11 @@
 //adapted v6 modes imports
+import {html} from "@codemirror/lang-html"
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
-import {html} from "@codemirror/lang-html"
-
 import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
 //legacy mode imports
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -7,10 +7,10 @@
  */
 //Todo this should become redundant with later patches that avoid this error
 
-import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
-import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
-import {Extension, Compartment, StateEffect, EditorState} from "@codemirror/state";
+import { codeFolding,foldGutter, syntaxHighlighting } from "@codemirror/language";
 import { lintGutter } from "@codemirror/lint";
+import {Compartment, EditorState,Extension, StateEffect} from "@codemirror/state";
+import { EditorView, highlightActiveLine,highlightSpecialChars, lineNumbers, placeholder } from "@codemirror/view";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>

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

@@ -3,10 +3,11 @@ import {
     ConnectionLineComponentProps,
     ConnectionLineType,
 } from "@xyflow/react";
-import { EdgeStraight, EdgeStep, EdgeBezier, EdgeDefaultV12Props } from "./../index";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 
+import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index";
+
 export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
 
     const {

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,7 +1,8 @@
 import React, { memo } from "react";
 import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
-import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import {Intent} from "@blueprintjs/core/src/common/intent";
+import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
@@ -9,7 +10,6 @@ import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
-import {Intent} from "@blueprintjs/core/src/common/intent";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -6,9 +6,10 @@ import {
 } from "react-flow-renderer";
 import { FlowTransform } from "react-flow-renderer/dist/types";
 
-import { miniMapUtils } from "./utils";
 import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
 import { MiniMapV12, MiniMapV12Props } from "./MiniMapV12";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapBasicProps {
     /**

package/src/extensions/react-flow/minimap/MiniMapV12.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { MiniMap as ReactFlowMiniMap, MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
 
-import { miniMapUtils } from "./utils";
 import { MiniMapBasicProps } from "./MiniMap";
+import { miniMapUtils } from "./utils";
 
 export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
 }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -53,7 +53,8 @@
     border-radius: $reactflow-node-border-radius;
 
     &:hover {
-        box-shadow: 0 0 0 6 * $reactflow-node-border-width eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width
+            eccgui-color-rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
     &.was-resized.is-resizable-vertical {
@@ -147,8 +148,10 @@
 
 .#{$eccgui}-graphviz__node__header-depiction,
 .#{$eccgui}-graphviz__node__header-menu {
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
+    align-items: center;
     max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
     margin: 0 $eccgui-size-block-whitespace * 0.25;
 
@@ -158,8 +161,6 @@
 }
 
 .#{$eccgui}-graphviz__node__header-depiction {
-    display: flex;
-    align-items: center;
     justify-content: center;
 
     /* TODO: does not work correctly with tooltips around

package/src/extensions/react-flow/nodes/nodeUtils.tsx

@@ -2,6 +2,7 @@ import { CSSProperties } from "react";
 import {Node as NodeV9, XYPosition as XYPositionV9} from "react-flow-renderer";
 import {Node as NodeV12, XYPosition as XYPositionV12} from "@xyflow/react";
 import Color from "color";
+
 import {NodeDimensions} from "./NodeContent";
 
 interface StickyNoteBase {

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -12,11 +12,11 @@ import {
     HtmlContentBlock,
     IconButton,
     MenuItem,
+    NodeContent,
+    NodeContentExtension,
     OverflowText,
     Tag,
     TagList,
-    NodeContent,
-    NodeContentExtension,
 } from "./../../../../index";
 import {
     Default as ContentExtensionExample,