diff --git a/CHANGELOG.md b/CHANGELOG.md
index d33de5917..c6424fba9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,23 @@ 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.
+- ` `:
+ - column display is only enabled if the container is large enough, this way property name containers do not get to small
+
+### Fixed
+
+- ` `:
+ - 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
+
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
diff --git a/package.json b/package.json
index 2e1169209..66e33de96 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/PropertyValuePair/PropertyName.tsx b/src/components/PropertyValuePair/PropertyName.tsx
index 75d0df33e..71e7eb7f6 100644
--- a/src/components/PropertyValuePair/PropertyName.tsx
+++ b/src/components/PropertyValuePair/PropertyName.tsx
@@ -43,9 +43,9 @@ export const PropertyName = ({
{typeof children === "string" ? (
{children} : children}
isLayoutForElement="span"
{...labelProps}
+ text={nowrap ? {children} : children}
/>
) : (
children
diff --git a/src/components/PropertyValuePair/PropertyValue.tsx b/src/components/PropertyValuePair/PropertyValue.tsx
index 2157a23ef..2dbfec2f1 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 1f1edc292..7031b8e68 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) {
@@ -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,
diff --git a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx
index 931855549..20c368190 100644
--- a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx
+++ b/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 = (args) => (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(() => {