From 686ee3d1a2d4d9442a06179ffbf7399e1e970ccb Mon Sep 17 00:00:00 2001
From: Zuri Klaschka <pklaschka@users.noreply.github.com>
Date: Sat, 7 Dec 2024 20:49:12 +0100
Subject: [PATCH] feat(frontend-react): Default Widget Padding

Add a default padding to the widget layout, suitable for most widgets.
This can be disabled by setting `borderless: true` in the `Widget` object.
---
 .../src/lib/widget/component/error-fallback.module.css      | 2 +-
 frontend-react/src/lib/widget/component/error-fallback.tsx  | 3 ++-
 frontend-react/src/lib/widget/component/widget-renderer.tsx | 6 +++++-
 frontend-react/src/lib/widget/model.ts                      | 4 ++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend-react/src/lib/widget/component/error-fallback.module.css b/frontend-react/src/lib/widget/component/error-fallback.module.css
index bc3b6fe1..2f109f0d 100644
--- a/frontend-react/src/lib/widget/component/error-fallback.module.css
+++ b/frontend-react/src/lib/widget/component/error-fallback.module.css
@@ -1,5 +1,5 @@
 .alert {
 	height: 100%;
-	margin: 0;
+	margin: -0rem;
 	overflow-y: auto;
 }
diff --git a/frontend-react/src/lib/widget/component/error-fallback.tsx b/frontend-react/src/lib/widget/component/error-fallback.tsx
index 4e5ace92..30dbf157 100644
--- a/frontend-react/src/lib/widget/component/error-fallback.tsx
+++ b/frontend-react/src/lib/widget/component/error-fallback.tsx
@@ -1,5 +1,6 @@
 import { Alert, AlertHeading, Button } from 'react-bootstrap';
 import styles from './error-fallback.module.css';
+import { clsx } from 'clsx';
 
 export function ErrorFallback({
 	error,
@@ -9,7 +10,7 @@ export function ErrorFallback({
 	resetErrorBoundary: () => void;
 }) {
 	return (
-		<Alert variant="danger" className={styles.alert}>
+		<Alert variant="danger" className={clsx(styles.alert)}>
 			<AlertHeading>Widget Error</AlertHeading>
 			<p>
 				Unfortunately, the widget encountered an error and cannot be displayed.
diff --git a/frontend-react/src/lib/widget/component/widget-renderer.tsx b/frontend-react/src/lib/widget/component/widget-renderer.tsx
index 48bdfa58..ebefd669 100644
--- a/frontend-react/src/lib/widget/component/widget-renderer.tsx
+++ b/frontend-react/src/lib/widget/component/widget-renderer.tsx
@@ -5,9 +5,11 @@ import { getUserData } from '../../user-data';
 import styles from './widget-renderer.module.css';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from './error-fallback.tsx';
+import { clsx } from 'clsx';
 
 export interface WidgetRendererProps {
 	widgetInstanceId: string;
+	borderless: boolean;
 }
 
 export const WidgetConfigContext = createContext<unknown>(undefined);
@@ -36,9 +38,11 @@ registerWidget({
 });
 	`;
 
+	const isBorderless = widget?.borderless;
+
 	return (
 		<div
-			className={styles.widgetRenderer}
+			className={clsx(styles.widgetRenderer, !isBorderless && 'p-3')}
 			style={{ '--id': CSS.escape(widgetInstanceId) }}
 		>
 			{widget ? (
diff --git a/frontend-react/src/lib/widget/model.ts b/frontend-react/src/lib/widget/model.ts
index 76355db1..8b3274b6 100644
--- a/frontend-react/src/lib/widget/model.ts
+++ b/frontend-react/src/lib/widget/model.ts
@@ -40,4 +40,8 @@ export interface Widget<
 	 * A configuration element that is used to configure the widget.
 	 */
 	configElement: ReactNode;
+	/**
+	 * If `true`, the widget gets rendered without a default padding.
+	 */
+	borderless?: boolean;
 }