Update markdown on context panel to have header at the same level as …

…footer and content (#142)
Azure · Nov 15, 2019 · 6728b44 · 6728b44
1 parent 1d0cce0
commit 6728b44
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 33 deletions.
diff --git 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
@@ -32,30 +32,29 @@ $button-width: 30*$grid-size;
     padding: $gutter-normal;
 }
 
-.content-container {
-    flex-grow: 1;
-}
-
 .title {
     margin: 0;
 }
 
 .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
@@ -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
diff --git 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",