ing-bank/lion @lion/ui@0.0.10

on GitHub

Patch Changes

• 36910e5: datepicker uses no calender-overlay-frame element anymore

• 64c0e26: Overlay System uses <dialog> for top layer functionality of all overlays.
  This means overlays positioned relative to viewport won't be moved to the body.

  This has many benefits for the App Developer:

  • "context" will be kept:
    • css variables and parts/theme will work
    • events work without the need for "repropagation" (from body to original context)
    • accessibility relations between overlay content and its context do not get lost
  • initial renderings become more predictable (since we don't need multiple initializations on multiple connectedCallbacks)
  • performance: less initialization, thus better performance
  • maintainability: handling all edge cases involved in moving an overlay to the body grew out of hand
  • developer experience:
    • no extra container components like overlay-frame/calendar-frame needed that maintain styles
    • adding a contentWrapperNode is not needed anymore

  There could be small differences in timings though (usually we're done rendering quicker now).
  Code that relies on side effects could be affected. Like:

  • the existence of a global Root node)
  • the fact that global styles would reach a dialog placed in the body

  For most users using either OverlayController, OverlayMixin or an element that uses OverlayMixin (like LionInputDatepicker, LionRichSelect etc. etc.)
  nothing will change in the public api.

• 00063d7: depend on @popperjs/core