22108: Updated Modal.Header to prevent overflow (#68)

howsoai · Nov 6, 2024 · aa0bce6 · aa0bce6
1 parent b9f87b7
commit aa0bce6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/components/Surfaces/Modal/Modal.stories.tsx b/src/components/Surfaces/Modal/Modal.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Modal } from "flowbite-react";
+import { Paragraph } from "../../Typography";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof Modal> = {
@@ -14,14 +15,36 @@ const meta: Meta<typeof Modal> = {
   argTypes: {},
   render: (args) => (
     <>
-      <div className="w-full h-full text-3xl flex gap-6 flex-wrap">
+      <div className="flex h-full w-full flex-wrap gap-6 text-3xl">
         {new Array(100).fill(0).map((_, index) => (
           <div key={index}>{index}</div>
         ))}
       </div>
       <Modal {...args} show>
+        <Modal.Header>
+          <div className="flex flex-row flex-nowrap items-baseline justify-between gap-4">
+            <div className="truncate">
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit
+            </div>
+            <div className="block truncate text-sm">
+              Nulla similique impedit natus nesciunt repellendus quaerat
+              exercitationem
+            </div>
+          </div>
+        </Modal.Header>
         <Modal.Body>
-          <p>Sample content</p>
+          <Paragraph marginBottom>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
+            similique impedit natus nesciunt repellendus quaerat exercitationem
+            incidunt dolorum neque sit? Mollitia molestias totam nam nostrum
+            magnam veniam ipsam aspernatur quas.
+          </Paragraph>
+          <Paragraph>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
+            similique impedit natus nesciunt repellendus quaerat exercitationem
+            incidunt dolorum neque sit? Mollitia molestias totam nam nostrum
+            magnam veniam ipsam aspernatur quas.
+          </Paragraph>
         </Modal.Body>
       </Modal>
     </>

diff --git a/src/themes/standard.ts b/src/themes/standard.ts
@@ -191,6 +191,11 @@ export const standardFlowbiteTheme: CustomFlowbiteTheme = {
         on: "flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80 backdrop-blur-sm starting-fade",
       },
     },
+    header: {
+      base: "flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600 overflow-hidden",
+      title:
+        "text-xl font-medium text-gray-900 dark:text-white overflow-hidden",
+    },
     content: {
       base: "relative h-full w-full p-4 md:h-auto starting-fade",
     },