feat(modal): add ModalBodyHeader for Organisation Settings Modal

[kylengn]

Summary by CodeRabbit

• New Features
  • Introduced ModalBodyHeader component for displaying modal headers with images, titles, and optional descriptions. This addition to the react-ui library enables developers to create more visually consistent and enhanced modal header experiences with integrated image support and flexible descriptive text content options.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
react-ui	Ready	Preview, Comment	Jan 28, 2026 2:14pm

[coderabbitai]

Walkthrough

A new ModalBodyHeader component is added to the @shipfox/react-ui package with accompanying prop types. The component renders an image, header text, and optional description. A changeset entry documents the minor version bump.

Changes

Cohort / File(s)	Summary
Changeset Documentation .changeset/cuddly-seals-smile.md	Minor version bump entry for @shipfox/react-ui documenting the addition of the ModalBodyHeader public component.
Modal Component Updates libs/react/ui/src/components/modal/modal.tsx	Added new ModalBodyHeader component accepting src, alt, title, and optional description props. Introduced ModalBodyHeaderProps type definition. Updated imports to include Header and ReactNode. Exported both the component and type in the module's public API.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat(ui): add Modal component #128 — Modifies the same modal component file (libs/react/ui/src/components/modal/modal.tsx), creating a direct code-level connection.

Suggested reviewers

• EnzalRad
• dvxam
• noe-charmet

Poem

🐰 A header hopped into the modal's embrace,
With image and title and text in its place,
Optional notes like fresh clover so green,
The prettiest component I've ever seen! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a new ModalBodyHeader component to the modal module, with context about its intended use in Organisation Settings Modal.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR extends the modal UI library with a reusable ModalBodyHeader component to support richer content layouts (e.g., for Organisation Settings modals).

Changes:

• Import Header and ReactNode to support structured title and description content in the modal body.
• Add a ModalBodyHeader component (and its ModalBodyHeaderProps type) that renders an image, title, and optional description with responsive alignment.
• Export ModalBodyHeader and its props from the modal module so it can be consumed by other parts of the app.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The Tailwind class string "text-center md:text-left!" uses text-left!, which is not a valid Tailwind utility syntax (the ! important modifier should prefix the class, e.g. !text-left, or be omitted). This will cause the md: text alignment override to be ignored; consider changing this to a valid Tailwind class such as md:text-left or md:!text-left depending on the intended behavior.

Suggested change

	<div className="flex flex-col gap-4 text-center md:text-left!">
	<div className="flex flex-col gap-4 text-center md:text-left">

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	54 changed	Jan 28, 2026, 2:16 PM