fix(form): align elements

sanity-io · Dec 19, 2023 · cd54159 · cd54159
1 parent dce8f2c
commit cd54159
Show file tree

Hide file tree

Showing 23 changed files with 109 additions and 108 deletions.
diff --git a/...ges/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx b/...ges/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferenceInput.tsx
@@ -294,7 +294,7 @@ export function CrossDatasetReferenceInput(props: CrossDatasetReferenceInputProp
                       hit: hit,
                     }))}
                     onFocus={handleAutocompleteFocus}
-                    radius={1}
+                    radius={2}
                     placeholder={t('inputs.reference.search-placeholder')}
                     onKeyDown={handleAutocompleteKeyDown}
                     readOnly={readOnly}

diff --git a/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx b/packages/sanity/src/core/form/inputs/ObjectInput/UnknownFields.tsx
@@ -86,24 +86,27 @@ function UnknownField({
   const {t} = useTranslation()
 
   return (
-    <Card as="li" padding={3} radius={2} shadow={1} tone="caution">
-      <Stack space={2}>
-        <Card border radius={1}>
-          <Card borderBottom padding={3}>
-            <Code weight="medium">{fieldName}</Code>
-          </Card>
-          <Box overflow="auto" padding={3}>
-            <Code language="json">{JSON.stringify(value, null, 2)}</Code>
-          </Box>
-        </Card>
+    <Card as="li" overflow="hidden" radius={2} shadow={1} tone="caution">
+      <Card padding={3} shadow={1} tone="inherit">
+        <Code size={1}>{fieldName}</Code>
+      </Card>
+
+      <Box overflow="auto" padding={3}>
+        <Code language="json" size={1}>
+          {JSON.stringify(value, null, 2)}
+        </Code>
+      </Box>
 
-        {readOnly && (
+      {readOnly && (
+        <Box padding={3}>
           <Text as="p" muted size={1}>
             <Translate t={t} i18nKey="inputs.object.unknown-fields.read-only.description" />
           </Text>
-        )}
+        </Box>
+      )}
 
-        {!readOnly && (
+      {!readOnly && (
+        <Card padding={3} shadow={1} tone="inherit">
           <Button
             icon={TrashIcon}
             mode="ghost"
@@ -112,8 +115,8 @@ function UnknownField({
             tone="critical"
             text={t('inputs.object.unknown-fields.remove-field-button.text')}
           />
-        )}
-      </Stack>
+        </Card>
+      )}
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.styles.ts
@@ -24,7 +24,7 @@ export const Root = styled(Card)((props: {theme: Theme}) => {
     position: relative;
 
     &[data-focused] {
-      box-shadow: 0 0 0 1px ${color.selectable?.primary.selected.border};
+      --card-border-color: var(--card-focus-ring-color);
     }
 
     &:not([data-focused]):not([data-selected]) {

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObjectActionsMenu.tsx
@@ -96,6 +96,7 @@ export function BlockObjectActionsMenu(props: BlockObjectActionsMenuProps): Reac
               aria-label={t('inputs.portable-text.block.open-menu-aria-label')}
               icon={EllipsisHorizontalIcon}
               mode="bleed"
+              paddingY={3}
               tabIndex={focused ? 0 : 1}
               tooltipProps={{content: 'Open menu'}}
             />

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -69,6 +69,7 @@ export function CreateButton(props: Props) {
           text={t('inputs.reference.action.create-new-document-select')}
           mode="ghost"
           icon={AddIcon}
+          size="large"
         />
       }
       id={id}
@@ -111,6 +112,7 @@ export function CreateButton(props: Props) {
       // eslint-disable-next-line react/jsx-no-bind
       onClick={() => onCreate(createOptions[0])}
       icon={AddIcon}
+      size="large"
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceField.tsx
@@ -192,9 +192,9 @@ export function ReferenceField(props: ReferenceFieldProps) {
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
+        <Box flex="none">
           <MenuButton
-            button={<ContextMenuButton />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${inputId}-menuButton`}
             menu={
               <Menu>
@@ -263,7 +263,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
           {isEditing ? (
             <Box>{children}</Box>
           ) : (
-            <Card border radius={1} padding={1} tone={tone}>
+            <Card border radius={2} padding={1} tone={tone}>
               <Stack space={1}>
                 <Flex gap={1} align="center" style={{lineHeight: 0}}>
                   <TooltipDelayGroupProvider delay={TOOLTIP_DELAY_PROPS}>

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceInput.tsx
@@ -214,14 +214,12 @@ export function ReferenceInput(props: ReferenceInputProps) {
 
       return (
         <StyledPreviewCard forwardedAs="button" type="button" radius={2} tone="inherit">
-          <Box paddingX={3} paddingY={1}>
-            <OptionPreview
-              getReferenceInfo={getReferenceInfo}
-              id={documentId}
-              renderPreview={renderPreview}
-              type={schemaType}
-            />
-          </Box>
+          <OptionPreview
+            getReferenceInfo={getReferenceInfo}
+            id={documentId}
+            renderPreview={renderPreview}
+            type={schemaType}
+          />
         </StyledPreviewCard>
       )
     },
@@ -324,7 +322,7 @@ export function ReferenceInput(props: ReferenceInputProps) {
             loading={searchState.isLoading}
             referenceElement={autocompletePopoverReferenceElementRef.current}
             options={hits}
-            radius={1}
+            radius={2}
             placeholder={t('inputs.reference.search-placeholder')}
             onKeyDown={handleAutocompleteKeyDown}
             readOnly={loadableReferenceInfo.isLoading || readOnly}

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx
@@ -181,52 +181,50 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
   const menu = useMemo(
     () =>
       readOnly ? null : (
-        <Box marginLeft={1}>
-          <MenuButton
-            button={<ContextMenuButton />}
-            id={`${inputId}-menuButton`}
-            menu={
-              <Menu ref={menuRef}>
-                {!readOnly && (
-                  <>
-                    <MenuItem
-                      text={t('inputs.reference.action.remove')}
-                      tone="critical"
-                      icon={TrashIcon}
-                      onClick={onRemove}
-                    />
-                    <MenuItem
-                      text={t(
-                        hasRef && isEditing
-                          ? 'inputs.reference.action.replace-cancel'
-                          : 'inputs.reference.action.replace',
-                      )}
-                      icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
-                      onClick={handleReplace}
-                    />
-                    <MenuItem
-                      text={t('inputs.reference.action.duplicate')}
-                      icon={DuplicateIcon}
-                      onClick={handleDuplicate}
-                    />
-                    <InsertMenu onInsert={handleInsert} types={insertableTypes} />
-                  </>
-                )}
-
-                {!readOnly && !isEditing && hasRef && <MenuDivider />}
-                {!isEditing && hasRef && (
+        <MenuButton
+          button={<ContextMenuButton paddingY={3} />}
+          id={`${inputId}-menuButton`}
+          menu={
+            <Menu ref={menuRef}>
+              {!readOnly && (
+                <>
                   <MenuItem
-                    as={OpenLink}
-                    data-as="a"
-                    text={t('inputs.reference.action.open-in-new-tab')}
-                    icon={OpenInNewTabIcon}
+                    text={t('inputs.reference.action.remove')}
+                    tone="critical"
+                    icon={TrashIcon}
+                    onClick={onRemove}
                   />
-                )}
-              </Menu>
-            }
-            popover={MENU_POPOVER_PROPS}
-          />
-        </Box>
+                  <MenuItem
+                    text={t(
+                      hasRef && isEditing
+                        ? 'inputs.reference.action.replace-cancel'
+                        : 'inputs.reference.action.replace',
+                    )}
+                    icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
+                    onClick={handleReplace}
+                  />
+                  <MenuItem
+                    text={t('inputs.reference.action.duplicate')}
+                    icon={DuplicateIcon}
+                    onClick={handleDuplicate}
+                  />
+                  <InsertMenu onInsert={handleInsert} types={insertableTypes} />
+                </>
+              )}
+
+              {!readOnly && !isEditing && hasRef && <MenuDivider />}
+              {!isEditing && hasRef && (
+                <MenuItem
+                  as={OpenLink}
+                  data-as="a"
+                  text={t('inputs.reference.action.open-in-new-tab')}
+                  icon={OpenInNewTabIcon}
+                />
+              )}
+            </Menu>
+          }
+          popover={MENU_POPOVER_PROPS}
+        />
       ),
     [
       handleDuplicate,

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceLinkCard.tsx
@@ -5,7 +5,7 @@ import {Card, CardProps} from '@sanity/ui'
 export const StyledCard = styled(Card)`
   /* this is a hack to avoid layout jumps while previews are loading
      there's probably better ways of solving this */
-  min-height: 35px;
+  min-height: 33px;
   position: relative;
 
   /* TextWithTone uses its own logic to set color, and we therefore need */

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/ErrorItem.tsx
@@ -29,7 +29,7 @@ export function ErrorItem(props: {member: ArrayItemError; sortable?: boolean}) {
       style={{height: '100%'}}
       menu={
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${id}-menuButton`}
           menu={
             <Menu>

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx
@@ -59,17 +59,17 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const memberKeys = useMemo(() => members.map((member) => member.key), [members])
 
   return (
-    <Stack space={3}>
+    <Stack space={2}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
         onUpload={onUpload}
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members?.length === 0 && (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx
@@ -125,7 +125,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -138,7 +138,7 @@ export function GridItem<Item extends ObjectItem = ObjectItem>(props: GridItemPr
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ErrorItem.tsx
@@ -27,7 +27,7 @@ export function ErrorItem(props: {
         tone="caution"
         menu={
           <MenuButton
-            button={<ContextMenuButton />}
+            button={<ContextMenuButton paddingY={3} />}
             id={`${id}-menuButton`}
             menu={
               <Menu>

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/ListArrayInput.tsx
@@ -187,25 +187,25 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   const paddingY = 1
 
   return (
-    <Stack space={3} ref={parentRef}>
+    <Stack space={2} ref={parentRef}>
       <UploadTargetCard
         types={schemaType.of}
         resolveUploader={resolveUploader}
         onUpload={onUpload}
         {...elementProps}
         tabIndex={0}
       >
-        <Stack data-ui="ArrayInput__content" space={3}>
+        <Stack data-ui="ArrayInput__content" space={2}>
           {members.length === 0 ? (
-            <Card padding={3} border style={{borderStyle: 'dashed'}} radius={2}>
+            <Card padding={3} border radius={2}>
               <Text align="center" muted size={1}>
                 {schemaType.placeholder || <>{t('inputs.array.no-items-label')}</>}
               </Text>
             </Card>
           ) : (
             <Card
               border
-              radius={1}
+              radius={2}
               style={{
                 // This is not memoized since it changes on scroll so it will change anyways making memo useless
                 // Account for grid gap
@@ -271,7 +271,6 @@ export function ListArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
           )}
         </Stack>
       </UploadTargetCard>
-
       <ArrayFunctions
         onChange={onChange}
         onItemAppend={handleAppend}

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx
@@ -108,7 +108,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
   const childValidation = useChildValidation(path, true)
   const validation = useMemo(() => {
     return childValidation.length === 0 ? null : (
-      <Box marginLeft={1} paddingX={1} paddingY={3}>
+      <Box paddingX={1} paddingY={3}>
         <FormFieldValidationStatus validation={childValidation} __unstable_showSummary />
       </Box>
     )
@@ -121,7 +121,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
     () =>
       readOnly ? null : (
         <MenuButton
-          button={<ContextMenuButton />}
+          button={<ContextMenuButton paddingY={3} />}
           id={`${props.inputId}-menuButton`}
           menu={
             <Menu>
@@ -160,7 +160,7 @@ export function PreviewItem<Item extends ObjectItem = ObjectItem>(props: Preview
         as="button"
         type="button"
         tone="inherit"
-        radius={2}
+        radius={1}
         disabled={resolvingInitialValue}
         onClick={onOpen}
         ref={previewCardRef}

diff --git a/...ages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/...ages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -170,7 +170,7 @@ export class ArrayOfPrimitivesInput extends React.PureComponent<
     }))
 
     return (
-      <Stack space={3} data-testid="array-primitives-input">
+      <Stack space={2} data-testid="array-primitives-input">
         <UploadTargetCard
           types={schemaType.of}
           resolveUploader={resolveUploader}

diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ItemRow.tsx
@@ -66,7 +66,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
 
   const menu = (
     <MenuButton
-      button={<ContextMenuButton />}
+      button={<ContextMenuButton paddingY={3} />}
       id={`${inputId}-menuButton`}
       popover={MENU_BUTTON_POPOVER_PROPS}
       menu={
@@ -96,7 +96,7 @@ export const ItemRow = React.forwardRef(function ItemRow(
       presence={presence.length === 0 ? null : <FieldPresence presence={presence} maxAvatars={1} />}
       validation={
         validation.length > 0 ? (
-          <Box marginLeft={1} paddingX={1} paddingY={3}>
+          <Box paddingX={1} paddingY={3}>
             <FormFieldValidationStatus validation={validation} />
           </Box>
         ) : null