Merge pull request #81 from Azure/contextPanelReusable

Expose two versions of ContextPanel
Azure · Jun 12, 2019 · ed9ccda · ed9ccda
2 parents 203acb9 + 059748d
commit ed9ccda
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 244 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v6.3.0
+### Changed
+ - Add the option to get a ContextPanel with or without the portal
+ - Reduce padding between panel title and body
+
 ## v6.2.5
 ### Fixed
  - BUG 4640169: White Accent setting causing problem in all the checkbox

diff --git a/lib/components/ContextPanel/ContextPanel.md b/lib/components/ContextPanel/ContextPanel.md
@@ -19,7 +19,7 @@ ______________________________________________________________________________
 const Btn = require('../Button').Button;
 <ContextPanel 
     header='Hello'
-    children={<div>This is context panel 1</div>}
+    children={<div>This is context panel with a portal</div>}
     footer={<Btn icon='cancel' onClick={()=> alert('cancel triggered')} attr={{ container: { autoFocus: true }}}>Cancel</Btn>}
     onClose={()=> alert('cancel triggered')}
 />
@@ -28,10 +28,11 @@ const Btn = require('../Button').Button;
 ```jsx
 const Btn = require('../Button').Button;
 <ContextPanel 
-    header={<div>Hello</div>}
+    header={<><div>Hello</div><div>world!</div></>}
     footer={<Btn icon='cancel' onClick={()=> alert('cancel triggered')} attr={{ container: { autoFocus: true }}}>Cancel</Btn>}
     onClose={()=> alert('cancel triggered')}
+    omitPortal={true}
 >
-    This is context panel 1          
+    This is context panel without a portal          
 </ContextPanel>
 ```
diff --git a/lib/components/ContextPanel/ContextPanel.module.scss b/lib/components/ContextPanel/ContextPanel.module.scss
@@ -40,7 +40,7 @@ $title-font-size: $gutter-normal;
 .title {
     font-size: $title-font-size;
     margin-top: 2*$grid-size;
-    margin-bottom: $gutter-big;
+    margin-bottom: 4*$grid-size;
     flex-grow: 0;
     flex-shrink: 0;
 }

diff --git a/lib/components/ContextPanel/ContextPanel.spec.tsx b/lib/components/ContextPanel/ContextPanel.spec.tsx
@@ -11,11 +11,23 @@ describe('<ContentPanel />', () => {
                 content
             </ContextPanel>
         );
-
+
+        expect(wrapper.is('Portal'), 'Portal');
         expect(wrapper.contains('header'), 'header');
         expect(wrapper.contains('content'), 'content');
         expect(wrapper.contains('footer'), 'footer');
     }); 
+
+    it('works without a portal', () => {
+        const panel = shallow(
+            <ContextPanel omitPortal={true} header='header' footer='footer' onClose={() => {}}>content</ContextPanel>
+        );
+
+        expect(panel.not('Portal'), 'Portal');
+        expect(panel.contains('header'), 'header');
+        expect(panel.contains('content'), 'content');
+        expect(panel.contains('footer'), 'footer');
+    });
 
     it('works without a footer', () => {
         const wrapper = shallow(

diff --git a/lib/components/ContextPanel/ContextPanel.tsx b/lib/components/ContextPanel/ContextPanel.tsx
@@ -8,6 +8,7 @@ const cx = classnames.bind(require('./ContextPanel.module.scss'));
 
 export interface ContextPanelProperties {
     onClose: React.EventHandler<any>;
+    omitPortal?: boolean;
     header: React.ReactNode;
     children?: React.ReactNode;
     footer?: React.ReactNode;
@@ -20,39 +21,51 @@ export interface ContextPanelProperties {
     };
 }
 
-export function ContextPanel({ header, children, footer, onClose, attr }: ContextPanelProperties) {
+export function ContextPanel(props: ContextPanelProperties) {
+    const panel = <Panel {...props} />;
+
+    if (props.omitPortal) {
+        return panel;
+    }
+
     return (
         <Portal>
-            <Attr.div 
-                role='complementary' 
-                aria-labelledby='context-panel-title' 
-                aria-describedby='context-panel-content' 
-                className={cx('panel')} 
-                attr={attr && attr.container}
-            >
-                {onClose && <ActionTriggerButton
-                    icon='cancel'
-                    className={cx('close-button')}
-                    onClick={onClose}
-                    attr={attr && attr.closeButton}
-                />}
-                {header && <Attr.div 
-                    id='context-panel-title' 
-                    className={cx('title', 'inline-text-overflow')} 
-                    attr={attr && attr.header}
-                    >
-                    {header}
-                </Attr.div>}
-                <Attr.div id='context-panel-content' className={cx('content')} attr={attr && attr.content}>
-                    {children}
-                </Attr.div>
-                {footer && <React.Fragment>
-                    <span className={cx('separator')} />
-                    <Attr.div className={cx('footer')} attr={attr && attr.footer}>{footer}</Attr.div>
-                </React.Fragment>}
-            </Attr.div>
+            {panel}
         </Portal>
     );
 }
 
+function Panel({ header, children, footer, onClose, attr }: ContextPanelProperties) {
+    return (
+        <Attr.div 
+            role='complementary' 
+            aria-labelledby='context-panel-title' 
+            aria-describedby='context-panel-content' 
+            className={cx('panel')} 
+            attr={attr && attr.container}
+        >
+            {onClose && <ActionTriggerButton
+                icon='cancel'
+                className={cx('close-button')}
+                onClick={onClose}
+                attr={attr && attr.closeButton}
+            />}
+            {header && <Attr.div 
+                id='context-panel-title' 
+                className={cx('title', 'inline-text-overflow')} 
+                attr={attr && attr.header}
+                >
+                {header}
+            </Attr.div>}
+            <Attr.div id='context-panel-content' className={cx('content')} attr={attr && attr.content}>
+                {children}
+            </Attr.div>
+            {footer && <React.Fragment>
+                <span className={cx('separator')} />
+                <Attr.div className={cx('footer')} attr={attr && attr.footer}>{footer}</Attr.div>
+            </React.Fragment>}
+        </Attr.div>
+    );
+}
+
 export default ContextPanel;