canonical / canonical/vanilla-framework

[Component amendment]: highlighted rule - deprecate `p-rule--highlight`, add `p-rule--highlighted`

Open
#5,627 2 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Global WG: Validated
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.