canonical / canonical/vanilla-framework
[Component amendment]: highlighted rule - deprecate `p-rule--highlight`, add `p-rule--highlighted`
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
Highlighted rule
## Visual
No visual changes
## Context
As part of our patterns work, engineering and design have consistently been referring to pattern top rule variants as `default`, `muted`, `highlighted`, or `none`. "muted" maps directly to `p-rule--muted`, whereas "highlighted" cannot be cleanly mapped to a CSS class as the [highlighted rule](https://vanillaframework.io/docs/patterns/rule#highlighted) uses `p-rule--highlight`, not `p-rule--highlighted`. See [thread](https://github.com/canonical/vanilla-framework/pull/5623#discussion_r2306295313) for an example of where this causes confusion.
I propose that we should create a new class `p-rule--highlighted`, which can be the new de-facto highlighted rule class, and deprecate `p-rule--highlight`. This would align `p-rule--muted` and `p-rule--highlighted` as both being adjectives that modify the rule, helping us maintain linguistic consistency and clean up some manual mappings of `highlighted` to `highlight`, like here:
https://github.com/canonical/vanilla-framework/blob/e204a57a6c81cc9e78a71bb332fff8d660024097/templates/_macros/vf_basic-section.jinja#L291-L301
and here:
https://github.com/canonical/vanilla-framework/blob/e204a57a6c81cc9e78a71bb332fff8d660024097/templates/_macros/vf_linked-logo-section.jinja#L36-L46
Contributor guide
Research direction
Start by reviewing the highlighted rule documentation and the linked template macros: templates/_macros/vf_basic-section.jinja and templates/_macros/vf_linked-logo-section.jinja. Trace how p-rule--highlight is defined and referenced, then update the mappings so p-rule--highlighted becomes the de-facto class while the older class is deprecated. Done means the naming is consistent without visual changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, sass
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100