Dialog: add style prop

bitfinexcom · Aug 24, 2023 · 3b51095 · 3b51095
1 parent ca3523f
commit 3b51095
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/core/src/components/ui/Dialog/Dialog.Modal.js b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
@@ -21,6 +21,7 @@ const Modal = forwardRef(({
   width,
   height,
   textAlign,
+  style,
 }, ref) => {
   const titleRef = useRef()
   return (
@@ -47,7 +48,9 @@ const Modal = forwardRef(({
             'is-mobile-fullscreen': isFullscreenInMobile,
           })}
           ref={ref}
-          style={{ maxWidth: width, height, textAlign }}
+          style={{
+            maxWidth: width, height, textAlign, ...style,
+          }}
         >
           {title && (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -137,6 +140,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 +158,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