1961855 - Expand moz-box-group to support header and footer slots as well as type="list"

Status: NEW

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

We need to add header and footer slots to moz-box-group to support some of the designs for the settings project. This will likely go hand in hand with adding support for type="list" to moz-box-group to indicate that all the non-header or footer elements should be grouped together and support our list style navigation. Because of that requirement, this work is likely blocked by bug 1956853. It's possible it will make sense to implement the type="list" as part of that work.

I also explored the possibility of adding another <moz-box-list> element, but it seemed like it would have too much conceptual/functional overlap with moz-box-group. In some cases you would just have a <moz-box-list> as the sole child of a <moz-box-group>, which leads to the question of which component would be responsible for implementing the grouped styles, reorderability, etc. These explorations can be viewed here (with Mozilla access permissions).

The markup will look something like this:

<moz-box-group type="list">
  <moz-box-item slot="header"></moz-box-button>
  <moz-box-item></moz-box-item>
  <moz-box-item></moz-box-item>
  <moz-box-button slot="footer"></moz-box-button>
</moz-box-group>

In which case the two middle moz-box-items would be wrapped in a list.

Something like this is also valid and probably necessary, which is where we may have overlap with bug 1956853:

<moz-box-group type="list">
  <moz-box-item></moz-box-item>
  <moz-box-item></moz-box-item>
  <moz-box-item></moz-box-item>
</moz-box-group>