3ae5393dd7
* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
|
import { ActionIcon } from './ActionIcon'
|
|
import styles from './CollapsiblePanel.module.css'
|
|
|
|
export interface CollapsiblePanelProps
|
|
extends React.PropsWithChildren,
|
|
React.HTMLAttributes<HTMLDetailsElement> {
|
|
title: string
|
|
icon?: IconDefinition
|
|
open?: boolean
|
|
menu?: React.ReactNode
|
|
detailsTestId?: string
|
|
iconClassNames?: {
|
|
bg?: string
|
|
icon?: string
|
|
}
|
|
}
|
|
|
|
export const PanelHeader = ({
|
|
title,
|
|
icon,
|
|
iconClassNames,
|
|
menu,
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<summary className={styles.header}>
|
|
<div className="flex gap-2 align-center items-center flex-1">
|
|
<ActionIcon
|
|
icon={icon}
|
|
className="p-1"
|
|
size="sm"
|
|
bgClassName={
|
|
'dark:!bg-chalkboard-100 group-open:bg-chalkboard-80 dark:group-open:!bg-chalkboard-90 group-open:border dark:group-open:border-chalkboard-60 rounded-sm ' +
|
|
(iconClassNames?.bg || '')
|
|
}
|
|
iconClassName={
|
|
'group-open:text-energy-10 ' + (iconClassNames?.icon || '')
|
|
}
|
|
/>
|
|
{title}
|
|
</div>
|
|
<div className="group-open:opacity-100 opacity-0 group-open:pointer-events-auto pointer-events-none">
|
|
{menu}
|
|
</div>
|
|
</summary>
|
|
)
|
|
}
|
|
|
|
export const CollapsiblePanel = ({
|
|
title,
|
|
icon,
|
|
children,
|
|
className,
|
|
iconClassNames,
|
|
menu,
|
|
detailsTestId,
|
|
...props
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<details
|
|
{...props}
|
|
data-testid={detailsTestId}
|
|
className={styles.panel + ' group ' + (className || '')}
|
|
>
|
|
<PanelHeader
|
|
title={title}
|
|
icon={icon}
|
|
iconClassNames={iconClassNames}
|
|
menu={menu}
|
|
/>
|
|
{children}
|
|
</details>
|
|
)
|
|
}
|