diff --git a/packages/orbit-components/src/Modal/Modal.ct-story.tsx b/packages/orbit-components/src/Modal/Modal.ct-story.tsx
index b29ce24d9d..53dfc88a9d 100644
--- 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 }) {
);
}
+
+export function ModalVisualHeaderOnly({ isMobileFullPage = false }) {
+ return (
+ {}} size={SIZES.NORMAL} isMobileFullPage={isMobileFullPage}>
+ }
+ description="Lorem ispum dolor sit amet"
+ />
+
+ );
+}
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx b/packages/orbit-components/src/Modal/Modal.ct.tsx
index ba44490bb3..556e819d2d 100644
--- 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();
+
+ await expect(component).toHaveScreenshot();
+ });
+
+ test("ModalVisualHeaderOnly isMobileFullPage", async ({ mount }) => {
+ const component = await mount();
+
+ await expect(component).toHaveScreenshot();
+ });
});
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png
new file mode 100644
index 0000000000..f3831c57db
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png
new file mode 100644
index 0000000000..c0052d4a81
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png
new file mode 100644
index 0000000000..8d3901364f
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png
new file mode 100644
index 0000000000..2fdb03d4e0
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png
new file mode 100644
index 0000000000..20a3579658
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png
new file mode 100644
index 0000000000..c5d25563e5
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png
new file mode 100644
index 0000000000..790c889af3
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png
new file mode 100644
index 0000000000..d65810d694
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png
new file mode 100644
index 0000000000..2dfc94523b
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png
new file mode 100644
index 0000000000..d6efa07477
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png
new file mode 100644
index 0000000000..1c08a8c1f5
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png
new file mode 100644
index 0000000000..39deee87f6
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png
new file mode 100644
index 0000000000..f3831c57db
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png
new file mode 100644
index 0000000000..c0052d4a81
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png
new file mode 100644
index 0000000000..8d3901364f
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png
new file mode 100644
index 0000000000..2fdb03d4e0
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png
new file mode 100644
index 0000000000..20a3579658
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png
new file mode 100644
index 0000000000..c5d25563e5
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png
new file mode 100644
index 0000000000..c6207f1901
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png
new file mode 100644
index 0000000000..598a1d84ba
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png
new file mode 100644
index 0000000000..8d3536fac3
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png
new file mode 100644
index 0000000000..2211ee8146
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png
new file mode 100644
index 0000000000..1c08a8c1f5
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png
new file mode 100644
index 0000000000..39deee87f6
Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png differ
diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx
index 77e19df94a..d1385ecfc0 100644
--- a/packages/orbit-components/src/Modal/Modal.stories.tsx
+++ b/packages/orbit-components/src/Modal/Modal.stories.tsx
@@ -459,6 +459,45 @@ export const WithItinerary: Story = {
},
};
+export const WithModalHeaderOnly: Story = {
+ render: args => {
+ const { Container, onClose } = useModal();
+ return (
+
+
+ }
+ description="Select a flight below to see the menu (where available)"
+ />
+
+
+ );
+ },
+
+ args: {
+ mobileHeader: true,
+ },
+
+ parameters: {
+ info: "An example of a modal with a header only. Check Orbit.Kiwi for more detailed design guidelines.",
+ controls: {
+ exclude: [
+ "size",
+ "fixedFooter",
+ "title",
+ "autoFocus",
+ "isMobileFullPage",
+ "preventOverlayClose",
+ "hasCloseButton",
+ "disableAnimation",
+ "labelClose",
+ "lockScrolling",
+ ],
+ },
+ },
+};
+
type PlaygroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean };
export const Playground: StoryObj = {
render: ({
diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx
index a99461c798..c305441885 100644
--- a/packages/orbit-components/src/Modal/index.tsx
+++ b/packages/orbit-components/src/Modal/index.tsx
@@ -440,6 +440,7 @@ const Modal = React.forwardRef(
"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)]",