canonical / canonical/vanilla-framework
[Component amendment]: Accordions in websites' search filters
- 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
[](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
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