(superset) branch fix-control-panel-indentation created (now 56e6911efc8)

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a change to branch fix-control-panel-indentation
in repository https://gitbox.apache.org/repos/asf/superset.git


      at 56e6911efc8 fix(explore): add left-indentation to control panel hierarchy

This branch includes the following new commits:

     new 56e6911efc8 fix(explore): add left-indentation to control panel hierarchy

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: fix(explore): add left-indentation to control panel hierarchy

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch fix-control-panel-indentation
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 56e6911efc859e421c78280e3e1764bd0e636127
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed Apr 8 00:15:08 2026 +0000

    fix(explore): add left-indentation to control panel hierarchy
    
    Improve visual hierarchy of the Explore control panel by adding
    indentation to nested controls within collapsible sections:
    
    - All section body content gets base indentation (sizeUnit * 2 = 8px)
    - Sub-section headers (X Axis, Y Axis, etc.) styled as uppercase bold
      category labels with secondary color and letter-spacing
    - Controls within sub-sections get additional indentation
      (sizeUnit * 3 = 12px) for clear nesting
    
    Co-Authored-By: Claude Opus 4.6 <no...@anthropic.com>
---
 .../src/components/ControlSubSectionHeader.tsx     |  4 ++++
 .../explore/components/ControlPanelsContainer.tsx  | 27 +++++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
index 79be75e55dd..0022dfde3a4 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@@ -21,7 +21,11 @@ import { styled, css } from '@apache-superset/core/theme';
 export const ControlSubSectionHeader = styled.div`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeightStrong};
+    margin-top: ${theme.sizeUnit * 3}px;
     margin-bottom: ${theme.sizeUnit}px;
     font-size: ${theme.fontSizeSM}px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: ${theme.colorTextSecondary};
   `}
 `;
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 0a1c79ab9fe..fa7719bd521 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -648,6 +648,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       </span>
     );
 
+    let isInSubSection = false;
     const PanelChildren = (
       <>
         <StashFormDataContainer
@@ -665,8 +666,19 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
             .filter(Boolean)}
         />
         {isVisible && (
-          <>
+          <div style={{ paddingLeft: theme.sizeUnit * 2 }}>
             {section.controlSetRows.map((controlSets, i) => {
+              // Detect sub-section header rows (React elements with no name prop)
+              const isSubSectionHeaderRow = controlSets.some(
+                item =>
+                  isValidElement(item) &&
+                  !(item as React.ReactElement<Record<string, unknown>>).props
+                    ?.name,
+              );
+              if (isSubSectionHeaderRow) {
+                isInSubSection = true;
+              }
+
               const renderedControls = controlSets
                 .map(controlItem => {
                   if (!controlItem) {
@@ -715,14 +727,23 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
               if (renderedControls.length === 0) {
                 return null;
               }
-              return (
+              // Indent controls within sub-sections for visual hierarchy
+              const paddingLeft =
+                isInSubSection && !isSubSectionHeaderRow
+                  ? theme.sizeUnit * 3
+                  : 0;
+              return paddingLeft ? (
+                <div key={`controlsetrow-${i}`} style={{ paddingLeft }}>
+                  <ControlRow controls={renderedControls} />
+                </div>
+              ) : (
                 <ControlRow
                   key={`controlsetrow-${i}`}
                   controls={renderedControls}
                 />
               );
             })}
-          </>
+          </div>
         )}
       </>
     );