feat(cdk-experimental/menu): allow configuration of typeahead and menu position #24600
Conversation
…u position Addresses several TODOs that were left after the original implementation
| @@ -287,7 +287,6 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy { | |||
|
|
|||
| /** Determine and return where to position the opened menu relative to the menu item */ | |||
| private _getOverlayPositions(): ConnectedPosition[] { | |||
| // TODO: use a common positioning config from (possibly) cdk/overlay | |||
There was a problem hiding this comment.
I couldn't really think of a way to create common configs that seemed useful. The only idea I really had is maybe we can create a function that takes your top preferred position and generates some mirrored fallbacks automatically. e.g.
getPositionWithFallbacks(
{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'}
) === [
{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
{originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'},
{originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top'},
{originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom'},
]Do you think this is worth it? Do you have other ideas?
There was a problem hiding this comment.
I had been imaging this as something roughly like
const STANDARD_DROPDOWN_POSITIONS = [
{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
...
];
const STANDARD_PICKER_POSITIONS = [...];where the first would be the behavior that we use as the default for things with a list of items (menu, select, autocomplete), and picker would be for things like datepicker, color picker, that typically have more custom UI. The difference being the flexibility setting for the most part
There was a problem hiding this comment.
I think the problem with this is that there's not really a single standard set of positions. For horizontal menu bars and single button triggers the standard is to open the menu below the trigger. For sidebar menus and sub-menus the standard is to open the menu adjacent to the end of the trigger. We could save those both as different presets if we can come up with good names for them, but I'm having trouble coming up with good names that aren't a mouthful
There was a problem hiding this comment.
I just went with STANDARD_DROPDOWN_BELOW_POSITIONS and STANDARD_DROPDOWN_ADJACENT_POSITIONS. LMK if you have better suggestions
…and menu position
…and menu position
|
PTAL, ready for re-review |
…u position (angular#24600) * feat(cdk-experimental/menu): allow configuration of typeahead and menu position Addresses several TODOs that were left after the original implementation * fixup! feat(cdk-experimental/menu): allow configuration of typeahead and menu position * fixup! feat(cdk-experimental/menu): allow configuration of typeahead and menu position
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Addresses several TODOs that were left after the original implementation