Add a border to the menu list component
Nobody has claimed this yet.
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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