From a3f8a99c5973e2257237cace6b48859c812f3672 Mon Sep 17 00:00:00 2001 From: haschek Date: Wed, 8 Jul 2026 15:23:15 +0000 Subject: [PATCH 1/8] Update changelog section to 26.0.0 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d33de591..5e07c642 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +## [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 From 67e69773886294fb5def6b29cdf747e1b51d7717 Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Mon, 13 Jul 2026 13:11:45 +0200 Subject: [PATCH 2/8] Fix pre/code text inside tooltips --- CHANGELOG.md | 5 +++++ src/components/Tooltip/tooltip.scss | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e07c642..754aa122 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Fixed + +- ``: + - Code markup inside tooltips was hardly readable because of low contrast. + ## [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. diff --git a/src/components/Tooltip/tooltip.scss b/src/components/Tooltip/tooltip.scss index 3bbd4b05..d7805bcd 100644 --- a/src/components/Tooltip/tooltip.scss +++ b/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 { From b4ef376cc46a954ba4d7ff195826add5419f48ba Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Wed, 15 Jul 2026 16:43:19 +0200 Subject: [PATCH 3/8] Do not disable history in CodeEditor component when shouldHaveMinimalSetup==false --- CHANGELOG.md | 5 +++++ src/extensions/codemirror/CodeMirror.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 754aa122..24e5d3ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Changed + +- ``: + - `shouldHaveMinimalSetup`: Even if set to false, the edit history feature will still be explicitly enabled. + ### Fixed - ``: diff --git a/src/extensions/codemirror/CodeMirror.tsx b/src/extensions/codemirror/CodeMirror.tsx index bf0d77da..cdb1becb 100644 --- a/src/extensions/codemirror/CodeMirror.tsx +++ b/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()); const preventLineNumbersCompartment = React.useRef(compartment()); const shouldHaveMinimalSetupCompartment = React.useRef(compartment()); + const historyCompartment = React.useRef(compartment()); const placeholderCompartment = React.useRef(compartment()); const modeCompartment = React.useRef(compartment()); const keyMapConfigsCompartment = React.useRef(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; 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(() => { From 4de846cdb473b580662a94020374d1bd3d805a83 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 5 Aug 2026 15:18:16 +0200 Subject: [PATCH 4/8] fix width if it contains a label with OverflowText children --- CHANGELOG.md | 3 +++ .../PropertyValuePair/propertyvalue.scss | 16 ++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24e5d3ec..c9fe871c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - ``: - Code markup inside tooltips was hardly readable because of low contrast. +- ``: + - fix width if it contains a label with `OverflowText` children + - tooltip is displayed correctly inside the container ## [26.0.0] - 2026-07-08 diff --git a/src/components/PropertyValuePair/propertyvalue.scss b/src/components/PropertyValuePair/propertyvalue.scss index 1f1edc29..9b2083d9 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/src/components/PropertyValuePair/propertyvalue.scss @@ -49,6 +49,22 @@ & > div { margin-right: $eccgui-size-block-whitespace; } + + .#{$eccgui}-label { + line-height: normal; + } + } + + .#{$eccgui}-label:has(.#{$eccgui}-typography__overflowtext) { + display: inline-flex; + align-items: baseline; + max-width: 100%; + + span { + flex-grow: 0; + flex-shrink: 1; + min-width: 0; + } } } From 4b790ef611744e252c3036bd44584985fcdfb7a0 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 5 Aug 2026 18:20:24 +0200 Subject: [PATCH 5/8] use minimum breakpoint for column display --- CHANGELOG.md | 2 + .../PropertyValuePair/propertyvalue.scss | 90 +++++++++++-------- 2 files changed, 57 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9fe871c..c6424fba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - ``: - `shouldHaveMinimalSetup`: Even if set to false, the edit history feature will still be explicitly enabled. +- ``: + - column display is only enabled if the container is large enough, this way property name containers do not get to small ### Fixed diff --git a/src/components/PropertyValuePair/propertyvalue.scss b/src/components/PropertyValuePair/propertyvalue.scss index 9b2083d9..0ca206f5 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/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) { @@ -36,22 +40,32 @@ justify-content: center; :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; - } - - .#{$eccgui}-label { - line-height: normal; + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + float: left; + width: math.div(3, 16) * 100%; + overflow: hidden; + + & > div { + margin-right: $eccgui-size-block-whitespace; + } + + .#{$eccgui}-label { + line-height: normal; + } } } @@ -68,22 +82,46 @@ } } +.#{$eccgui}-propertyvalue__value { + box-sizing: content-box; + + :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { + @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { + margin-left: math.div(3, 16) * 100%; + } + } + + &:not(:last-child) { + .#{$eccgui}-propertyvalue__pair--hasdivider > & { + border-bottom: solid 1px $pt-divider-black; + } + .#{$eccgui}-propertyvalue__pair--hasspacing > & { + padding-bottom: $eccgui-size-block-whitespace * 0.5; + margin-bottom: $eccgui-size-block-whitespace * 0.5; + } + } +} + .#{$eccgui}-propertyvalue__property--small { :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(2, 16) * 100%; + @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__value { + margin-left: math.div(2, 16) * 100%; + } } } } .#{$eccgui}-propertyvalue__property--large { :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - width: math.div(5, 16) * 100%; + @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__value { + margin-left: math.div(5, 16) * 100%; + } } } } @@ -93,24 +131,6 @@ white-space: nowrap; } -.#{$eccgui}-propertyvalue__value { - box-sizing: content-box; - - :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { - margin-left: math.div(3, 16) * 100%; - } - - &:not(:last-child) { - .#{$eccgui}-propertyvalue__pair--hasdivider > & { - border-bottom: solid 1px $pt-divider-black; - } - .#{$eccgui}-propertyvalue__pair--hasspacing > & { - padding-bottom: $eccgui-size-block-whitespace * 0.5; - margin-bottom: $eccgui-size-block-whitespace * 0.5; - } - } -} - @media print { .#{$eccgui}-propertyvalue__pair, .#{$eccgui}-propertyvalue__property, From 1d8cf1c4db3e6ae4853c1101658b8502a102e53d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 6 Aug 2026 15:24:20 +0200 Subject: [PATCH 6/8] use workaround to improve alignment --- src/components/PropertyValuePair/PropertyValue.tsx | 2 +- src/components/PropertyValuePair/propertyvalue.scss | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/PropertyValuePair/PropertyValue.tsx b/src/components/PropertyValuePair/PropertyValue.tsx index 2157a23e..2dbfec2f 100644 --- a/src/components/PropertyValuePair/PropertyValue.tsx +++ b/src/components/PropertyValuePair/PropertyValue.tsx @@ -7,7 +7,7 @@ export interface PropertyValueProps extends React.HTMLAttributes { /** * 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; } diff --git a/src/components/PropertyValuePair/propertyvalue.scss b/src/components/PropertyValuePair/propertyvalue.scss index 0ca206f5..7031b8e6 100644 --- a/src/components/PropertyValuePair/propertyvalue.scss +++ b/src/components/PropertyValuePair/propertyvalue.scss @@ -38,6 +38,7 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; display: flex; flex-direction: column; justify-content: center; + position: relative; :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & { @container eccgui-propertyvalue-pair (width >= #{$eccgui-pagination-size-column-breakpoint-small}) { @@ -58,6 +59,7 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; float: left; width: math.div(3, 16) * 100%; overflow: hidden; + bottom: -1px; & > div { margin-right: $eccgui-size-block-whitespace; @@ -79,6 +81,12 @@ $eccgui-pagination-size-column-breakpoint-small: 20rem; flex-shrink: 1; min-width: 0; } + + .#{$eccgui}-label__tooltip, + .#{$eccgui}-label__other{ + position: relative; + bottom: -1px; + } } } From 9c4d6185a5d212c720d7bbbd6025abfbc48ca5ea Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 11 Aug 2026 10:41:15 +0200 Subject: [PATCH 7/8] extend story, fetch example from label directly --- src/components/PropertyValuePair/PropertyName.tsx | 2 +- .../PropertyValuePair/stories/PropertyName.stories.tsx | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/PropertyValuePair/PropertyName.tsx b/src/components/PropertyValuePair/PropertyName.tsx index 75d0df33..71e7eb7f 100644 --- a/src/components/PropertyValuePair/PropertyName.tsx +++ b/src/components/PropertyValuePair/PropertyName.tsx @@ -43,9 +43,9 @@ export const PropertyName = ({
{typeof children === "string" ? (