diff --git a/README.md b/README.md index 06c02cc..eea332b 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,72 @@ -[![Build status](https://travis-ci.org/PolymerElements/iron-dropdown.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-dropdown) - -_[Demo and API docs](https://elements.polymer-project.org/elements/iron-dropdown)_ - - -## <iron-dropdown> - -`` is a generalized element that is useful when you have -hidden content (`dropdown-content`) that is revealed due to some change in -state that should cause it to do so. - -Note that this is a low-level element intended to be used as part of other -composite elements that cause dropdowns to be revealed. - -Examples of elements that might be implemented using an `iron-dropdown` -include comboboxes, menubuttons, selects. The list goes on. - -The `` element exposes attributes that allow the position -of the `dropdown-content` relative to the `dropdown-trigger` to be -configured. - -```html - -
Hello!
- -``` - -In the above example, the `
` assigned to the `dropdown-content` slot will be -hidden until the dropdown element has `opened` set to true, or when the `open` -method is called on the element. - -### Changes in 2.0 -- Removed the private property `_focusTarget` which was deprecated. -- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see example](demo/index.html)) -- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"` +[![Build status](https://travis-ci.org/PolymerElements/iron-dropdown.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-dropdown) + +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-dropdown)_ + + +## <iron-dropdown> + +`` is a generalized element that is useful when you have +hidden content (`dropdown-content`) that is revealed due to some change in +state that should cause it to do so. + +Note that this is a low-level element intended to be used as part of other +composite elements that cause dropdowns to be revealed. + +Examples of elements that might be implemented using an `iron-dropdown` +include comboboxes, menubuttons, selects. The list goes on. + +The `` element exposes attributes that allow the position +of the `dropdown-content` relative to the `dropdown-trigger` to be +configured. + +```html + +
Hello!
+ +``` + +In the above example, the `
` assigned to the `dropdown-content` slot will be +hidden until the dropdown element has `opened` set to true, or when the `open` +method is called on the element. + +### Changes in 2.0 +- Removed the private property `_focusTarget` which was deprecated. +- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`. +- `` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations. + +### Animations + +Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog +is opened or closed. Included in the component are: +- fade-in-animation +- fade-out-animation +- scale-up-animation +- scale-down-animation + +These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations. +This change reduces code size, and uses the platform. You can implement custom entry/exit animations using +CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g. + + + + +
Hello!
+ diff --git a/bower.json b/bower.json index a6d014a..e5072d8 100644 --- a/bower.json +++ b/bower.json @@ -21,14 +21,12 @@ "dependencies": { "polymer": "Polymer/polymer#1.9 - 2", "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2", - "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0", - "neon-animation": "PolymerElements/neon-animation#1 - 2" + "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#1 - 2", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2", "iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2", - "web-animations-js": "web-animations/web-animations-js#^2.2.0", "iron-image": "PolymerElements/iron-image#1 - 2", "web-component-tester": "^6.0.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" @@ -38,14 +36,12 @@ "dependencies": { "polymer": "Polymer/polymer#^1.9", "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", - "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0", - "neon-animation": "PolymerElements/neon-animation#^1.0.0" + "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", - "web-animations-js": "web-animations/web-animations-js#^2.2.0", "iron-image": "PolymerElements/iron-image#^1.0.0", "web-component-tester": "^4.0.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html deleted file mode 100644 index e2fdc44..0000000 --- a/demo/grow-height-animation.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - diff --git a/demo/index.html b/demo/index.html index 15f7480..bc3118b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,211 +1,210 @@ - - - - - - - iron-dropdown - - - - - - - - - - - - - - -

Basic

- - - - -

Alignment

- - - - -

Scroll actions

- - - - -

Content

- - - - - - - - - + + + + + + + iron-dropdown + + + + + + + + + + + + + +

Basic

+ + + + +

Alignment

+ + + + +

Scroll actions

+ + + + +

Content

+ + + + + + + + + diff --git a/demo/x-select.html b/demo/x-select.html index 3944411..b63565d 100644 --- a/demo/x-select.html +++ b/demo/x-select.html @@ -1,82 +1,71 @@ - - - - - - - - - - + + + + + + + + diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts index c49bff8..2b5b7ef 100644 --- a/iron-dropdown.d.ts +++ b/iron-dropdown.d.ts @@ -11,7 +11,6 @@ /// /// /// -/// /// /** @@ -36,8 +35,50 @@ * In the above example, the `
` assigned to the `dropdown-content` slot will be * hidden until the dropdown element has `opened` set to true, or when the `open` * method is called on the element. + * + * ### Changes in 2.0 + * - Removed the private property `_focusTarget` which was deprecated. + * - Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`. + * - `` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations + * + * ### Animations + * + * Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog + * is opened or closed. Included in the component are: + * - fade-in-animation + * - fade-out-animation + * - scale-up-animation + * - scale-down-animation + * + * These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations. + * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using + * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g. + * + * + * + * + *
Hello!
+ * */ -interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior, Polymer.NeonAnimationRunnerBehavior { +interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior { /** * The orientation against which to align the dropdown content @@ -54,18 +95,33 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, verticalAlign: string|null|undefined; /** - * An animation config. If provided, this will be used to animate the - * opening of the dropdown. Pass an Array for multiple animations. - * See `neon-animation` documentation for more animation configuration - * details. + * The class defining the entry animation. + */ + entryAnimation: string|null|undefined; + + /** + * The class defining the exit animation. + */ + exitAnimation: string|null|undefined; + + /** + * Deprecated, use `entryAnimation` and `exitAnimation` instead. + * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept + * here to not break bindings. Setting it won't have effects on the animation. + */ + animationConfig: object|null|undefined; + + /** + * Deprecated, use `entryAnimation` instead. + * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept + * here to not break bindings. Setting it won't have effects on the animation. */ openAnimationConfig: object|null|undefined; /** - * An animation config. If provided, this will be used to animate the - * closing of the dropdown. Pass an Array for multiple animations. - * See `neon-animation` documentation for more animation configuration - * details. + * Deprecated, use `exitAnimation` instead. + * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept + * here to not break bindings. Setting it won't have effects on the animation. */ closeAnimationConfig: object|null|undefined; @@ -101,51 +157,25 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, detached(): void; /** - * Called when the value of `opened` changes. - * Overridden from `IronOverlayBehavior` - */ - _openedChanged(): void; - - /** - * Overridden from `IronOverlayBehavior`. - */ - _renderOpened(): void; - - /** - * Overridden from `IronOverlayBehavior`. - */ - _renderClosed(): void; - - /** - * Apply focus to focusTarget or containedElement - */ - _applyFocus(): void; - - /** - * Called when animation finishes on the dropdown (when opening or - * closing). Responsible for "completing" the process of opening or - * closing the dropdown by positioning it or setting its display to - * none. - */ - _onNeonAnimationFinish(): void; - - /** - * Constructs the final animation config from different properties used - * to configure specific parts of the opening and closing animations. + * `iron-dropdown` doesn't depend anymore on `neon-animation`. + * This method was previously inherited from `Polymer.NeonAnimatableBehavior`, + * now is a no-op. */ - _updateAnimationConfig(): void; + cancelAnimation(): void; /** - * Updates the overlay position based on configured horizontal - * and vertical alignment. + * `iron-dropdown` doesn't depend anymore on `neon-animation`. + * This method was previously inherited from `Polymer.NeonAnimatableBehavior`, + * now is a no-op. */ - _updateOverlayPosition(): void; + playAnimation(type?: string, cookie?: object): void; /** - * Sets scrollAction according to the value of allowOutsideScroll. - * Prefer setting directly scrollAction. + * `iron-dropdown` doesn't depend anymore on `neon-animation`. + * This method was previously inherited from `Polymer.NeonAnimatableBehavior`, + * now is a no-op. */ - _allowOutsideScrollChanged(allowOutsideScroll: any): void; + getAnimationConfig(type: any): any; } interface HTMLElementTagNameMap { diff --git a/iron-dropdown.html b/iron-dropdown.html index 88985d7..7249cd6 100644 --- a/iron-dropdown.html +++ b/iron-dropdown.html @@ -11,7 +11,6 @@ - @@ -38,6 +37,48 @@ hidden until the dropdown element has `opened` set to true, or when the `open` method is called on the element. +### Changes in 2.0 +- Removed the private property `_focusTarget` which was deprecated. +- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`. +- `` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations + +### Animations + +Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog +is opened or closed. Included in the component are: +- fade-in-animation +- fade-out-animation +- scale-up-animation +- scale-down-animation + +These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations. +This change reduces code size, and uses the platform. You can implement custom entry/exit animations using +CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g. + + + + +
Hello!
+ + @demo demo/index.html --> @@ -46,21 +87,73 @@ -
- -
+ :host(.fade-in-animation) { + animation-name: fade-in-animation; + } + + @keyframes fade-in-animation { + from { + opacity: 0; + } + } + + :host(.fade-out-animation) { + animation-name: fade-out-animation; + } + + @keyframes fade-out-animation { + to { + opacity: 0; + } + } + + :host(.scale-up-animation) { + animation-name: scale-up-animation; + } + + @keyframes scale-up-animation { + from { + transform: scale(0); + } + } + + :host(.scale-down-animation) { + animation-name: scale-down-animation; + } + + @keyframes scale-down-animation { + to { + transform: scale(0); + } + } + + - -