fixup! fixup! fixup! Use ScrollView in Modal and Table (#50)

react-ui-org · Jun 19, 2020 · 25e1dcc · 25e1dcc
1 parent d6a8c3f
commit 25e1dcc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/lib/components/ui/Modal/Modal.jsx b/src/lib/components/ui/Modal/Modal.jsx
@@ -70,7 +70,7 @@ class Modal extends React.Component {
             <ScrollView
               customStartShadowStyle={this.props.scrollViewStartShadowStyle}
               customEndShadowStyle={this.props.scrollViewEndShadowStyle}
-              shadowSize="16px"
+              shadowSize={this.props.scrollViewShadowSize}
             >
               {content}
             </ScrollView>
@@ -178,6 +178,7 @@ Modal.defaultProps = {
   scrollViewEndShadowStyle: {
     background: 'radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)',
   },
+  scrollViewShadowSize: '16px',
   scrollViewStartShadowStyle: {
     background: 'radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)',
   },
@@ -202,6 +203,7 @@ Modal.propTypes = {
     background: PropTypes.string,
     boxShadow: PropTypes.string,
   }),
+  scrollViewShadowSize: PropTypes.string,
   scrollViewStartShadowStyle: PropTypes.shape({
     background: PropTypes.string,
     boxShadow: PropTypes.string,

diff --git a/src/lib/components/ui/Modal/__tests__/Modal.test.jsx b/src/lib/components/ui/Modal/__tests__/Modal.test.jsx
@@ -55,6 +55,7 @@ describe('rendering', () => {
         disableBodyScrolling
         id="custom-id"
         scrollViewEndShadow={{ background: 'none' }}
+        scrollViewShadowSize="30px"
         scrollViewStartShadow={{ background: 'none' }}
         size="small"
         title="Modal title"

diff --git a/src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap b/src/lib/components/ui/Modal/__tests__/__snapshots__/Modal.test.jsx.snap
@@ -51,6 +51,7 @@ exports[`rendering renders correctly with all props except translations 1`] = `
         "background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
       }
     }
+    scrollViewShadowSize="16px"
     scrollViewStartShadow={
       Object {
         "background": "none",
@@ -332,6 +333,7 @@ exports[`rendering renders correctly with all props except translations and with
       "background": "none",
     }
   }
+  scrollViewShadowSize="30px"
   scrollViewStartShadow={
     Object {
       "background": "none",
@@ -368,6 +370,7 @@ exports[`rendering renders correctly with all props except translations and with
         "background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
       }
     }
+    scrollViewShadowSize="30px"
     scrollViewStartShadow={
       Object {
         "background": "none",
@@ -431,7 +434,7 @@ exports[`rendering renders correctly with all props except translations and with
                 "background": "radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
               }
             }
-            shadowSize="16px"
+            shadowSize="30px"
             translations={null}
           >
             <ScrollView
@@ -460,7 +463,7 @@ exports[`rendering renders correctly with all props except translations and with
                   "red": 255,
                 }
               }
-              shadowSize="16px"
+              shadowSize="30px"
               translations={
                 Object {
                   "next": "Next",
@@ -475,7 +478,7 @@ exports[`rendering renders correctly with all props except translations and with
                     "--rui-local-arrow-color": "inherit",
                     "--rui-local-end-shadow-background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
                     "--rui-local-end-shadow-box-shadow": "none",
-                    "--rui-local-shadow-height": "16px",
+                    "--rui-local-shadow-height": "30px",
                     "--rui-local-shadow-width": "auto",
                     "--rui-local-start-shadow-background": "radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
                     "--rui-local-start-shadow-box-shadow": "none",
@@ -659,6 +662,7 @@ exports[`rendering renders correctly with mandatory props only 1`] = `
         "background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
       }
     }
+    scrollViewShadowSize="16px"
     scrollViewStartShadowStyle={
       Object {
         "background": "radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
@@ -818,6 +822,7 @@ exports[`rendering renders correctly with portal id 1`] = `
         "background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
       }
     }
+    scrollViewShadowSize="16px"
     scrollViewStartShadowStyle={
       Object {
         "background": "radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
@@ -1047,6 +1052,7 @@ exports[`rendering renders correctly with translations 1`] = `
         "background": "radial-gradient(farthest-side at center bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.06) 40%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",
       }
     }
+    scrollViewShadowSize="16px"
     scrollViewStartShadowStyle={
       Object {
         "background": "radial-gradient(farthest-side at center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.02) 85%, rgba(0, 0, 0, 0) 100%)",