Dimensions render element / field widget styling lost when used with Claro

@captain hindsight could you prepare this as MR perhaps? So you're suggesting to add form-items-inline class?

The existing MR seems outdated and needs a rebase.

@captain hindsight this would be the same, as putting the attributes in the info directly:

  /**
   * {@inheritdoc}
   */
  public function getInfo() {
    $class = get_class($this);
    return [
      // All units are available by default.
      '#available_units' => [],

      '#size' => 10,
      '#maxlength' => 128,
      '#default_value' => NULL,
      '#attached' => [
        'library' => ['physical/admin'],
      ],
      '#process' => [
        [$class, 'processElement'],
        [$class, 'processAjaxForm'],
        [$class, 'processGroup'],
      ],
      '#pre_render' => [
        [$class, 'preRenderGroup'],
      ],
      '#input' => TRUE,
      '#theme_wrappers' => ['fieldset'],
      '#attributes' => [
        'class' => [
          'form-items-inline',
        ],
      ],
    ];
  }

Unfortunately, that will only add the class to the fieldset, instead of adding it to the underlying "fieldset_wrapper":

We tried putting the class into "#content_attributes" as well as "#wrapper_attributes", but that won't put the class into the fieldset wrapper unfortunately.

Hm OK, I see I was talking about the physical_measurement element. For this my approach works. Unfortunately I don't use the physical_dimensions element, but yes it might not work for that if you add it to attributes.

Claro supports on the other hand content_attributes for its wrapper, I think you could achieve the same if you add `form-items-inline` to content_attributes for web/core/themes/claro/templates/fieldset.html.twig:

<fieldset{{ attributes.addClass(classes) }}>
  {#  Always wrap fieldset legends in a <span> for CSS positioning. #}
  {% if legend.title %}
  <legend{{ legend.attributes.addClass(legend_classes) }}>
    <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
  </legend>
  {% endif %}

  <div{{ content_attributes.addClass(wrapper_classes) }}>

At least it should work if you do this in a `hook_preprocess_fieldset`...

Thanks @captain hindsight. Indeed https://www.drupal.org/node/2066209 → looks interesting @grevil...

Can't seem to get it to work. I tried both:

[...]
      '#theme_wrappers' => [
        'fieldset' => ['#wrapper_attributes' => ['class' => ['form-items-inline']]],
      ],
    ];
  }

and

[...]
      '#theme_wrappers' => [
        'fieldset' => ['#attributes' => ['class' => ['form-items-inline']]],
      ],
    ];
  }

Ok, I found the reason we can't seem to override anything through 🐛 Field (widget) descriptions are displayed wrong (should not be in .form-item__suffix) Needs work .

The child element used in Dimensions (and Measurement as well) has its own "form_element" theme wrapper. And because we are rendering the child element in a foreach, we basically add 3 div wrappers around each input, which results in the current look.

I tried to simply remove the child element theme wrapper inside the parent class, but this seems to not be easily done. I am also not quite sure, why "Number" (physical_number) has a form_element wrapper, as it seems to be used internally only and not as a standalone widget.

The only problem is, that if we would simply remove the "form_element" theme wrapper from the child element, we would:

• A. Introduce a breaking change, as "physical_number" can't have a description nor label anymore
• B. "physical_number" won't support "#field_suffix" anymore, so we would need another way on how to render the unit field suffix / the "x" between the input fields.

This is how it looks, when simply removing the child element theme wrapper and "User cannot modify the unit of measurement":

As you can see the measurement and "x" is missing, because "#field_suffix" isn't supported anymore by the child element.