breaking(Modal): Fix vertical position with SUI 2.3 (#2690)

* Update SUI css to 2.3.1

* Disable negative top margin calc

* Add the ability to apply inline styles to Portal

* Top Aligned modal example

* Make sure we are not overriding the top margin inline

* type defs updated for Portal

* Type update for Modal

* Refactor to use setProperty instead of string for important

* Remove inline-style lib to handle string differently

Author: brianespinosa

docs/app/Examples/modules/Modal/Types/ModalExampleTopAligned.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button, Header, Image, Modal } from 'semantic-ui-react'
+
+const ModalExampleTopAligned = () => (
+  <Modal trigger={<Button>Show Modal</Button>} centered={false}>
+    <Modal.Header>Select a Photo</Modal.Header>
+    <Modal.Content image>
+      <Image wrapped size='medium' src='/assets/images/avatar/large/rachel.png' />
+      <Modal.Description>
+        <Header>Default Profile Image</Header>
+        <p>We've found the following gravatar image associated with your e-mail address.</p>
+        <p>Is it okay to use this photo?</p>
+      </Modal.Description>
+    </Modal.Content>
+  </Modal>
+)
+
+export default ModalExampleTopAligned

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

@@ -18,6 +18,11 @@ const ModalExamples = () => (
       description='A modal can reduce its complexity.'
       examplePath='modules/Modal/Types/ModalExampleBasic'
     />
+    <ComponentExample
+      title='Top Aligned'
+      description='A modal can be top aligned.'
+      examplePath='modules/Modal/Types/ModalExampleTopAligned'
+    />
     <ComponentExample
       title='Scrolling Modal'
       description={[

package.json

@@ -135,7 +135,7 @@
     "require-dir": "^0.3.2",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
-    "semantic-ui-css": "^2.3.0",
+    "semantic-ui-css": "^2.3.1",
     "simulant": "^0.2.2",
     "sinon": "^3.2.0",
     "sinon-chai": "^2.13.0",

src/addons/Portal/Portal.d.ts

@@ -101,6 +101,9 @@ export interface PortalProps {
   /** Controls whether the portal should be prepended to the mountNode instead of appended. */
   prepend?: boolean;
 
+  /** Any inline styles to the Portal container. */
+  style?: object;
+
   /** Element to be rendered in-place where the portal is defined. */
   trigger?: React.ReactNode;
 }

src/addons/Portal/Portal.js

@@ -123,6 +123,9 @@ class Portal extends Component {
     /** Controls whether the portal should be prepended to the mountNode instead of appended. */
     prepend: PropTypes.bool,
 
+    /** Any inline styles to the Portal container. */
+    style: PropTypes.object,
+
     /** Element to be rendered in-place where the portal is defined. */
     trigger: PropTypes.node,
   }
@@ -344,14 +347,15 @@ class Portal extends Component {
     if (!this.state.open) return
     debug('renderPortal()')
 
-    const { children, className, eventPool } = this.props
+    const { children, className, eventPool, style } = this.props
 
     this.mountPortal()
 
     // Server side rendering
     if (!isBrowser()) return null
 
     this.rootNode.className = className || ''
+    this.rootNode.style = style || ''
 
     // when re-rendering, first remove listeners before re-adding them to the new node
     if (this.portalNode) {

src/modules/Modal/Modal.d.ts

@@ -19,6 +19,9 @@ export interface ModalProps extends PortalProps {
   /** A Modal can reduce its complexity */
   basic?: boolean;
 
+  /** A modal can be vertically centered in the viewport */
+  centered?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 

src/modules/Modal/Modal.js

@@ -41,6 +41,9 @@ class Modal extends Component {
     /** A modal can reduce its complexity */
     basic: PropTypes.bool,
 
+    /** A modal can be vertically centered in the viewport */
+    centered: PropTypes.bool,
+
     /** Primary content. */
     children: PropTypes.node,
 
@@ -140,6 +143,7 @@ class Modal extends Component {
   }
 
   static defaultProps = {
+    centered: true,
     dimmer: true,
     closeOnDimmerClick: true,
     closeOnDocumentClick: false,
@@ -216,6 +220,18 @@ class Modal extends Component {
 
   handleRef = c => (this.ref = c)
 
+  handlePortalRef = c => (this.portalRef = c)
+
+  setRootNodeStyle = () => {
+    debug('setRootNodeStyle()')
+
+    if (!this.portalRef) return
+
+    if (this.portalRef) {
+      this.portalRef.rootNode.style.setProperty('display', 'flex', 'important')
+    }
+  }
+
   setPositionAndClassNames = () => {
     const { dimmer } = this.props
     let classes
@@ -233,7 +249,10 @@ class Modal extends Component {
     if (this.ref) {
       const { height } = this.ref.getBoundingClientRect()
 
-      const marginTop = -Math.round(height / 2)
+      // Leaving the old calculation here since we may need it as an older browser fallback
+      // SEE: https://github.com/Semantic-Org/Semantic-UI/issues/6185#issuecomment-376725956
+      // const marginTop = -Math.round(height / 2)
+      const marginTop = null
       const scrolling = height >= window.innerHeight
 
       if (this.state.marginTop !== marginTop) {
@@ -251,6 +270,8 @@ class Modal extends Component {
     if (!_.isEmpty(newState)) this.setState(newState)
 
     this.animationRequestId = requestAnimationFrame(this.setPositionAndClassNames)
+
+    this.setRootNodeStyle()
   }
 
   renderContent = (rest) => {
@@ -312,7 +333,7 @@ class Modal extends Component {
 
   render() {
     const { open } = this.state
-    const { closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool, trigger } = this.props
+    const { centered, closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool, trigger } = this.props
     const mountNode = this.getMountNode()
 
     // Short circuit when server side rendering
@@ -336,6 +357,7 @@ class Modal extends Component {
       : cx(
         'ui',
         dimmer === 'inverted' && 'inverted',
+        !centered && 'top aligned',
         'page modals dimmer transition visible active',
       )
 
@@ -364,6 +386,7 @@ class Modal extends Component {
         onMount={this.handlePortalMount}
         onOpen={this.handleOpen}
         onUnmount={this.handlePortalUnmount}
+        ref={this.handlePortalRef}
       >
         {this.renderContent(rest)}
       </Portal>

yarn.lock

@@ -2,6 +2,29 @@
 # yarn lockfile v1
 
 
+"@f/css-default-units@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@f/css-default-units/-/css-default-units-1.0.1.tgz#5f1758b86a392591d979f6b1024e0080744b6eaa"
+  dependencies:
+    "@f/css-unitless" "^1.0.1"
+
+"@f/css-unitless@^1.0.1":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@f/css-unitless/-/css-unitless-1.0.2.tgz#8da6e884a57e4d27798b744584e094862aa503e9"
+  dependencies:
+    "@f/hyphenate" "^1.0.0"
+
+"@f/hyphenate@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@f/hyphenate/-/hyphenate-1.0.0.tgz#dc1633324d05636da20e25fe66d6de01a1ffedd8"
+
+"@f/to-inline-style@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@f/to-inline-style/-/to-inline-style-0.1.4.tgz#2e7bf7d386e808b93b68473e8d5974a819313711"
+  dependencies:
+    "@f/css-default-units" "^1.0.1"
+    "@f/hyphenate" "^1.0.0"
+
 "@types/node@*":
   version "8.0.53"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8"
@@ -6394,9 +6417,9 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
-semantic-ui-css@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.3.0.tgz#e96d0d4069499eafff9ba0c84274bc23d2b084e7"
+semantic-ui-css@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.3.1.tgz#a5485c640c98cce29d8ddde3eff3434566a068e0"
   dependencies:
     jquery x.*