Merge pull request #98 from perimetre/9.3.0

9.3.0

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [9.3.0] 2023-03-13
+
+### Added
+
+- Added option to center modal container
+
 ## [9.2.5] 2023-01-18
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "9.2.5",
+  "version": "9.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/Modal/Modal.stories.tsx

@@ -25,6 +25,13 @@ export default {
         options: minWidthOptions
       }
     },
+    position: {
+      defaultValue: 'default',
+      control: {
+        type: 'select',
+        options: ['default', 'center']
+      }
+    },
     isClosable: {
       defaultValue: true,
       control: {

src/components/Modal/index.css

@@ -47,6 +47,10 @@
     &.new {
       border-radius: 20px 45px 20px 20px;
     }
+    /* Centers modal container */
+    &.center {
+      @apply my-auto
+    }
   }
 
   .pui-modal-header {

src/components/Modal/index.tsx

@@ -31,6 +31,10 @@ export type ModalProps = {
    * What style of the component should be used
    */
   variant?: 'default' | 'new';
+  /**
+   * Define how modal should position itself
+   */
+  position?: 'default' | 'center';
   /**
    * Whether the padding of content container should be removed or not
    */
@@ -51,6 +55,7 @@ export type ModalProps = {
  * @param props.title A title string
  * @param props.isClosable If true close button won't be displayed and the user won't be able to close modal by any means
  * @param props.variant What style of the component should be used
+ * @param props.position Define how modal should position itself
  * @param props.removePadding Whether the padding of content container should be removed or not
  * @param props.actions A component that if provided will add a "actions" footer
  * @param props.children The provided children content
@@ -63,6 +68,7 @@ export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
   actions,
   removePadding,
   variant = 'default',
+  position = 'default',
   isClosable = true,
   children
 }) => {
@@ -105,7 +111,9 @@ export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
   return (
     <ReactPortal selector="#modal-root">
       <div className={classnames('pui-modal', { open: isOpen })}>
-        <div className={classnames('pui-modal-container', { new: variant === 'new' })}>
+        <div
+          className={classnames('pui-modal-container', { new: variant === 'new' }, { center: position === 'center' })}
+        >
           <div className={classnames('pui-modal-header ', { 'absolute z-30': isHeaderAbsolute })}>
             <h3 className={classnames(removePadding ? 'p-0' : 'p-4')}>{title}</h3>
             {/* Adds a close icon */}