From 78689d83958439b2170968ba3cc6638c2374ea7e Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Fri, 28 Nov 2025 16:09:04 +0800 Subject: [PATCH 1/8] feat: add title ID to basic section pattern --- templates/_macros/vf_basic-section.jinja | 4 ++-- .../patterns/basic-section/mixed-content.html | 2 +- templates/docs/patterns/basic-section/index.md | 17 +++++++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/templates/_macros/vf_basic-section.jinja b/templates/_macros/vf_basic-section.jinja index 36b782051..72e521731 100644 --- a/templates/_macros/vf_basic-section.jinja +++ b/templates/_macros/vf_basic-section.jinja @@ -279,7 +279,7 @@ {% endmacro %} {% macro basic_section_title(title={}) %} -

+ 0 %} id="{{ title.get("id", "") | trim }}"{% endif %}> {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%} + + + title.id + + + No + + + string + + + N/A + + + The main title ID + + title.link_attrs From 2e2ec19082f715c46fa0fa1d97a3abaad3aabd97 Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Fri, 28 Nov 2025 16:17:44 +0800 Subject: [PATCH 2/8] feat: add title ID to pricing block pattern --- templates/_macros/vf_pricing-block.jinja | 4 +++- .../patterns/pricing-block/1-block.html | 1 + .../patterns/pricing-block/2-blocks.html | 1 + .../patterns/pricing-block/3-blocks.html | 1 + .../patterns/pricing-block/4-blocks.html | 1 + templates/docs/patterns/pricing-block/index.md | 18 ++++++++++++++++++ 6 files changed, 25 insertions(+), 1 deletion(-) diff --git a/templates/_macros/vf_pricing-block.jinja b/templates/_macros/vf_pricing-block.jinja index ebcb33b82..812659c8d 100644 --- a/templates/_macros/vf_pricing-block.jinja +++ b/templates/_macros/vf_pricing-block.jinja @@ -1,6 +1,7 @@ {# Params - title_text (string) (required): The text to be displayed as the heading + - title_id (string) (optional): The id attribute for the heading - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none". - tiers (Array<{ tier_name_text: String (optional), @@ -20,6 +21,7 @@ {%- macro vf_pricing_block( top_rule_variant="default", title_text="", + title_id="", tiers=[] ) -%} {% set top_rule_variant = top_rule_variant | trim %} @@ -90,7 +92,7 @@ {{ _top_rule() }}
-

{{ title_text }}

+ 0 %} id="{{ title_id | trim }}"{% endif %}>{{ title_text }}

