IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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
1 changed files with 34 additions and 32 deletions
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', 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>(); const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
/** Old property name now maps to actions */ /** 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 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 = ( const headerContent = (
<> <>
{collapsible {/* Non collapsible title */}
? collapsibleHeader {!collapsible && title && (
: title && ( <h6 title={title} className={styles.title}>
<h6 title={title} className={styles.title}> {title}
{title} </h6>
</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"> <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
<PanelDescription description={description} className={dragClassCancel} /> <PanelDescription description={description} className={dragClassCancel} />
@@ -476,6 +476,8 @@ const getStyles = (theme: GrafanaTheme2) => {
}), }),
clearButtonStyles: css({ clearButtonStyles: css({
alignItems: 'center', alignItems: 'center',
display: 'flex',
gap: theme.spacing(0.5),
background: 'transparent', background: 'transparent',
color: theme.colors.text.primary, color: theme.colors.text.primary,
border: 'none', border: 'none',