Make submit buttons wrapable in container

The submit button is rendered within the webform-actions.html.twig template.

You can wrap any submit button by altering this template or using HOOK_preprocess_webform_actions()

/**
 * Prepares variables for webform actions templates.
 *
 * @see \Drupal\webform\WebformSubmissionForm::actionsElement
 * @see \Drupal\webform\WebformSubmissionForm::actions
 * @see template_preprocess_webform_actions()
 * @see webform-actions.html.twig
 */
function HOOK_preprocess_webform_actions(array &$variables) {
  $element = &$variables['element'];
  foreach (Element::children($element) as $key) {
    $element[$key] += [
      '#prefix' => '<div class="my-custom-button-wrapper">',
      '#suffix' => '</div>',
    ];
  }
}

You can also use <a href="http://cgit.drupalcode.org/webform/tree/webform.api.php#n60">hook_webform_element_ELEMENT_TYPE_alter()</a> ie hook_webform_element_webform_actions_alter()

Strange, when I add the #prefix, #suffix, it gets wrapped around the form-actions, but wrapped a second time around the submit button.

I am using Foundation as well. I have something like:

actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#attributes':
    class:
      - ''
  '#prefix': '<div class="medium-4 medium-offset-8 cell">'
  '#suffix': '</div>'

Which produces:

<div class="medium-4 medium-offset-8 cell">

<div class="form-actions webform-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions">

<div class="medium-4 medium-offset-8 cell">

<input class="webform-button--submit success button radius button--primary js-form-submit form-submit" data-drupal-selector="edit-actions-submit" data-disable-refocus="true" type="submit" id="edit-actions-submit" name="op" value="Submit">

</div>

</div>

</div>

I am going to try the preprocess function.

Never mind, I was adding that to the actions container.

In my case, it made more sense to add those classes to the container anyway, which webform does very easily in the UI. I need to sleep...

EDIT:
This is actually a problem. I was able to work around it by putting two wrappers in the '#prefix' and '#suffix' in the preprocess function, but I feel like it's unexpected behavior when I add a #prefix and #suffix to the actions container and the output wraps not only the actions container, but the submit button as well, per my previous comment.

I assume Bootstrap theme is interfering with the actions element, but does anyone know how to fix it?
I've added a custom class to my actions element, but it's ignored:

actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#wrapper_attributes':
    class:
      - col-sm-6
  '#submit__label': 'Request Info'

The attached webform shows that the issue is not Bootstrap specific. I will look into a solution.

Yeah, no this actually appears to be a bug.
Will file a new issue.

oh, sorry didn't mean to cross-post and change status.
resetting to NW, but i can file a new issue if you want.

FWIW: I've found that the #wrapper_attributes property of actions is ignored, but the #attributes property works to apply a class to the wrapper.

Since the submit buttons are a simple element you can just us #attributes.

The below code works with the Bootstrap theme.

actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#attributes':
    class:
      - col-sm-6
  '#submit__label': 'Request Info'

Confirming that #attributes works.
Should "wrapper attributes" be hidden from the UI, since it gets ignored?

@aaronbauman You found a feature/behavior of the edit element form.

If a property is specified via source, the UI inputs on the edit element form will always be displayed.

If you create a submit buttons element via the UI, the #wrapper_attributes are not visible.

OK, that makes sense.
I can confirm after removing the #wrapper_attributes from source, the UI no longer appears

Thanks for clarifying, and thanks for the quick reply!

Hey!

Can we change the

<input type="submit" value="Submit"/> to

<button type="submit"><i class="fa-solid fa-arrow-right"></i></button>?