WrapperWidgetUI: contentProps property to support scrolling (#769)

CartoDB · Sep 12, 2023 · 917e756 · 917e756
1 parent 0dcc289
commit 917e756
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- WrapperWidgetUI: contentProps property to support scrolling [#769](https://github.com/CartoDB/carto-react/pull/769)
 
 ## 2.2
 

diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -254,8 +254,10 @@ function WrapperWidgetUI(props) {
       </Header>
       {/* TODO: check collapse error */}
       <Collapse ref={wrapper} in={expanded} timeout='auto' unmountOnExit>
-        <Box pt={1}>{props.children}</Box>
-        {props.footer ?? <Box>{props.footer}</Box>}
+        <Box {...props.contentProps}>
+          <Box pt={1}>{props.children}</Box>
+          {props.footer ?? <Box>{props.footer}</Box>}
+        </Box>
       </Collapse>
     </Root>
   );
@@ -295,7 +297,8 @@ WrapperWidgetUI.propTypes = {
     PropTypes.element.isRequired
   ]),
   footer: PropTypes.element,
-  margin: PropTypes.number
+  margin: PropTypes.number,
+  contentProps: PropTypes.object
 };
 
 export default WrapperWidgetUI;
diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js
@@ -261,3 +261,37 @@ WithActionsTooltip.parameters = {
     }
   }
 };
+
+export const BigScrollableContent = (args) => (
+  <WrapperWidgetUI {...args}>
+    <div>
+      <p>
+        Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam, mi nibh
+        fames rhoncus id ultricies. Faucibus enim commodo morbi amet sit eget. Ut
+        pellentesque tellus iaculis diam. Ornare convallis dictum purus quisque nisl.
+      </p>
+      <p>
+        Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
+        tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
+        Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
+        eget accumsan sem. Aliquam tincidunt turpis et leo ac.
+      </p>
+      <p>
+        Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
+        tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
+        Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
+        eget accumsan sem. Aliquam tincidunt turpis et leo ac.
+      </p>
+    </div>
+  </WrapperWidgetUI>
+);
+BigScrollableContent.args = {
+  title: 'Big scrollable content',
+  expandable: true,
+  contentProps: {
+    style: {
+      overflowY: 'scroll',
+      maxHeight: '200px'
+    }
+  }
+};