Release v26.1.0 into main branch

CHANGELOG.md

@@ -6,6 +6,23 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Changed
+
+- `<CodeEditor />`:
+    - `shouldHaveMinimalSetup`: Even if set to false, the edit history feature will still be explicitly enabled.
+- `<PropertyName />`:
+    - column display is only enabled if the container is large enough, this way property name containers do not get to small
+
+### Fixed
+
+- `<Tooltip />`:
+    - Code markup inside tooltips was hardly readable because of low contrast.
+- `<PropertyName />`:
+    - fix width if it contains a label with `OverflowText` children
+    - tooltip is displayed correctly inside the container
+
+## [26.0.0] - 2026-07-08
+
 This is a major release, and it might not be compatible with your current usage of our library. Please read about the necessary changes in the migration section below.
 
 ### Migration from v25 to v26

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "26.0.0",
+    "version": "26.1.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

src/components/PropertyValuePair/PropertyName.tsx

@@ -43,9 +43,9 @@ export const PropertyName = ({
             <div>
                 {typeof children === "string" ? (
                     <Label
-                        text={nowrap ? <OverflowText inline>{children}</OverflowText> : children}
                         isLayoutForElement="span"
                         {...labelProps}
+                        text={nowrap ? <OverflowText inline>{children}</OverflowText> : children}
                     />
                 ) : (
                     children

src/components/PropertyValuePair/PropertyValue.tsx

@@ -7,7 +7,7 @@ export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Force value to get displayed without line breaks.
      * This works best if you use a string or inline element as content.
-     * Otherwise you may need to take care yourself about it.
+     * Otherwise, you may need to take care yourself about it.
      */
     nowrap?: boolean;
 }

src/components/PropertyValuePair/propertyvalue.scss

@@ -1,5 +1,7 @@
 @use "sass:math";
 
+$eccgui-pagination-size-column-breakpoint-small: 20rem;
+
 .#{$eccgui}-propertyvalue__list {
     display: block;
 }
@@ -8,6 +10,8 @@
     clear: both;
     display: block;
     width: 100%;
+    container-name: eccgui-propertyvalue-pair;
+    container-type: inline-size;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
         &:not(:last-child) {
@@ -34,54 +38,65 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    position: relative;
 
     :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
-        min-height: $eccgui-size-textfield-height-regular;
+        @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) {
+            min-height: $eccgui-size-textfield-height-regular;
+        }
+
+        @container eccgui-propertyvalue-pair (width < #{$eccgui-pagination-size-column-breakpoint-small}) {
+            &.#{$eccgui}-propertyvalue__value {
+                margin-bottom: $eccgui-size-inline-whitespace * 0.5;
+            }
+        }
     }
 }
 
 .#{$eccgui}-propertyvalue__property {
     :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
-        float: left;
-        width: math.div(3, 16) * 100%;
-        overflow: hidden;
-
-        & > div {
-            margin-right: $eccgui-size-block-whitespace;
+        @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) {
+            float: left;
+            width: math.div(3, 16) * 100%;
+            overflow: hidden;
+            bottom: -1px;
+
+            & > div {
+                margin-right: $eccgui-size-block-whitespace;
+            }
+
+            .#{$eccgui}-label {
+                line-height: normal;
+            }
         }
     }
-}
 
-.#{$eccgui}-propertyvalue__property--small {
-    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
-        width: math.div(2, 16) * 100%;
+    .#{$eccgui}-label:has(.#{$eccgui}-typography__overflowtext) {
+        display: inline-flex;
+        align-items: baseline;
+        max-width: 100%;
 
-        & + .#{$eccgui}-propertyvalue__value {
-            margin-left: math.div(2, 16) * 100%;
+        span {
+            flex-grow: 0;
+            flex-shrink: 1;
+            min-width: 0;
         }
-    }
-}
 
-.#{$eccgui}-propertyvalue__property--large {
-    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
-        width: math.div(5, 16) * 100%;
-
-        & + .#{$eccgui}-propertyvalue__value {
-            margin-left: math.div(5, 16) * 100%;
+        .#{$eccgui}-label__tooltip,
+        .#{$eccgui}-label__other{
+            position: relative;
+            bottom: -1px;
         }
     }
 }
 
-.#{$eccgui}-propertyvalue__property--nowrap {
-    overflow: visible;
-    white-space: nowrap;
-}
-
 .#{$eccgui}-propertyvalue__value {
     box-sizing: content-box;
 
     :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
-        margin-left: math.div(3, 16) * 100%;
+        @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) {
+            margin-left: math.div(3, 16) * 100%;
+        }
     }
 
     &:not(:last-child) {
@@ -95,6 +110,35 @@
     }
 }
 
