refactor(collapsible-panel): add min-height

Author: adnasa

src/components/panels/collapsible-panel/collapsible-panel.js

@@ -106,7 +106,10 @@ export default class CollapsiblePanel extends React.PureComponent {
               <Spacings.InsetSquish scale={scale}>
                 <div
                   {...dataProps}
-                  css={getHeaderStyles({ isDisabled: this.props.isDisabled })}
+                  css={getHeaderStyles({
+                    isCondensed: this.props.condensed,
+                    isDisabled: this.props.isDisabled,
+                  })}
                 >
                   <div
                     css={css`

src/components/panels/collapsible-panel/collapsible-panel.styles.js

@@ -61,7 +61,7 @@ const getHeaderContainerStyles = ({ isDisabled, isOpen, isSticky, theme }) => {
   ];
 };
 
-const getHeaderStyles = ({ isDisabled }) => {
+const getHeaderStyles = ({ isDisabled, isCondensed }) => {
   const baseStyles = css`
     display: flex;
     flex: 1;
@@ -96,7 +96,16 @@ const getHeaderStyles = ({ isDisabled }) => {
       `,
     ];
   }
-  return baseStyles;
+  return [
+    baseStyles,
+    !isCondensed &&
+      css`
+        /**
+         We set a min-height of 32px to anticipate use-cases where SecondaryButton or PrimaryButton
+         are rendered in the headerControl */
+        min-height: ${vars.spacing32};
+      `,
+  ];
 };
 
 const getContentStyles = () => css`