Skip to content

Commit

Permalink
[core] fix(Section): Section header should only render if title is pr…
Browse files Browse the repository at this point in the history 
…ovided (#6321)
  • Loading branch information
@pgoldberg
pgoldberg authored Aug 18, 2023
1 parent cba5612 commit f1f1cee
Showing 1 changed file with 41 additions and 36 deletions.
77 changes: 41 additions & 36 deletions packages/core/src/components/section/section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export interface SectionProps extends Props, Omit<HTMLDivProps, "title">, React.

/**
* Element to render on the right side of the section header.
* Note that the header will only be rendered if `title` is provided.
*/
rightElement?: JSX.Element;

Expand Down Expand Up @@ -125,45 +126,49 @@ export const Section: React.FC<SectionProps> = React.forwardRef((props, ref) =>
ref={ref}
{...htmlProps}
>
<div
role={collapsible ? "button" : undefined}
aria-pressed={collapsible ? isCollapsed : undefined}
className={classNames(Classes.SECTION_HEADER, {
[Classes.INTERACTIVE]: collapsible,
})}
onClick={collapsible != null ? toggleIsCollapsed : undefined}
>
{isHeaderLeftContainerVisible && (
<>
<div className={Classes.SECTION_HEADER_LEFT}>
{title && icon && (
<Icon icon={icon} aria-hidden={true} tabIndex={-1} className={Classes.TEXT_MUTED} />
)}

<div>
{title && <H6 className={Classes.SECTION_HEADER_TITLE}>{title}</H6>}
{title && subtitle && (
<div className={classNames(Classes.TEXT_MUTED, Classes.SECTION_HEADER_SUB_TITLE)}>
{subtitle}
</div>
{title && (
<div
role={collapsible ? "button" : undefined}
aria-pressed={collapsible ? isCollapsed : undefined}
className={classNames(Classes.SECTION_HEADER, {
[Classes.INTERACTIVE]: collapsible,
})}
onClick={collapsible != null ? toggleIsCollapsed : undefined}
>
{isHeaderLeftContainerVisible && (
<>
<div className={Classes.SECTION_HEADER_LEFT}>
{icon && (
<Icon icon={icon} aria-hidden={true} tabIndex={-1} className={Classes.TEXT_MUTED} />
)}

<div>
<H6 className={Classes.SECTION_HEADER_TITLE}>{title}</H6>
{subtitle && (
<div
className={classNames(Classes.TEXT_MUTED, Classes.SECTION_HEADER_SUB_TITLE)}
>
{subtitle}
</div>
)}
</div>
</div>
</>
)}

{isHeaderRightContainerVisible && (
<div className={Classes.SECTION_HEADER_RIGHT}>
{rightElement}
{collapsible &&
(isCollapsed ? (
<ChevronDown className={Classes.TEXT_MUTED} />
) : (
<ChevronUp className={Classes.TEXT_MUTED} />
))}
</div>
</>
)}

{isHeaderRightContainerVisible && (
<div className={Classes.SECTION_HEADER_RIGHT}>
{rightElement}
{collapsible &&
(isCollapsed ? (
<ChevronDown className={Classes.TEXT_MUTED} />
) : (
<ChevronUp className={Classes.TEXT_MUTED} />
))}
</div>
)}
</div>
)}
</div>
)}

{collapsible ? (
<Collapse {...collapseProps} isOpen={!isCollapsed}>
Expand Down

1 comment on commit f1f1cee

@adidahiya
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[core] fix(Section): Section header should only render if title is provided (#6321)

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

Please sign in to comment.