@carto/ps-react-ui 4.9.0 → 4.11.0

package/src/widgets-v2/wrapper/style.ts

@@ -6,10 +6,9 @@ export const styles = {
     width: '100%',
     minWidth: 0,
     bgcolor: 'background.paper',
-    border: '1px solid',
-    borderColor: 'divider',
     borderRadius: 1,
     overflow: 'hidden',
+    boxShadow: 'none',
     // MUI Accordion ships its own collapsed-state divider rules; clear them
     // so they don't fight our card border.
     '&::before': { display: 'none' },

package/src/widgets-v2/wrapper/widget-wrapper.test.tsx

@@ -143,6 +143,36 @@ describe('<Wrapper>', () => {
     expect(screen.queryByRole('progressbar')).toBeNull()
   })
 
+  it('renders by default (elevation variant) with body intact', () => {
+    render(
+      withProvider(
+        'wrap-variant-default',
+        <Wrapper title='t'>
+          <Content>
+            <div data-testid='body'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByText('t')).toBeTruthy()
+    expect(screen.getByTestId('body')).toBeTruthy()
+  })
+
+  it('renders the outlined variant with body intact', () => {
+    render(
+      withProvider(
+        'wrap-variant-outlined',
+        <Wrapper title='t' variant='outlined'>
+          <Content>
+            <div data-testid='body'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByText('t')).toBeTruthy()
+    expect(screen.getByTestId('body')).toBeTruthy()
+  })
+
   it('applies disabled styling without removing children', () => {
     render(
       withProvider(

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -47,6 +47,11 @@ export interface WrapperProps {
    */
   defaultCollapsed?: boolean
   disabled?: boolean
+  /**
+   * Visual variant. `'elevation'` (default) renders a borderless shell;
+   * `'outlined'` adds a 1px divider border around the card.
+   */
+  variant?: 'outlined' | 'elevation'
   labels?: Partial<WrapperLabels>
   /**
    * Icon shown at the right edge of the summary row. Accordion rotates it
@@ -79,6 +84,7 @@ export function Wrapper({
   onCollapseChange,
   defaultCollapsed = false,
   disabled = false,
+  variant = 'elevation',
   labels,
   expandIcon: ExpandIcon = ExpandMoreIcon,
   iconProps,
@@ -118,8 +124,12 @@ export function Wrapper({
       disabled={disabled}
       disableGutters
       elevation={0}
+      variant={variant}
       square
-      sx={{ ...styles.root, ...sx }}
+      sx={{
+        ...styles.root,
+        ...sx,
+      }}
     >
       {isFetching ? (
         <LinearProgress sx={styles.loading} color='primary' />