Add missing wrapper and properties for the Textarea component

Thanks, Ahmad, for reporting and the MR

I agree to that. After a quick review

Let us follow the school of Bootstrap Barrio 5.5.x on this
https://git.drupalcode.org/project/bootstrap_barrio/-/blob/5.5.x/templat...

Please, add wrapper_attributes to props

    wrapper_attributes:
      type: Drupal\Core\Template\Attribute

Let us add resizable, required too as props

Drupal 10.1.x core
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/includes/fo...
has the following and the webform module is following with that.

/**
 * Prepares variables for textarea templates.
 *
 * Default template: textarea.html.twig.
 *
 * @param array $variables
 *   An associative array containing:
 *   - element: An associative array containing the properties of the element.
 *     Properties used: #title, #value, #description, #rows, #cols, #maxlength,
 *     #placeholder, #required, #attributes, #resizable.
 */
function template_preprocess_textarea(&$variables) {
  $element = $variables['element'];
  $attributes = ['id', 'name', 'rows', 'cols', 'maxlength', 'placeholder'];
  Element::setAttributes($element, $attributes);
  RenderElement::setAttributes($element, ['form-textarea']);
  $variables['wrapper_attributes'] = new Attribute();
  $variables['attributes'] = new Attribute($element['#attributes']);
  $variables['value'] = $element['#value'];
  $variables['resizable'] = !empty($element['#resizable']) ? $element['#resizable'] : NULL;
  $variables['required'] = !empty($element['#required']) ? $element['#required'] : NULL;
}

Having the following:

Properties:

• value: The value in the text.
• resizable: (true|false) To be able to resize the textarea form field.
• required: (true|false) To change the filed as required.

Attributes:

• attributes
• wrapper_attributes

Slots:

• N/A

find out that Drupal ~10.1.0 core has css styles for components

Resizable textareas

/**
 * @file
 * Resizable textareas.
 */

.resize-none {
  resize: none;
}
.resize-vertical {
  min-height: 2em;
  resize: vertical;
}
.resize-horizontal {
  max-width: 100%;
  resize: horizontal;
}
.resize-both {
  max-width: 100%;
  min-height: 2em;
  resize: both;
}

Changed

resizable: (true|false) An indicator for whether the textarea is resizable.

to

resizable: (none|vertical|horizontal|both) An indicator for whether the textarea is resizable.

Drupal ~10.1.0 core is utilizing more properties for the Textarea form element
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/includes/fo...
- element: An associative array containing the properties of the element.
Properties used: #title, #value, #description, #rows, #cols, #maxlength, #placeholder, #required, #attributes, #resizable.

From the The TEXTAREA element by w3

17.7 The TEXTAREA element
<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --

rows = number [CN]
This attribute specifies the number of visible text lines. Users should be able to enter more lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area.
cols = number [CN]
This attribute specifies the visible width in average character widths. Users should be able to enter longer lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area. User agents may wrap visible text lines to keep long lines visible without the need for scrolling.

Adding more properties:

• rows: Specifies the number of visible text lines. Users should be able to enter more lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area.
• cols: Specifies the visible width in average character widths. Users should be able to enter longer lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area. User agents may wrap visible text lines to keep long lines visible without the need for scrolling.
• maxlength: specifies the maximum length (in characters) of a text area
• placeholder: Specifies a short hint that describes the expected value of a text area.
• readonly: Specifies whether the control may be modified by the user.
• disabled: Disables the control for user input.

Automatically closed - issue fixed for 2 weeks with no activity.

✅ Released varbase_components-2.0.0-alpha21 →

✅ Released Varbase 10.0.0-beta1 →