[core] fix(Section): apply collapsed style when empty children (#6282)

Co-authored-by: Adi Dahiya <adahiya@palantir.com>
palantir · Jul 17, 2023 · e696232 · e696232 · adidahiya · Jul 17, 2023
1 parent 0cdcc78
commit e696232
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
@@ -28,6 +28,7 @@ import {
     IntentProps,
     MaybeElement,
     Props,
+    Utils,
 } from "../../common";
 import { H5 } from "../html/html";
 import { Icon } from "../icon/icon";
@@ -85,7 +86,7 @@ export class Callout extends AbstractPureComponent<CalloutProps> {
             <div className={classes} {...htmlProps}>
                 {iconElement}
                 {title && <H5>{title}</H5>}
-                {this.hasEmptyContent() ? undefined : <div className={Classes.CALLOUT_BODY}>{children}</div>}
+                {Utils.isReactNodeEmpty(children) ? undefined : <div className={Classes.CALLOUT_BODY}>{children}</div>}
             </div>
         );
     }
@@ -117,9 +118,4 @@ export class Callout extends AbstractPureComponent<CalloutProps> {
                 return undefined;
         }
     }
-
-    private hasEmptyContent() {
-        const { children } = this.props;
-        return children == null || (typeof children === "string" && children.trim().length === 0);
-    }
 }
diff --git a/packages/core/src/components/section/section.tsx b/packages/core/src/components/section/section.tsx
@@ -19,7 +19,7 @@ import * as React from "react";
 
 import { ChevronDown, ChevronUp, IconName } from "@blueprintjs/icons";
 
-import { Classes, Elevation } from "../../common";
+import { Classes, Elevation, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX, HTMLDivProps, MaybeElement, Props } from "../../common/props";
 import { Card } from "../card/card";
 import { Collapse, CollapseProps } from "../collapse/collapse";
@@ -119,7 +119,7 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
         <Card
             className={classNames(className, Classes.SECTION, {
                 [Classes.COMPACT]: compact,
-                [Classes.SECTION_COLLAPSED]: collapsible && isCollapsed,
+                [Classes.SECTION_COLLAPSED]: (collapsible && isCollapsed) || Utils.isReactNodeEmpty(children),
             })}
             elevation={elevation}
             ref={ref}