mozilla / mozilla/protocol

Add a border to the menu list component

Open
#550 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dev ready ⚙️
Dominant language
SCSS
Stars
298
Forks
83
Avg merge
16h 48m
Merged PRs (30d)
1

Description

Please describe the use case(s) for this component

The menu list component presents a dropdown list of links. Though it looks like a form select element, the nuanced difference is that a select submits an option through a form handler and a menu list just holds a list of direct links to URLs.

Please describe the change you wish to see

Form selects are being designed in #435 and look a lot like the current styling for menu lists, but with the addition of a border. We should add an optional border for the menu list component as well, so we can match it to the visual style of a form select even though it functions differently under the hood.

I'd recommend making it a theme option with an extension class, something like mzp-t-border or a more meaningful name if we can think of one. Or perhaps the border is the default and we can make the borderless style the variant.

Please describe why these changes need to be made

It will be consistent with the styling of form selects and can make menu lists stand out more on a page than the current borderless version.

I propose making the border optional because sometimes we want it to stand out when it's a primary action, but sometimes we may want it to be more subtle when it's a secondary action or collected with other links.

Please provide any designs or prototypes of the proposed changes

https://user-images.githubusercontent.com/3740746/67815209-8b764100-fa63-11e9-91fc-f5fc78874f0c.png

Please describe where this component is currently in use

https://www.mozilla.org/en-US/firefox/
https://www.mozilla.org/en-US/firefox/browsers/compare/chrome/

Is the development of this component a blocking dependency for other work? Please explain if so

Not necessarily a blocker but the need came about from design work on the Firefox Enterprise page. That mockup is using the form style but functionally it's a list of links. We could use the menu list on that page without the border but it likely would get lost among all the other links. It would be good to have this update landed in Protocol quickly for use on the Enterprise page.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the menu list component and its current styling at the linked Protocol pattern page, then compare it with the form-select design work in issue #435. Decide whether the border should be an optional theme extension or the default with a borderless variant, and verify that the result supports the Firefox Enterprise use case while preserving the existing style.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
design, frontend
Issue type
Feature
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.