New forms styling make long forms difficult to structure

[bjornwang]

trafficstars

Is your feature request related to a problem? Please describe. The new form styling makes the field groupings in forms difficult to understand. Field spacing also seems arbitrary at times.

Navigating long forms, that use fieldsets or nested objects to group fields, is more difficult.

Describe the solution you'd like I'd like a design that caters to using fieldsets and field groups to clearly dhow what fields belong together, working as headlines to make long forms scannable and easy to navigate. In the lack of a good solution for showing fields that belong together in tabs (not just fieldsets, that's far too basic), it's crucial that long forms are made easy to navigate.

At the very least:

• Remove the boxing around the radio buttons so it doesn't look more prominent than the surrounding group (fieldset or inlined object).
• Consider emphasizing groups (fieldsets and inlined objects) more. These are the only structures available to help make strong visual groupings of fields.

Describe alternatives you've considered Downgrading to a previous Sanity version. Changing the styling ourselves, for example adding background colour to the outer grouping level (fieldset or inlined object)

Screenshots

The old design was arguably much more fit to grouping fields together in a sensible way:

[vicmeow]

Hi Bjørn and thank you for your feedback, we appreciate it! This spacing issue seems weird indeed, will be sure to look into that.

In regards to your other points, I totally understand where you're coming from and will share this with the team! 👍

[bjornwang]

Thanks, @vicbergquist!

It's quite a design challenge getting this right for all sorts of groupings and combinations, so my comments are mostly about very large schemas (long forms) with extensive use of fieldsets and inline objects to group fields.

I'd be happy to provide more examples if it could help, as test scenarios.

[vicmeow]

Thanks, @vicbergquist!

It's quite a design challenge getting this right for all sorts of groupings and combinations, so my comments are mostly about very large schemas (long forms) with extensive use of fieldsets and inline objects to group fields.

I'd be happy to provide more examples if it could help, as test scenarios.

We'd love to hear more feedback and examples! I've made two PRs to address the field spacing issue, and a boolean label issue that will hopefully improve the UX 😊

[bjornwang]

@vicbergquist Adding another small comment here. The field labels and descriptions no longer seem to be allowed to fill the full form width, making for more text wrapping than before. Might be by design?

See screenshot below. Would expect the highlighted blue divs constraining the texts to be allowed to use the full width.

[johanneshovda]

Referring to the styling of the form, the Boolean field consistently is out of line with the other fields. This breaks the visual flow of the form, since the Boolean renders the title and description inside itself, verus all the other components.

[bjornwang]

@johanneshovda, how have you implemented the side-by-side field placement inside the studio? Some feature I have missed, or have you added CSS yourself to achieve this?

[mikedpad]

@johanneshovda, how have you implemented the side-by-side field placement inside the studio? Some feature I have missed, or have you added CSS yourself to achieve this?

There is a columns option on the fieldsets array. I found this in the docs at the bottom of the object type. Here is a more complete example:

export default {
  name: 'openingHours',
  type: 'object',
  fieldsets: [
    {
      name: 'hours', // <--- Name the fieldset, apply this to the other fields
      options: {
        collapsible: false,
        columns: 3, // <--- THIS is what you're referring to
      },
    },
  ],
  fields: [
    {
      name: 'dayOfWeek',
      type: 'boolean',
      fieldset: 'hours', // <--- Apply fieldset here
    },
    {
      name: 'opens',
      type: 'string',
      fieldset: 'hours', // <--- Apply fieldset here
    },
    {
      name: 'closes',
      type: 'string',
      fieldset: 'hours', // <--- Apply fieldset here
    },
  ],
};

Referring to the styling of the form, the Boolean field consistently is out of line with the other fields. This breaks the visual flow of the form, since the Boolean renders the title and description inside itself, versus all the other components.

I have to agree with @johanneshovda. Boolean fields look out of place and inconsistent with other fields. I have plenty of experience with React, but creating custom input components to style a simple switch is way more hassle than it's worth. So much boilerplate code to make it look the way you'd like. Also, options like the one described above aren't well documented and feels like an escape hatch. Most of the defaults look consistent enough, but I'm really scratching my head why the Boolean field looks the way it does.

I do love what Sanity offers though. I'm really looking forward to v3 to complement the great developer experience I've been having with Svelte/SvelteKit.

[kmelve]

Hi!

We are currently working on improving our workflows and follow-up on our open GitHub repository. In that work, we have decided to close most issues older than the release of Sanity Studio v3.

We value your feedback, so if this issue is still important to you and relevant for Sanity Studio v3, please search for relevant open issues. If you can’t find any, open a new one and link to relevant comments in this thread. For questions about how to do something, please post them in the slack community.