Commit 7909ce40 authored by dpapad's avatar dpapad Committed by Commit Bot

WebUI: Update Polymer paper-{tabs,spinner,listbox} to 2.x.

Bug: 738611
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ic3ebeca61c483721c96b597c406910637d920fcb
Reviewed-on: https://chromium-review.googlesource.com/887558Reviewed-by: default avatarHector Carmona <hcarmona@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532248}
parent 52c31b74
......@@ -40,15 +40,15 @@
"paper-icon-button": "PolymerElements/paper-icon-button#1.1.6",
"paper-input": "PolymerElements/paper-input#1.1.21",
"paper-item": "PolymerElements/paper-item#1.2.1",
"paper-listbox": "PolymerelEments/paper-listbox#1.1.2",
"paper-listbox": "PolymerelEments/paper-listbox#2.0.0",
"paper-progress": "PolymerElements/paper-progress#1.0.10",
"paper-radio-button": "PolymerElements/paper-radio-button#1.4.0",
"paper-radio-group": "PolymerElements/paper-radio-group#1.2.0",
"paper-ripple": "PolymerElements/paper-ripple#1.0.9",
"paper-slider": "PolymerElements/paper-slider#2.0.2",
"paper-spinner": "PolymerElements/paper-spinner#1.2.0",
"paper-spinner": "PolymerElements/paper-spinner#2.0.0",
"paper-styles": "PolymerElements/paper-styles#1.3.1",
"paper-tabs": "PolymerElements/paper-tabs#1.6.2",
"paper-tabs": "PolymerElements/paper-tabs#2.0.0",
"paper-toggle-button": "PolymerElements/paper-toggle-button#1.3.0",
"paper-tooltip": "PolymerElements/paper-tooltip#1.1.4",
"polymer": "Polymer/polymer#1.11.2",
......
{
"name": "paper-listbox",
"version": "1.1.2",
"version": "2.0.0",
"description": "Implements an accessible material design listbox",
"authors": "The Polymer Authors",
"keywords": [
......@@ -8,10 +8,7 @@
"polymer",
"listbox"
],
"main": [
"paper-listbox.html",
"paper-sublistbox.html"
],
"main": "paper-listbox.html",
"private": true,
"repository": {
"type": "git",
......@@ -21,18 +18,41 @@
"homepage": "https://github.com/PolymerElements/paper-listbox",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
"polymer": "Polymer/polymer#1.9 - 2",
"iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"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",
"paper-item": "PolymerElements/paper-item#1 - 2",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}
......@@ -66,14 +66,14 @@ of a listbox item will also focus it.
display: block;
padding: 8px 0;
background: var(--paper-listbox-background-color, --primary-background-color);
color: var(--paper-listbox-color, --primary-text-color);
background: var(--paper-listbox-background-color, var(--primary-background-color));
color: var(--paper-listbox-color, var(--primary-text-color));
@apply(--paper-listbox);
@apply --paper-listbox;
}
</style>
<content></content>
<slot></slot>
</template>
</dom-module>
......
{
"name": "paper-spinner",
"version": "1.2.0",
"version": "2.0.0",
"description": "A material design spinner",
"authors": [
"The Polymer Authors"
......@@ -20,19 +20,37 @@
"homepage": "https://github.com/PolymerElements/paper-spinner",
"ignore": [],
"dependencies": {
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"main": [
"paper-spinner.html",
"paper-spinner-lite.html"
]
],
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "Polymer/web-component-tester#^4.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}
/** @polymerBehavior */
Polymer.PaperSpinnerBehavior = {
listeners: {
'animationend': '__reset',
'webkitAnimationEnd': '__reset'
},
properties: {
/**
* Displays the spinner.
......@@ -48,7 +43,7 @@
__altChanged: function(alt) {
// user-provided `aria-label` takes precedence over prototype default
if (alt === this.getPropertyInfo('alt').value) {
if (alt === 'loading') {
this.alt = this.getAttribute('aria-label') || alt;
} else {
this.__setAriaHidden(alt==='');
......
......@@ -7,7 +7,6 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><html><head><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="paper-spinner-behavior.html">
<link rel="import" href="paper-spinner-styles.html">
......@@ -49,7 +48,7 @@ Custom property | Description | Default
<template strip-whitespace="">
<style include="paper-spinner-styles"></style>
<div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]">
<div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
<div class="spinner-layer">
<div class="circle-clipper left"></div>
<div class="circle-clipper right"></div>
......
......@@ -75,23 +75,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
height: 100%;
opacity: 0;
white-space: nowrap;
border-color: var(--paper-spinner-color, --google-blue-500);
border-color: var(--paper-spinner-color, var(--google-blue-500));
}
.layer-1 {
border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
border-color: var(--paper-spinner-layer-1-color, var(--google-blue-500));
}
.layer-2 {
border-color: var(--paper-spinner-layer-2-color, --google-red-500);
border-color: var(--paper-spinner-layer-2-color, var(--google-red-500));
}
.layer-3 {
border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
border-color: var(--paper-spinner-layer-3-color, var(--google-yellow-500));
}
.layer-4 {
border-color: var(--paper-spinner-layer-4-color, --google-green-500);
border-color: var(--paper-spinner-layer-4-color, var(--google-green-500));
}
/**
......
{
"name": "paper-tabs",
"version": "1.6.2",
"version": "2.0.0",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Material design tabs",
"private": true,
......@@ -19,26 +19,54 @@
"url": "git://github.com/PolymerElements/paper-tabs.git"
},
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
"iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
"iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
"iron-icon": "PolymerElements/iron-icon#1 - 2",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#1 - 2",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#1 - 2",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
"paper-behaviors": "PolymerElements/paper-behaviors#1 - 2",
"paper-icon-button": "PolymerElements/paper-icon-button#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"polymer": "Polymer/polymer#1.9 - 2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
"iron-pages": "PolymerElements/iron-pages#1 - 2",
"iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"ignore": []
"variants": {
"1.x": {
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.9"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"ignore": [],
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}
......@@ -44,10 +44,10 @@ In order to apply the `Roboto` font to this element, make sure you've imported `
<template>
<style>
:host {
@apply(--layout-inline);
@apply(--layout-center);
@apply(--layout-center-justified);
@apply(--layout-flex-auto);
@apply --layout-inline;
@apply --layout-center;
@apply --layout-center-justified;
@apply --layout-flex-auto;
position: relative;
padding: 0 12px;
......@@ -55,8 +55,8 @@ In order to apply the `Roboto` font to this element, make sure you've imported `
cursor: pointer;
vertical-align: middle;
@apply(--paper-font-common-base);
@apply(--paper-tab);
@apply --paper-font-common-base;
@apply --paper-tab;
}
:host(:focus) {
......@@ -71,16 +71,16 @@ In order to apply the `Roboto` font to this element, make sure you've imported `
height: 100%;
transform: translateZ(0);
transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
@apply(--layout-horizontal);
@apply(--layout-center-center);
@apply(--layout-flex-auto);
@apply(--paper-tab-content);
@apply --layout-horizontal;
@apply --layout-center-center;
@apply --layout-flex-auto;
@apply --paper-tab-content;
}
:host(:not(.iron-selected)) > .tab-content {
opacity: 0.8;
@apply(--paper-tab-content-unselected);
@apply --paper-tab-content-unselected;
}
:host(:focus) .tab-content {
......@@ -89,18 +89,18 @@ In order to apply the `Roboto` font to this element, make sure you've imported `
}
paper-ripple {
color: var(--paper-tab-ink, --paper-yellow-a100);
color: var(--paper-tab-ink, var(--paper-yellow-a100));
}
.tab-content > ::content > a {
@apply(--layout-flex-auto);
.tab-content > ::slotted(a) {
@apply --layout-flex-auto;
height: 100%;
}
</style>
<div class="tab-content">
<content></content>
<slot></slot>
</div>
</template>
......
......@@ -59,8 +59,8 @@ Example:
<pre><code>
&lt;style is="custom-style">
.link {
&#64;apply(--layout-horizontal);
&#64;apply(--layout-center-center);
&#64;apply --layout-horizontal;
&#64;apply --layout-center-center;
}
&lt;/style>
......@@ -86,6 +86,8 @@ Custom property | Description | Default
`--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
`--paper-tabs-selection-bar` | Mixin applied to the selection bar | `{}`
`--paper-tabs` | Mixin applied to the tabs | `{}`
`--paper-tabs-content` | Mixin applied to the content container of tabs | `{}`
`--paper-tabs-container` | Mixin applied to the layout container of tabs | `{}`
@hero hero.svg
@demo demo/index.html
......@@ -95,8 +97,8 @@ Custom property | Description | Default
<template>
<style>
:host {
@apply(--layout);
@apply(--layout-center);
@apply --layout;
@apply --layout-center;
height: 48px;
font-size: 14px;
......@@ -108,11 +110,11 @@ Custom property | Description | Default
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
@apply(--paper-tabs);
@apply --paper-tabs;
}
:host-context([dir=rtl]) {
@apply(--layout-horizontal-reverse);
@apply --layout-horizontal-reverse;
}
#tabsContainer {
......@@ -120,12 +122,14 @@ Custom property | Description | Default
height: 100%;
white-space: nowrap;
overflow: hidden;
@apply(--layout-flex-auto);
@apply --layout-flex-auto;
@apply --paper-tabs-container;
}
#tabsContent {
height: 100%;
flex-basis: auto;
@apply --paper-tabs-content;
}
#tabsContent.scrollable {
......@@ -135,14 +139,14 @@ Custom property | Description | Default
#tabsContent:not(.scrollable),
#tabsContent.scrollable.fit-container {
@apply(--layout-horizontal);
@apply --layout-horizontal;
}
#tabsContent.scrollable.fit-container {
min-width: 100%;
}
#tabsContent.scrollable.fit-container > ::content > * {
#tabsContent.scrollable.fit-container > ::slotted(*) {
/* IE - prevent tabs from compressing when they should scroll. */
flex: 1 0 auto;
}
......@@ -165,16 +169,16 @@ Custom property | Description | Default
#selectionBar {
position: absolute;
height: 2px;
height: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
border-bottom: 2px solid var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100));
transform: scale(0);
transform-origin: left center;
transition: transform;
@apply(--paper-tabs-selection-bar);
@apply --paper-tabs-selection-bar;
}
#selectionBar.align-bottom {
......@@ -192,7 +196,7 @@ Custom property | Description | Default
transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
#tabsContent > ::content > *:not(#selectionBar) {
#tabsContent > ::slotted(:not(#selectionBar)) {
height: 100%;
}
</style>
......@@ -202,7 +206,7 @@ Custom property | Description | Default
<div id="tabsContainer" on-track="_scroll" on-down="_down">
<div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]">
<div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div>
<content select="*"></content>
<slot></slot>
</div>
</div>
......
......@@ -228,9 +228,9 @@ Tree link: https://github.com/PolymerElements/paper-item/tree/v1.2.1
Name: paper-listbox
Repository: https://github.com/PolymerelEments/paper-listbox.git
Tree: v1.1.2
Revision: b0fde50f57db3e8e4926e9d046be9d3c159a2bff
Tree link: https://github.com/PolymerelEments/paper-listbox/tree/v1.1.2
Tree: v2.0.0
Revision: 556e366eada2a75ad2c2df52a0b80baee66f9390
Tree link: https://github.com/PolymerelEments/paper-listbox/tree/v2.0.0
Name: paper-progress
Repository: https://github.com/PolymerElements/paper-progress.git
......@@ -264,9 +264,9 @@ Tree link: https://github.com/PolymerElements/paper-slider/tree/v2.0.2
Name: paper-spinner
Repository: https://github.com/PolymerElements/paper-spinner.git
Tree: v1.2.0
Revision: 66dc50a940aa9a3a067137defe1712aa85de6f35
Tree link: https://github.com/PolymerElements/paper-spinner/tree/v1.2.0
Tree: v2.0.0
Revision: 9667b7c6ae44986e4faa6c8c6ebed035fb2daaa5
Tree link: https://github.com/PolymerElements/paper-spinner/tree/v2.0.0
Name: paper-styles
Repository: https://github.com/PolymerElements/paper-styles.git
......@@ -276,9 +276,9 @@ Tree link: https://github.com/PolymerElements/paper-styles/tree/v1.3.1
Name: paper-tabs
Repository: https://github.com/PolymerElements/paper-tabs.git
Tree: v1.6.2
Revision: fc3df3875f97cbcee8cfa8f4895d86a4fd2925c7
Tree link: https://github.com/PolymerElements/paper-tabs/tree/v1.6.2
Tree: v2.0.0
Revision: 775a9f019072a58b6a8a936f79450cd01b3b2cba
Tree link: https://github.com/PolymerElements/paper-tabs/tree/v2.0.0
Name: paper-toggle-button
Repository: https://github.com/PolymerElements/paper-toggle-button.git
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment