From 6728b44978da8d962efc616c3cf68674003fbc31 Mon Sep 17 00:00:00 2001
From: Patricio Beltran <pbelsal@gmail.com>
Date: Fri, 15 Nov 2019 10:36:17 -0800
Subject: [PATCH] Update markdown on context panel to have header at the same
 level as footer and content (#142)

---
 CHANGELOG.md                                  |  4 ++
 .../ContextPanel/ContextPanel.module.scss     | 11 ++--
 lib/components/ContextPanel/ContextPanel.tsx  | 50 +++++++++----------
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 5 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adb776f..c52fcd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 7.0.8
+### Fixed
+- Flattened markdown in context panel to have content, footer and header at the same level.
+
 ## 7.0.7
 ### Changed
 - Change `data-active` attribute to be a boolean attribute (i.e., emit \<foo data-active> instead of \<foo data-active="true">)
diff --git a/lib/components/ContextPanel/ContextPanel.module.scss b/lib/components/ContextPanel/ContextPanel.module.scss
index 2eb27cc..28352c0 100644
--- a/lib/components/ContextPanel/ContextPanel.module.scss
+++ b/lib/components/ContextPanel/ContextPanel.module.scss
@@ -32,10 +32,6 @@ $button-width: 30*$grid-size;
     padding: $gutter-normal;
 }
 
-.content-container {
-    flex-grow: 1;
-}
-
 .title {
     margin: 0;
 }
@@ -43,19 +39,22 @@ $button-width: 30*$grid-size;
 .header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: $gutter-normal;
 }
 
 .content {
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
+    padding-top: 0;
+    
+    &.with-footer {
+        padding-bottom: 0;
+    }
 }
 
 .footer {
     flex-grow: 0;
     flex-shrink: 0;
-    margin-top: $gutter-normal;
     border-top: 1px solid var(--color-border-container-panel);
 
     :global(.btn) {
diff --git a/lib/components/ContextPanel/ContextPanel.tsx b/lib/components/ContextPanel/ContextPanel.tsx
index f4f3821..19fe7c4 100644
--- a/lib/components/ContextPanel/ContextPanel.tsx
+++ b/lib/components/ContextPanel/ContextPanel.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as classnames from 'classnames/bind';
 import { ActionTriggerButton, ActionTriggerButtonAttributes, ActionTriggerAttributes } from '../ActionTrigger';
-import { Elements as Attr, HeadingProps, SectionProps, AsideProps, DivProps } from '../../Attributes';
+import { Elements as Attr, SectionProps, AsideProps, DivProps, HeaderProps, HeadingProps, FooterProps } from '../../Attributes';
 import { Portal } from './portal';
 
 const cx = classnames.bind(require('./ContextPanel.module.scss'));
@@ -15,10 +15,13 @@ export interface ContextPanelProperties {
     attr?: {
         container?: AsideProps;
         contentContainer?: DivProps;
-        header?: HeadingProps;
+        header?: {
+            container?: HeaderProps;
+            title?: HeadingProps;
+            closeButton?: ActionTriggerButtonAttributes & ActionTriggerAttributes;
+        }
         content?: SectionProps;
-        footer?: SectionProps;
-        closeButton?: ActionTriggerButtonAttributes & ActionTriggerAttributes;
+        footer?: FooterProps;
     };
 }
 
@@ -41,28 +44,25 @@ function Panel({ header, children, footer, onClose, attr }: ContextPanelProperti
         <Attr.aside 
             className={cx('panel')} 
             attr={attr?.container}>
-            <div className={cx('content-container', 'panel-container')}>
-                <div className={cx('header')}>
-                    {header && <Attr.h2 
-                        id='context-panel-title' 
-                        className={cx('title', 'inline-text-overflow')} 
-                        attr={attr?.header}
-                        >
-                        {header}
-                    </Attr.h2>}
-                    {onClose && <ActionTriggerButton
-                        icon='cancel'
-                        onClick={onClose}
-                        attr={attr?.closeButton}
-                    />}
-                </div>
-                <Attr.section className={cx('content')} attr={attr?.content}>
-                    {children}
-                </Attr.section>
-            </div>
-            {footer && <Attr.section className={cx('footer', 'panel-container')} attr={attr?.footer}>
+            <Attr.header className={cx('header', 'panel-container')} attr={attr?.header?.container}>
+                <Attr.h2 
+                    id='context-panel-title' 
+                    className={cx('title', 'inline-text-overflow')} 
+                    attr={attr?.header?.title}>
+                    {header}
+                </Attr.h2>
+                <ActionTriggerButton
+                    icon='cancel'
+                    onClick={onClose}
+                    attr={attr?.header?.closeButton}
+                />
+            </Attr.header>
+            <Attr.section className={cx('content', 'panel-container', { 'with-footer': !!footer })} attr={attr?.content}>
+                {children}
+            </Attr.section>
+            {footer && <Attr.footer className={cx('footer', 'panel-container')} attr={attr?.footer}>
                 {footer}
-            </Attr.section>}
+            </Attr.footer>}
         </Attr.aside>
     );
 }
diff --git a/package-lock.json b/package-lock.json
index 6523af6..e922c69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.7",
+    "version": "7.0.8",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 07a6093..cf07d49 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.7",
+    "version": "7.0.8",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",