{% if section_description %}
{{ section_description }}
{% endif %} diff --git a/templates/docs/examples/patterns/pricing-block/1-block.html b/templates/docs/examples/patterns/pricing-block/1-block.html index 46731347e..b1a1e3b71 100644 --- a/templates/docs/examples/patterns/pricing-block/1-block.html +++ b/templates/docs/examples/patterns/pricing-block/1-block.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + title_id="1-block", tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/2-blocks.html b/templates/docs/examples/patterns/pricing-block/2-blocks.html index 6d213431d..4e7e24e87 100644 --- a/templates/docs/examples/patterns/pricing-block/2-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/2-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + title_id="2-blocks", tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/3-blocks.html b/templates/docs/examples/patterns/pricing-block/3-blocks.html index 30de805ee..f15e38d5f 100644 --- a/templates/docs/examples/patterns/pricing-block/3-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/3-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + title_id="3-blocks", tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/4-blocks.html b/templates/docs/examples/patterns/pricing-block/4-blocks.html index ea6dfbe0a..ca4cf6f8d 100644 --- a/templates/docs/examples/patterns/pricing-block/4-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/4-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + title_id="4-blocks", tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 8b3c301de..2587d1796 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -19,6 +19,7 @@ The Pricing block pattern is composed of the following elements: | Element | Description | | -------------------------------------------------------- | ----------------------------------------------------------------------------- | | Title (**required**) | h2 title text | +| Title ID (**optional**) | The id attribute for the h2 title text | | Description | p description text | | Tiers (**required**) | An `Array` of individual tiers representing different pricing options | | Tiers[].Name (**optional**) | h2 tier title | @@ -122,6 +123,23 @@ The `vf_pricing_block` Jinja macro can be used to generate a pricing tier compar Title of the pricing section. + + + title_id + + + No + + + string + + + N/A + + + Title ID of the pricing section. + + top_rule_variant From 1cc522b196899ca8fd125f436b2e489b9fd18fb8 Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Fri, 28 Nov 2025 16:26:18 +0800 Subject: [PATCH 3/8] feat: add title ID to equal heights pattern --- templates/_macros/vf_equal-heights.jinja | 4 +++- .../equal-heights/2-columns-responsive.html | 1 + .../equal-heights/3-columns-responsive.html | 1 + .../equal-heights/4-columns-responsive.html | 1 + templates/docs/patterns/equal-heights/index.md | 16 ++++++++++++++++ 5 files changed, 22 insertions(+), 1 deletion(-) diff --git a/templates/_macros/vf_equal-heights.jinja b/templates/_macros/vf_equal-heights.jinja index 88bf59dd1..0eb12022e 100644 --- a/templates/_macros/vf_equal-heights.jinja +++ b/templates/_macros/vf_equal-heights.jinja @@ -1,6 +1,7 @@ {#- Params - title_text (string) (required): The text to be displayed as the heading + - title_id (string) (optional): The id attribute for the title heading - subtitle_text (string) (optional): The text to be displayed as the subtitle - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5. - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default. @@ -11,6 +12,7 @@ -#} {%- macro vf_equal_heights( title_text, + title_id="", subtitle_text="", subtitle_heading_level=5, highlight_images=false, @@ -38,7 +40,7 @@
{%- endif -%} - {{ title_text }} + 0 %} id="{{ title_id | trim }}"{% endif %}{% if not has_two_top_cols %} class="u-fixed-width"{% endif %}>{{ title_text }} {%- if has_two_top_cols -%}
{%- endif -%} diff --git a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html index 193466238..11567f60b 100644 --- a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + title_id="2-columns-responsive", subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html index cc8100992..0e4ac8909 100644 --- a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + title_id="3-columns-responsive", subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html index 7efef0a7a..c45ccfdfd 100644 --- a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + title_id="4-columns-responsive", subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index c1464b69e..c70758b7d 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -15,6 +15,7 @@ The equal heights pattern is composed of the following elements: | Element | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title_text (**required**) | `H2` title text. | +| title_id | The `id`` attribute for the title heading. | | subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. | | subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. | | highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. | @@ -113,6 +114,21 @@ shown below. H2 title text. + + + title_id + + + No + + String + + N/A + + + The id attribute for the H2 title heading. + + subtitle_text From 31eda20dd75529d8784560297c582162347c6d8b Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Fri, 28 Nov 2025 16:44:59 +0800 Subject: [PATCH 4/8] feat: add id support to basic section, pricing block and equal heights patterns --- releases.yml | 14 ++++++++++++++ templates/docs/patterns/equal-heights/index.md | 2 +- templates/docs/patterns/pricing-block/index.md | 2 +- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/releases.yml b/releases.yml index dfe3533dd..dd2a7189a 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,17 @@ +- version: 4.37.1 + features: + - component: Basic section + url: /docs/patterns/basic-section + status: Updated + notes: Added title.id attribute to the title heading. + - component: Pricing block + url: /docs/patterns/pricing-block + status: Updated + notes: Added title_id parameter to the title heading. + - component: Equal heights + url: /docs/patterns/equal-heights + status: Updated + notes: Added title_id parameter to the title heading. - version: 4.37.0 features: - component: Icon diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index c70758b7d..675384a65 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -15,7 +15,7 @@ The equal heights pattern is composed of the following elements: | Element | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title_text (**required**) | `H2` title text. | -| title_id | The `id`` attribute for the title heading. | +| title_id | The `id` attribute for the title heading. | | subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. | | subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. | | highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. | diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 2587d1796..7dcac1e86 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -19,7 +19,7 @@ The Pricing block pattern is composed of the following elements: | Element | Description | | -------------------------------------------------------- | ----------------------------------------------------------------------------- | | Title (**required**) | h2 title text | -| Title ID (**optional**) | The id attribute for the h2 title text | +| Title ID (**optional**) | The id attribute for the h2 title text | | Description | p description text | | Tiers (**required**) | An `Array` of individual tiers representing different pricing options | | Tiers[].Name (**optional**) | h2 tier title | From ebb6331e1ffa5e486ce0945b41b391c0ec920c90 Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Tue, 2 Dec 2025 16:23:27 +0800 Subject: [PATCH 5/8] feat: add id to section attrs --- templates/_macros/vf_basic-section.jinja | 10 +++-- .../patterns/basic-section/mixed-content.html | 5 ++- .../docs/patterns/basic-section/index.md | 37 ++++++++++--------- 3 files changed, 28 insertions(+), 24 deletions(-) diff --git a/templates/_macros/vf_basic-section.jinja b/templates/_macros/vf_basic-section.jinja index 72e521731..ae21542ab 100644 --- a/templates/_macros/vf_basic-section.jinja +++ b/templates/_macros/vf_basic-section.jinja @@ -279,7 +279,7 @@ {% endmacro %} {% macro basic_section_title(title={}) %} - 0 %} id="{{ title.get("id", "") | trim }}"{% endif %}> +

