v1.0.0

Live Demo →
API Documentation →

Features:

• Notification element
• Width is set from content by default
• Setting position to top-stretch or bottom-stretch expands to the full screen width
• Support for multiple notifications
• Using Lumo theme by default
• The styles from the parent scope apply to the notification content, making it easier to customize
• If the notification is used in the global DOM scope, then global styles apply to the notification card content.
• The default duration is 5 seconds

Usage:

<vaadin-notification opened duration="4000" position="top-end">
   <template>
     This notification is shown in the top right corner
   </template>
</vaadin-notification

Changes Since v1.0.0-beta4:

• e206568 Update the styling example title

v1.0.0-beta4 — Styling Change

Live Demo →
API Documentation →

Styling Change

• The styles from the parent scope now apply to the notification content, making it easier to customize (no longer need to wrap the content in custom element just for the styling purpose)

Changes Since v1.0.0-beta3:

• 47217ba Fix test
• fc0dfb3 Remove underscores
• 317b0fe Support only for non-custom elements following vaadin-overlay change
• 0664e3a Separate shadow and shady dom logic following vaadin-overlay change
• 9add163 Simplify demo
• a1838b5 Polish and implement review suggestions
• 9f0839e Minor improvement
• 6aa3cdf Update demos
• a43f7d9 Add styling tests and fix existing
• 644c707 Initial alignment of the styling process with vaadin-overlay
• 761d642 Adding description file for Vaadin Directory

v1.0.0-beta3 — Default duration change

Live Demo →
API Documentation →

Updates:

• The default duration has been changed to 5 seconds
• The position="top" has been changed to make newest notifications appear at the top

Changes Since v1.0.0-beta2:

• 1760864 Align with skeleton: refer to Vaadin components instead of elements
• 8b49cee Fix failing tests in polyfilled browsers
• 2da5082 Remove flaky test included in another suite
• fd2cd68 Adjust the default duration to 5s
• b5ee614 Align with skeleton: update stylelint and gulp-stylelint
• 84bea2a Don't auto-open notifications in demos (#49)
• 2421668 Add test for stacking top notifications
• c445190 Enable tests for Safari 9
• 7b98db6 Set top notifications to appear newest at the top

v1.0.0-beta2 — Data Binding Support

Live Demo →
API Documentation →

Fixes

• Data binding now works in the notification template

Changes Since v1.0.0-beta1:

• 90896f4 Fix demo and API docs links in README
• a8ba248 Small adjustment to slotted button margins
• 1978f75 Revert color palette and introduce a flex container for the content part
• d02334f Add test against iOS 11 for iPhone
• 0a9e21e Support data-binding in notification template
• c59ace5 Cleanup tests: remove unused fixture, fix typos
• ccc909e Update default Lumo theme

v1.0.0-beta1 — First Beta version using Lumo theme by default

Live Demo →
API Documentation →

Features:

• Notification element
• Width is set from content by default
• Setting position to top-stretch or bottom-stretch expands to the full screen width
• Support for multiple notifications
• Using Lumo theme by default

Usage:

<vaadin-notification opened duration="4000" position="top-end">
   <template>
     This notification is shown in the top right corner
   </template>
</vaadin-notification

Changes Since v1.0.0-alpha7:

• 93d3464 Align with skeleton: use node 8.9 in CI, bump polymer-cli to 1.6.0
• ed7c21b Align class names with other vaadin elements
• d133456 Update eslint and stylelint to check ./src and ./theme

v1.0.0-alpha7

Live Demo →
API Documentation →

Changes Since v1.0.0-alpha6:

• 16c3b48 Bump analysis.json

• 0e40767 Make notification card to calculate width from content

• d573529 Simplify Lumo theme

  Use the overlay mixin from the Lumo styles.

  Force positioning for the cards, so that the stacking order doesn’t
  change when they are transitioned.

• 204afc1 Bump analysis.json

• bcee098 Rename overlay element to container

• a6b7aa8 Small fixes to demos

• 611d371 Align with skeleton: update eslint-plugin-html and gulp-stylelint

• 7044c72 Sync with skeleton: Switch back to using function closures

v1.0.0-alpha6 — Lumo version

Live Demo →
API Documentation →

⚠️ Breaking Changes:

• The element now uses vaadin-lumo-styles dependency instead of vaadin-valo-styles. When using with other Vaadin Elements, installing latest alpha versions is strongly recommended, to avoid having both packages installed and imported.

Changes Since v1.0.0-alpha5:

• 0c78143 Pin vaadin-radio-button to lumo version [skip ci]
• 11305a4 Fix build
• acb7b2b Migrate Valo to Lumo

v1.0.0-alpha5 — webcomponents.org demo fix

Live Demo →
API Documentation →

Changes Since v1.0.0-alpha4:

• 8d17a99 Align with skeleton: add separate file for test suites
• 9f526be Update screenshot to match inline demo
• b69973c Update inline demo: use position to prevent wrapping
• 99b4a1d Remove test ignore
• 7ec74ff Update polymer lint in CI to check ./src and ./theme
• f649638 Replace old styling docs link with the ThemableMixin link
• 9eca160 Edit demos: fix duration text field width, use vaadin-button
• 87215b4 Update demo helpers, use shared styles in demos
• 8006235 Remove duplicate import

v1.0.0-alpha4 — Use Valo theme by default

Live Demo →
API Documentation →

⚠️ Breaking Changes:

• The element now uses Valo theme by default
• The position property is now used instead of verticalAlign and horizontalAlign
• Removed styling parts for regions, those are now considered as implementation detail
• Added new styling parts: overlay and content on the vaadin-notification-card
• The CSS z-index property is now set to 1000 on the vaadin-notification-overlay

Changes Since v1.0.0-alpha3:

• 79b8473 Fix gulp version task
• 42ccc0d Add test for opening attribute
• 1048252 Add opening attribute to fix issue in Safari
• c051851 Add typography import
• 5518794 Drop default theme
• 461f4fa Add Getting Started and File Structure docs sections [skip ci]
• 4e5fada Update Valo dependency
• 0826970 Fix tests
• 990e5da Initial Valo theme
• 250147f Switch to single property observer
• 88c7b2f Fix tests and update analysis.json
• 278e876 Fix demos
• d2376bb Replace verticalAlign and horizontalAlign with position property
• 15cdc4a Update styling documentation
• f569d74 Remove ready
• 83721af Fix linter error
• 73ed214 Better themability for the cards
  • Remove ThemableMixin and parts from the overlay
  • Enable margin collapsing on the cards
  • Move overlay and content parts to the card
• 71456a8 Remove <vaadin-overlay> dependency from <vaadin-notification-overlay>
• 8821337 Use Vaadin.ElementMixin
• 1502363 Add ThemableMixin documentation to Styling docs.
• f257089 Add z-index 1000
• 463e878 Make 'left' right to be right

v1.0.0-alpha3

Live Demo →
API Documentation →

Changes Since v1.0.0-alpha2:

• 02afba1 Fix iOS Safari cutting notifications when navbar is visible
• 35b8511 Increase duration to 7 seconds by default
• c3c97b0 Adding animations to notification-card. Fixes #10