Block editor dialog title (#1226)

* [components] Same title on popover as default dialog * [form-builder] Show type title in diaog header instead of "edit" * Update packages/@sanity/form-builder/src/inputs/BlockEditor/EditNode.js Co-Authored-By: kristofferj <kristoffer@sanity.io>
sanity-io · Mar 6, 2019 · 75d019a · 75d019a
1 parent b2ab56a
commit 75d019a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 47 deletions.
diff --git a/packages/@sanity/components/src/dialogs/PopOver.js b/packages/@sanity/components/src/dialogs/PopOver.js
@@ -127,16 +127,30 @@ export default class PopOver extends React.PureComponent {
                           onClickOutside={isActive ? onClickOutside : undefined}
                           className={styles.popover}
                         >
-                          {onClose && (
+                          {title && (
+                            <div className={styles.header}>
+                              <h3 className={styles.title}>{title}</h3>
+                              {onClose && (
+                                <button
+                                  className={styles.closeInHeader}
+                                  type="button"
+                                  onClick={onClose}
+                                >
+                                  <CloseIcon />
+                                </button>
+                              )}
+                            </div>
+                          )}
+                          {!title && onClose && (
                             <button
-                              className={title ? styles.closeInverted : styles.close}
+                              className={styles.closeOutsideHeader}
                               type="button"
                               onClick={onClose}
                             >
                               <CloseIcon />
                             </button>
                           )}
-                          {title && <h3 className={styles.title}>{title}</h3>}
+
                           <div
                             className={`
                             ${actions.length > 0 ? styles.contentWithActions : styles.content}

diff --git a/packages/@sanity/components/src/dialogs/story.js b/packages/@sanity/components/src/dialogs/story.js
@@ -276,6 +276,12 @@ storiesOf('Dialogs')
             actions={boolean('has actions', false, 'test') ? actions : []}
             color={select('color', [undefined, 'danger', 'default'], undefined, 'props')}
             title={text('Title', 'Title', 'props')}
+            padding={select(
+              'Padding',
+              [undefined, 'none', 'small', 'medium', 'large'],
+              undefined,
+              'props'
+            )}
             onClose={
               boolean('Has onClose', false, 'test')
                 ? event => console.log('onClose', event)

diff --git a/packages/@sanity/components/src/dialogs/styles/PopOver.css b/packages/@sanity/components/src/dialogs/styles/PopOver.css
@@ -124,10 +124,6 @@
 
 .filledArrow {
   composes: arrow;
-
-  @nest .popper[data-placement^="bottom"] & {
-    background-color: var(--dialog-header-color);
-  }
 }
 
 .popover {
@@ -137,9 +133,11 @@
   border-radius: var(--border-radius-large);
   box-sizing: border-box;
   position: relative;
+  color: var(--text-color);
 
   @nest .color_danger & {
     background-color: var(--state-danger-color);
+    color: var(--state-danger-color--inverted);
   }
 
   @nest .responsive & {
@@ -161,22 +159,29 @@
 }
 
 .close {
-  position: absolute;
-  border: 0;
+  display: flex;
+  align-items: center;
   background-color: transparent;
   font-size: 1.5em;
+  border: none;
   cursor: pointer;
   outline: none;
-  padding-right: 0.25em;
-  color: var(--text-color);
+  color: inherit;
+  margin-right: 0.1em;
+}
+
+.closeInHeader {
+  composes: close;
+}
+
+.closeOutsideHeader {
+  composes: close;
+  position: absolute;
+  border: 0;
   top: var(--small-padding);
-  right: var(--small-padding);
+  right: 0;
   z-index: 1;
 
-  @nest .color_default & {
-    background-color: color(var(--component-bg) a(50%));
-  }
-
   @nest .color_danger & {
     color: var(--white);
   }
@@ -186,31 +191,12 @@
   }
 }
 
-.closeInverted {
-  composes: close;
-  color: #fff;
-  background-color: transparent;
-  right: 0;
-
-  @nest .color_default & {
-    background-color: transparent;
-  }
-
-  @nest .responsive & {
-    @media (--max-screen-medium) {
-      top: var(--small-padding);
-      right: var(--small-padding);
-    }
-  }
-}
-
 .content {
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
   max-height: calc(100vh - 10rem);
   max-width: 90vw;
-  color: var(--text-color);
 
   @nest .responsive & {
     @media (--max-screen-medium) {
@@ -256,15 +242,19 @@
   }
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  height: var(--header-height);
+  border-bottom: 1px solid color(var(--text-color) a(10%));
+  justify-content: space-between;
+}
+
 .title {
-  font-size: 1em;
+  font-size: 1.25em;
+  font-weight: 700;
   margin: 0;
-  background-color: var(--dialog-header-color);
-  color: var(--dialog-header-color--inverted);
-  padding: var(--small-padding);
-  padding-right: var(--medium-padding);
-  font-weight: 400;
-  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
+  padding: var(--small-padding) var(--medium-padding);
 
   @nest .responsive & {
     @media (--max-screen-medium) {

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor/EditNode.js b/packages/@sanity/form-builder/src/inputs/BlockEditor/EditNode.js
@@ -88,7 +88,7 @@ export default class EditNode extends React.Component<Props> {
       <div className={styles.formBuilderInputWrapper}>
         <FormBuilderInput
           type={type}
-          level={1}
+          level={0}
           readOnly={readOnly || type.readOnly}
           value={nodeValue}
           onChange={this.handleChange}
@@ -105,17 +105,19 @@ export default class EditNode extends React.Component<Props> {
     const {type, node} = this.props
     const nodeRef = findDOMNode(node)
     const editModalLayout = get(type.options, 'editModal')
+    const {title} = type
+
     if (editModalLayout === 'fullscreen') {
       return (
-        <FullscreenDialog isOpen title="Edit" onClose={this.handleClose}>
+        <FullscreenDialog isOpen title={title} onClose={this.handleClose}>
           {this.renderInput()}
         </FullscreenDialog>
       )
     }
     if (editModalLayout === 'fold') {
       return (
         <div className={styles.editBlockContainerFold}>
-          <EditItemFold isOpen title="Edit" onClose={this.handleClose}>
+          <EditItemFold isOpen title={title} onClose={this.handleClose}>
             {this.renderInput()}
           </EditItemFold>
         </div>
@@ -129,15 +131,17 @@ export default class EditNode extends React.Component<Props> {
           onClickOutside={this.handleClose}
           onEscape={this.handleClose}
           onClose={this.handleClose}
+          title={title}
+          padding="none"
         >
-          {this.renderInput()}
+          <DialogContent size="medium" padding="small">{this.renderInput()}</DialogContent>
         </Popover>
       )
     }
     return (
       <DefaultDialog
         isOpen
-        title="Edit"
+        title={title}
         onClose={this.handleClose}
         showCloseButton
         onAction={this.handleDialogAction}