Ceph » mgr » Dashboard

Add advanced fieldset component for forms¶

Adds a new UI component which is an accordion to display/hide some of the fields in the form. This new component is added in /shared/.

Use case¶

There is inconsistency across dashboard forms - pool form and osd form have their own way of showing advanced settings.
Bucket form is also planning to bring and advanced section, hence it makes sense to make them consistent across dashboard.

Design¶

Carbon style guidelines

Carbon guidelines for forms which divides forms into two categories:
1. Simple forms
2. Complex forms

Forms items can be labeled as either optional or required depending on several factors. A common distinction in IBM products for using required or optional is the forms complexity.

Simple forms - generally shorter and/or user- or consumer-oriented; such as sign-up and contact forms and checkout screens. Most of the fields will tend to be required.

Complex forms - generally longer and product-oriented; contain properties and settings that are used to configure Enterprise software.  Although they will usually contain at least one required field, the majority of the fields will tend to be optional.

Carbon design guidelines suggest following for longer forms:

1. Progressive disclosure

Use progressive disclosure to reveal any additional content that may arise based on the user’s previous selection. This kind of show/hide approach allows the user to focus on relevant information while keeping workflows short.

2. Accordion forms

Accordion forms allow users to dynamically expose and hide sections of related information. Like progressive disclosure, accordion forms allow users to focus on relevant information without having to navigate between pages. As a general rule, this technique should not be used in dialog forms.

3. Multistep forms

A multistep form spreads form fields across multiple screens and incorporates a progress indicator (vertical or horizontal) to track a user’s status step by step. There should be a logical relationship between the fields on each screen and a linear relationship between sections.