DataForm: Card bordless layout (WordPress#72514)

* Enhance Card Component: Introduce directional padding options and update size type definitions

* Enhance Card Component: Introduce directional padding options and update size type definitions

* add changelog

* add size to footer

* fix changelog

* fix changelog

* fix padding

* clean up code

* fix unit test

* update types

* move padding style in get-padding-by-size file

* update story documentation

* update documentation

* remove option to make the card with border

* address feedback

* Refactor padding options in FormCardField component to use blockStart/blockEnd and inlineStart/inlineEnd instead of top/right/bottom/left for improved layout flexibility

* Update packages/components/src/card/card/README.md

Co-authored-by: Lena Morita <lena@jaguchi.com>

* improve documentation

* improve logic

* implement none

* fix build

* restore changelog

* update changelog

* restore story

* fix layout when header is not collapsible

* fix story

* improve card layout logic

* Update paragraph styling in dataform story to remove margin for improved layout consistency

---------

Co-authored-by: Lena Morita <lena@jaguchi.com>

Author: gigitux

packages/dataviews/CHANGELOG.md

@@ -7,6 +7,7 @@
 - DatViews list layout: remove link variant from primary actions's button. [#72920](https://github.com/WordPress/gutenberg/pull/72920)
 - DataForm: simplify form normalization. [#72848](https://github.com/WordPress/gutenberg/pull/72848)
 - DataViewsPicker: Add With Modal story. [#72913](https://github.com/WordPress/gutenberg/pull/72913)
+- DataForm: make the card layout borderless. [#72514](https://github.com/WordPress/gutenberg/pull/72514)
 
 ### Bug fixes
 

packages/dataviews/src/dataform-layouts/card/index.tsx

@@ -32,7 +32,7 @@ const NonCollapsibleCardHeader = ( {
 }: {
 	children: React.ReactNode;
 } ) => (
-	<OriginalCardHeader { ...props }>
+	<OriginalCardHeader isBorderless { ...props }>
 		<div
 			style={ {
 				height: '40px', // This is to match the chevron's __next40pxDefaultSize
@@ -70,6 +70,7 @@ export function useCardHeader( layout: NormalizedCardLayout ) {
 					cursor: 'pointer',
 					...props.style,
 				} }
+				isBorderless
 			>
 				<div
 					style={ {
@@ -178,11 +179,27 @@ export default function FormCardField< Item >( {
 		isSummaryFieldVisible( summaryField, layout.summary, isOpen )
 	);
 
+	const sizeCard = {
+		blockStart: 'medium' as const,
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
 	if ( !! field.children ) {
 		const withHeader = !! field.label && layout.withHeader;
 
+		const sizeCardBody = {
+			blockStart: withHeader
+				? ( 'none' as const )
+				: ( 'medium' as const ),
+			blockEnd: 'medium' as const,
+			inlineStart: 'medium' as const,
+			inlineEnd: 'medium' as const,
+		};
+
 		return (
-			<Card className="dataforms-layouts-card__field">
+			<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 				{ withHeader && (
 					<CardHeader className="dataforms-layouts-card__field-header">
 						<span className="dataforms-layouts-card__field-header-label">
@@ -207,7 +224,10 @@ export default function FormCardField< Item >( {
 				{ ( isOpen || ! withHeader ) && (
 					// If it doesn't have a header, keep it open.
 					// Otherwise, the card will not be visible.
-					<CardBody className="dataforms-layouts-card__field-control">
+					<CardBody
+						size={ sizeCardBody }
+						className="dataforms-layouts-card__field-control"
+					>
 						{ field.description && (
 							<div className="dataforms-layouts-card__field-description">
 								{ field.description }
@@ -239,8 +259,15 @@ export default function FormCardField< Item >( {
 	}
 	const withHeader = !! fieldDefinition.label && layout.withHeader;
 
+	const sizeCardBody = {
+		blockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),
+		blockEnd: 'medium' as const,
+		inlineStart: 'medium' as const,
+		inlineEnd: 'medium' as const,
+	};
+
 	return (
-		<Card className="dataforms-layouts-card__field">
+		<Card className="dataforms-layouts-card__field" size={ sizeCard }>
 			{ withHeader && (
 				<CardHeader className="dataforms-layouts-card__field-header">
 					<span className="dataforms-layouts-card__field-header-label">
@@ -262,7 +289,10 @@ export default function FormCardField< Item >( {
 			{ ( isOpen || ! withHeader ) && (
 				// If it doesn't have a header, keep it open.
 				// Otherwise, the card will not be visible.
-				<CardBody className="dataforms-layouts-card__field-control">
+				<CardBody
+					size={ sizeCardBody }
+					className="dataforms-layouts-card__field-control"
+				>
 					<RegularLayout
 						data={ data }
 						field={ field }

packages/dataviews/src/stories/dataform.story.tsx

@@ -1384,7 +1384,7 @@ const LayoutCardComponent = ( {
 			isVisible: ( item ) => item.displayPayments,
 			render: ( { item } ) => {
 				return (
-					<p>
+					<p style={ { margin: 0 } }>
 						The customer has made a total of { item.totalOrders }{ ' ' }
 						orders, amounting to { item.totalRevenue } dollars. The
 						average order value is { item.averageOrderValue }{ ' ' }
@@ -1440,17 +1440,13 @@ const LayoutCardComponent = ( {
 
 	const form: Form = useMemo(
 		() => ( {
-			layout: getLayoutFromStoryArgs( {
-				type: 'card',
-				withHeader,
-			} ),
 			fields: [
 				{
 					id: 'customerCard',
 					layout: {
 						type: 'card',
 						summary: 'plan-summary',
-						isCollapsible,
+						withHeader,
 					},
 					label: 'Customer',
 					description: