vaadin-overlay

Live Demo →
API Documentation →

Breaking Changes

Templating

• By default, the overlay finds the child template and uses that. You can also set a custom template using the template property.
• After the template is stamped, the content property points to the content container.
• The overlay provides forwardHostProp when calling Polymer.Templatize.templatize for the template, so that the bindings from the parent scope propagate to the content.
• You can also pass custom instanceProps object using the instanceProps property.
• Because of the Polymer limitation, every template can only be templatized once, so the instanceProps must be set before the template is assigned to the overlay.

Styling:

• If the overlay is used in a component, then the component styles apply to the overlay content.
• If the overlay is used in the global DOM scope, then global styles apply to the overlay content.

Bug Fixes

• Fixed the focus-trap issue with not handling elements implementing Vaadin.ControlStateMixin properly, which resulted in the incorrect behavior when navigating with Shift + Tab.

Changes Since v2.1.1:

• 6463bf6 Improve and fix tests for focus-trap
• abb324a Remove unneeded _focusedElement
• 11605bb Fix the detection of focused element
• 92cccb1 Fix focus trap demo
• a2c4a1d Extract focus-trap tests to separate suite, run them for in both scope variants
• 464264f Improve docs and demos for styling
• 4a34dfa Add tests for template forwardHostProp and instanceProps
• 52813cf Add tests for template stamping
• 01cb8c0 Add content styling tests
• df2f8b1 Disable depending component tests for a while
• c3e9f85 Test fixes
• f843623 Expose instanceProps for <vaadin-context-menu>
• 307f0c8 More lightweight scope implementation with classes + div shadowRoot
• 721ccd0 Support ShadyCSS in overlay content styling
• 104fd0a Gather styles from parent scopes (native ShadowDOM)
• 344a32d Detect global scope and use light DOM there

Live Demo →
API Documentation →

Improvements

• When opened, the "overlay" part is focused if there isn't any element already focused in the overlay content.

Changes Since v2.1.0:

• 1c88fc2 Use keyDownOn on key-tab tests

• 6b142f2 Explicity depend on vaadin-text-field for dev tasks

• ec7762b Test that fields in shadow containers are also visited

• 2a237af Adding form-layout to demo to wrap fields in a shadow root container

• f543507 Do not maintain a private var for the _focusedElement

  Remove meaningless loop in _cycleTab

• c90d316 Adding more tests for focus-trap

• 0690ad4 Do not force focus if overlay already is focused. Fixes #69

• f912383 Add default theme for the overlay element

• 6e8ce32 Demo to programatically focus a field

Live Demo →
API Documentation →

Improvements

• When opened, the "overlay" part is focused instead

Changes Since v2.0.6:

• 27d2f8a Bump analysis.json

• 1b04183 Include the overlay part in the tab focus order

  Fixes #68

• 88be5ea Align with skeleton: use stable Chrome in travis

• f29fe4b Add test for shift-tabbing on elements with shadow

• 6b4c389 Simplify focused element check

• 06c2de5 Fix shift-tab escaping from overlay. Fixes: #66

• 88e86c1 Align with skeleton: refer to Vaadin components instead of elements

• 8708645 Align with skeleton: update stylelint and gulp-stylelint

Live Demo →
API Documentation →

Changes Since v2.0.4:

• e092a50 Align with skeleton: use node 8.9 in CI, bump polymer-cli to 1.6.0
• 3969685 Update eslint and stylelint to check ./src and ./theme
• be85139 Align with skeleton: update eslint-plugin-html and gulp-stylelint
• d1344e3 Sync with skeleton: Switch back to using function closures

Live Demo →
API Documentation →

Changes Since v2.0.3:

• 354f973 Migrate Valo to Lumo
• 769a868 Add demo that demonstrates focus-trapping
• d4a3954 Fix focus trap behaviour
• bbaf5fe Add sudo: required in Travis config for running chrome-sandbox

Live Demo →
API Documentation →

Changes Since v2.0.2:

• afdc53e Split Sauce tests into separate jobs. Use iOS 11 for iPhone
• 7484f74 Add test against iOS 11
• cb40c23 Workaround test timeout in CI
• e1c31fd Add dependent elements tests
• fdd788d Remove test ignore [skip ci]
• 2ef6f01 Update polymer lint in CI to check ./src and ./theme

Live Demo →
API Documentation →

Changes Since v2.0.1:

• 35378de Update Valo dependency and theme

Live Demo →
API Documentation →

Changes Since v2.0.0:

• b9ff65d Update vaadin-button dependency

• a88618c Reorganize and fix tests

• fc4e622 Switch from idlePeriod to afterNextRender

Live Demo →
API Documentation →

Changes Since v1.6.0:

• c1ec546 Fix the pointer events test

• df53326 Add ThemableMixin documentation to Styling docs.

• 8f942a4 Fix overlay part overflowing host in MSIE 11 when padding applies

• 7271a10 Apply Valo theme to generic element

• 777992d Use Valo theme by default

• 8f87840 Add render-status import

• 58de6f5 Switch from idlePeriod to afterNextRender

• d6e81d1 Disable package-lock.json

• 8fafa79 Add test for issue #49

• c785c22 Do not modify pointer events if already set to none. Fixes #49

Live Demo →
API Documentation →

Changes Since v1.5.1:

• f6bc3d1 Ignore outside-click and escape if it is not the last overlay opened
• 0fa7c34, 14a36ee Add flag to know if the overlay is the last in the opened overlays stack
• 441d7cc Add API doc for viewport bottom custom CSS property
• 0f8c0dc Create custom CSS property for checking iOS address bar
• c7d5a70 set display: none when hidden

Live Demo →
API Documentation →

Changes Since v1.5.0:

• bf48e1d Use e.key instead of deprecated e.keyCode

• 1005ce6 replace polymer test by wct in travis build

• d1779f9 Bump safari version to fix Sauce build

Live Demo →
API Documentation →

Changes Since v1.4.1:

• e2bd003 Add ability for overlay to be modeless (non-modal)

• af33851 Remove performance tests

• 4871449 Always use a template with overlay

• 9e2ec7a Add styling docs for parts

• d0605c1 Add iOS workaround for backdrop click (fixes vaadin/vaadin-context-menu#105)

• adf49f3 Add separate scrollable overlay part, use content part just for paddings
• e59c3b3 Hide overlay wrapper click visual highlight
• 73d869c Add a test for the iOS outside click workaround
• 6732039 Workaround an outside click listener issue (vaadin-dialog/vaadin-dialog#16)

• Fix closing on outside click when opens with contextmenu (vaadin/vaadin-context-menu#100)

• Use hosting element as a positioning / sizing / alignment constrained container only.
• Use flexbox to align and / or stretch the content part inside the constrained host element.
• Use the content part as the actual overlay. Themes should define borders / shadows / backgrounds on the content part.

• sort focusable elements by tabindex (https://github.com/vaadin/vaadin-overlay/pull/16)
• prevention of iron-overlay-canceled when opened (https://github.com/vaadin/vaadin-overlay/pull/14)

• implement focus-trap (#15)

• do not throw outside-click event on content click (#11)
• fix outside-click event fires 2 times on backdrop click (#12)
• add JSDoc: @event vaadin-overlay-close

• Handle backdrop click as outside click (https://github.com/vaadin/vaadin-overlay/pull/8)