Add Margin to error messages in the Admin UI Item Form (#6508)

* Add Margin to error messages in the Admin UI Item Form
keystonejs · Sep 9, 2021 · 3cfc2a3 · 3cfc2a3
1 parent 6a589bc
commit 3cfc2a3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/.changeset/early-snakes-arrive.md 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
@@ -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
@@ -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>
         ))}