From e05754b331207d93a1ed2cbd7de4da65d8df8529 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 3 Jun 2026 17:56:27 -0300
Subject: [PATCH 1/5] docs(BBBModal): improve story usability in Storybook

Use a controlled trigger-button pattern with a ModalStory wrapper
component to prevent the fixed overlay from covering Storybook's UI.
The modal can now be opened/closed via a button while keeping the
controls panel fully accessible. Syncs with the isOpen arg control
via useEffect and sets ariaHideApp={false} to avoid react-modal
warnings in the iframe context.
---
 src/components/Modal/component.stories.tsx | 53 +++++++++++++++++++---
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 7bc46f3..6d831ee 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import BBBModal from './component';
 import { BBBTypography } from '../Typography';
+import { BBButton } from '../Button';
 
 const meta = {
   title: 'BBBModal',
   component: BBBModal,
   tags: ['autodocs'],
+  parameters: {
+    // Prevent the fixed overlay from covering Storybook's own UI
+    layout: 'centered',
+  },
   argTypes: {
     isOpen: {
       control: 'boolean',
@@ -66,15 +71,51 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Wrapper component so hooks can be used inside Storybook's render function.
+ * The modal is controlled via a trigger button, keeping the controls panel
+ * accessible. Adjust args and re-open the modal to see the changes.
+ */
+const ModalStory: React.FC<React.ComponentProps<typeof BBBModal>> = (args) => {
+  const [isOpen, setIsOpen] = useState(args.isOpen);
+
+  // Sync with the Storybook "isOpen" control
+  React.useEffect(() => {
+    setIsOpen(args.isOpen);
+  }, [args.isOpen]);
+
+  return (
+    <>
+      <BBButton
+        label="Open Modal"
+        onClick={() => setIsOpen(true)}
+      />
+      <BBBModal
+        {...args}
+        isOpen={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+        ariaHideApp={false}
+      >
+        {args.children}
+      </BBBModal>
+    </>
+  );
+};
+
 export const Default: Story = {
   args: {
     title: 'Modal Title',
+    isOpen: false,
+    onRequestClose: () => {},
+    showDividers: false,
+    allowScroll: true,
+    noFooter: false,
+    stickyFooter: true,
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
     children: (
-      <div style={{ padding: '1rem' }}>
-        <BBBTypography>Modal body content</BBBTypography>
-      </div>
+      <BBBTypography>Modal body content</BBBTypography>
     ),
-    isOpen: true,
-    onRequestClose: () => {},
   },
+  render: (args) => <ModalStory {...args} />,
 };

From eaf625aaf1f6c5babdad6608f75ab1122464de8f Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 3 Jun 2026 19:54:32 -0300
Subject: [PATCH 2/5] docs(BBBModal): expand modal example to cover scroll and
 divider options

Add more elements to the modal body to enable meaningful testing of
the `allowScroll` option. Add a default footer with two buttons to
allow testing of footer rendering and the `showDividers` option.
---
 src/components/Modal/component.stories.tsx | 70 ++++++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 6d831ee..35355ab 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -3,6 +3,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import BBBModal from './component';
 import { BBBTypography } from '../Typography';
 import { BBButton } from '../Button';
+import { BBBAccordion } from '../Accordion';
+import { BBBSelect } from '../Select';
+import { BBBCheckbox } from '../Checkbox';
+import { BBBTextInput } from '../TextInput';
+import { BBBHint } from '../Hint';
+import MenuItem from '@mui/material/MenuItem';
 
 const meta = {
   title: 'BBBModal',
@@ -94,6 +100,7 @@ const ModalStory: React.FC<React.ComponentProps<typeof BBBModal>> = (args) => {
         {...args}
         isOpen={isOpen}
         onRequestClose={() => setIsOpen(false)}
+        footerContent={args.footerContent ?? <ModalFooter onClose={() => setIsOpen(false)} />}
         ariaHideApp={false}
       >
         {args.children}
@@ -102,6 +109,63 @@ const ModalStory: React.FC<React.ComponentProps<typeof BBBModal>> = (args) => {
   );
 };
 
+const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+
+const ModalFooter = ({ onClose }: { onClose: () => void }) => (
+  <>
+    <BBButton label="Cancel" variant="subtle" onClick={onClose} ariaLabel="Cancel" />
+    <BBButton label="Confirm" variant="primary" onClick={onClose} ariaLabel="Confirm" />
+  </>
+);
+
+const ModalBody = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <BBBTypography variant="header">Profile Settings</BBBTypography>
+    <BBBTypography>{LOREM}</BBBTypography>
+
+    <BBBTextInput label="Full name" placeholder="John Doe" />
+
+    <BBBSelect title="Role" value="admin">
+      <MenuItem value="admin">Admin</MenuItem>
+      <MenuItem value="moderator">Moderator</MenuItem>
+      <MenuItem value="viewer">Viewer</MenuItem>
+    </BBBSelect>
+
+    <BBBTypography>{LOREM}</BBBTypography>
+
+    <BBBAccordion title="Advanced options" ariaLabel="Advanced options">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <BBBCheckbox label="Enable notifications" ariaLabel="Enable notifications" />
+        <BBBCheckbox label="Allow data sharing" ariaLabel="Allow data sharing" />
+        <BBBCheckbox label="Show online status" ariaLabel="Show online status" />
+      </div>
+    </BBBAccordion>
+
+    <BBBHint label="Changes will take effect on the next session." />
+
+    <BBBTypography>{LOREM}</BBBTypography>
+
+    <BBBSelect title="Language" value="pt">
+      <MenuItem value="en">English</MenuItem>
+      <MenuItem value="pt">Português</MenuItem>
+      <MenuItem value="es">Español</MenuItem>
+    </BBBSelect>
+
+    <BBBAccordion title="Danger zone" ariaLabel="Danger zone">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <BBBTypography>{LOREM}</BBBTypography>
+        <BBButton label="Delete account" variant="primary" ariaLabel="Delete account" onClick={() => {}} />
+      </div>
+    </BBBAccordion>
+
+    <BBBTypography>{LOREM}</BBBTypography>
+  </div>
+);
+
 export const Default: Story = {
   args: {
     title: 'Modal Title',
@@ -113,9 +177,7 @@ export const Default: Story = {
     stickyFooter: true,
     shouldCloseOnOverlayClick: true,
     shouldCloseOnEsc: true,
-    children: (
-      <BBBTypography>Modal body content</BBBTypography>
-    ),
+    children: null,
   },
-  render: (args) => <ModalStory {...args} />,
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };

From 3af4bf920b69279c5c419f9ca0a7f0004b7af0d8 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 3 Jun 2026 20:03:24 -0300
Subject: [PATCH 3/5] fix(BBBModal): enforce footer hide when noFooter is true

When `noFooter` is true, the footer is still displayed if
`footerContent` is provided.

Update the footer visibility condition so `noFooter: true` hides
the footer regardless of whether `footerContent` is set.
---
 src/components/Modal/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index 0741928..f666198 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -64,7 +64,7 @@ const Modal: React.FC<ModalProps> = ({
       >
         {children}
       </Styled.ModalBody>
-      {(!noFooter || footerContent) && (
+      {!noFooter && (
         <>
           {showDividers && (<BBBDivider />)}
 

From 109b745b846fbe2d7d8aec7a015ce529d567057e Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 3 Jun 2026 22:43:50 -0300
Subject: [PATCH 4/5] fix(BBBModal): make stickyFooter: false position footer
 below content

When `stickyFooter` is set to false, the footer does not correctly
position itself below the full modal content and is affected by
additional padding.

Position the footer below the entire modal content when
`stickyFooter` is false, ignoring any additional padding.
---
 src/components/Modal/component.tsx | 34 +++++++++++++++---------------
 src/components/Modal/styles.ts     |  8 +++++--
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index f666198..7b5e97c 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import ReactModal from 'react-modal';
 import * as Styled from './styles';
 import { BBBTypography } from '../Typography';
@@ -31,6 +31,15 @@ const Modal: React.FC<ModalProps> = ({
   ...rest
 }) => {
 
+  const renderFooter = useCallback((isSticky: boolean) => (
+    <>
+      {showDividers && <BBBDivider />}
+      <Styled.ModalFooter $stickyFooter={isSticky}>
+        {footerContent}
+      </Styled.ModalFooter>
+    </>
+  ), [footerContent, showDividers]);
+
   return (
     <ReactModal
       {...rest}
@@ -59,22 +68,13 @@ const Modal: React.FC<ModalProps> = ({
 
       {showDividers && <BBBDivider />}
 
-      <Styled.ModalBody
-        $allowScroll={allowScroll}
-      >
-        {children}
-      </Styled.ModalBody>
-      {!noFooter && (
-        <>
-          {showDividers && (<BBBDivider />)}
-
-          <Styled.ModalFooter
-            $stickyFooter={stickyFooter}
-          >
-            {footerContent}
-          </Styled.ModalFooter>
-        </>
-      )}
+      <Styled.ModalScrollArea $allowScroll={allowScroll}>
+        <Styled.ModalBodyContent>
+          {children}
+        </Styled.ModalBodyContent>
+        {!noFooter && !stickyFooter && renderFooter(stickyFooter)}
+        </Styled.ModalScrollArea>
+      {!noFooter && stickyFooter && renderFooter(stickyFooter)}
     </ReactModal>
   )
 }
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index b81d9b5..9195018 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -53,13 +53,17 @@ export const CloseButton = styled.button`
   line-height: 1;
 `;
 
-export const ModalBody = styled.div<StyledModalBodyProps>`
+export const ModalScrollArea = styled.div<StyledModalBodyProps>`
   flex-grow: 1;
   overflow-y: ${({ $allowScroll }) => $allowScroll ? 'auto' : 'hidden'};
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  padding: 0 ${spacingLarge} 0;
+`;
+
+export const ModalBodyContent = styled.div`
+  flex-grow: 1;
+  padding: 0 ${spacingLarge};
   margin: ${spacingSmallMedium} 0 ${spacingSmallMedium};
 `;
 

From 6cd4e43c0e3fd632c49451890f6e3bac980c541d Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 3 Jun 2026 22:45:59 -0300
Subject: [PATCH 5/5] fix(BBBModal): replace hardcoded #fff with colorWhite CSS
 variable

The BBBModal background colors are hardcoded as `#fff` instead of
using the `colorWhite` CSS variable, causing them to ignore theme
overrides.

Replace all `#fff` occurrences with `colorWhite`.
---
 src/components/Modal/styles.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 9195018..be57fa5 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { Styles } from 'react-modal';
 import * as React from 'react';
 import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing';
+import { colorWhite } from '../../stylesheets/pallete';
 import { StyledModalBodyProps, StyledModalFooterProps } from './types';
 
 export const modalStyles: Styles = {
@@ -24,7 +25,7 @@ export const modalStyles: Styles = {
     right: 'auto',
     bottom: 'auto',
     borderRadius: borderRadiusDefault,
-    background: '#fff',
+    background: colorWhite,
     overflow: 'hidden',
     WebkitOverflowScrolling: 'touch',
     outline: 'none',
@@ -78,6 +79,6 @@ export const ModalFooter = styled.div<StyledModalFooterProps>`
     `
       position: sticky;
       bottom: 0;
-      background-color: #fff;
+      background-color: ${colorWhite};
     `}
 `;