fix(Modal): fix border radius on isMobileFullPage

kiwicom · Feb 16, 2024 · 5f71d77 · 5f71d77
1 parent 7b29005
commit 5f71d77
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/packages/orbit-components/src/Modal/ModalFooter/index.tsx b/packages/orbit-components/src/Modal/ModalFooter/index.tsx
@@ -47,7 +47,7 @@ const wrappedChildren = (children: React.ReactNode, flex: Props["flex"]) => {
 };
 
 const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => {
-  const { isMobileFullPage, setFooterHeight } = React.useContext(ModalContext);
+  const { setFooterHeight } = React.useContext(ModalContext);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const childrenLength = React.Children.toArray(children).length;
 
@@ -74,7 +74,7 @@ const ModalFooter = ({ dataTest, children, flex = "0 1 auto" }: Props) => {
         "duration-fast transition-shadow ease-in-out",
         "sm:max-lm:[&_.orbit-button-primitive]:h-form-box-normal sm:max-lm:[&_.orbit-button-primitive]:text-button-normal",
         childrenLength > 1 ? "lm:justify-between" : "lm:justify-end",
-        !isMobileFullPage && "lm:rounded-b-modal",
+        "lm:rounded-b-modal",
         "[&_.orbit-modal-footer-child:last-of-type]:p-0",
       )}
       ref={containerRef}

diff --git a/packages/orbit-components/src/Modal/ModalHeader/index.tsx b/packages/orbit-components/src/Modal/ModalHeader/index.tsx
@@ -26,15 +26,15 @@ export const ModalHeaderWrapper = ({
       className={cx(
         className,
         "orbit-modal-header-container",
-        "box-border block w-full",
+        "lm:rounded-t-modal box-border block w-full",
+        !isMobileFullPage && "rounded-t-modal-mobile",
+        "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none",
         suppressed
           ? [
               "bg-cloud-light py-xl px-md lm:p-xl",
               "[&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t [&_~_.orbit-modal-section:first-of-type]:border-solid",
             ]
           : ["bg-white-normal pt-lg px-md lm:pt-xl lm:px-xl lm:pb-0 pb-0"],
-        !isMobileFullPage && "rounded-t-modal-mobile",
-        "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none",
       )}
       data-test={dataTest}
     >

diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
@@ -440,15 +440,12 @@ const Modal = React.forwardRef<Instance, Props>(
               "lm:relative lm:bottom-auto lm:pb-0 lm:overflow-visible",
               "lm:[&_.orbit-modal-section:last-of-type]:pb-xxl lm:[&_.orbit-modal-section:last-of-type:after]:content-none lm:[&_.orbit-modal-section:last-of-type]:mb-[var(--orbit-modal-footer-height,0px)]",
               "lm:[&_.orbit-modal-mobile-header]:w-[calc(var(--orbit-modal-width)-48px-theme(spacing.xxl))]",
+              "lm:rounded-modal",
               !hasModalSection &&
                 "[&_.orbit-modal-header-container]:mb-xl lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]",
               isMobileFullPage
                 ? "top-0 max-h-full"
-                : [
-                    "rounded-t-modal-mobile",
-                    "lm:rounded-modal",
-                    scrolled && "[&_.orbit-modal-mobile-header]:top-xl",
-                  ],
+                : ["rounded-t-modal-mobile", scrolled && "[&_.orbit-modal-mobile-header]:top-xl"],
               fixedFooter &&
                 footerHeight && [
                   "[&_.orbit-modal-footer]:p-md [&_.orbit-modal-footer]:fixed [&_.orbit-modal-footer]:bottom-0",