Add CardBody

Author: arthur791004

client/dashboard/components/action-list/action-item.scss

@@ -5,12 +5,7 @@
 	padding: $grid-unit-20 0;
 	border-bottom: 1px solid $gray-100;
 
-	&:first-child {
-		padding-top: $grid-unit-10;
-	}
-
 	&:last-child {
-		padding-bottom: $grid-unit-10;
 		border-bottom: none;
 	}
 

client/dashboard/components/action-list/index.tsx

@@ -2,6 +2,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
 	Card,
+	CardBody,
 } from '@wordpress/components';
 import { forwardRef } from 'react';
 import ActionItem from './action-item';
@@ -14,21 +15,25 @@ function UnforwardedActionList(
 ) {
 	return (
 		<Card className="action-list" ref={ ref }>
-			{ ( title || description ) && (
-				<VStack className="action-list__heading" spacing={ 2 }>
-					{ title && (
-						<Text size="15px" weight={ 500 } lineHeight="20px">
-							{ title }
-						</Text>
-					) }
-					{ description && (
-						<Text variant="muted" lineHeight="20px">
-							{ description }
-						</Text>
-					) }
+			<CardBody>
+				{ ( title || description ) && (
+					<VStack className="action-list__heading" spacing={ 2 }>
+						{ title && (
+							<Text size="15px" weight={ 500 } lineHeight="20px">
+								{ title }
+							</Text>
+						) }
+						{ description && (
+							<Text variant="muted" lineHeight="20px">
+								{ description }
+							</Text>
+						) }
+					</VStack>
+				) }
+				<VStack className="action-list__actions" spacing={ 0 }>
+					{ children }
 				</VStack>
-			) }
-			<VStack spacing={ 0 }>{ children }</VStack>
+			</CardBody>
 		</Card>
 	);
 }

client/dashboard/components/action-list/style.scss

@@ -2,14 +2,16 @@
 @import "@wordpress/base-styles/variables";
 
 .action-list {
-	padding: $grid-unit-10 $grid-unit-30;
-
-	&:has(.action-list__heading) {
-		padding: $grid-unit-20 $grid-unit-30;
-	}
-
 	.action-list__heading {
 		padding-top: $grid-unit-10;
 		padding-bottom: $grid-unit-15;
 	}
+
+	.action-list__heading ~ .action-list__actions {
+		margin: -$grid-unit-10 0;
+	}
+
+	.action-list__actions {
+		margin: -$grid-unit-20 0;
+	}
 }