IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 01:53:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

Frontend PanelChrome: Fix header title moving down when collapsing (#74123)

Browse Source 
* PanelChrome: Fixes height when collapsed and collapse icon placement

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Haris Rozajac 2023-08-31 13:25:52 +02:00 committed by GitHub
parent 9ebcfeaf9e
commit 2ea22b44e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -153,7 +153,7 @@ export function PanelChrome({
cursor: dragClass ? 'move' : 'auto',
};
const containerStyles: CSSProperties = { width, height: !collapsed ? height : headerHeight };
const containerStyles: CSSProperties = { width, height: collapsed ? undefined : height };
const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
/** Old property name now maps to actions */
@ -163,39 +163,39 @@ export function PanelChrome({
const testid = title ? selectors.components.Panels.Panel.title(title) : 'Panel';
const collapsibleHeader = (
<h6 className={styles.title}>
<button
type="button"
className={styles.clearButtonStyles}
onClick={() => {
toggleOpen();
if (onToggleCollapse) {
onToggleCollapse(!collapsed);
}
}}
aria-expanded={!collapsed}
aria-controls={!collapsed ? panelContentId : undefined}
>
<Icon
name={!collapsed ? 'angle-down' : 'angle-right'}
aria-hidden={!!title}
aria-label={!title ? 'toggle collapse panel' : undefined}
/>
{title}
</button>
</h6>
);
const headerContent = (
<>
{collapsible
? collapsibleHeader
: title && (
<h6 title={title} className={styles.title}>
{title}
</h6>
)}
{/* Non collapsible title */}
{!collapsible && title && (
<h6 title={title} className={styles.title}>
{title}
</h6>
)}
{/* Collapsible title */}
{collapsible && (
<h6 className={styles.title}>
<button
type="button"
className={styles.clearButtonStyles}
onClick={() => {
toggleOpen();
if (onToggleCollapse) {
onToggleCollapse(!collapsed);
}
}}
aria-expanded={!collapsed}
aria-controls={!collapsed ? panelContentId : undefined}
>
<Icon
name={!collapsed ? 'angle-down' : 'angle-right'}
aria-hidden={!!title}
aria-label={!title ? 'toggle collapse panel' : undefined}
/>
{title}
</button>
</h6>
)}
<div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
<PanelDescription description={description} className={dragClassCancel} />
@ -476,6 +476,8 @@ const getStyles = (theme: GrafanaTheme2) => {
}),
clearButtonStyles: css({
alignItems: 'center',
display: 'flex',
gap: theme.spacing(0.5),
background: 'transparent',
color: theme.colors.text.primary,
border: 'none',