canonical / canonical/vanilla-framework

Allow text max width utility in basic section list blocks

Open
#5,707 2 comments 0 reactions 0 assignees View on GitHub
Priority: High Tier: Sites WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

Basic Section - list block

Context: https://github.com/canonical/canonical.com/pull/2096#issuecomment-3596247691

## Behavior to amend

The [lists generated by Basic Section](https://vanillaframework.io/docs/patterns/basic-section#list) cannot apply the [text max width utility](https://vanillaframework.io/docs/utilities/text-max-width) unless `u-text-max-width` is wrapped around the entire basic section pattern (which applies the utility at a higher level than we should be applying it). This means users don't have an easy or idiomatic way to apply the utility to lists generated by the pattern.

We should decide:

1. If the text max width utility should be the default behavior of lists generated by the pattern. If yes, it can be added as a class [here](https://github.com/canonical/vanilla-framework/blob/2d55b074a685e2f222fdf353682f8b616683274b/templates/_macros/vf_basic-section.jinja#L102). This is a **Design Question**.
2. If it should not be default behavior, whether we should expose a `attrs` field for the list block and allow the user to pass arbitrary attrs (such as `class`), or simply expose a named `is_max_width` attr. This depends on whether we see text max width being a frequent use case or not - if it is frequent, we should expose it intentionally to make consumption easier. This is a **Design and Engineering Question**.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing templates/_macros/vf_basic-section.jinja around line 102, then read the Basic Section list and text max width utility documentation linked in the issue. Resolve whether the utility is default or exposed through list attributes, and confirm the resulting API lets users apply the utility idiomatically without wrapping the entire pattern.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.