canonical / canonical/vanilla-framework

[Component amendment]: Accordions in websites' search filters

Open
#5,451 5 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

Accordion in search filters

## Visual

[![New filters in CVE pages](https://github.com/user-attachments/assets/b8870fd0-88a4-474e-8db7-19532380c224)](https://ubuntu-com-14381.demos.haus/certified/laptops)

## Context

After rebranding, there were some visual changes to the filters in search pages (@lyubomir-popov). These can be seen in [Careers](https://canonical.com/careers/all?search=) or [Partners](https://canonical.com/partners/find-a-partner). [CVEs](https://ubuntu.com/security/cves) and soon [Certified Hardware](https://github.com/canonical/ubuntu.com/pull/14381) also use the [accordion component](https://vanillaframework.io/docs/patterns/accordion) for these filters, but accordion styles don't match those of the new filters, and were redesigned accordingly.

The new design for filters drops separators given the new style contains already plenty of lines, and relies in bolder headings instead. It also drops the left padding so icons (chevron, checkboxes) are aligned to the left margin. Sidebar search filters as such don't seem to be documented in Vanilla yet.

The new styles were implemented with custom code by @mtruj013 ([CVEs](https://ubuntu.com/security/cves)) and @andrejvelichkovski ([Certified Hardware](https://github.com/canonical/ubuntu.com/pull/14381)).

One unresolved problem is the hover state. I see two options: underline, or keeping the same darkened background that is currently implemented, even if it looks a bit weird given there's no padding on the left anymore. I'd favor underlining the heading, it's more noticeable (~accessible).

I wonder if we should go as far as to document these search pages as layouts: there are already some inconsistencies between them even when they've been redesigned rather recently (in the last 1-2 years).

(@lyubomir-popov please let me know if I misrepresented any of the decisions made here)

Contributor guide

Open the contributing guide

Research direction

Review the Vanilla accordion documentation and the linked Careers, Partners, CVEs, and Certified Hardware pages, comparing their filter treatments with the proposed redesign. Resolve the hover-state choice and whether sidebar search filters should be documented as layouts; done means the affected accordion filters share the agreed visual treatment and any agreed documentation is updated.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, documentation, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.