fix(BBBModal): footer tweaks, docs(BBBModal): enhance story usability

src/components/Modal/component.stories.tsx

@@ -1,12 +1,23 @@
-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';
+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',
   component: BBBModal,
   tags: ['autodocs'],
+  parameters: {
+    // Prevent the fixed overlay from covering Storybook's own UI
+    layout: 'centered',
+  },
   argTypes: {
     isOpen: {
       control: 'boolean',
@@ -66,15 +77,107 @@ 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)}
+        footerContent={args.footerContent ?? <ModalFooter onClose={() => setIsOpen(false)} />}
+        ariaHideApp={false}
+      >
+        {args.children}
+      </BBBModal>
+    </>
+  );
+};
+
+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',
-    children: (
-      <div style={{ padding: '1rem' }}>
-        <BBBTypography>Modal body content</BBBTypography>
-      </div>
-    ),
-    isOpen: true,
+    isOpen: false,
     onRequestClose: () => {},
+    showDividers: false,
+    allowScroll: true,
+    noFooter: false,
+    stickyFooter: true,
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEsc: true,
+    children: null,
   },
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };

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 || footerContent) && (
-        <>
-          {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>
   )
 }

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',
@@ -53,13 +54,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};
 `;
 
@@ -74,6 +79,6 @@ export const ModalFooter = styled.div<StyledModalFooterProps>`
     `
       position: sticky;
       bottom: 0;
-      background-color: #fff;
+      background-color: ${colorWhite};
     `}
 `;