From 0f0f1ee0e3017a26d6d66603326dad865cfa8eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Gu=CC=88nther?= Date: Fri, 26 Jan 2024 14:16:41 +0100 Subject: [PATCH 1/2] BUGFIX: Resolve issue with custom data source displaying additional labels incorrectly Previously, there was an issue with the custom data source where the secondary label, utilized with label and preview, was not being displayed correctly. This commit addresses the problem, ensuring proper alignment and display of the secondary label in conjunction with the label and preview elements. The implementation includes the use of a CSS grid layout to achieve consistent and accurate rendering of the custom data source information. Fixes: #3675 --- .../style.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css index 041f4b0055..9060de2ada 100644 --- a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css +++ b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css @@ -1,8 +1,25 @@ .multiLineWithThumbnail__item { + display: grid; + grid-template-columns: auto 1fr; + gap: -var(--spacing-Half); + align-items: start; box-sizing: content-box; background-color: var(--colors-ContrastDarkest); } +.multiLineWithThumbnail__item span { + grid-column: 2; + grid-row: 1; + + &.multiLineWithThumbnail__secondaryLabel { + grid-row: 2; + } + + &.multiLineWithThumbnail__tertiaryLabel { + grid-row: 3; + } +} + .multiLineWithThumbnail__item--multiLine { line-height: 20px; } @@ -26,6 +43,8 @@ .multiLineWithThumbnail__image { width: calc(1.33 * (var(--spacing-GoldenUnit) + var(--spacing-Full))); height: calc(var(--spacing-GoldenUnit) + var(--spacing-Full)); + grid-column: 1; + grid-row: 1 / 4; object-fit: contain; background-color: #fff; background-size: 10px 10px; From 78575547e4c0e8de1d9ac35eee7b0da7b12afc6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Gu=CC=88nther?= Date: Fri, 2 Feb 2024 14:24:32 +0100 Subject: [PATCH 2/2] BUGFIX: Adjust styles for long labels Long labels float out of the container and do not look nice. This adds an ellipsis and the tooltip is always available on hover to read the whole text. The Image is now also aligned in centered position. --- .../SelectBox_Option_MultiLineWithThumbnail/style.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css index 9060de2ada..a1295c4be9 100644 --- a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css +++ b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css @@ -1,7 +1,7 @@ .multiLineWithThumbnail__item { display: grid; grid-template-columns: auto 1fr; - gap: -var(--spacing-Half); + column-gap: var(--spacing-Half); align-items: start; box-sizing: content-box; background-color: var(--colors-ContrastDarkest); @@ -10,6 +10,9 @@ .multiLineWithThumbnail__item span { grid-column: 2; grid-row: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &.multiLineWithThumbnail__secondaryLabel { grid-row: 2; @@ -50,12 +53,10 @@ background-size: 10px 10px; background-position: 0 0, 25px 25px; background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc); - margin-right: .75em; display: inline-block; vertical-align: middle; - margin-left: -var(--spacing-Full); - margin-top: -var(--spacing-Half); - margin-bottom: -var(--spacing-Half); + margin-left: -var(--spacing-Half); + align-self: center; } .multiLineWithThumbnail__item:hover .multiLineWithThumbnail__secondaryLabel,