fix: panel: footer not sticking to the bottom (#83)

EightfoldAI · Apr 28, 2022 · 3b77737 · 3b77737
1 parent 74c2594
commit 3b77737
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
@@ -111,6 +111,14 @@ export const Default = () => {
             <Panel
                 title={'This is a title'}
                 visible={visible.medium}
+                footer={
+                    <div>
+                        <PrimaryButton
+                            text={'Close'}
+                            onClick={() => setVisible({})}
+                        />
+                    </div>
+                }
                 size={PanelSize.medium}
                 onClose={() => setVisible({})}
             />

diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx
@@ -56,7 +56,7 @@ describe('Panel', () => {
         });
         wrapper.find('.panelBackdrop').at(0).simulate('click');
 
-        wrapper.find('.buttonDefault').at(0).simulate('click');
+        wrapper.find('.buttonNeutral').at(0).simulate('click');
         expect(onClose).toHaveBeenCalledTimes(2);
 
         wrapper.setProps({

diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
@@ -8,7 +8,7 @@ import React, {
 import { classNames, stopPropagation } from '../../shared/utilities';
 import { PanelProps, PanelRef, PanelSize } from './';
 import { IconName } from '../Icon';
-import { DefaultButton } from '../Button';
+import { NeutralButton } from '../Button';
 import { Portal } from '../Portal';
 import { useScrollLock } from '../../hooks/useScrollLock';
 
@@ -114,7 +114,7 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
             <div className={headerClasses}>
                 <div>{title}</div>
                 {closable && (
-                    <DefaultButton
+                    <NeutralButton
                         icon={closeIcon}
                         ariaLabel={'Close'}
                         onClick={onClose}

diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss
@@ -2,6 +2,8 @@
     @include backdrop;
 
     .panel {
+        display: flex;
+        flex-direction: column;
         position: absolute;
         padding: 0 $space-xl;
         background: var(--background-color);
@@ -70,6 +72,7 @@
 
         .body {
             display: flex;
+            flex-grow: 1;
             flex-direction: column;
             align-items: stretch;
         }