Admin dashboard form groups

[SychO9]

The dashboard has 4 places that present a page with a group of settings; BasicsPage, EmailPage, AppearancePage and ExtensionPage. Visually these settings are separated into groups (Form-group).

Let's take a look at the Basics page HTML structure:

<div class="container">
    <div class="Form">
        <div class="Form-group">...</div>
        <div class="Form-group">...</div>
        <fieldset class="BasicsPage-homePage Form-group">...</fieldset>
        <div class="Form-group BasicsPage-welcomeBanner-input"></div>
        <div class="Form-group">...</div>
        <button class="Button Button--primary disabled" disabled="" type="button" title="Save Changes"><span class="Button-label">Save Changes</span></button>
    </div>
</div>

It is well organized and structured, each group of settings is wrapped inside an element with a Form-group class, making it easy to customize. The only issue is with the use of a fieldset instead of a div like the rest, it is inconsistent, but that's not the problem, fieldset is hard to customize because of the forced positioning of the legend element, it would be best to use a div element at all times (and for accessibility declare role="group" aria-labelledby="group_label").

Now let's take a look at the Appearance Page:

<div class="container">
    <div class="Form">
        <fieldset class="AppearancePage-colors"></fieldset>
    </div>
    <fieldset></fieldset>
    <fieldset></fieldset>
    <fieldset></fieldset>
    <fieldset></fieldset>
    <fieldset></fieldset>
</div>

This time the fieldsets don't even have a Form-group class and they are not wrapped inside a Form either, we also have a Form at the beginning containing a fieldset with no Form-group class. This was tedious when trying to customize the dashboard.

Solution The structure should be normalized and consistent across all pages. a Form containing div Form-group elements everywhere.