ui: Accordion widget - Add 'multi' option (#5510)

stevegolton · web-flow · commit 617d7d557080 · 2026-04-21T11:27:19.000Z
Accordion widget currently only allows one section to be open at one
time (by design - this is a feature).

It can be handy to be able to open and close multiple sections at once.

This patch adds a 'multi' option, to enable this behavior, and also
allows each section to be start open with a `defaultOpen` prop.

This patch also refactors the Accordion widget to use a composite
component approach:
```ts
m(Accordion,
  m(AccordionSection, {header: 'Foo'}, 'Foo content'),
  m(AccordionSection, {header: 'Bar'}, 'Bar content'),
)
```
diff --git a/ui/src/assets/widgets/accordion.scss b/ui/src/assets/widgets/accordion.scss
@@ -15,16 +15,11 @@
 .pf-accordion {
   display: flex;
   flex-direction: column;
+}
 
-  &__item {
-    &.pf-expanded {
-      .pf-accordion__header {
-        background: var(--pf-color-background-tertiary);
-      }
-    }
-  }
-
-  &__header {
+.pf-accordion__item {
+  > summary {
+    list-style: none;
     display: flex;
     align-items: center;
     gap: 4px;
@@ -38,24 +33,48 @@
     &:hover {
       background: color_hover(transparent);
     }
-  }
 
-  &__toggle {
-    color: var(--pf-color-text-muted);
-    display: flex;
-    align-items: center;
+    // Remove the default WebKit disclosure triangle.
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #1a73e8;
+      outline-offset: -2px;
+    }
   }
 
-  &__header-content {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  &[open] > summary {
+    background: var(--pf-color-background-tertiary);
+
+    .pf-accordion__toggle {
+      transform: rotate(0deg);
+    }
   }
 
-  &__content {
-    padding: 8px 16px 16px 16px;
-    background: var(--pf-color-background);
+  &:not([open]) > summary {
+    .pf-accordion__toggle {
+      transform: rotate(-90deg);
+    }
   }
 }
+
+.pf-accordion__toggle {
+  color: var(--pf-color-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+.pf-accordion__header-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-accordion__content {
+  padding: 8px 16px 16px 16px;
+  background: var(--pf-color-background);
+}
diff --git a/ui/src/plugins/dev.perfetto.DataExplorer/dashboard/dashboard.ts b/ui/src/plugins/dev.perfetto.DataExplorer/dashboard/dashboard.ts
@@ -20,7 +20,7 @@ import {
   perfettoSqlTypeIcon,
   perfettoSqlTypeToString,
 } from '../../../trace_processor/perfetto_sql_type';
-import {Accordion, AccordionItem} from '../../../widgets/accordion';
+import {Accordion, AccordionSection} from '../../../widgets/accordion';
 import {Button} from '../../../widgets/button';
 import {Icons} from '../../../base/semantic_icons';
 import {Chip} from '../../../widgets/chip';
@@ -138,7 +138,6 @@ interface EditingChartContext {
 
 export class Dashboard implements m.ClassComponent<DashboardAttrs> {
   private activePanel?: SidePanelTab;
-  private expandedInput: string | undefined = undefined;
   private renamingChartId?: string;
   private editingChart?: EditingChartContext;
   private editPanelRenaming = false;
@@ -1325,47 +1324,37 @@ export class Dashboard implements m.ClassComponent<DashboardAttrs> {
     const used = allExported.filter((s) => usedNodeIds.has(s.nodeId));
     const unused = allExported.filter((s) => !usedNodeIds.has(s.nodeId));
 
-    const makeSourceItems = (srcs: DashboardDataSource[]): AccordionItem[] =>
-      srcs.map((source) => ({
-        id: source.nodeId,
-        header: m('.pf-dashboard__source-row', [
-          m('code.pf-dashboard__input-name', source.name),
-        ]),
-        content: this.renderInputContent(source, attrs),
-      }));
+    const renderSourceAccordion = (srcs: DashboardDataSource[]) =>
+      m(
+        Accordion,
+        srcs.map((source) =>
+          m(
+            AccordionSection,
+            {
+              key: source.nodeId,
+              summary: m('.pf-dashboard__source-row', [
+                m('code.pf-dashboard__input-name', source.name),
+              ]),
+            },
+            this.renderInputContent(source, attrs),
+          ),
+        ),
+      );
 
     const sections: m.Child[] = [];
     if (used.length > 0) {
       sections.push(
         m('.pf-dashboard__panel-section', [
           m('.pf-dashboard__panel-section-title', 'Used data sources'),
-          m(
-            '.pf-dashboard__input-list',
-            m(Accordion, {
-              items: makeSourceItems(used),
-              expanded: this.expandedInput,
-              onToggle: (id) => {
-                this.expandedInput = id;
-              },
-            }),
-          ),
+          m('.pf-dashboard__input-list', renderSourceAccordion(used)),
         ]),
       );
     }
     if (unused.length > 0) {
       sections.push(
         m('.pf-dashboard__panel-section', [
           m('.pf-dashboard__panel-section-title', 'Unused data sources'),
-          m(
-            '.pf-dashboard__input-list',
-            m(Accordion, {
-              items: makeSourceItems(unused),
-              expanded: this.expandedInput,
-              onToggle: (id) => {
-                this.expandedInput = id;
-              },
-            }),
-          ),
+          m('.pf-dashboard__input-list', renderSourceAccordion(unused)),
         ]),
       );
     }
diff --git a/ui/src/plugins/dev.perfetto.DataExplorer/query_builder/nodes/trace_summary_node.ts b/ui/src/plugins/dev.perfetto.DataExplorer/query_builder/nodes/trace_summary_node.ts
@@ -32,7 +32,7 @@ import {
 } from '../node_styling_widgets';
 import {MetricsNode} from './metrics_node';
 import {TraceSummaryResultsPanel} from './trace_summary_results_panel';
-import {Accordion} from '../../../../widgets/accordion';
+import {Accordion, AccordionSection} from '../../../../widgets/accordion';
 import {enumKeyToLabel} from './metrics_enum_utils';
 import {showModal} from '../../../../widgets/modal';
 import {CodeSnippet} from '../../../../widgets/code_snippet';
@@ -183,13 +183,16 @@ export class TraceSummaryNode implements QueryNode {
       });
     } else {
       sections.push({
-        content: m(Accordion, {
-          items: metricsNodes.map((mn) => ({
-            id: mn.nodeId,
-            header: this.renderMetricHeader(mn),
-            content: this.renderMetricContent(mn),
-          })),
-        }),
+        content: m(
+          Accordion,
+          metricsNodes.map((mn) =>
+            m(
+              AccordionSection,
+              {key: mn.nodeId, summary: this.renderMetricHeader(mn)},
+              this.renderMetricContent(mn),
+            ),
+          ),
+        ),
       });
     }
 
diff --git a/ui/src/plugins/dev.perfetto.QueryPage/table_list.ts b/ui/src/plugins/dev.perfetto.QueryPage/table_list.ts
@@ -14,7 +14,7 @@
 
 import m from 'mithril';
 import {FuzzyFinder, FuzzySegment} from '../../base/fuzzy';
-import {Accordion, AccordionItem} from '../../widgets/accordion';
+import {Accordion, AccordionSection} from '../../widgets/accordion';
 import {Button} from '../../widgets/button';
 import {CopyToClipboardButton} from '../../widgets/copy_to_clipboard_button';
 import {Icon} from '../../widgets/icon';
@@ -45,7 +45,6 @@ export interface TableListAttrs {
 
 export class TableList implements m.ClassComponent<TableListAttrs> {
   private searchQuery = '';
-  private expandedTable: string | undefined = undefined;
 
   view({attrs}: m.CVnode<TableListAttrs>): m.Children {
     const tables = attrs.sqlModules.listTables();
@@ -66,15 +65,6 @@ export class TableList implements m.ClassComponent<TableListAttrs> {
       }));
     }
 
-    const items: AccordionItem[] = filteredTables.map(({table, segments}) => ({
-      id: table.name,
-      header: m(
-        'code.pf-simple-table-list__item-name',
-        renderHighlightedName(segments),
-      ),
-      content: this.renderTableContent(table, attrs.onQueryTable),
-    }));
-
     return m(
       '.pf-simple-table-list',
       m(TextInput, {
@@ -86,16 +76,25 @@ export class TableList implements m.ClassComponent<TableListAttrs> {
           this.searchQuery = value;
         },
       }),
-      items.length > 0
+      filteredTables.length > 0
         ? m(
             '.pf-simple-table-list__items',
-            m(Accordion, {
-              items,
-              expanded: this.expandedTable,
-              onToggle: (id) => {
-                this.expandedTable = id;
-              },
-            }),
+            m(
+              Accordion,
+              filteredTables.map(({table, segments}) =>
+                m(
+                  AccordionSection,
+                  {
+                    key: table.name,
+                    summary: m(
+                      'code.pf-simple-table-list__item-name',
+                      renderHighlightedName(segments),
+                    ),
+                  },
+                  this.renderTableContent(table, attrs.onQueryTable),
+                ),
+              ),
+            ),
           )
         : m(EmptyState, {
             title: 'No matching tables found',
diff --git a/ui/src/plugins/dev.perfetto.WidgetsPage/demos/accordion_demo.ts b/ui/src/plugins/dev.perfetto.WidgetsPage/demos/accordion_demo.ts
@@ -13,33 +13,8 @@
 // limitations under the License.
 
 import m from 'mithril';
-import {Accordion, AccordionItem} from '../../../widgets/accordion';
-
-const DEMO_ITEMS: AccordionItem[] = [
-  {
-    id: 'section1',
-    header: 'Section 1',
-    content: m(
-      'div',
-      m('p', 'This is the content for section 1.'),
-      m('p', 'The accordion ensures only one section is expanded at a time.'),
-    ),
-  },
-  {
-    id: 'section2',
-    header: 'Section 2',
-    content: m(
-      'div',
-      m('p', 'Content for section 2.'),
-      m('p', 'Click another header to collapse this and expand that one.'),
-    ),
-  },
-  {
-    id: 'section3',
-    header: 'Section 3',
-    content: m('p', 'Content for section 3.'),
-  },
-];
+import {Accordion, AccordionSection} from '../../../widgets/accordion';
+import {renderWidgetShowcase} from '../widgets_page_utils';
 
 export function renderAccordion(): m.Children {
   return [
@@ -48,26 +23,53 @@ export function renderAccordion(): m.Children {
       m('h1', 'Accordion'),
       m(
         'p',
-        'A collapsible panel component that displays a list of items where ' +
-          'only one item can be expanded at a time. Supports both controlled ' +
-          'and uncontrolled modes.',
+        'A collapsible panel component. Each section uses a native ' +
+          '<details> element and manages its own open/closed state.',
       ),
     ),
-    m('h2', 'Uncontrolled Mode'),
-    m(
-      'p',
-      'In uncontrolled mode, the accordion manages its own expanded state internally. ' +
-        'All items start collapsed.',
-    ),
-    m(
-      'div',
-      {
-        style: {
-          border: '1px solid var(--pf-color-border)',
-          borderRadius: '4px',
-        },
-      },
-      m(Accordion, {items: DEMO_ITEMS}),
-    ),
+
+    renderWidgetShowcase({
+      renderWidget: ({defaultOpen, ...rest}) =>
+        m(
+          'div',
+          {
+            style: {
+              border: '1px solid var(--pf-color-border)',
+              borderRadius: '4px',
+            },
+          },
+          m(
+            Accordion,
+            {key: defaultOpen ? 'open' : 'closed', ...rest},
+            m(
+              AccordionSection,
+              {summary: 'Section 1', defaultOpen},
+              m(
+                'div',
+                m('p', 'This is the content for section 1.'),
+                m(
+                  'p',
+                  'Each section independently manages its open/closed state.',
+                ),
+              ),
+            ),
+            m(
+              AccordionSection,
+              {summary: 'Section 2', defaultOpen},
+              m(
+                'div',
+                m('p', 'Content for section 2.'),
+                m('p', 'Multiple sections can be open simultaneously.'),
+              ),
+            ),
+            m(
+              AccordionSection,
+              {summary: 'Section 3', defaultOpen},
+              m('p', 'Content for section 3. This section starts open.'),
+            ),
+          ),
+        ),
+      initialOpts: {multi: false, defaultOpen: false},
+    }),
   ];
 }
diff --git a/ui/src/widgets/accordion.ts b/ui/src/widgets/accordion.ts
