canonical / canonical/vanilla-framework
Allow text max width utility in basic section list blocks
- 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
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