Wording of Form / Select options on component settings

Created on 24 July 2025, 4 days ago

After selecting a component, for example as a display format for a content type field, there are various options for the component, for example Variant and then various props. The current form is a bit unclear because there are often two select boxes and the placeholder text for the first box - Source - is often "Select" which seems like a direction to the site builder to select something from the Source menu. But often selecting a Source from this list can be skipped, and is only needed for advanced / unusual cases.

So this placeholder text of "Select" should be changed to avoid the idea that it is a direction to the user.

One possibility might be "default" which would hopefully suggest to the site builder that this is the most common value and probably what you want, but you can change it if you want to.

Or there could be a new heading such as "Advanced options" meaning for the UI Suite newbie site builder "you probably don't want these options" (ie green arrow options in the screenshot below).

📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇬🇧United Kingdom juc1

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @juc1
  • 🇫🇷France pdureau Paris

    There are 3 kinds of Source plugins in UI Patterns 2:

    • "Widgets": simple form elements storing directly the data filled by the user. For example, a textfield for a string or a checkbox for a boolean.
    • Sources retrieving data from Drupal API: they can be context agnostic (ex: a menu for links) or context specific (ex: the title field for a string)
    • Context switchers: They don't retrieve data but they give access to other data sources. For example, the author fields from an article content.

    We have already improved the UX of context switchers by renaming them like this: [Current context] ➜ [New context]: [Entity] ➜ [Field], [Field item] ➜ Referenced [Entity]...

    Can we do something similar for widgets? Knowing those facts:

    • There is already a tag to know which sources are widgets or not
    • Normally, there is only one widget by prop type, but community can add more in their projects

    Or, more specifically, we do something special when the default source (we know this one thanks to the PropType attribute) is a widget, so we are sure there is only one:

    This default + widget source are:

    • AttributesPropType: attributes
    • BooleanPropType: checkbox
    • EnumListPropType: selects
    • EnumPropType, VariantPropType: select
    • EnumSetPropType: checkboxes
    • IdentifierPropType, StringPropType: textfield
    • >> not a widget
    • ListPropType: list_textarea
    • NumberPropType: number
    • >> not a widget
    • UrlPropType: url

    We are already putting them at the top of the selector (don't we?), what can we do more? Some wording as proposed in the issue? Some hints?

    For information, SDC Display doesn't have this issue because there is only 2 "sources" by prop type:

    • "Static": a widget with direct filling of data
    • "Dynamic": a contextualized data retrieval

    What can we do to simplify our UX?

  • 🇫🇷France Grimreaper France 🇫🇷

    Maybe the confusion also comes from the default empty label "- Select -"?

    Maybe let's change this default empty label to "- Choose a source -" or "- Choose a data source -"?

    And for the widget source, like with "[Entity]", "[Field]", etc prefixes, why not add a "[Widget]" prefix? or in this case it is too much and just in a first time changing the empty label as a first step will be enough?

  • 🇬🇧United Kingdom juc1

    @grimreaper

    I think "Data source" is better than the current "Source" as the menu title but I don't like "- Choose a data source -" because it encourages the user to open this menu - Entity Link etc which might baffle Patterns beginners with options that they don't understand and probably don't want. I would like to see helpful defaults pre-selected wherever possible, and then re my screenshot below, hopefully the chevron - v - indicates to the user that a helpful option has been pre-selected but more options are available if required.

  • 🇬🇧United Kingdom juc1

    Another thing - in the current layout, both select boxes are under the title "Source" - the relationship between the two select boxes is not clear eg that the first select box is the "parent" ie determines the options available in the second select box.

    So maybe something is needed to indicate this relationship and / or maybe the second select box needs its own title, so something like:

    Data source:
    (First select box)

    Value:
    (Second select box.)

Production build 0.71.5 2024