fix(panel): header-content layout when leading slot is empty (#547)

* Fix for panel header leading slot causing weird layout. (#547)

* Fix for panel header layout. Tweaks. (#547)

* UI tweak because @mitc7862 said so. Adds a little more padding to header-content (#547)

* re: last commit. Forgot RTL.

* small tweak for (#556)

src/assets/styles/_base.scss

@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: var(--calcite-app-header-min-height);
+  flex-basis: var(--calcite-app-header-min-height);
   color: var(--calcite-app-foreground);
   fill: var(--calcite-app-foreground);
 }

src/assets/styles/_layout.scss

@@ -35,7 +35,7 @@ $cap-spacing: 16px !default;
 
   --calcite-app-border-radius: 3px;
 
-  --calcite-app-header-min-height: 3rem;
+  --calcite-app-header-min-height: calc(var(--calcite-app-cap-spacing) * 3);
 
   // shadows
   --calcite-app-shadow-0: 0 2px 4px rgba(0, 0, 0, 0.1);

src/components/calcite-panel/calcite-panel.scss

@@ -56,13 +56,21 @@
   padding: var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing);
 }
 
+.header-leading-content + .header-content {
+  padding-left: var(--calcite-app-side-spacing-half);
+}
+
 slot[name="header-content"]::slotted(.heading) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
 }
 
+.header-trailing-content {
+  margin-left: auto;
+}
+
 .content-container {
   background-color: var(--calcite-app-background-content);
   flex: 1 1 auto;
@@ -76,3 +84,13 @@ slot[name="header-content"]::slotted(.heading) {
   justify-content: space-evenly;
   padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half);
 }
+
+.calcite--rtl {
+  .header-leading-content + .header-content {
+    padding-right: var(--calcite-app-side-spacing-half);
+  }
+  .header-trailing-content {
+    margin-left: 0;
+    margin-right: auto;
+  }
+}

src/components/calcite-panel/calcite-panel.tsx

@@ -117,11 +117,12 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
 
   renderHeaderLeadingContent(): VNode {
-    return (
+    const hasLeadingContent = this.el.querySelector(`[slot=${SLOTS.headerLeadingContent}]`);
+    return hasLeadingContent ? (
       <div key="header-leading-content" class={CSS.headerLeadingContent}>
         <slot name={SLOTS.headerLeadingContent} />
       </div>
-    );
+    ) : null;
   }
 
   renderHeaderContent(): VNode {