Fix expand/collapse button in the document editor (keystonejs#7926)

Jwarni · Sep 15, 2022 · 5fa2ee2 · 5fa2ee2
1 parent 72b7f3a
commit 5fa2ee2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 39 deletions.
diff --git a/.changeset/hot-lemons-clean.md b/.changeset/hot-lemons-clean.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/fields-document': patch
+---
+
+Fixes expand/collapse button in the editor
diff --git a/packages/fields-document/src/DocumentEditor/index.tsx b/packages/fields-document/src/DocumentEditor/index.tsx
@@ -194,23 +194,10 @@ export function DocumentEditor({
 
   return (
     <div
-      css={[
-        {
-          border: `1px solid ${colors.border}`,
-          borderRadius: radii.small,
-        },
-        expanded && {
-          border: 'none',
-          background: colors.background,
-          bottom: 0,
-          left: 0,
-          overflowY: 'auto', // required to keep the toolbar stuck in place
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          zIndex: 100,
-        },
-      ]}
+      css={{
+        border: `1px solid ${colors.border}`,
+        borderRadius: radii.small,
+      }}
     >
       <DocumentEditorProvider
         componentBlocks={componentBlocks}
@@ -252,32 +239,17 @@ export function DocumentEditor({
           css={[
             {
               borderRadius: 'inherit',
-              background: fields.inputBackground,
+              background: fields.focus.inputBackground,
               borderColor: fields.inputBorderColor,
               paddingLeft: spacing.medium,
               paddingRight: spacing.medium,
-              ':hover': {
-                background: fields.hover.inputBackground,
-              },
-              ':focus': {
-                background: fields.focus.inputBackground,
-              },
-              ':disabled': {
-                background: fields.disabled.inputBackground,
-              },
+              minHeight: 120,
+              scrollbarGutter: 'stable',
+              // the !important is necessary to override the width set by resizing as an inline style
+              height: expanded ? 'auto !important' : 224,
+              resize: expanded ? undefined : 'vertical',
+              overflowY: 'auto',
             },
-            expanded
-              ? {
-                  height: 'auto !important',
-                  background: fields.focus.inputBackground,
-                }
-              : {
-                  height: 224,
-                  resize: 'vertical',
-                  overflowY: 'auto',
-                  minHeight: 120,
-                  scrollbarGutter: 'stable',
-                },
           ]}
           {...props}
           readOnly={onChange === undefined}