From 1f558b1e066ed124c408ed52e95ce60bccfc135b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 12 Nov 2025 16:40:46 +0100 Subject: [PATCH] PanelChrome: Feature toggle increased panel header height and padding (#112613) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * PanelChrome: Feature toggle for increase header and content panel padding * Update * Update to panel menu * Fix lint * Revert theme feature ttoggle changes Signed-off-by: Torkel Ödegaard * Update * fix storybook * Update --------- Signed-off-by: Torkel Ödegaard --- .../src/types/featureToggles.gen.ts | 5 ++++ packages/grafana-runtime/src/config.ts | 2 ++ .../components/PanelChrome/PanelChrome.tsx | 13 ++++++--- .../src/components/PanelChrome/PanelMenu.tsx | 8 +++--- .../components/PanelChrome/PanelStatus.tsx | 8 +++--- .../src/components/PanelChrome/TitleItem.tsx | 2 +- pkg/services/featuremgmt/registry.go | 8 ++++++ pkg/services/featuremgmt/toggles_gen.csv | 1 + pkg/services/featuremgmt/toggles_gen.go | 4 +++ pkg/services/featuremgmt/toggles_gen.json | 27 +++++++++++++++++++ 10 files changed, 65 insertions(+), 13 deletions(-) diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 93995707655..ca060edf289 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -1205,6 +1205,11 @@ export interface FeatureToggles { */ pluginStoreServiceLoading?: boolean; /** + * Increases panel padding globally + * @default false + */ + newPanelPadding?: boolean; + /** * When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission * @default true */ diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts index d2911bf7770..4c7a2714cd6 100644 --- a/packages/grafana-runtime/src/config.ts +++ b/packages/grafana-runtime/src/config.ts @@ -282,6 +282,8 @@ export class GrafanaBootConfig { overrideFeatureTogglesFromUrl(this); overrideFeatureTogglesFromLocalStorage(this); + this.bootData.settings.featureToggles = this.featureToggles; + // Creating theme after applying feature toggle overrides in case we need to toggle anything this.theme2 = getThemeById(this.bootData.user.theme); this.bootData.user.lightTheme = this.theme2.isLight; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index 05d3ae406e5..3dcfa47c36c 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -436,6 +436,10 @@ const itemsRenderer = (items: ReactNode[] | ReactNode, renderer: (items: ReactNo const getHeaderHeight = (theme: GrafanaTheme2, hasHeader: boolean) => { if (hasHeader) { + if (getFeatureToggle('newPanelPadding')) { + return theme.spacing.gridSize * 5; + } + return theme.spacing.gridSize * theme.components.panel.headerHeight; } @@ -477,7 +481,8 @@ const getContentStyle = ( }; const getStyles = (theme: GrafanaTheme2) => { - const { background, borderColor, padding } = theme.components.panel; + const { background, borderColor } = theme.components.panel; + const newPanelPadding = getFeatureToggle('newPanelPadding'); return { container: css({ @@ -552,6 +557,9 @@ const getStyles = (theme: GrafanaTheme2) => { label: 'panel-header', display: 'flex', alignItems: 'center', + // remove logic after newPanelPadding feature toggle is removed + padding: newPanelPadding ? theme.spacing(0, 1, 0, 1.5) : theme.spacing(0, 0.5, 0, 1), + gap: theme.spacing(1), }), pointer: css({ cursor: 'pointer', @@ -568,7 +576,6 @@ const getStyles = (theme: GrafanaTheme2) => { title: css({ label: 'panel-title', display: 'flex', - padding: theme.spacing(0, padding), minWidth: 0, '& > h2': { minWidth: 0, @@ -602,7 +609,6 @@ const getStyles = (theme: GrafanaTheme2) => { }), rightActions: css({ display: 'flex', - padding: theme.spacing(0, padding), gap: theme.spacing(1), }), rightAligned: css({ @@ -614,6 +620,7 @@ const getStyles = (theme: GrafanaTheme2) => { titleItems: css({ display: 'flex', height: '100%', + alignItems: 'center', }), clearButtonStyles: css({ alignItems: 'center', diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx index 5be2a7913f3..9da428b22ef 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx @@ -4,8 +4,8 @@ import { ReactElement, useCallback } from 'react'; import { selectors } from '@grafana/e2e-selectors'; import { t } from '@grafana/i18n'; +import { Button } from '../Button/Button'; import { Dropdown } from '../Dropdown/Dropdown'; -import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; import { TooltipPlacement } from '../Tooltip/types'; interface PanelMenuProps { @@ -40,12 +40,12 @@ export function PanelMenu({ return ( - diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx index 7eac0235289..0d925147575 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx @@ -31,17 +31,15 @@ export function PanelStatus({ message, onClick, ariaLabel = 'status' }: Props) { } const getStyles = (theme: GrafanaTheme2) => { - const { headerHeight, padding } = theme.components.panel; - return { buttonStyles: css({ label: 'panel-header-state-button', display: 'flex', alignItems: 'center', justifyContent: 'center', - padding: theme.spacing(padding), - width: theme.spacing(headerHeight), - height: theme.spacing(headerHeight), + padding: theme.spacing(1), + width: theme.spacing(theme.components.height.md), + height: theme.spacing(theme.components.height.md), borderRadius: theme.shape.radius.default, }), }; diff --git a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx index 18fee0039ad..008ae1d6d48 100644 --- a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx @@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => { border: 'none', borderRadius: `${theme.shape.radius.default}`, padding: `${theme.spacing(0, 1)}`, - height: `${theme.spacing(theme.components.panel.headerHeight)}`, + height: `${theme.spacing(theme.components.height.md)}`, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index 0c06fe161bf..e36d0a179b7 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -2085,6 +2085,14 @@ var ( Owner: grafanaPluginsPlatformSquad, Expression: "false", }, + { + Name: "newPanelPadding", + Description: "Increases panel padding globally", + Stage: FeatureStageExperimental, + FrontendOnly: false, + Owner: grafanaDashboardsSquad, + Expression: "false", + }, { Name: "onlyStoreActionSets", Description: "When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 25b5520d042..5af160f478d 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -268,6 +268,7 @@ newGauge,experimental,@grafana/dataviz-squad,false,false,true preventPanelChromeOverflow,preview,@grafana/grafana-frontend-platform,false,false,true jaegerEnableGrpcEndpoint,experimental,@grafana/oss-big-tent,false,false,false pluginStoreServiceLoading,experimental,@grafana/plugins-platform-backend,false,false,false +newPanelPadding,experimental,@grafana/dashboards-squad,false,false,false onlyStoreActionSets,GA,@grafana/identity-access-team,false,false,false panelTimeSettings,experimental,@grafana/dashboards-squad,false,false,false dashboardTemplates,experimental,@grafana/sharing-squad,false,false,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 0b6fea3c1b4..805e9e25f7b 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -1082,6 +1082,10 @@ const ( // Load plugins on store service startup instead of wire provider, and call RegisterFixedRoles after all plugins are loaded FlagPluginStoreServiceLoading = "pluginStoreServiceLoading" + // FlagNewPanelPadding + // Increases panel padding globally + FlagNewPanelPadding = "newPanelPadding" + // FlagOnlyStoreActionSets // When storing dashboard and folder resource permissions, only store action sets and not the full list of underlying permission FlagOnlyStoreActionSets = "onlyStoreActionSets" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index c7217d11f9c..66991f3e102 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -2853,6 +2853,19 @@ "expression": "true" } }, + { + "metadata": { + "name": "newPanelPadding", + "resourceVersion": "1760780310038", + "creationTimestamp": "2025-10-18T09:38:30Z" + }, + "spec": { + "description": "Increases panel padding globally", + "stage": "experimental", + "codeowner": "@grafana/dashboards-squad", + "expression": "false" + } + }, { "metadata": { "name": "newShareReportDrawer", @@ -2954,6 +2967,20 @@ "expression": "true" } }, + { + "metadata": { + "name": "panelPadding", + "resourceVersion": "1760779980125", + "creationTimestamp": "2025-10-18T09:33:00Z", + "deletionTimestamp": "2025-10-18T09:38:30Z" + }, + "spec": { + "description": "Increases panel padding globally", + "stage": "experimental", + "codeowner": "@grafana/dashboards-squad", + "expression": "false" + } + }, { "metadata": { "name": "panelTimeSettings",