angular / angular/components

bug(menu): mat-divider inside a menu missing margin

Open
#19,248 7 comments 0 reactions 0 assignees View on GitHub
area: material/divider area: material/menu material spec P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

[See Stackblitz](https://angular-menu-divider.stackblitz.io)

#### Expected Behavior

The [relevant spec section](https://material.io/components/menus#specs) mandates 8px above and below dividers in a menu. See the example headed "Desktop".

#### Actual Behavior

The divider has no margin above or below. Hover over the items adjacent to it and you can see that their highlight region touches the divider.

#### Environment

- Angular: 9.1.4
- CDK/Material: 9.2.1
- Browser(s): Irrelevant
- Operating System (e.g. Windows, macOS, Ubuntu): Irrelevant

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare the menu divider spacing with the Material Design spec section linked in the issue. The work is done when menu dividers have 8px of margin above and below and adjacent item hover regions no longer touch them.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.