search

PolymerElements / iron-overlay-behavior

Makes an element an overlay with an optional backdrop
41 stars 71 forks source link

separate `iron-overlay-behavior` in multiple, lightweight behaviors #179

Open valdrinkoshi opened 8 years ago

valdrinkoshi commented 8 years ago

iron-overlay-behavior is composed by 3 parts:

opening/closing an element

This part eases the showing/hiding of an element, and shortcuts like close on ESC pressed.

focus wrapping/trapping

This part deals with focus e.g. with-backdrop should wrap the focus within the element and bring the focus back if the user clicks outside the element. This might be useful also outside overlays.

position & resize

This part centers and sets the max-width/max-height of the element when it gets opened, or when the window resizes (basically iron-fit-behavior + iron-resize-behavior). This might not be useful for all overlays, e.g. if the author wants to position the overlay on the bottom left, there's no need to have the resizable or fit behavior.

Proposal

Have 3 new behaviors:

iron-focus-wrap-behavior

It deals with focus wrapping & trapping as soon as the focus lands inside the element. It provides ways to save and restore the deepest activeElement.

iron-overlay-base-behavior

It does the open/closing, uses iron-focus-wrap-behavior ensuring the focus is correctly set/restored on open/close.

iron-overlay-behavior

Extends iron-overlay-base-behavior by adding the iron-fit-behavior and iron-resizable-behavior.

valdrinkoshi commented 8 years ago

@frankiefu @blasten @cdata FYI, feedback more than welcome

valdrinkoshi commented 8 years ago

@keanulee FYI