Add Overlay predefined positions

[NetanelBasal]

Hey guys,

Just published a new article about creating components with the CDK overlay. I'm suggesting to add predefined overlay positions to the library. I find that people are struggling to figure out how it works.

Here is what I imagine:

// overlay-predefined-positions.ts

/**
 * Set of predefined overlay positions.
 * Don't use object as we want it to be treeshakable.
 *
 */
export const overlayPositionTop: ConnectionPositionPair = {
  originX: 'center',
  originY: 'top',
  overlayX: 'center',
  overlayY: 'bottom'
};

export const overlayPositionTopCenter: ConnectionPositionPair = {
  originX: 'center',
  originY: 'top',
  overlayX: 'center',
  overlayY: 'bottom'
};

export const overlayPositionTopLeft: ConnectionPositionPair = {
  originX: 'start',
  originY: 'top',
  overlayX: 'start',
  overlayY: 'bottom'
};

export const overlayPositionTopRight: ConnectionPositionPair = {
  originX: 'end',
  originY: 'top',
  overlayX: 'end',
  overlayY: 'bottom'
};

export const overlayPositionRight: ConnectionPositionPair = {
  originX: 'end',
  originY: 'center',
  overlayX: 'start',
  overlayY: 'center'
};

export const overlayPositionRightTop: ConnectionPositionPair = {
  originX: 'end',
  originY: 'top',
  overlayX: 'start',
  overlayY: 'top'
};

export const overlayPositionRightBottom: ConnectionPositionPair = {
  originX: 'end',
  originY: 'bottom',
  overlayX: 'start',
  overlayY: 'bottom'
};

export const overlayPositionBottom: ConnectionPositionPair = {
  originX: 'center',
  originY: 'bottom',
  overlayX: 'center',
  overlayY: 'top'
};

export const overlayPositionBottomCenter: ConnectionPositionPair = {
  originX: 'center',
  originY: 'bottom',
  overlayX: 'center',
  overlayY: 'top'
};

export const overlayPositionBottomLeft: ConnectionPositionPair = {
  originX: 'start',
  originY: 'bottom',
  overlayX: 'start',
  overlayY: 'top'
};

export const overlayPositionBottomRight: ConnectionPositionPair = {
  originX: 'end',
  originY: 'bottom',
  overlayX: 'end',
  overlayY: 'top'
};

export const overlayPositionLeft: ConnectionPositionPair = {
  originX: 'start',
  originY: 'center',
  overlayX: 'end',
  overlayY: 'center'
};

export const overlayPositionLeftTop: ConnectionPositionPair = {
  originX: 'start',
  originY: 'top',
  overlayX: 'end',
  overlayY: 'top'
};

export const overlayPositionLeftBottom: ConnectionPositionPair = {
  originX: 'start',
  originY: 'bottom',
  overlayX: 'end',
  overlayY: 'bottom'
};

Let me know what you think. Thanks.

[jelbourn]

I think that this would make things even more confusing by giving people too many options. I think a better solution to explaining the positioning would be to have a live example that lets you set the position parameters and see the result in real-time.

[NetanelBasal]

Allow me to disagree with you. Take for example the most popular positioning tool - Popper.js.

Popper exposes a simple API, for example:

new Popper(referenceElement, onPopper, {
  placement: 'right'
});

The placement option is straightforward and readable; You don't need to know, learn or think how the positioning system works. It provides multiple options like top, right, left, right-start, top-end, etc. I think the whole purpose of the CDK is to make things easier for the consumers by exposing a convenient API.