Pattern: Table Accordion

[bennypowers]

@zeroedin 's fine work on ux-dot has me thinking about potential pattern definitions, for example: The Table Accordion (i.e. accordion panel containing a table)

In this demo screenshot, the Methods accordion panel demonstrates the pattern as i have it in mind, while the Events panel is the current state, without customization.

Here are the css changes used to make that screenshot, essentially, we have to remove table margins and adjust heading padding to match accordion

rh-accordion-panel rh-table {
  margin: 0;
  & :is(th, td) {
    padding-inline-start: var(--rh-space-lg, 24px);
  }
}

Further iterations we might consider:

• replace the accordion header contents with the table heading row whenever the accordion panel is expanded, although setting up aria links between them might be difficult and perhaps even prohibited
• require the table to be one color palette off from the accordion, so if the accordion is lightest, the table should be lighter

WDYT @marionnegp @coreyvickery @adamjohnson ?

[adamjohnson]

I agree with Benny's margin/padding suggestions.

I also mocked up some potential additions. The colors are far from correct/on brand, but this gets the point across:

These changes follow these design tips:

• Backgrounds
• Dividers

[zeroedin]

This is great, the addition of the background color helps break up what is the panel and what is the content.

[coreyvickery]

@adamjohnson Couple of tiny edits.

• Table heading size is --rh-font-size-body-text-sm (14px)
• Table headings container bottom border is --rh-color-gray-30 (#C7C7C7)

[adamjohnson]

Addressed in 47b8f9e. Thanks!