feat(Modal): add scrolling prop to Modal.Content

docs/app/Examples/modules/Modal/Variations/ModalExampleScrollingContent.js

@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import React from 'react'
+import { Button, Header, Icon, Image, Modal } from 'semantic-ui-react'
+
+const ModalExampleScrollingContent = () => (
+  <Modal trigger={<Button>Scrolling Content Modal</Button>}>
+    <Modal.Header>Profile Picture</Modal.Header>
+    <Modal.Content image scrolling>
+      <Image
+        size='medium'
+        src='/assets/images/wireframe/image.png'
+        wrapped
+      />
+
+      <Modal.Description>
+        <Header>Modal Header</Header>
+        <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
+
+        {_.times(8, i => (
+          <Image
+            key={i}
+            src='/assets/images/wireframe/paragraph.png'
+            style={{ paddingBottom: 5 }}
+          />
+        ))}
+      </Modal.Description>
+    </Modal.Content>
+    <Modal.Actions>
+      <Button primary>
+        Proceed <Icon name='right chevron' />
+      </Button>
+    </Modal.Actions>
+  </Modal>
+)
+
+export default ModalExampleScrollingContent
+

docs/app/Examples/modules/Modal/Variations/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
@@ -9,6 +10,11 @@ const ModalExamples = () => (
       description='A modal can vary in size.'
       examplePath='modules/Modal/Variations/ModalExampleSize'
     />
+    <ComponentExample
+      title='Scrolling Content'
+      description='A modal can use the entire size of the screen.'
+      examplePath='modules/Modal/Variations/ModalExampleScrollingContent'
+    />
     <ComponentExample
       title='Dimmer Variations'
       description='A modal can specify dimmer variations.'

src/modules/Modal/ModalContent.d.ts

@@ -17,6 +17,9 @@ export interface ModalContentProps {
 
   /** A modal can contain image content. */
   image?: boolean;
+
+  /** A modal can use the entire size of the screen. */
+  scrolling?: boolean;
 }
 
 declare const ModalContent: React.StatelessComponent<ModalContentProps>;

src/modules/Modal/ModalContent.js

@@ -21,11 +21,13 @@ function ModalContent(props) {
     className,
     content,
     image,
+    scrolling,
   } = props
 
   const classes = cx(
     className,
     useKeyOnly(image, 'image'),
+    useKeyOnly(scrolling, 'scrolling'),
     'content'
   )
   const rest = getUnhandledProps(ModalContent, props)
@@ -59,6 +61,9 @@ ModalContent.propTypes = {
 
   /** A modal can contain image content. */
   image: PropTypes.bool,
+
+  /** A modal can use the entire size of the screen. */
+  scrolling: PropTypes.bool,
 }
 
 ModalContent.create = createShorthandFactory(ModalContent, content => ({ content }))

test/specs/modules/Modal/ModalContent-test.js

@@ -8,4 +8,5 @@ describe('ModalContent', () => {
   common.implementsCreateMethod(ModalContent)
 
   common.propKeyOnlyToClassName(ModalContent, 'image')
+  common.propKeyOnlyToClassName(ModalContent, 'scrolling')
 })