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

2023-07-20 16:33:50 -07:00 · 2023-07-20 16:33:50 -07:00 · 22a0fe555c
parent 9b6ed315f8
commit 22a0fe555c
25 changed files with 145 additions and 55 deletions
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@ -0,0 +1,26 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled } from '@superset-ui/core';
+
+export const ControlSubSectionHeader = styled.div`
+  font-weight: ${({ theme }) => theme.typography.weights.bold};
+  font-size: ${({ theme }) => theme.typography.sizes.s};
+  margin-bottom: ${({ theme }) => theme.gridUnit}px;
+`;
+export default ControlSubSectionHeader;
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
@ -29,6 +29,7 @@ export * from './components/InfoTooltipWithTrigger';
 export * from './components/ColumnOption';
 export * from './components/ColumnTypeLabel/ColumnTypeLabel';
 export * from './components/MetricOption';
+export * from './components/ControlSubSectionHeader';

 export * from './shared-controls';
 export * from './types';
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/advancedAnalytics.tsx
@ -18,6 +18,8 @@
 */
 import React from 'react';
 import { t, RollingType, ComparisonType } from '@superset-ui/core';
+
+import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
 import { ControlPanelSectionConfig } from '../types';
 import { formatSelectOptions } from '../utils';

@ -30,7 +32,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
      'of query results',
  ),
  controlSetRows: [
-    [<div className="section-header">{t('Rolling window')}</div>],
+    [<ControlSubSectionHeader>{t('Rolling window')}</ControlSubSectionHeader>],
    [
      {
        name: 'rolling_type',
@ -99,7 +101,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
        },
      },
    ],
-    [<div className="section-header">{t('Time comparison')}</div>],
+    [<ControlSubSectionHeader>{t('Time comparison')}</ControlSubSectionHeader>],
    [
      {
        name: 'time_compare',
@ -150,7 +152,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
        },
      },
    ],
