Merge pull request #100 from perimetre/9.3.2

9.3.2

CHANGELOG.md

@@ -25,6 +25,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [9.3.2] 2023-04-06
+
+### Changes
+
+- Changed modal `new` variant to use UI as updated designs
+
+### Fixed
+
+- Cleaned up modal classes logic
+
 ## [9.3.1] 2023-03-14
 
 ### Changes

package.json

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

src/components/Modal/Modal.stories.tsx

@@ -44,7 +44,13 @@ export default {
         type: 'boolean'
       }
     },
-    variant: { defaultValue: 'Default' },
+    variant: {
+      defaultValue: 'default',
+      control: {
+        type: 'select',
+        options: ['default', 'new']
+      }
+    },
     content: {
       defaultValue: 'A modal content',
       control: {

src/components/Modal/index.css

@@ -28,6 +28,11 @@
       /* Apply display */
       @apply flex;
     }
+
+    /* Define a light background that matches with new design for qadense */
+    &.new {
+      @apply bg-white bg-opacity-90;
+    }
   }
 
   /* The container inside the background, the modal "card" itself */
@@ -43,9 +48,9 @@
     /* Adds the default border radius */
     /* Animate the fadeUp effect */
     @apply relative shadow-xl my-0 mx-auto md:mt-14 bg-white max-w-full min-w-screen-90 md:min-w-initial pui-border-radius pui-animate-fadeUp;
-    /* Define a border radius that matches with new design */
+    /* Define square border radius that matches with new design for qadense */
     &.new {
-      border-radius: 20px 20px 20px 20px;
+      @apply rounded-none shadow-2xl;
     }
     /* Centers modal container */
     &.center {

src/components/Modal/index.tsx

@@ -110,10 +110,8 @@ 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' }, { center: position === 'center' })}
-        >
+      <div className={classnames('pui-modal', { open: isOpen, 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 */}