Issue #3488171 by grimreaper, pdureau: Add prop attributes when needed

components/alert/alert.component.yml

@@ -33,6 +33,25 @@ props:
       title: "Dismissible?"
       description: "It is possible to dismiss any alert inline."
       type: boolean
+    heading_level:
+      title: "Heading level"
+      type: integer
+      enum:
+        - 2
+        - 3
+        - 4
+        - 5
+        - 6
+      "meta:enum":
+        2: h2
+        3: h3
+        4: "h4 (Default)"
+        5: h5
+        6: h6
+    heading_attributes:
+      title: "Heading attributes"
+      description: "The attributes to customize the heading tag if present."
+      $ref: "ui-patterns://attributes"
 libraryOverrides:
   css:
     component:

components/alert/alert.twig

@@ -5,10 +5,12 @@
 {% if dismissible %}
   {% set attributes = attributes.addClass(['alert-dismissible', 'fade', 'show']) %}
 {% endif %}
+{% set heading_level = heading_level|default(4) %}
+{% set heading_attributes = create_attribute(heading_attributes|default({})) %}
 
 <div{{ attributes.addClass('alert').setAttribute('role', 'alert') }}>
   {% if heading %}
-  <h4 class="alert-heading">{{ heading }}</h4>
+    <h{{ heading_level }}{{ heading_attributes.addClass('alert-heading') }}>{{ heading }}</h{{ heading_level }}>
   {% endif %}
   {{ message }}
   {% if dismissible %}

components/card/card.component.yml

@@ -34,13 +34,34 @@ props:
       "meta:enum":
         top: "Top (Default)"
         bottom: Bottom
+    header_attributes:
+      title: "Header attributes"
+      description: "The attributes to customize the card header if present."
+      $ref: "ui-patterns://attributes"
+    footer_attributes:
+      title: "Footer attributes"
+      description: "The attributes to customize the card footer if present."
+      $ref: "ui-patterns://attributes"
+    row_attributes:
+      title: "Row attributes"
+      description: "Only for horizontal variant. The attributes to customize the tag with the row class. Default value: g-0"
+      $ref: "ui-patterns://attributes"
+      default: "g-0"
+    image_col_attributes:
+      title: "Image column attributes"
+      description: "Only for horizontal variant. The attributes to customize the column with the image. Default value: col-md-4"
+      $ref: "ui-patterns://attributes"
+      default: "col-md-4"
+    content_col_attributes:
+      title: "Content column attributes"
+      description: "Only for horizontal variant. The attributes to customize the column with the content. Default value: col-md-8"
+      $ref: "ui-patterns://attributes"
+      default: "col-md-8"
     image_col_classes:
-      title: "Image column classes"
-      description: "Only for horizontal variant. Default value: col-md-4"
+      title: "Image column classes (deprecated)"
+      description: "Only for horizontal variant. Deprecated, use 'Image column attributes' instead."
       type: string
-      default: col-md-4
     content_col_classes:
-      title: "Content column classes"
-      description: "Only for horizontal variant. Default value: col-md-8"
+      title: "Content column classes (deprecated)"
+      description: "Only for horizontal variant. Deprecated, use 'Content column attributes' instead."
       type: string
-      default: col-md-8

components/card/card.horizontal.story.yml

@@ -33,5 +33,3 @@ props:
   attributes:
     style: "max-width: 540px;"
   variant: horizontal
-  image_col_classes: col-md-4
-  content_col_classes: col-md-8

components/card/card.twig

+{% set header_attributes = create_attribute(header_attributes|default({})) %}
+{% set footer_attributes = create_attribute(footer_attributes|default({})) %}
+
 {% if variant and variant|lower == 'horizontal' %}
