fix(Modal): ensure Modal has rounded bottom corners on larger viewports

Fixes FEPLT-2208
kiwicom · Jan 17, 2025 · ef00bba · ef00bba
1 parent b346865
commit ef00bba
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/packages/orbit-components/src/Modal/Modal.ct-story.tsx b/packages/orbit-components/src/Modal/Modal.ct-story.tsx
@@ -66,3 +66,15 @@ export function ModalVisualNoHeaderNoFooter({ isMobileFullPage = false }) {
     </Modal>
   );
 }
+
+export function ModalVisualHeaderOnly({ isMobileFullPage = false }) {
+  return (
+    <Modal onClose={() => {}} size={SIZES.NORMAL} isMobileFullPage={isMobileFullPage}>
+      <ModalHeader
+        title="Normal header"
+        illustration={<Illustration name="AppKiwi" size="small" />}
+        description="Lorem ispum dolor sit amet"
+      />
+    </Modal>
+  );
+}
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx b/packages/orbit-components/src/Modal/Modal.ct.tsx
@@ -5,6 +5,7 @@ import {
   ModalVisualDefaultStory,
   ModalVisualMobileHeader,
   ModalVisualNoHeaderNoFooter,
+  ModalVisualHeaderOnly,
 } from "./Modal.ct-story";
 import { SIZES } from "./consts";
 
@@ -43,4 +44,16 @@ test.describe("visual Modal", () => {
 
     await expect(component).toHaveScreenshot();
   });
+
+  test("ModalVisualHeaderOnly", async ({ mount }) => {
+    const component = await mount(<ModalVisualHeaderOnly />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("ModalVisualHeaderOnly isMobileFullPage", async ({ mount }) => {
+    const component = await mount(<ModalVisualHeaderOnly isMobileFullPage />);
+
+    await expect(component).toHaveScreenshot();
+  });
 });
diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -459,6 +459,44 @@ export const WithItinerary: Story = {
   },
 };
 
+export const WithModalHeaderOnly: Story = {
+  render: args => {
+    const { Container, onClose } = useModal();
+    return (
+      <Container>
+        <Modal onClose={onClose} {...args}>
+          <ModalHeader
+            title="Enjoy something to eat while you fly"
+            illustration={<Illustration name="BaggageDrop" size="small" />}
+            description="Select a flight below to see the menu (where available)"
+          />
+        </Modal>
+      </Container>
+    );
+  },
+
+  args: {
+    mobileHeader: true,
+  },
+
+  parameters: {
+    info: "An example of a modal with a fixed footer. Check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      exclude: [
+        "size",
+        "title",
+        "autoFocus",
+        "isMobileFullPage",
+        "preventOverlayClose",
+        "hasCloseButton",
+        "disableAnimation",
+        "labelClose",
+        "lockScrolling",
+      ],
+    },
+  },
+};
+
 type PlaygroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean };
 export const Playground: StoryObj<PlaygroundStoryProps> = {
   render: ({

diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
@@ -440,6 +440,7 @@ const Modal = React.forwardRef<Instance, Props>(
               "lm:relative lm:bottom-auto lm:pb-0",
               "lm:[&_.orbit-modal-section:last-of-type]:pb-1000 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.1000))]",
+              "lm:[&:has(.orbit-modal-header-container:last-child)]:pb-1000",
               footerHeight && "lm:[&_.orbit-modal-section]:rounded-b-none",
               !hasModalSection &&
                 "[&_.orbit-modal-header-container]:mb-800 lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]",