chore: make control panel sub sections look better (#24736)

2026-04-17 23:25:05 +00:00 · 2023-07-20 16:33:50 -07:00
parent 9b6ed315f8
commit 22a0fe555c
25 changed files with 145 additions and 55 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -19,6 +19,7 @@
 import { hasGenericChartAxes, smartDateFormatter, t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_TIME_FORMAT_OPTIONS,
  getStandardizedControls,
@@ -170,7 +171,11 @@ const config: ControlPanelConfig = {
      expanded: false,
      controlSetRows: [
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Rolling Window')}</div>],
+        [
+          <ControlSubSectionHeader>
+            {t('Rolling Window')}
+          </ControlSubSectionHeader>,
+        ],
        [
          {
            name: 'rolling_type',
@@ -223,7 +228,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Resample')}</div>],
+        [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
        [
          {
            name: 'resample_rule',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_OPTIONS,
  D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
  sections,
@@ -77,7 +78,7 @@ const config: ControlPanelConfig = {
        ['color_scheme'],
        ...funnelLegendSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Labels')}</div>],
+        [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
        [
          {
            name: 'label_type',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  sharedControls,
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_OPTIONS,
  sections,
  getStandardizedControls,
@@ -73,7 +74,7 @@ const config: ControlPanelConfig = {
      label: t('Chart Options'),
      expanded: true,
      controlSetRows: [
-        [<div className="section-header">{t('General')}</div>],
+        [<ControlSubSectionHeader>{t('General')}</ControlSubSectionHeader>],
        [
          {
            name: 'min_val',
@@ -193,7 +194,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'show_axis_tick',
@@ -232,7 +233,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Progress')}</div>],
+        [<ControlSubSectionHeader>{t('Progress')}</ControlSubSectionHeader>],
        [
          {
            name: 'show_progress',
@@ -273,7 +274,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Intervals')}</div>],
+        [<ControlSubSectionHeader>{t('Intervals')}</ControlSubSectionHeader>],
        [
          {
            name: 'intervals',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  getStandardizedControls,
  sections,
  sharedControls,
@@ -99,7 +100,7 @@ const controlPanel: ControlPanelConfig = {
      controlSetRows: [
        ['color_scheme'],
        ...legendSection,
-        [<div className="section-header">{t('Layout')}</div>],
+        [<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
        [
          {
            name: 'layout',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -23,6 +23,7 @@ import {
  ControlPanelConfig,
  ControlPanelSectionConfig,
  ControlSetRow,
+  ControlSubSectionHeader,
  CustomControlItem,
  getStandardizedControls,
  sections,
@@ -128,7 +129,7 @@ function createCustomizeSection(
  controlSuffix: string,
 ): ControlSetRow[] {
  return [
-    [<div className="section-header">{label}</div>],
+    [<ControlSubSectionHeader>{label}</ControlSubSectionHeader>],
    [
      {
        name: `seriesType${controlSuffix}`,
@@ -311,7 +312,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        ['x_axis_time_format'],
        [
          {
@@ -335,7 +336,7 @@ const config: ControlPanelConfig = {
        ],
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'minorSplitLine',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -21,6 +21,7 @@ import { ensureIsInt, t, validateNonEmpty } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
  D3_FORMAT_OPTIONS,
@@ -90,7 +91,7 @@ const config: ControlPanelConfig = {
        ],
        ...legendSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Labels')}</div>],
+        [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
        [
          {
            name: 'label_type',
@@ -195,7 +196,7 @@ const config: ControlPanelConfig = {
          },
        ],
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Pie shape')}</div>],
+        [<ControlSubSectionHeader>{t('Pie shape')}</ControlSubSectionHeader>],
        [
          {
            name: 'outerRadius',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -26,6 +26,7 @@ import {
 } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
  D3_FORMAT_OPTIONS,
@@ -85,7 +86,7 @@ const config: ControlPanelConfig = {
      controlSetRows: [
        ['color_scheme'],
        ...legendSection,
-        [<div className="section-header">{t('Labels')}</div>],
+        [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
        [
          {
            name: 'show_labels',
@@ -156,7 +157,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Radar')}</div>],
+        [<ControlSubSectionHeader>{t('Radar')}</ControlSubSectionHeader>],
        [
          {
            name: 'column_config',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
  D3_FORMAT_OPTIONS,
@@ -64,7 +65,7 @@ const config: ControlPanelConfig = {
      controlSetRows: [
        ['color_scheme'],
        ['linear_color_scheme'],
-        [<div className="section-header">{t('Labels')}</div>],
+        [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
        [
          {
            name: 'show_labels',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  getStandardizedControls,
  sections,
@@ -179,7 +180,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'x_axis_time_format',
@@ -212,7 +213,7 @@ const config: ControlPanelConfig = {
        ],
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
        [
          {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -23,6 +23,7 @@ import {
  ControlPanelsContainerProps,
  ControlSetRow,
  ControlStateMapping,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  formatSelectOptions,
  getStandardizedControls,
@@ -292,9 +293,9 @@ const config: ControlPanelConfig = {
      tabOverride: 'customize',
      expanded: true,
      controlSetRows: [
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        ...createAxisTitleControl('x'),
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ...createAxisTitleControl('y'),
      ],
    },
@@ -318,10 +319,10 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        ...createAxisControl('x'),
        ...richTooltipSection,
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ...createAxisControl('y'),
      ],
    },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  getStandardizedControls,
  sections,
@@ -167,7 +168,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'x_axis_time_format',
@@ -200,7 +201,7 @@ const config: ControlPanelConfig = {
        ],
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
        [
          {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  getStandardizedControls,
  sections,
@@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

        [
          {
@@ -144,7 +145,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
        [
          {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  getStandardizedControls,
  sections,
@@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'x_axis_time_format',
@@ -143,7 +144,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

        ['y_axis_format'],
        [
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
  ControlPanelsContainerProps,
+  ControlSubSectionHeader,
  D3_TIME_FORMAT_DOCS,
  getStandardizedControls,
  sections,
@@ -161,7 +162,7 @@ const config: ControlPanelConfig = {
          },
        ],
        ...legendSection,
-        [<div className="section-header">{t('X Axis')}</div>],
+        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
        [
          {
            name: 'x_axis_time_format',
@@ -194,7 +195,7 @@ const config: ControlPanelConfig = {
        ],
        ...richTooltipSection,
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Y Axis')}</div>],
+        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
        [
          {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  getStandardizedControls,
  sections,
  sharedControls,
@@ -108,7 +109,7 @@ const controlPanel: ControlPanelConfig = {
      label: t('Chart options'),
      expanded: true,
      controlSetRows: [
-        [<div className="section-header">{t('Layout')}</div>],
+        [<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
        [
          {
            name: 'layout',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
  D3_FORMAT_OPTIONS,
@@ -62,7 +63,7 @@ const config: ControlPanelConfig = {
      expanded: true,
      controlSetRows: [
        ['color_scheme'],
-        [<div className="section-header">{t('Labels')}</div>],
+        [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
        [
          {
            name: 'show_labels',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -22,6 +22,7 @@ import {
  ControlPanelsContainerProps,
  ControlSetItem,
  ControlSetRow,
+  ControlSubSectionHeader,
  DEFAULT_SORT_SERIES_DATA,
  SORT_SERIES_CHOICES,
  sharedControls,
@@ -96,7 +97,7 @@ const legendOrientationControl: ControlSetItem = {
 };

 export const legendSection: ControlSetRow[] = [
-  [<div className="section-header">{t('Legend')}</div>],
+  [<ControlSubSectionHeader>{t('Legend')}</ControlSubSectionHeader>],
  [showLegendControl],
  [legendTypeControl],
  [legendOrientationControl],
@@ -210,7 +211,7 @@ const tooltipSortByMetricControl: ControlSetItem = {
 };

 export const richTooltipSection: ControlSetRow[] = [
-  [<div className="section-header">{t('Tooltip')}</div>],
+  [<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
  [richTooltipControl],
  [tooltipSortByMetricControl],
  [tooltipTimeFormatControl],
@@ -243,7 +244,7 @@ const sortSeriesAscending: ControlSetItem = {
 };

 export const seriesOrderSection: ControlSetRow[] = [
-  [<div className="section-header">{t('Series Order')}</div>],
+  [<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
  [sortSeriesType],
  [sortSeriesAscending],
 ];