+  {% set row_attributes = create_attribute(row_attributes|default({})) %}
+  {% set image_col_attributes = create_attribute(image_col_attributes|default({})) %}
+  {% set content_col_attributes = create_attribute(content_col_attributes|default({})) %}
+
+  {# Deprecated props. #}
+  {% set image_col_attributes = image_col_classes ? image_col_attributes.addClass(image_col_classes) : image_col_attributes %}
+  {% set content_col_attributes = content_col_classes ? content_col_attributes.addClass(content_col_classes) : content_col_attributes %}
+
+  {# Default classes. #}
+  {% if not row_attributes.storage() %}
+    {% set row_attributes = row_attributes.addClass('g-0') %}
+  {% endif %}
+  {% if not image_col_attributes.storage() %}
+    {% set image_col_attributes = image_col_attributes.addClass('col-md-4') %}
+  {% endif %}
+  {% if not content_col_attributes.storage() %}
+    {% set content_col_attributes = content_col_attributes.addClass('col-md-8') %}
+  {% endif %}
+
   <div{{ attributes.addClass('card') }}>
-    <div class="row g-0">
-      <div class="{{ image_col_classes|default('col-md-4') }}">
+    <div{{ row_attributes.addClass('row') }}>
+      <div{{ image_col_attributes }}>
         {{ image|add_class('img-fluid rounded-start') }}
       </div>
-      <div class="{{ content_col_classes|default('col-md-8') }}">
+      <div{{ content_col_attributes }}>
         {% if header %}
-          <div class="card-header">
+          <div{{ header_attributes.addClass('card-header') }}>
             {{ header }}
           </div>
         {% endif %}
         {{ content }}
         {% if footer %}
-          <div class="card-footer">
+          <div{{ footer_attributes.addClass('card-footer') }}>
             {{ footer }}
           </div>
         {% endif %}
@@ -25,13 +47,13 @@
       {{ image|add_class('card-img-top') }}
     {% endif %}
     {% if header %}
-      <div class="card-header">
+      <div{{ header_attributes.addClass('card-header') }}>
         {{ header }}
       </div>
     {% endif %}
     {{ content }}
     {% if footer %}
-      <div class="card-footer">
+      <div{{ footer_attributes.addClass('card-footer') }}>
         {{ footer }}
       </div>
     {% endif %}

components/card_body/card_body.component.yml

@@ -37,3 +37,15 @@ props:
         4: h4
         5: "h5 (Default)"
         6: h6
+    title_attributes:
+      title: "Title attributes"
+      description: "The attributes to customize the card title if present."
+      $ref: "ui-patterns://attributes"
+    subtitle_attributes:
+      title: "Subtitle attributes"
+      description: "The attributes to customize the card subtitle if present."
+      $ref: "ui-patterns://attributes"
+    text_attributes:
+      title: "Text attributes"
+      description: "The attributes to customize the card text if present."
+      $ref: "ui-patterns://attributes"

components/card_body/card_body.twig

 {% set heading_level = heading_level|default(5) %}
+{% set title_attributes = create_attribute(title_attributes|default({})) %}
+{% set subtitle_attributes = create_attribute(subtitle_attributes|default({})) %}
+{% set text_attributes = create_attribute(text_attributes|default({})) %}
 
 <div{{ attributes.addClass('card-body') }}>
   {% if title %}
-    <h{{ heading_level }} class="card-title">{{ title }}</h{{ heading_level }}>
+    <h{{ heading_level }}{{ title_attributes.addClass('card-title') }}>{{ title }}</h{{ heading_level }}>
   {% endif %}
   {% if subtitle %}
-    <h{{ heading_level + 1 }} class="card-subtitle">{{ subtitle }}</h{{ heading_level + 1 }}>
+    <h{{ heading_level + 1 }}{{ subtitle_attributes.addClass('card-subtitle') }}>{{ subtitle }}</h{{ heading_level + 1 }}>
   {% endif %}
   {% if text %}
-    <p class="card-text">{{ text }}</p>
+    <p{{ text_attributes.addClass('card-text') }}>{{ text }}</p>
   {% endif %}
   {{ content }}
   {{ links|add_class('card-link') }}

components/card_overlay/card_overlay.component.yml

@@ -40,3 +40,15 @@ props:
         4: h4
         5: "h5 (Default)"
         6: h6
+    title_attributes:
+      title: "Title attributes"
+      description: "The attributes to customize the card title if present."
+      $ref: "ui-patterns://attributes"
+    subtitle_attributes:
+      title: "Subtitle attributes"
+      description: "The attributes to customize the card subtitle if present."
+      $ref: "ui-patterns://attributes"
+    text_attributes:
+      title: "Text attributes"
+      description: "The attributes to customize the card text if present."
+      $ref: "ui-patterns://attributes"

components/card_overlay/card_overlay.twig

 {% set heading_level = heading_level|default(5) %}
+{% set title_attributes = create_attribute(title_attributes|default({})) %}
+{% set subtitle_attributes = create_attribute(subtitle_attributes|default({})) %}
+{% set text_attributes = create_attribute(text_attributes|default({})) %}
 
 <div{{ attributes.addClass('card') }}>
   {{ image|add_class('card-img') }}
-
   <div class="card-img-overlay">
     {% if title %}
-      <h{{ heading_level }} class="card-title">{{ title }}</h{{ heading_level }}>
+      <h{{ heading_level }}{{ title_attributes.addClass('card-title') }}>{{ title }}</h{{ heading_level }}>
     {% endif %}
     {% if subtitle %}
-      <h{{ heading_level + 1 }} class="card-subtitle">{{ subtitle }}</h{{ heading_level + 1 }}>
+      <h{{ heading_level + 1 }}{{ subtitle_attributes.addClass('card-subtitle') }}>{{ subtitle }}</h{{ heading_level + 1 }}>
     {% endif %}
     {% if text %}
-      <p class="card-text">{{ text }}</p>
+      <p{{ text_attributes.addClass('card-text') }}>{{ text }}</p>
     {% endif %}
     {{ content }}
     {{ links|add_class('card-link') }}

components/carousel_item/carousel_item.component.yml

@@ -17,3 +17,7 @@ props:
       title: Interval
       description: "The amount of time to delay between automatically cycling to the next item. In ms."
       type: number
+    caption_attributes:
+      title: "Caption attributes"
+      description: "The attributes to customize the tag with the caption if present."
+      $ref: "ui-patterns://attributes"

components/carousel_item/carousel_item.twig

 {% set attributes = interval ? attributes.setAttribute('data-bs-interval', interval) : attributes %}
+{% set caption_attributes = create_attribute(caption_attributes|default({})) %}
 
 <div{{ attributes.addClass('carousel-item') }}>
   {{ image }}
   {% if caption %}
-    <div class="carousel-caption">
+    <div{{ caption_attributes.addClass('carousel-caption') }}>
       {{ caption }}
     </div>
   {% endif %}

components/modal/modal.component.yml

@@ -59,6 +59,10 @@ props:
         modal-fullscreen-lg-down: "Below large"
         modal-fullscreen-xl-down: "Below extra large"
         modal-fullscreen-xxl-down: "Below extra extra large"
+    header_attributes:
+      title: "Header attributes"
+      description: "The attributes to customize the modal header if present."
+      $ref: "ui-patterns://attributes"
     heading_level:
       title: "Heading level"
       description: "Heading level of the modal."
@@ -77,6 +81,18 @@ props:
         4: h4
         5: h5
         6: h6
+    heading_attributes:
+      title: "Heading attributes"
+      description: "The attributes to customize the modal title if present."
+      $ref: "ui-patterns://attributes"
+    body_attributes:
+      title: "Body attributes"
+      description: "The attributes to customize the modal body if present."
+      $ref: "ui-patterns://attributes"
+    footer_attributes:
+      title: "Footer attributes"
+      description: "The attributes to customize the modal footer if present."
+      $ref: "ui-patterns://attributes"
     modal_id:
       title: ID
       description: "ID used by external buttons to toggle the visibility. Must start with a letter. Randomly generated if empty."

components/modal/modal.twig

@@ -22,12 +22,17 @@
 {% set dialog_attributes = scrollable ? dialog_attributes.addClass('modal-dialog-scrollable') : dialog_attributes %}
 {% set dialog_attributes = fullscreen ? dialog_attributes.addClass(fullscreen) : dialog_attributes %}
 
+{% set header_attributes = create_attribute(header_attributes|default({})) %}
+{% set heading_attributes = create_attribute(heading_attributes|default({})) %}
+{% set body_attributes = create_attribute(body_attributes|default({})) %}
+{% set footer_attributes = create_attribute(footer_attributes|default({})) %}
+
 <div{{ attributes }}>
   <div{{ dialog_attributes }}>
     <div class="modal-content">
-      <div class="modal-header">
+      <div{{ header_attributes.addClass('modal-header') }}>
         {% if title %}
-          <h{{ heading_level }} class="modal-title" id="label_{{ modal_id }}">{{ title }}</h{{ heading_level }}>
+          <h{{ heading_level }}{{ heading_attributes.addClass('modal-title').setAttribute('id', 'label_' ~ modal_id) }}>{{ title }}</h{{ heading_level }}>
         {% endif %}
         {{ include('ui_suite_bootstrap:close_button', {
           attributes: {
@@ -37,13 +42,13 @@
       </div>
 
     {% if body %}
-      <div class="modal-body">
+      <div{{ body_attributes.addClass('modal-body') }}>
         {{ body }}
       </div>
     {% endif %}
 
     {% if footer %}
-      <div class="modal-footer">
+      <div{{ footer_attributes.addClass('modal-footer') }}>
         {{ footer }}
       </div>
     {% endif %}

components/offcanvas/offcanvas.component.yml

@@ -52,6 +52,10 @@ props:
       title: "Body scrolling"
       description: "By default, body scrolling is disabled."
       type: boolean
+    header_attributes:
+      title: "Header attributes"
+      description: "The attributes to customize the offcanvas header if present."
+      $ref: "ui-patterns://attributes"
     heading_level:
       title: "Heading level"
       description: "Heading level of the offcanvas."
@@ -70,6 +74,14 @@ props:
         4: h4
         5: "h5 (Default)"
         6: h6
+    heading_attributes:
+      title: "Heading attributes"
+      description: "The attributes to customize the offcanvas title if present."
+      $ref: "ui-patterns://attributes"
+    body_attributes:
+      title: "Body attributes"
+      description: "The attributes to customize the offcanvas body if present."
+      $ref: "ui-patterns://attributes"
     offcanvas_id:
       title: ID
       description: "ID used by external buttons to toggle the visibility. Must start with a letter. Randomly generated if empty."

components/offcanvas/offcanvas.twig

@@ -14,10 +14,14 @@
 {% set attributes = scroll ? attributes.setAttribute('data-bs-scroll', 'true') : attributes %}
 {% set attributes = title ? attributes.setAttribute('aria-labelledby', 'label_' ~ offcanvas_id) : attributes %}
 
+{% set header_attributes = create_attribute(header_attributes|default({})) %}
+{% set heading_attributes = create_attribute(heading_attributes|default({})) %}
+{% set body_attributes = create_attribute(body_attributes|default({})) %}
+
 <div{{ attributes }}>
-  <div class="offcanvas-header">
+  <div{{ header_attributes.addClass('offcanvas-header') }}>
     {% if title %}
-      <h{{ heading_level }} class="offcanvas-title" id="label_{{ offcanvas_id }}">{{ title }}</h{{ heading_level }}>
+      <h{{ heading_level }}{{ heading_attributes.addClass('offcanvas-title').setAttribute('id', 'label_' ~ offcanvas_id) }}>{{ title }}</h{{ heading_level }}>
     {% endif %}
     {{ include('ui_suite_bootstrap:close_button', {
       attributes: {
@@ -28,7 +32,7 @@
   </div>
 
   {% if body %}
-    <div class="offcanvas-body">
+    <div{{ body_attributes.addClass('offcanvas-body') }}>
       {{ body }}
     </div>
   {% endif %}

components/toast/toast.component.yml

@@ -47,3 +47,11 @@ props:
       "meta:enum":
         default: "Default (Default)"
         white: White
+    header_attributes:
+      title: "Header attributes"
+      description: "The attributes to customize the toast header if present."
+      $ref: "ui-patterns://attributes"
+    body_attributes:
+      title: "Body attributes"
+      description: "The attributes to customize the toast body if present."
+      $ref: "ui-patterns://attributes"

components/toast/toast.twig

@@ -19,13 +19,16 @@
 {% set attributes = attributes.hasAttribute('aria-atomic') ? attributes : attributes.setAttribute('aria-atomic', 'true') %}
 {% set close_button_variant = close_button_variant|default('default') %}
 
+{% set header_attributes = create_attribute(header_attributes|default({})) %}
+{% set body_attributes = create_attribute(body_attributes|default({})) %}
+
 <div{{ attributes.addClass('toast') }}>
   {% if flex_wrapper %}
     <div class="d-flex">
   {% endif %}
 
   {% if header %}
-    <div class="toast-header">
+    <div{{ header_attributes.addClass('toast-header') }}>
       {{ header }}
 
       {% if not hide_close_button %}
@@ -40,7 +43,7 @@
   {% endif %}
 
   {% if content %}
-    <div class="toast-body">
+    <div{{ body_attributes.addClass('toast-body') }}>
       {{ content }}
     </div>
   {% endif %}