Merge pull request #2089 from tf/gallery-scroll-button-size

Add theme property for image gallery scroll button size
codevise · Mar 14, 2024 · 1d98f64 · 1d98f64
2 parents a019f5c + 6eb66bd
commit 1d98f64
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md b/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md
@@ -184,6 +184,12 @@ elements etc.
 | `text_block_first_list_item_margin_top` | Space before first item of lists. |
 | `text_block_list_item_margin_top` | Space before second and following items of lists. |
 
+### Image Gallery
+
+| Name | Description |
+| ---- | ----------- |
+| `image_gallery_scroll_button_size` | Size of the scroll buttons displayed on the left and right of the image gallery. |
+
 ### Shared Widget Colors
 
 Surfaces use colors from specific categories in your color palette,

diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css b/entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css
@@ -15,6 +15,9 @@
 
 .button svg {
   transition: transform 0.2s ease;
+  display: block;
+  width: var(--theme-image-gallery-scroll-button-size);
+  height: var(--theme-image-gallery-scroll-button-size);
 }
 
 .button:not(.disabled):hover svg,
@@ -23,7 +26,6 @@
 }
 
 .icon {
-  display: inline-block;
   position: relative;
   transition: opacity 0.2s linear;
 }

diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js b/entry_types/scrolled/package/src/contentElements/imageGallery/stories.js
@@ -55,5 +55,17 @@ storiesOfContentElement(module, {
       }
     ]
   },
-  inlineFileRights: true
+  inlineFileRights: true,
+  variants: [
+    {
+      name: 'Custom scroll button size',
+      themeOptions: {
+        properties: {
+          root: {
+            imageGalleryScrollButtonSize: '60px'
+          }
+        }
+      }
+    }
+  ]
 });