search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.13k stars 2.15k forks source link

[MenuSurface] Allow customizing MenuSurfaceCorner #4775

Open abhiomkar opened 5 years ago

abhiomkar commented 5 years ago

Feature Request

Currently MenuSurface allows customizing anchor corner https://github.com/material-components/material-components-web/blob/6d4405805a7a0cc5e7ff2b2d245f0cbaac9f6e03/packages/mdc-menu-surface/constants.ts#L75 via setAnchorCorner API. But it needs to also support setMenuSurfaceCorner which can be used to set origin of menu where it opens.

Additional context

Imagine a case where the menu opens to the right side that overlaps other elements, it would be helpful if client can override the MenuSurfaceCorner to open to the left side.

MenuSurfaceCorner: TOP_LEFT (Current Behaviour) - Default

image

MenuSurfaceCorner: TOP_RIGHT - Customized

image

I think this setting can be abstracted out to support this feature:

https://github.com/material-components/material-components-web/blob/6d4405805a7a0cc5e7ff2b2d245f0cbaac9f6e03/packages/mdc-menu-surface/foundation.ts#L328

abhiomkar commented 4 years ago

Update: MDC MenuSurface foundation now supports .flipCornerHorizontally() to flip the corner horizontally.

tv42 commented 4 years ago

This seems done with setAnchorCorner(Corner) in https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu-surface and https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu