feat(cardeditor): add consistent header between gallery and form

carbon-design-system · Dec 8, 2020 · 03cb5ea · 03cb5ea
1 parent 736de54
commit 03cb5ea
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/components/CardEditor/CardEditor.jsx b/src/components/CardEditor/CardEditor.jsx
@@ -133,7 +133,15 @@ const CardEditor = ({
             {mergedI18n.addCardButton}
           </Button>
         </div>
-      ) : null}
+      ) : (
+        <div className={`${baseClassName}--header`}>
+          <h2 className={`${baseClassName}--header--title`}>
+            {mergedI18n.galleryHeader}
+          </h2>
+        </div>
+      )
+
+      }
       <div className={`${baseClassName}--content`}>
         {showGallery ? (
           <CardGalleryList

diff --git a/src/components/CardEditor/CardGalleryList/CardGalleryList.jsx b/src/components/CardEditor/CardGalleryList/CardGalleryList.jsx
@@ -71,7 +71,6 @@ const CardGalleryList = ({ supportedCardTypes, onAddCard, i18n }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
   return (
     <SimpleList
-      title={mergedI18n.galleryHeader}
       isFullHeight
       hasSearch
       hasPagination={false}

diff --git a/src/components/CardEditor/_card-editor.scss b/src/components/CardEditor/_card-editor.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   border-left: 1px solid $ui-03;
   &--header {
-    flex: 0 0 3rem;
+    flex: 0 0 3.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -17,6 +17,7 @@
     }
     button.gallery-button {
       /* make ghost button stretch full width */
+      height: calc(100% - 0.5rem);
       justify-content: space-between;
       width: 100%;
     }
@@ -30,4 +31,10 @@
       height: $spacing-09;
     }
   }
+
+  &--header--title {
+    @include type-style('productive-heading-02');
+    padding-left: $spacing-03;
+    width: 100%;
+  }
 }