Merge pull request #92 from josemarluedke/feat/modal-configs

Split modal style configuration for padding
josemarluedke · Aug 21, 2020 · ec4c0d9 · ec4c0d9
2 parents 7b28922 + a1a88a5
commit ec4c0d9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/overlays/addon/tailwind/default-options.js b/packages/overlays/addon/tailwind/default-options.js
@@ -8,12 +8,15 @@ const defaultConfig = {
   borderRadius: defaultTheme.borderRadius.default,
   backdropColor: 'rgba(0, 0, 0, 0.45)',
   modal: {
-    padding: defaultTheme.padding[4],
+    headerPadding: defaultTheme.padding[4],
+    bodyPadding: defaultTheme.padding[4],
+    footerPadding: defaultTheme.padding[4],
     backgroundColor: defaultTheme.colors.white,
     secondaryBackgroundColor: defaultTheme.colors.gray[100], // Background for footer and close btn applied on hover
-    iconColor: 'currentColor',
+    iconColor: defaultTheme.colors.black,
     borderColor: defaultTheme.borderColor.default,
-    maxWidth: defaultTheme.maxWidth['xl']
+    maxWidth: defaultTheme.maxWidth['xl'],
+    closeBtnMargin: defaultTheme.spacing[2]
   }
 };
 
@@ -74,8 +77,8 @@ function defaultOptions({ config }) {
           position: 'absolute',
           fontSize: defaultTheme.fontSize.xl,
           padding: defaultTheme.spacing[2],
-          top: defaultTheme.padding[2],
-          right: defaultTheme.padding[2],
+          top: config.modal.closeBtnMargin,
+          right: config.modal.closeBtnMargin,
           transitionProperty: defaultTheme.transitionProperty.default,
           transitionDuration: defaultTheme.transitionDuration[200],
           borderRadius: defaultTheme.borderRadius.full,
@@ -101,20 +104,20 @@ function defaultOptions({ config }) {
         header: {
           fontWeight: defaultTheme.fontWeight.bold,
           fontSize: defaultTheme.fontSize.xl,
-          padding: config.modal.padding,
+          padding: config.modal.headerPadding,
           borderTopRightRadius: config.borderRadius,
           borderTopLeftRadius: config.borderRadius
         },
         body: {
-          padding: config.modal.padding
+          padding: config.modal.bodyPadding
         },
         footer: {
           display: 'flex',
           justifyContent: 'flex-end',
           backgroundColor: config.modal.secondaryBackgroundColor,
           borderTopWidth: defaultTheme.borderWidth.default,
           borderTopColor: config.modal.borderColor,
-          padding: config.modal.padding,
+          padding: config.modal.footerPadding,
           borderBottomRightRadius: config.borderRadius,
           borderBottomLeftRadius: config.borderRadius
         }

diff --git a/packages/overlays/tests/dummy/app/components/demo-modal.hbs b/packages/overlays/tests/dummy/app/components/demo-modal.hbs
@@ -15,6 +15,9 @@
     <p>Some contents...</p>
     <p>Some contents...</p>
     <p>Some contents...</p>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    </p>
   </m.Body>
   <m.Footer>
     <Button