From 9523721f2e88d6b8b8729d25497ab9e97eb5eeae Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 19:52:06 -0300
Subject: [PATCH 1/2] feat(BBBModal): add hideCloseButton prop to hide header
 close button

BBBModal always renders a close button in the header, with no way to
suppress it. This blocks use cases that require a non-dismissible
modal, such as mandatory-action dialogs or modals whose closing is
controlled entirely by external logic.

Add a hideCloseButton prop (default false) that conditionally renders
the close button, following the same pattern already used by
noFooter.
---
 src/components/Modal/README.md             |  1 +
 src/components/Modal/component.stories.tsx | 13 +++++++++++++
 src/components/Modal/component.tsx         | 19 +++++++++++--------
 src/components/Modal/types.ts              |  3 +++
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 0558370..769c640 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -39,6 +39,7 @@ import { BBBModal } from 'bbb-ui-components-react';
 | `shouldCloseOnEsc`          | `boolean`                      | `false`   | Allows closing with ESC key.                                                |
 | `allowScroll`               | `boolean`                      | `true`    | Enables scroll in the modal body.                                           |
 | `noFooter`                  | `boolean`                      | `false`   | Hides the modal footer.                                                     |
+| `hideCloseButton`           | `boolean`                      | `false`   | Hides the header close button.                                              |
 | `footerContent`             | `React.ReactNode`              | `null`    | Custom content for the footer.                                              |
 | `stickyFooter`              | `boolean`                      | `true`    | Makes the footer sticky.                                                    |
 | `testId`                    | `string`                       | —         | Test identifier applied to the modal element (native `ReactModal` prop).    |
diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 9367b1e..731eb33 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -59,6 +59,10 @@ const meta = {
       control: 'boolean',
       description: 'Hide the footer section.',
     },
+    hideCloseButton: {
+      control: 'boolean',
+      description: 'Hide the header close button.',
+    },
     footerContent: {
       control: false,
       description: 'Custom React node to render inside the footer.',
@@ -190,3 +194,12 @@ export const Default: Story = {
   },
   render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };
+
+/** Modal without a header close button, for mandatory-action or externally-controlled flows. */
+export const HideCloseButton: Story = {
+  args: {
+    ...Default.args,
+    hideCloseButton: true,
+  },
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
+};
diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index b1d9d8b..6376cf1 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -25,6 +25,7 @@ const Modal: React.FC<ModalProps> = ({
   shouldCloseOnEsc = false,
   allowScroll = true,
   noFooter = false,
+  hideCloseButton = false,
   footerContent = null,
   stickyFooter = true,
   testId,
@@ -65,14 +66,16 @@ const Modal: React.FC<ModalProps> = ({
         >
           {title}
         </BBBTypography>
-        <BBButton
-          layout="circle"
-          icon={<MdClose size="1.5rem" />}
-          onClick={onRequestClose}
-          variant="subtle"
-          ariaLabel="close"
-          {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})}
-        />
+        {!hideCloseButton && (
+          <BBButton
+            layout="circle"
+            icon={<MdClose size="1.5rem" />}
+            onClick={onRequestClose}
+            variant="subtle"
+            ariaLabel="close"
+            {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})}
+          />
+        )}
       </Styled.ModalHeader>
 
       {showDividers && <BBBDivider />}
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index d82a8f3..5cc7b41 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -28,6 +28,9 @@ export interface ModalProps extends Omit<ReactModal.Props, 'style'> {
   /** Hide the footer section. @default false */
   noFooter?: boolean;
 
+  /** Hide the header close button. @default false */
+  hideCloseButton?: boolean;
+
   /** When true, the footer is sticky to the bottom instead of scrolling with the body. @default true */
   stickyFooter?: boolean;
 

From eceb66a2a871d9b4f823532b8e5abf4b24466343 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 19:52:17 -0300
Subject: [PATCH 2/2] chore(BBBModal): remove unused CloseButton
 styled-component

styles.ts defines a CloseButton styled-component that is never
referenced: the modal's close button has always been rendered via
BBButton in component.tsx instead. Remove the dead code.
---
 src/components/Modal/styles.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 708c871..1002ac9 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -45,15 +45,6 @@ export const ModalHeader = styled.div`
   align-items: center;
 `;
 
-export const CloseButton = styled.button`
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-`;
-
 export const ModalScrollArea = styled.div<StyledModalBodyProps>`
   flex-grow: 1;
   overflow-y: ${({ $allowScroll }) => $allowScroll ? 'auto' : 'hidden'};