From 3cfc2a3839142dd3ccdbf1dd86768257e9acc0dc Mon Sep 17 00:00:00 2001
From: Jed Watson <jed@keystonejs.com>
Date: Thu, 9 Sep 2021 12:33:21 +1000
Subject: [PATCH] Add Margin to error messages in the Admin UI Item Form
 (#6508)

* Add Margin to error messages in the Admin UI Item Form
---
 .changeset/early-snakes-arrive.md                         | 6 ++++++
 design-system/packages/notice/src/Notice.tsx              | 8 ++++----
 .../src/admin-ui/components/GraphQLErrorNotice.tsx        | 8 ++++++--
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/early-snakes-arrive.md

diff --git a/.changeset/early-snakes-arrive.md b/.changeset/early-snakes-arrive.md
new file mode 100644
index 00000000000..03be3f45223
--- /dev/null
+++ b/.changeset/early-snakes-arrive.md
@@ -0,0 +1,6 @@
+---
+"@keystone-ui/notice": minor
+"@keystone-next/keystone": patch
+---
+
+Add Margin to error messages in the Admin UI Item Form
diff --git a/design-system/packages/notice/src/Notice.tsx b/design-system/packages/notice/src/Notice.tsx
index e9ddfa27121..a0c32451b2a 100644
--- a/design-system/packages/notice/src/Notice.tsx
+++ b/design-system/packages/notice/src/Notice.tsx
@@ -2,7 +2,7 @@
 /** @jsx jsx */
 
 import { ReactNode, useMemo } from 'react';
-import { jsx, makeId, useId, Stack } from '@keystone-ui/core';
+import { jsx, makeId, useId, Stack, MarginProps, Box } from '@keystone-ui/core';
 import { AlertOctagonIcon } from '@keystone-ui/icons/icons/AlertOctagonIcon';
 import { AlertCircleIcon } from '@keystone-ui/icons/icons/AlertCircleIcon';
 import { AlertTriangleIcon } from '@keystone-ui/icons/icons/AlertTriangleIcon';
@@ -36,7 +36,7 @@ type NoticeProps = {
   tone?: ToneKey;
   title?: string;
   className?: string;
-} /* TODO: & MarginProps */;
+} & MarginProps;
 
 export const Notice = ({
   actions,
@@ -60,7 +60,7 @@ export const Notice = ({
 
   return (
     <ButtonProvider {...buttonContext}>
-      <div
+      <Box
         css={{
           display: 'flex',
           flex: 1,
@@ -97,7 +97,7 @@ export const Notice = ({
             </Stack>
           )}
         </div>
-      </div>
+      </Box>
     </ButtonProvider>
   );
 };
diff --git a/packages/keystone/src/admin-ui/components/GraphQLErrorNotice.tsx b/packages/keystone/src/admin-ui/components/GraphQLErrorNotice.tsx
index bc81cb8abc1..330f33ad8bc 100644
--- a/packages/keystone/src/admin-ui/components/GraphQLErrorNotice.tsx
+++ b/packages/keystone/src/admin-ui/components/GraphQLErrorNotice.tsx
@@ -10,11 +10,15 @@ type GraphQLErrorNoticeProps = {
 
 export function GraphQLErrorNotice({ errors, networkError }: GraphQLErrorNoticeProps) {
   if (networkError) {
-    return <Notice tone="negative">{networkError.message}</Notice>;
+    return (
+      <Notice tone="negative" marginBottom="large">
+        {networkError.message}
+      </Notice>
+    );
   }
   if (errors?.length) {
     return (
-      <Stack gap="small">
+      <Stack gap="small" marginBottom="large">
         {errors.map(err => (
           <Notice tone="negative">{err.message}</Notice>
         ))}