fix modal button spacing (#799)

* fix modal button spacing * moved the solution to a gap
gsoft-inc · Apr 19, 2024 · 1e7eb00 · 1e7eb00
1 parent 9f5fac1
commit 1e7eb00
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/healthy-mangos-flash.md b/.changeset/healthy-mangos-flash.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/modal": patch
+---
+
+Fixed a margin issue with footer action buttons
diff --git a/packages/Modal/src/Modal.tsx b/packages/Modal/src/Modal.tsx
@@ -107,7 +107,7 @@ const Modal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {
         console.warn("Warning: The closeBtnAriaLabel prop in the Modal component is deprecated " +
         "and will be removed in a future version.");
     }
-    
+
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
 
     const displayBackBtn = carousel && carousel.currentSlide && carousel.currentSlide > 0;
@@ -119,7 +119,7 @@ const Modal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {
 
     const ref = React.useRef<HTMLDivElement>(null);
     const { overlayProps, underlayProps } = useOverlay(
-        { isOpen, onClose, isDismissable, isKeyboardDismissDisabled: !dismissOnEscape, 
+        { isOpen, onClose, isDismissable, isKeyboardDismissDisabled: !dismissOnEscape,
             shouldCloseOnInteractOutside: element => {
                 // Don't close if a dropdown is clicked
                 if (element.closest("[data-floating-ui-portal]")) {
@@ -274,6 +274,7 @@ const Modal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {
                         && React.cloneElement(secondaryAction, {
                             className: cx(
                                 "ids-modal__footer-action",
+                                "ids-modal__footer-action--secondary",
                                 secondaryAction.props?.className
                             )
                         })}

diff --git a/packages/Modal/src/modal.scss b/packages/Modal/src/modal.scss
@@ -46,6 +46,7 @@
         --ids-modal-full-content-close-spacing-vertical: #{tokens.$space-1};
         --ids-modal-footer-margin: #{tokens.$space-2} -#{tokens.$space-2} -#{tokens.$space-2};
         --ids-modal-footer-action-margin: #{tokens.$space-2} #{tokens.$space-2};
+        --ids-modal-footer-action-gap: 0;
     }
 
     [data-brand="workleap"] {
@@ -87,7 +88,8 @@
         --ids-modal-full-content-close-spacing-horizontal: calc(var(--hop-space-inline-xs) + var(--hop-space-inline-sm));
         --ids-modal-full-content-close-spacing-vertical: calc(var(--hop-space-stack-xs) + var(--hop-space-stack-sm));
         --ids-modal-footer-margin: var(--hop-space-stack-sm) calc(-1 * var(--hop-space-inline-sm)) calc(-1 * var(--hop-space-stack-sm));
-        --ids-modal-footer-action-margin: var(--hop-space-stack-sm) var(--hop-space-inline-sm);
+        --ids-modal-footer-action-margin: 0;
+        --ids-modal-footer-action-gap: var(--hop-space-inset-sm);
     }
 
     @media (width >= #{tokens.$breakpoints-sm}) {
@@ -323,6 +325,7 @@
         align-items: center;
         display: flex;
         flex-wrap: wrap;
+        gap: var(--ids-modal-footer-action-gap);
         justify-content: flex-end;
         margin: var(--ids-modal-footer-margin);
         margin-top: auto;