+.#{$eccgui}-propertyvalue__property--small {
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) {
+            width: math.div(2, 16) * 100%;
+
+            & + .#{$eccgui}-propertyvalue__value {
+                margin-left: math.div(2, 16) * 100%;
+            }
+        }
+    }
+}
+
+.#{$eccgui}-propertyvalue__property--large {
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) {
+            width: math.div(5, 16) * 100%;
+
+            & + .#{$eccgui}-propertyvalue__value {
+                margin-left: math.div(5, 16) * 100%;
+            }
+        }
+    }
+}
+
+.#{$eccgui}-propertyvalue__property--nowrap {
+    overflow: visible;
+    white-space: nowrap;
+}
+
 @media print {
     .#{$eccgui}-propertyvalue__pair,
     .#{$eccgui}-propertyvalue__property,

src/components/PropertyValuePair/stories/PropertyName.stories.tsx

@@ -4,6 +4,8 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { PropertyName } from "../../../index";
 
+import { Default as LabelExample } from "./../../Label/Label.stories";
+
 export default {
     title: "Components/PropertyValuePair/Name",
     component: PropertyName,
@@ -15,4 +17,11 @@ const Template: StoryFn<typeof PropertyName> = (args) => <PropertyName {...args}
 export const Default = Template.bind({});
 Default.args = {
     children: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
+    labelProps: {
+        ...LabelExample.args,
+        text: undefined,
+        info: undefined,
+        disabled: undefined,
+        htmlFor: undefined,
+    },
 };

src/components/Tooltip/tooltip.scss

@@ -52,6 +52,13 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
             transparent
         );
     }
+
+    pre code,
+    .#{$eccgui}-typography__contentblock pre code,
+    pre.#{$eccgui}-typography__text code {
+        background-color: transparent;
+        color: inherit;
+    }
 }
 
 .#{$prefix}--tooltip-content {

src/extensions/codemirror/CodeMirror.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from "react";
-import { defaultKeymap, indentWithTab } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
 import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
@@ -141,7 +141,8 @@ export interface CodeEditorProps
      */
     additionalExtensions?: Extension[];
     /**
-     * codemirror minimal setup flag
+     * CodeMirror minimal setup flag. If disabled, the rest of CodeMirror's minimal setup stays off,
+     * but editor history remains enabled explicitly.
      */
     shouldHaveMinimalSetup?: boolean;
     /**
@@ -265,6 +266,7 @@ export const CodeEditor = ({
     const wrapLinesCompartment = React.useRef<Compartment>(compartment());
     const preventLineNumbersCompartment = React.useRef<Compartment>(compartment());
     const shouldHaveMinimalSetupCompartment = React.useRef<Compartment>(compartment());
+    const historyCompartment = React.useRef<Compartment>(compartment());
     const placeholderCompartment = React.useRef<Compartment>(compartment());
     const modeCompartment = React.useRef<Compartment>(compartment());
     const keyMapConfigsCompartment = React.useRef<Compartment>(compartment());
@@ -319,6 +321,7 @@ export const CodeEditor = ({
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
         return [
             defaultKeymap as KeyBinding,
+            ...addToKeyMapConfigFor(!shouldHaveMinimalSetup, ...historyKeymap),
             ...addToKeyMapConfigFor(supportCodeFolding, ...foldKeymap),
             ...addToKeyMapConfigFor(tabIndent, indentWithTab),
         ];
@@ -354,6 +357,7 @@ export const CodeEditor = ({
             ...addHandlersFor(!!onKeyDown, "keydown", onKeyDownHandler),
         } as DOMEventHandlers<any>;
         const extensions = [
+            historyCompartment.current.of(addExtensionsFor(!shouldHaveMinimalSetup, history())),
             markField,
             placeholderCompartment.current.of(adaptedPlaceholder(placeholder)),
             adaptedHighlightSpecialChars(),
@@ -478,7 +482,7 @@ export const CodeEditor = ({
 
     React.useEffect(() => {
         updateExtension(keymap?.of(createKeyMapConfigs()), keyMapConfigsCompartment.current);
-    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab]);
+    }, [supportCodeFolding, mode, tabIntentStyle, (tabForceSpaceForModes ?? []).join(", "), enableTab, shouldHaveMinimalSetup]);
 
     React.useEffect(() => {
         updateExtension(EditorState?.tabSize.of(tabIntentSize ?? 2), tabIntentSizeCompartment.current);
@@ -526,6 +530,7 @@ export const CodeEditor = ({
             addExtensionsFor(shouldHaveMinimalSetup ?? true, minimalSetup),
             shouldHaveMinimalSetupCompartment.current,
         );
+        updateExtension(addExtensionsFor(!shouldHaveMinimalSetup, history()), historyCompartment.current);
     }, [shouldHaveMinimalSetup]);
 
     React.useEffect(() => {