Make Scroll within Panel inherit bottom rounded corners

hypothesis · Nov 9, 2023 · 3d6a603 · 3d6a603
1 parent 489f5e3
commit 3d6a603
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/src/components/layout/Panel.tsx b/src/components/layout/Panel.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ComponentChildren, JSX } from 'preact';
 
 import type { IconComponent, CompositeProps } from '../../types';
@@ -96,7 +97,19 @@ export default function Panel({
         {Icon && <Icon className="w-em h-em" />}
         <CardTitle>{title}</CardTitle>
       </CardHeader>
-      {scrollable ? <Scroll>{panelContent}</Scroll> : <>{panelContent}</>}
+      {scrollable ? (
+        <Scroll
+          classes={classNames({
+            // When no buttons are provided (which means this is the last children),
+            // inherit the bottom border radius from Card.
+            'rounded-b-[inherit]': !buttons,
+          })}
+        >
+          {panelContent}
+        </Scroll>
+      ) : (
+        <>{panelContent}</>
+      )}
       {buttons && (
         <CardContent data-testid="panel-buttons">
           <CardActions>{buttons}</CardActions>

diff --git a/src/pattern-library/components/patterns/layout/PanelPage.tsx b/src/pattern-library/components/patterns/layout/PanelPage.tsx
@@ -42,17 +42,7 @@ export default function PanelPage() {
               withSource
             >
               <div className="h-[350px]">
-                <Panel
-                  title="Scrolling content"
-                  buttons={
-                    <>
-                      <Button>Buttons</Button>
-                      <Button>do not</Button>
-                      <Button variant="primary">Scroll</Button>
-                    </>
-                  }
-                  scrollable
-                >
+                <Panel title="Scrolling content" scrollable>
                   <LoremIpsum />
                 </Panel>
               </div>