fix(Modal): fix bottom border radius when isMobileFullPage

The issue occurred because the bottom corners of a footerless modal
didn't round off when the isMobileFullPage props was enabled.

Now we handle all border radius from wrapper content.

Slack: https://go.kiwi.com/8otDOYbt

packages/orbit-components/src/Modal/Modal.ct-story.tsx

@@ -56,3 +56,13 @@ export function ModalVisualMobileHeader() {
     </Modal>
   );
 }
+
+export function ModalVisualNoHeaderNoFooter({ isMobileFullPage = false }) {
+  return (
+    <Modal onClose={() => {}} size={SIZES.NORMAL} isMobileFullPage={isMobileFullPage}>
+      <ModalSection>
+        <Text>No Header nor Footer modal</Text>
+      </ModalSection>
+    </Modal>
+  );
+}

packages/orbit-components/src/Modal/Modal.ct.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
 
-import { ModalVisualDefaultStory, ModalVisualMobileHeader } from "./Modal.ct-story";
+import {
+  ModalVisualDefaultStory,
+  ModalVisualMobileHeader,
+  ModalVisualNoHeaderNoFooter,
+} from "./Modal.ct-story";
 import { SIZES } from "./consts";
 
 test.describe("visual Modal", () => {
@@ -24,4 +28,16 @@ test.describe("visual Modal", () => {
 
     await expect(component).toHaveScreenshot();
   });
+
+  test("ModalVisualNoHeaderNoFooter", async ({ mount }) => {
+    const component = await mount(<ModalVisualNoHeaderNoFooter />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("ModalVisualNoHeaderNoFooter isMobileFullPage", async ({ mount }) => {
+    const component = await mount(<ModalVisualNoHeaderNoFooter isMobileFullPage />);
+
+    await expect(component).toHaveScreenshot();
+  });
 });

packages/orbit-components/src/Modal/ModalFooter/index.tsx

@@ -74,7 +74,6 @@ 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",
-        "lm:rounded-b-modal",
         "[&_.orbit-modal-footer-child:last-of-type]:p-0",
       )}
       ref={containerRef}

packages/orbit-components/src/Modal/ModalHeader/index.tsx

@@ -11,13 +11,11 @@ import type { Props } from "./types";
 export const ModalHeaderWrapper = ({
   className,
   suppressed,
-  isMobileFullPage,
   dataTest,
   children,
 }: {
   className?: string;
   suppressed?: boolean;
-  isMobileFullPage?: boolean;
   dataTest?: string;
   children?: React.ReactNode;
 }) => {
@@ -26,9 +24,7 @@ export const ModalHeaderWrapper = ({
       className={cx(
         className,
         "orbit-modal-header-container",
-        "lm:rounded-t-modal box-border block w-full",
-        !isMobileFullPage && "rounded-t-modal",
-        "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none",
+        "box-border block w-full",
         suppressed
           ? [
               "bg-cloud-light py-xl px-md lm:p-xl",
@@ -66,11 +62,7 @@ const ModalHeader = ({
   const hasHeader = Boolean(title || description);
 
   return (
-    <ModalHeaderWrapper
-      suppressed={suppressed}
-      dataTest={dataTest}
-      isMobileFullPage={isMobileFullPage}
-    >
+    <ModalHeaderWrapper suppressed={suppressed} dataTest={dataTest}>
       {illustration}
       {hasHeader && (
         <div

packages/orbit-components/src/Modal/ModalSection/index.tsx

@@ -29,7 +29,6 @@ export const ModalSectionWrapper = ({
         "orbit-modal-section",
         "py-lg px-md lm:p-xl box-border w-full",
         "border-b-elevation-flat-border-color border-b border-solid",
-        "last-of-type:[&:not(:last-child)]:rounded-b-none",
         suppressed
           ? [
               "bg-cloud-light",
@@ -41,10 +40,7 @@ export const ModalSectionWrapper = ({
               "bg-white-normal",
               "lm:[&_~_.orbit-modal-footer]:last-of-type:pt-0 last-of-type:border-b-0",
             ],
-        !isMobileFullPage && [
-          "first-of-type:rounded-t-modal lm:first-of-type:rounded-t-modal",
-          "last-of-type:rounded-b-modal lm:last-of-type:rounded-t-modal lm:[&_~_.orbit-modal-footer]:last-of-type:mt-0",
-        ],
+        !isMobileFullPage && ["lm:[&_~_.orbit-modal-footer]:last-of-type:mt-0"],
       )}
       data-test={dataTest}
     >

packages/orbit-components/src/Modal/index.tsx

@@ -421,7 +421,6 @@ const Modal = React.forwardRef<Instance, Props>(
           className={cx(
             "orbit-modal-wrapper",
             "fixed mx-auto my-0 box-border flex min-h-full w-full items-start",
-            !isMobileFullPage && "rounded-t-modal",
             disableAnimation
               ? !isMobileFullPage && "top-[32px]"
               : [
@@ -436,11 +435,11 @@ const Modal = React.forwardRef<Instance, Props>(
           <div
             className={cx(
               "orbit-modal-wrapper-content",
-              "font-base bg-elevation-flat shadow-overlay absolute box-border w-full overflow-y-auto overflow-x-hidden",
-              "lm:relative lm:bottom-auto lm:pb-0 lm:overflow-visible",
+              "lm:rounded-modal overflow-hidden",
+              "font-base bg-elevation-flat shadow-overlay absolute box-border w-full",
+              "lm:relative lm:bottom-auto lm:pb-0",
               "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
@@ -482,10 +481,8 @@ const Modal = React.forwardRef<Instance, Props>(
                 className={cx(
                   "z-overlay h-form-box-large pointer-events-none right-0 box-border flex w-full items-center justify-end",
                   "duration-fast transition-[shadow,_background-color] ease-in-out",
-                  "lm:rounded-none",
                   fixedClose || scrolled ? "lm:top-0 lm:right-auto fixed" : "absolute",
                   !isMobileFullPage && (fixedClose || scrolled) ? "top-[32px]" : "top-0",
-                  !isMobileFullPage && "rounded-t-modal",
                   modalWidth ? "max-w-[var(--orbit-modal-width)]" : maxWidthClasses[size],
                   scrolled && "shadow-fixed bg-white-normal",
                   "[&_+_.orbit-modal-section:first-of-type]:pt-xxxl [&_+_.orbit-modal-section:first-of-type]:m-0 [&_+_.orbit-modal-section:first-of-type]:border-t-0",