Merge pull request #195 from dmytroshch/feature/dialog-style

(feature) Dialog: add style prop
bitfinexcom · Aug 24, 2023 · 18a236e · 18a236e
2 parents 68e9778 + fb481ac
commit 18a236e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/core/src/components/ui/Dialog/Dialog.Modal.js b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
@@ -1,10 +1,10 @@
 import cx from 'classnames'
 import FocusTrap from 'focus-trap-react'
 import PropTypes from 'prop-types'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useMemo, useRef } from 'react'
 
-import * as Classes from '../../../common/classes'
 import { DIALOG_CONTAINER_ID } from './Dialog.constants'
+import * as Classes from '../../../common/classes'
 
 const Modal = forwardRef(({
   state,
@@ -21,8 +21,16 @@ const Modal = forwardRef(({
   width,
   height,
   textAlign,
+  style,
 }, ref) => {
   const titleRef = useRef()
+  const modalStyle = useMemo(() => ({
+    maxWidth: width,
+    height,
+    textAlign,
+    ...style,
+  }), [width, height, textAlign, style])
+
   return (
     /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
     <FocusTrap
@@ -47,7 +55,7 @@ const Modal = forwardRef(({
             'is-mobile-fullscreen': isFullscreenInMobile,
           })}
           ref={ref}
-          style={{ maxWidth: width, height, textAlign }}
+          style={modalStyle}
         >
           {title && (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -137,6 +145,11 @@ Modal.propTypes = {
    * Need to disable if modal contains iframe, to avoid conflicts
    */
   isFocusTrapEnabled: PropTypes.bool.isRequired,
+  /**
+   * Style object of the Modal
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.object,
 }
 
 Modal.defaultProps = {
@@ -150,6 +163,7 @@ Modal.defaultProps = {
   width: 460,
   height: 'auto',
   textAlign: 'center',
+  style: {},
 }
 
 export default Modal
diff --git a/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js b/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js
@@ -26,6 +26,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
     height,
     textAlign,
     isFocusTrapEnabled,
+    style,
   } = props
 
   useEffect(() => {
@@ -77,6 +78,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
             width={width}
             height={height}
             textAlign={textAlign}
+            style={style}
           >
             {children}
           </Modal>
@@ -166,6 +168,11 @@ Dialog.propTypes = {
    * Need to disable if modal contains iframe, to avoid conflicts
    */
   isFocusTrapEnabled: PropTypes.bool,
+  /**
+   * Style object of the Modal
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.object,
 }
 
 Dialog.defaultProps = {
@@ -182,6 +189,7 @@ Dialog.defaultProps = {
   height: 'auto',
   textAlign: 'center',
   onSubmit: () => {},
+  style: {},
 }
 
 export default Dialog