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](https://docs.google.com/document/d/1LXNZoqS8hTmW25PzoJ0o6-YKogreAR1QMf-sz6da6wI/edit?usp=sharing) (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> ```
Bug 1961855 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
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](https://docs.google.com/document/d/1LXNZoqS8hTmW25PzoJ0o6-YKogreAR1QMf-sz6da6wI/edit?usp=sharing) (with Mozilla access permissions). The markup will look something like this: ```html <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: ```html <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> ```