[6.x] Publish form appearance inconsistency between Collections and Addon Settings

[martyf]

Bug description

Sections within a Collection look great - neatly arranged with clean white space, such as:

However, this same Blueprint in the Addon Settings appears to have a section per field, such as:

These two screenshots are created with the same Blueprint.

I prefer the first (Collection) layout: it feels neater, visually more appealing, more consistent with the rest of the CP and easier to read. The Addon Settings one is more disjointed, and doesn't "feel" right, and is more cumbersome to read.

I had a look through the new components to try to trace this down but a) ran out of time and b) didn't make much progress

How to reproduce

1. Create a Blueprint for a Collection that has a Section (note: an example is provided below)
2. Copy that Blueprint to Addon settings
3. View the Addon Settings and see the form structure

Logs

Environment

Environment
Application Name: Statamic
Laravel Version: 12.25.0
PHP Version: 8.3.24
Composer Version: 2.8.10
Environment: local
Debug Mode: ENABLED
URL: statacms.test
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 1
Sites: 1
Stache Watcher: Enabled
Static Caching: Disabled
Version: dev-fix/instructions-from-package PRO

Statamic Addons
mitydigital/feedamic: 3.x-dev

Installation

Other (please explain)

Additional details

Example Blueprint

title: Simple
tabs:
  main:
    display: Main
    sections:
      -
        fields:
          -
            handle: title
            field:
              type: text
              required: true
              validate:
                - required
      -
        display: 'New Section'
        fields:
          -
            handle: field_a
            field:
              type: text
              display: 'Field A'
              width: 50
          -
            handle: field_b
            field:
              type: text
              display: 'Field B'
              width: 50

[duncanmcclean]

The difference in appearance is intentional. Collection settings, field settings, addon settings are considered "config" fields and receive some visual treatment to differentiate them from "content" publish forms.

Although, I agree that it's maybe not ideal in your case. 🤔

I'll leave this for the design guys to decide what to do here.

[martyf]

Understand… perhaps there could be a trigger that can force addon settings to behave one way or the other. That way complex forms (like this one) could be more neatly grouped, but others more simple may benefit from the current approach.

Feedamic v3 has a huge config blueprint so quite a few sections are like this.

One tab includes a replicator, and child fields of the replicator behave like they do in Collections - so makes the addon appearance for top level fields even more jarring.

[jackmcdade]

I realize this is probably a personal preference thing, but I think the second image (how it is now currently) feels neater, visually more appealing, and establishes important visual context — that you're looking at configuration fields, not content fields. If there's a lot of similar sentiment we may revisit this or provide a setting to choose the mode, but for now I'd like to keep this as the convention moving forward.

[martyf]

The issue is however that Addon Settings are inconsistent with the way different fields are presented.

If you install Feedamic (it's 5/6 compatible) it has Addon Settings already built in for 6.

There are two Tabs - Feeds and Defaults.

On the Feeds tab is a Replicator - and that visually comes across the same way as a Collection. A Section has the Replicator, each item in the Replicator is visually grouped - makes sense.

When you go to the Defaults tab, the Image and Author (especially when you enable the "Enable advanced Author setup" option) just doesn't make visual sense as much. There's a dark grey section that suggests grouping like fields - but now every field within that section is in its own card, so they actually start feel un-associated and harder to scan and read. The decreased readability is an issue in the standard Field editor too - harder to scan at the moment to find the right config option you're looking for.

[jackmcdade]

I can't picture what you're talking about – can you share a screenshot?

[martyf]

Here's the Replicator within an addon's Settings - looks very similar to what you'd expect, and matches the experience when editing an entry.

Here's the second tab, which is using Sections of Fields. The "Image" and "Author" sections feel awkward given the amount of visual boxing that is happening in there.

Any user-facing form in the CP is more like the first - Entry editing, Term editing. But in an addon's settings, there is the second layout that users typically don't see.

I see what you're doing here, but also feels odd to have different layouts for different places.

The second tab is the same layout as when you look at a Field's config, but that has the same readability issues there too - and the readability is the bigger issue here. It feels counter-intuitive to group "grouped" fields together but then card them all - it creates additional white space, additional borders, and decreases the speed at which you can scan read - especially when there are many fields in a Section. In S5, the eye could scan down the left to see the list of field config options, and the actual config field on the right. But with S6, the eye is now needing to scan each row, left to right, then down to the next row - but also hunt within the card for the label. It is definitely harder to comprehend and digest.

[jackmcdade]

You're gonna hate me but i think the second tab is way easier to scan and looks 5x better. 😬 I don't know what to do

[martyf]

It is the inconsistency as to who sees what what and when.

Authors, when editing an Entry, see less borders and more like Statamic 5's layout.

As a dev, when editing a Field, we see more boxy borders. So may be more open to it. But these are only ever shown in a Stack too.

Within the Addon Settings, which an Author may have access to, it can show both depending on what fields are in the Blueprint. That's the odd part. The boxy border layout is not shown to users in day-to-day content management - so why should it be shown in just this one area, which is a different design language to what they see everywhere else?

Feedamic (where the screenshots came from) has a lot of config options on multiple tabs - simpler addons may not have the issue because it would all be boxy.

I do hear what you're saying, and not sure of the solution here. Perhaps the happy medium (if it is possible) is to allow the dev (i.e. me, and others if they have the issue) to add something to the blueprint for Addon Settings that tells the Section (such as the "Author" or "Image" section above) to behave in the less-boxy version. Then there's complete consistency within that Addon's settings.

[martyf]

On the subject of readability too, I've just posted an idea for the Fields editor:
statamic/ideas#1376

The grid layout, with lots of white space, is where readability issues (such as here) are introduced too. Smaller screens make this less prominent.