From f8e99f7742f879f0c88ebd65b0fd9fd39596084e Mon Sep 17 00:00:00 2001 From: Yordan Date: Tue, 16 Sep 2025 16:27:11 +0200 Subject: [PATCH 1/2] chore: update changelog to include fix for gallery gap offset issue --- .../datawidgets/web/_gallery-design-properties.scss | 10 +++++++++- packages/pluggableWidgets/gallery-web/CHANGELOG.md | 4 ++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss index a8e08045b0..6acb34f8c0 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss @@ -4,6 +4,10 @@ //== Design Properties //## Helper classes to change the look and feel of the component ========================================================================== */ +:root { + --gallery-gap: var(--spacing-small, $dg-spacing-small); +} + // All borders .widget-gallery-bordered-all { .widget-gallery-item { @@ -43,7 +47,7 @@ left: 0; right: 0; border-bottom: 1px solid var(--grid-border-color, $grid-border-color); - margin-top: calc(var(--spacing-small, $spacing-small) / 2); + margin-top: calc(var(--gallery-gap) / 2 - 1px); } } } @@ -70,6 +74,7 @@ // Grid spacing none .widget-gallery.widget-gallery-gridgap-none { .widget-gallery-items { + --gallery-gap: 0px; gap: 0; } } @@ -77,6 +82,7 @@ // Grid spacing small .widget-gallery.widget-gallery-gridgap-small { .widget-gallery-items { + --gallery-gap: var(--spacing-small, $dg-spacing-small); gap: var(--spacing-small, $spacing-small); } } @@ -84,6 +90,7 @@ // Grid spacing medium .widget-gallery.widget-gallery-gridgap-medium { .widget-gallery-items { + --gallery-gap: var(--spacing-medium, $dg-spacing-medium); gap: var(--spacing-medium, $spacing-medium); } } @@ -91,6 +98,7 @@ // Grid spacing large .widget-gallery.widget-gallery-gridgap-large { .widget-gallery-items { + --gallery-gap: var(--spacing-large, $dg-spacing-large); gap: var(--spacing-large, $spacing-large); } } diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md index 5809663b8d..2211a9b03d 100644 --- a/packages/pluggableWidgets/gallery-web/CHANGELOG.md +++ b/packages/pluggableWidgets/gallery-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear. + ## [3.6.0] - 2025-10-01 ### Fixed From e913dcdf4bbed5818e7f3a1bf16c5b070eb5672e Mon Sep 17 00:00:00 2001 From: Yordan Date: Fri, 26 Sep 2025 15:15:44 +0200 Subject: [PATCH 2/2] fix: add fallback value --- .../web/_gallery-design-properties.scss | 31 +++++-------------- .../themesource/datawidgets/web/_gallery.scss | 4 ++- .../datawidgets/web/variables.scss | 3 ++ 3 files changed, 14 insertions(+), 24 deletions(-) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss index 6acb34f8c0..26fe35a669 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss @@ -4,10 +4,6 @@ //== Design Properties //## Helper classes to change the look and feel of the component ========================================================================== */ -:root { - --gallery-gap: var(--spacing-small, $dg-spacing-small); -} - // All borders .widget-gallery-bordered-all { .widget-gallery-item { @@ -47,7 +43,7 @@ left: 0; right: 0; border-bottom: 1px solid var(--grid-border-color, $grid-border-color); - margin-top: calc(var(--gallery-gap) / 2 - 1px); + margin-top: calc(var(--gallery-gap, var(--spacing-small, $spacing-small)) / 2 - 1px); } } } @@ -73,34 +69,22 @@ // Grid spacing none .widget-gallery.widget-gallery-gridgap-none { - .widget-gallery-items { - --gallery-gap: 0px; - gap: 0; - } + --gallery-gap: 0px; } // Grid spacing small .widget-gallery.widget-gallery-gridgap-small { - .widget-gallery-items { - --gallery-gap: var(--spacing-small, $dg-spacing-small); - gap: var(--spacing-small, $spacing-small); - } + --gallery-gap: var(--spacing-small, $spacing-small); } // Grid spacing medium .widget-gallery.widget-gallery-gridgap-medium { - .widget-gallery-items { - --gallery-gap: var(--spacing-medium, $dg-spacing-medium); - gap: var(--spacing-medium, $spacing-medium); - } + --gallery-gap: var(--spacing-medium, $spacing-medium); } // Grid spacing large .widget-gallery.widget-gallery-gridgap-large { - .widget-gallery-items { - --gallery-gap: var(--spacing-large, $dg-spacing-large); - gap: var(--spacing-large, $spacing-large); - } + --gallery-gap: var(--spacing-large, $spacing-large); } // Pagination left @@ -122,6 +106,7 @@ } .widget-gallery-disable-selected-items-highlight { - // placeholder - // this class in needed to disable standard styles of highlighted items + // This class is needed to disable standard styles of highlighted items + // Currently no specific styles need to be overridden + /* stylelint-disable-line no-empty-rules */ } diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss index 1269d26e6a..cc160f2002 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss @@ -23,9 +23,11 @@ $gallery-screen-md: $screen-md; } .widget-gallery { + --gallery-gap: var(--spacing-small, $gallery-gap); + .widget-gallery-items { display: grid; - grid-gap: var(--spacing-small, $spacing-small); + grid-gap: var(--gallery-gap); /* Desktop widths diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss index f8422d31bf..8756e6e96b 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss @@ -29,6 +29,9 @@ $spacing-medium: 16px !default; $spacing-large: 24px !default; $spacing-larger: 32px !default; +// Gallery specific spacing +$gallery-gap: $spacing-small !default; + // Effects and animations $dragging-color-effect: rgba(10, 19, 37, 0.8) !default; $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;