-    [<div className="section-header">{t('Resample')}</div>],
+    [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
    [
      {
        name: 'resample_rule',
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/chartTitle.tsx
@ -18,6 +18,8 @@
 */
 import React from 'react';
 import { t } from '@superset-ui/core';
+
+import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
 import { ControlPanelSectionConfig } from '../types';
 import { formatSelectOptions } from '../utils';

@ -33,7 +35,7 @@ export const titleControls: ControlPanelSectionConfig = {
  tabOverride: 'customize',
  expanded: true,
  controlSetRows: [
-    [<div className="section-header">{t('X Axis')}</div>],
+    [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
    [
      {
        name: 'x_axis_title',
@ -61,7 +63,7 @@ export const titleControls: ControlPanelSectionConfig = {
        },
      },
    ],
-    [<div className="section-header">{t('Y Axis')}</div>],
+    [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
    [
      {
        name: 'y_axis_title',
@ -81,7 +83,7 @@ export const titleControls: ControlPanelSectionConfig = {
          type: 'SelectControl',
          freeForm: true,
          clearable: true,
-          label: t('Y AXIS TITLE MARGIN'),
+          label: t('Y Axis Title Margin'),
          renderTrigger: true,
          default: TITLE_MARGIN_OPTIONS[0],
          choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
@ -96,7 +98,7 @@ export const titleControls: ControlPanelSectionConfig = {
          type: 'SelectControl',
          freeForm: true,
          clearable: false,
-          label: t('Y AXIS TITLE POSITION'),
+          label: t('Y Axis Title Position'),
          renderTrigger: true,
          default: TITLE_POSITION_OPTIONS[0][0],
          choices: TITLE_POSITION_OPTIONS,
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/controlPanel.tsx
@ -21,6 +21,7 @@ import { t, validateNonEmpty } from '@superset-ui/core';
 import {
  ColumnMeta,
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_FORMAT_OPTIONS,
  D3_TIME_FORMAT_OPTIONS,
@ -241,7 +242,11 @@ const config: ControlPanelConfig = {
      ),
      controlSetRows: [
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Rolling Window')}</div>],
+        [
+          <ControlSubSectionHeader>
+            {t('Rolling Window')}
+          </ControlSubSectionHeader>,
+        ],
        [
          {
            name: 'rolling_type',
@ -293,7 +298,11 @@ const config: ControlPanelConfig = {
          },
        ],
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Time Comparison')}</div>],
+        [
+          <ControlSubSectionHeader>
+            {t('Time Comparison')}
+          </ControlSubSectionHeader>,
+        ],
        [
          {
            name: 'time_compare',
@ -342,7 +351,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Resample')}</div>],
+        [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
        [
          {
            name: 'resample_rule',
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/controlPanel.tsx
@ -20,6 +20,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import {
  ControlPanelConfig,
+  ControlSubSectionHeader,
  D3_FORMAT_DOCS,
  D3_FORMAT_OPTIONS,
  D3_TIME_FORMAT_OPTIONS,
@ -123,7 +124,11 @@ const config: ControlPanelConfig = {
      ),
      controlSetRows: [
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Rolling Window')}</div>],
+        [
+          <ControlSubSectionHeader>
+            {t('Rolling Window')}
+          </ControlSubSectionHeader>,
+        ],
        [
          {
            name: 'rolling_type',
@ -175,7 +180,11 @@ const config: ControlPanelConfig = {
          },
        ],
        // eslint-disable-next-line react/jsx-key
-        [<div className="section-header">{t('Time Comparison')}</div>],
+        [
+          <ControlSubSectionHeader>
+            {t('Time Comparison')}
+          </ControlSubSectionHeader>,
+        ],
        [
          {
            name: 'time_compare',
@ -224,7 +233,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<div className="section-header">{t('Resample')}</div>],
+        [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
        [
          {
            name: 'resample_rule',
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx
@ -22,6 +22,7 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import {
  ControlPanelSectionConfig,
+  ControlSubSectionHeader,
  CustomControlItem,
  D3_TIME_FORMAT_OPTIONS,
  D3_FORMAT_DOCS,
@ -390,7 +391,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
        'of query results',
    ),
    controlSetRows: [
-      [<div className="section-header">{t('Rolling Window')}</div>],
+      [
+        <ControlSubSectionHeader>
+          {t('Rolling Window')}
+        </ControlSubSectionHeader>,
+      ],
      [
        {
          name: 'rolling_type',
@ -443,7 +448,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
          },
        },
      ],
-      [<div className="section-header">{t('Time Comparison')}</div>],
+      [
+        <ControlSubSectionHeader>
+          {t('Time Comparison')}
+        </ControlSubSectionHeader>,
+      ],
      [
        {
          name: 'time_compare',
@ -494,7 +503,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
          },
        },
      ],
-      [<div className="section-header">{t('Resample')}</div>],
+      [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
      [
        {
          name: 'resample_rule',
--- 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],
 ];
--- a/superset-frontend/src/explore/controlPanels/sections.tsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@ -18,7 +18,10 @@
 */
 import React from 'react';
 import { t } from '@superset-ui/core';
-import { ControlPanelSectionConfig } from '@superset-ui/chart-controls';
+import {
+  ControlPanelSectionConfig,
+  ControlSubSectionHeader,
+} from '@superset-ui/chart-controls';

 export const datasourceAndVizType: ControlPanelSectionConfig = {
  controlSetRows: [
@ -122,7 +125,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
        'of query results',
    ),
    controlSetRows: [
-      [<div className="section-header">{t('Rolling window')}</div>],
+      [
+        <ControlSubSectionHeader>
+          {t('Rolling window')}
+        </ControlSubSectionHeader>,
+      ],
      [
        {
          name: 'rolling_type',
@ -171,7 +178,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
          },
        },
      ],
-      [<div className="section-header">{t('Time comparison')}</div>],
+      [
+        <ControlSubSectionHeader>
+          {t('Time comparison')}
+        </ControlSubSectionHeader>,
+      ],
      [
        {
          name: 'time_compare',
@ -220,7 +231,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
          },
        },
      ],
-      [<div className="section-header">{t('Resample')}</div>],
+      [<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
      [
        {
          name: 'resample_rule',