refactor: rename flush to withPadding boolean prop on Box

Rename the padding toggle from flush to withPadding (defaults to true)
for clearer intent in the partner-facing adapter API.

Made-with: Cursor

Author: aaronlee777

.storybook/adapters/PlainComponentAdapter.tsx

@@ -136,10 +136,10 @@ export const PlainComponentAdapter: ComponentsContextType = {
     )
   },
 
-  Box: ({ children, header, footer, flush, className }: BoxProps) => (
+  Box: ({ children, header, footer, withPadding = true, className }: BoxProps) => (
     <div className={`box ${className || ''}`}>
       {header && <div className="box-header">{header}</div>}
-      <div className="box-body" style={flush ? { padding: 0 } : undefined}>
+      <div className="box-body" style={withPadding ? undefined : { padding: 0 }}>
         {children}
       </div>
       {footer && <div className="box-footer">{footer}</div>}

docs/component-adapter/component-inventory.md

@@ -98,13 +98,13 @@
 
 ## BoxProps
 
-| Prop          | Type              | Required | Description |
-| ------------- | ----------------- | -------- | ----------- |
-| **children**  | `React.ReactNode` | Yes      | -           |
-| **header**    | `React.ReactNode` | No       | -           |
-| **footer**    | `React.ReactNode` | No       | -           |
-| **flush**     | `boolean`         | No       | -           |
-| **className** | `string`          | No       | -           |
+| Prop            | Type              | Required | Description |
+| --------------- | ----------------- | -------- | ----------- |
+| **children**    | `React.ReactNode` | Yes      | -           |
+| **header**      | `React.ReactNode` | No       | -           |
+| **footer**      | `React.ReactNode` | No       | -           |
+| **withPadding** | `boolean`         | No       | -           |
+| **className**   | `string`          | No       | -           |
 
 ## BoxSectionProps
 

src/components/Common/UI/Box/Box.stories.tsx

@@ -104,7 +104,7 @@ export const FlushContent: Story = {
   render: () => {
     const Components = useComponentContext()
     return (
-      <Components.Box flush>
+      <Components.Box withPadding={false}>
         <Components.Text>This content has no padding (flush variant).</Components.Text>
       </Components.Box>
     )
@@ -115,7 +115,10 @@ export const WithEmbeddedTable: Story = {
   render: () => {
     const Components = useComponentContext()
     return (
-      <Components.Box header={<Components.Heading as="h3">Team Members</Components.Heading>} flush>
+      <Components.Box
+        header={<Components.Heading as="h3">Team Members</Components.Heading>}
+        withPadding={false}
+      >
         <Components.Table
           aria-label="Team members"
           variant="embedded"

src/components/Common/UI/Box/Box.test.tsx

@@ -36,7 +36,7 @@ describe('Box Component', () => {
   })
 
   test('renders flush content variant', () => {
-    renderWithProviders(<Box flush>Flush Content</Box>)
+    renderWithProviders(<Box withPadding={false}>Flush Content</Box>)
 
     expect(screen.getByText('Flush Content')).toBeInTheDocument()
   })
@@ -46,7 +46,7 @@ describe('Box Component', () => {
     const defaultWrapper = screen.getByText('Default Content').closest('div')!
     const defaultClassName = defaultWrapper.className
 
-    rerender(<Box flush>Flush Content</Box>)
+    rerender(<Box withPadding={false}>Flush Content</Box>)
     const flushWrapper = screen.getByText('Flush Content').closest('div')!
     expect(defaultClassName).not.toBe(flushWrapper.className)
   })

src/components/Common/UI/Box/Box.tsx

@@ -2,11 +2,11 @@ import cn from 'classnames'
 import styles from './Box.module.scss'
 import type { BoxProps } from '@/components/Common/UI/Box/BoxTypes'
 
-export function Box({ children, header, footer, flush, className }: BoxProps) {
+export function Box({ children, header, footer, withPadding = true, className }: BoxProps) {
   return (
     <div className={cn(styles.root, className)} data-testid="data-box">
       {header && <div className={styles.header}>{header}</div>}
-      <div className={flush ? styles.contentFlush : styles.content}>{children}</div>
+      <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>
       {footer && <div className={styles.footer}>{footer}</div>}
     </div>
   )

src/components/Common/UI/Box/BoxTypes.ts

@@ -4,7 +4,7 @@ export interface BoxProps {
   children: ReactNode
   header?: ReactNode
   footer?: ReactNode
-  flush?: boolean
+  withPadding?: boolean
   className?: string
 }