{%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%} 0 -%} {%- set has_subtitle = subtitle_text|length > 0 -%} -
+
{{ vf_section_top_rule(top_rule_variant) }}
diff --git a/templates/docs/examples/patterns/basic-section/mixed-content.html b/templates/docs/examples/patterns/basic-section/mixed-content.html index 4ec344f41..b62615b01 100644 --- a/templates/docs/examples/patterns/basic-section/mixed-content.html +++ b/templates/docs/examples/patterns/basic-section/mixed-content.html @@ -8,7 +8,7 @@ {{ vf_basic_section( label_text="Product Overview", - title={"text": "Ubuntu Server", "id": "ubuntu-server"}, + title={"text": "Ubuntu Server"}, subtitle={"text": "The world's most popular Linux server platform, now with enhanced security and performance features."}, items=[ { @@ -124,7 +124,8 @@ } } } - ] + ], + attrs= {"id": "mixed-content-section"} ) }} {% endblock %} \ No newline at end of file diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md index e1a821155..9723f040e 100644 --- a/templates/docs/patterns/basic-section/index.md +++ b/templates/docs/patterns/basic-section/index.md @@ -20,6 +20,7 @@ The basic section pattern is composed of the following elements: | Title (**required**) | Main heading text (h2) | | Subtitle | Subtitle text with configurable heading level | | Items | Array of content blocks (descriptions, images, videos, lists, code blocks, logos, CTAs) | +| Attrs | A dictionary of attributes to apply to the basic section | The default basic section uses a 50/50 grid layout that splits on large screens and stacks on smaller screens. @@ -454,24 +455,7 @@ below. The main title text (rendered as h2) - - - - title.id - - - No - - - string - - - N/A - - - The main title ID - - + title.link_attrs @@ -631,6 +615,23 @@ below. Variant of horizontal rule to display at the top of the section." + + + attrs + + + No + + + <Object> + + + N/A + + + Attributes to apply to the basic section. See attribute forwarding docs for more info. + +
From 1acb5fc1fc9846a79ef6283f17f61fa9603c477c Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Tue, 2 Dec 2025 16:45:16 +0800 Subject: [PATCH 6/8] feat: add id as pricing block attrs --- templates/_macros/vf_pricing-block.jinja | 8 ++++---- .../docs/examples/patterns/pricing-block/1-block.html | 2 +- .../docs/examples/patterns/pricing-block/2-blocks.html | 2 +- .../docs/examples/patterns/pricing-block/3-blocks.html | 2 +- .../docs/examples/patterns/pricing-block/4-blocks.html | 2 +- templates/docs/patterns/basic-section/index.md | 2 +- templates/docs/patterns/pricing-block/index.md | 8 ++++---- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/templates/_macros/vf_pricing-block.jinja b/templates/_macros/vf_pricing-block.jinja index 812659c8d..f3cbd877f 100644 --- a/templates/_macros/vf_pricing-block.jinja +++ b/templates/_macros/vf_pricing-block.jinja @@ -1,8 +1,8 @@ {# Params - title_text (string) (required): The text to be displayed as the heading - - title_id (string) (optional): The id attribute for the heading - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none". + - attrs (dictionary) (optional): A dictionary of attributes to apply to the pricing block section. - tiers (Array<{ tier_name_text: String (optional), tier_price_text: String, @@ -14,14 +14,14 @@ list_item_content_html: string }>‘, cta_html?: String - }>) (required) + }>) (required) Slots - description (optional): paragraph-style content below the title #} {%- macro vf_pricing_block( top_rule_variant="default", title_text="", - title_id="", + attrs={}, tiers=[] ) -%} {% set top_rule_variant = top_rule_variant | trim %} @@ -88,7 +88,7 @@
{% endif %} {%- endmacro -%} -
+
{{ _top_rule() }}
diff --git a/templates/docs/examples/patterns/pricing-block/1-block.html b/templates/docs/examples/patterns/pricing-block/1-block.html index b1a1e3b71..87440e51e 100644 --- a/templates/docs/examples/patterns/pricing-block/1-block.html +++ b/templates/docs/examples/patterns/pricing-block/1-block.html @@ -5,7 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', - title_id="1-block", + attrs={"id": "1-block"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/2-blocks.html b/templates/docs/examples/patterns/pricing-block/2-blocks.html index 4e7e24e87..7090d4929 100644 --- a/templates/docs/examples/patterns/pricing-block/2-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/2-blocks.html @@ -5,7 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', - title_id="2-blocks", + attrs={"id": "2-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/3-blocks.html b/templates/docs/examples/patterns/pricing-block/3-blocks.html index f15e38d5f..edc36cbaf 100644 --- a/templates/docs/examples/patterns/pricing-block/3-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/3-blocks.html @@ -5,7 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', - title_id="3-blocks", + attrs={"id": "3-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/4-blocks.html b/templates/docs/examples/patterns/pricing-block/4-blocks.html index ca4cf6f8d..a0f3b018b 100644 --- a/templates/docs/examples/patterns/pricing-block/4-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/4-blocks.html @@ -5,7 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', - title_id="4-blocks", + attrs={"id": "4-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md index 9723f040e..b39cad835 100644 --- a/templates/docs/patterns/basic-section/index.md +++ b/templates/docs/patterns/basic-section/index.md @@ -20,7 +20,7 @@ The basic section pattern is composed of the following elements: | Title (**required**) | Main heading text (h2) | | Subtitle | Subtitle text with configurable heading level | | Items | Array of content blocks (descriptions, images, videos, lists, code blocks, logos, CTAs) | -| Attrs | A dictionary of attributes to apply to the basic section | +| Attrs | Attributes to apply to the basic section | The default basic section uses a 50/50 grid layout that splits on large screens and stacks on smaller screens. diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 7dcac1e86..6752d5433 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -19,7 +19,7 @@ The Pricing block pattern is composed of the following elements: | Element | Description | | -------------------------------------------------------- | ----------------------------------------------------------------------------- | | Title (**required**) | h2 title text | -| Title ID (**optional**) | The id attribute for the h2 title text | +| Attrs (**optional**) | Attributes to apply to the Pricing block pattern | | Description | p description text | | Tiers (**required**) | An `Array` of individual tiers representing different pricing options | | Tiers[].Name (**optional**) | h2 tier title | @@ -125,19 +125,19 @@ The `vf_pricing_block` Jinja macro can be used to generate a pricing tier compar - title_id + attrs No - string + <Object> N/A - Title ID of the pricing section. + Attributes to apply to the Pricing block pattern. See attribute forwarding docs for more info. From 6576cacda4ec912e49403eab02bfb4ccc472104b Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Tue, 2 Dec 2025 17:32:05 +0800 Subject: [PATCH 7/8] feat: add id attrs to equal height pattern --- templates/_macros/vf_equal-heights.jinja | 8 ++++---- templates/_macros/vf_pricing-block.jinja | 4 ++-- .../equal-heights/2-columns-responsive.html | 2 +- .../equal-heights/3-columns-responsive.html | 2 +- .../equal-heights/4-columns-responsive.html | 2 +- templates/docs/patterns/equal-heights/index.md | 14 ++++++++------ 6 files changed, 17 insertions(+), 15 deletions(-) diff --git a/templates/_macros/vf_equal-heights.jinja b/templates/_macros/vf_equal-heights.jinja index 0eb12022e..e4835916e 100644 --- a/templates/_macros/vf_equal-heights.jinja +++ b/templates/_macros/vf_equal-heights.jinja @@ -1,7 +1,7 @@ {#- Params - title_text (string) (required): The text to be displayed as the heading - - title_id (string) (optional): The id attribute for the title heading + - attrs (dictionary) (optional): A dictionary of attributes to apply to the equal heights pattern. - subtitle_text (string) (optional): The text to be displayed as the subtitle - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5. - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default. @@ -12,7 +12,7 @@ -#} {%- macro vf_equal_heights( title_text, - title_id="", + attrs={}, subtitle_text="", subtitle_heading_level=5, highlight_images=false, @@ -33,14 +33,14 @@ {% set subtitle_heading_level=5 %} {%- endif -%} -
+
{%- if has_two_top_cols -%}
{%- endif -%} - 0 %} id="{{ title_id | trim }}"{% endif %}{% if not has_two_top_cols %} class="u-fixed-width"{% endif %}>{{ title_text }} + {{ title_text }} {%- if has_two_top_cols -%}
{%- endif -%} diff --git a/templates/_macros/vf_pricing-block.jinja b/templates/_macros/vf_pricing-block.jinja index f3cbd877f..04fadbc6f 100644 --- a/templates/_macros/vf_pricing-block.jinja +++ b/templates/_macros/vf_pricing-block.jinja @@ -2,7 +2,7 @@ Params - title_text (string) (required): The text to be displayed as the heading - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none". - - attrs (dictionary) (optional): A dictionary of attributes to apply to the pricing block section. + - attrs (dictionary) (optional): A dictionary of attributes to apply to the Pricing block section. - tiers (Array<{ tier_name_text: String (optional), tier_price_text: String, @@ -14,7 +14,7 @@ list_item_content_html: string }>‘, cta_html?: String - }>) (required) + }>) (required) Slots - description (optional): paragraph-style content below the title #} diff --git a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html index 11567f60b..057c46465 100644 --- a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html @@ -8,7 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", - title_id="2-columns-responsive", + attrs={ "id": "2-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html index 0e4ac8909..1facf66d5 100644 --- a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html @@ -8,7 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", - title_id="3-columns-responsive", + attrs={ "id": "3-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html index c45ccfdfd..f172ce2c4 100644 --- a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html @@ -8,7 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", - title_id="4-columns-responsive", + attrs={ "id": "4-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index 675384a65..9491d950d 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -15,7 +15,7 @@ The equal heights pattern is composed of the following elements: | Element | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title_text (**required**) | `H2` title text. | -| title_id | The `id` attribute for the title heading. | +| attrs | Attributes to apply to the equal heights pattern. | | subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. | | subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. | | highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. | @@ -116,17 +116,19 @@ shown below. - title_id + attrs - No + No + - String + <Object> + - N/A + N/A - The id attribute for the H2 title heading. + Attributes to apply to the equal heights pattern. See attribute forwarding docs for more info. From 5cf472374db3ba5ba2d7033c0bcac074ac8ffbfa Mon Sep 17 00:00:00 2001 From: Britney Wang Date: Wed, 3 Dec 2025 15:14:48 +0800 Subject: [PATCH 8/8] Address code comments --- package.json | 2 +- releases.yml | 8 ++++---- templates/_macros/vf_basic-section.jinja | 8 +++++++- templates/_macros/vf_equal-heights.jinja | 8 +++++++- templates/_macros/vf_pricing-block.jinja | 10 ++++++++-- templates/docs/patterns/basic-section/index.md | 1 - templates/docs/patterns/equal-heights/index.md | 1 - templates/docs/patterns/pricing-block/index.md | 1 - 8 files changed, 27 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 119570ac6..8bdc3453a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.37.2", + "version": "4.38.0", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index dd2a7189a..7c5f9f113 100644 --- a/releases.yml +++ b/releases.yml @@ -1,17 +1,17 @@ -- version: 4.37.1 +- version: 4.38.0 features: - component: Basic section url: /docs/patterns/basic-section status: Updated - notes: Added title.id attribute to the title heading. + notes: Added attrs parameter to the section element. - component: Pricing block url: /docs/patterns/pricing-block status: Updated - notes: Added title_id parameter to the title heading. + notes: Added attrs parameter to the section element. - component: Equal heights url: /docs/patterns/equal-heights status: Updated - notes: Added title_id parameter to the title heading. + notes: Added attrs parameter to the section element. - version: 4.37.0 features: - component: Icon diff --git a/templates/_macros/vf_basic-section.jinja b/templates/_macros/vf_basic-section.jinja index ae21542ab..5d9545184 100644 --- a/templates/_macros/vf_basic-section.jinja +++ b/templates/_macros/vf_basic-section.jinja @@ -332,7 +332,13 @@ {%- set has_label = label_text|length > 0 -%} {%- set has_subtitle = subtitle_text|length > 0 -%} -
+
{{ vf_section_top_rule(top_rule_variant) }}
diff --git a/templates/_macros/vf_equal-heights.jinja b/templates/_macros/vf_equal-heights.jinja index e4835916e..d17779849 100644 --- a/templates/_macros/vf_equal-heights.jinja +++ b/templates/_macros/vf_equal-heights.jinja @@ -33,7 +33,13 @@ {% set subtitle_heading_level=5 %} {%- endif -%} -
+
{%- if has_two_top_cols -%} diff --git a/templates/_macros/vf_pricing-block.jinja b/templates/_macros/vf_pricing-block.jinja index 04fadbc6f..3c9efeb07 100644 --- a/templates/_macros/vf_pricing-block.jinja +++ b/templates/_macros/vf_pricing-block.jinja @@ -88,11 +88,17 @@
{% endif %} {%- endmacro -%} -
+
{{ _top_rule() }}
- 0 %} id="{{ title_id | trim }}"{% endif %}>{{ title_text }} +

{{ title_text }}

{% if section_description %}
{{ section_description }}
{% endif %} diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md index b39cad835..afa0f0e1b 100644 --- a/templates/docs/patterns/basic-section/index.md +++ b/templates/docs/patterns/basic-section/index.md @@ -20,7 +20,6 @@ The basic section pattern is composed of the following elements: | Title (**required**) | Main heading text (h2) | | Subtitle | Subtitle text with configurable heading level | | Items | Array of content blocks (descriptions, images, videos, lists, code blocks, logos, CTAs) | -| Attrs | Attributes to apply to the basic section | The default basic section uses a 50/50 grid layout that splits on large screens and stacks on smaller screens. diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index 9491d950d..841d76bb1 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -15,7 +15,6 @@ The equal heights pattern is composed of the following elements: | Element | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title_text (**required**) | `H2` title text. | -| attrs | Attributes to apply to the equal heights pattern. | | subtitle_text | `H4` or `H5` subtitle text, depending on `subtitle_heading_level`. | | subtitle_heading_level | Heading level of the subtitles. May be `4` or `5`. Defaults to `5`. | | highlight_images | If the images need to be [highlighted](https://vanillaframework.io/docs/patterns/images#highlighted-image). Not added by default. | diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 6752d5433..96fb1ddb5 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -19,7 +19,6 @@ The Pricing block pattern is composed of the following elements: | Element | Description | | -------------------------------------------------------- | ----------------------------------------------------------------------------- | | Title (**required**) | h2 title text | -| Attrs (**optional**) | Attributes to apply to the Pricing block pattern | | Description | p description text | | Tiers (**required**) | An `Array` of individual tiers representing different pricing options | | Tiers[].Name (**optional**) | h2 tier title |