RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/paper-fab/bower.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "paper-fab",
+  "version": "1.0.1",
+  "description": "A material design floating action button",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "button"
+  ],
+  "main": "paper-fab.html",
+  "ignore": [],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-fab"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-fab",
+  "dependencies": {
+    "paper-ripple": "polymerelements/paper-ripple#^1.0.0",
+    "paper-material": "polymerelements/paper-material#^1.0.0",
+    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0",
+    "iron-icons": "polymerelements/iron-icons#^1.0.0",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-fab/demo/index.html ADDED Viewed

@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>paper-fab demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-fab.html">
+  <style is="custom-style">
+    .horizontal-section {
+      min-width: 200px;
+    }
+    paper-fab {
+      display: block;
+      margin-bottom:24px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    paper-fab.blue {
+      --paper-fab-background: var(--paper-light-blue-500);
+    }
+    paper-fab.red {
+      --paper-fab-background: var(--paper-red-500);
+    }
+    paper-fab.green {
+      --paper-fab-background: var(--paper-green-500);
+    }
+    paper-fab.orange {
+      --paper-fab-background: var(--paper-orange-500);
+    }
+  </style>
+</head>
+<body>
+  <div class="horizontal center-justified layout">
+    <div>
+      <h4>Enabled</h4>
+      <div class="horizontal-section">
+        <paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
+        <paper-fab icon="create" title="create" tabindex="0"></paper-fab>
+        <paper-fab icon="favorite" title="heart" tabindex="0"></paper-fab>
+        <paper-fab mini icon="done" title="done" tabindex="0"></paper-fab>
+        <paper-fab mini icon="reply" title="reply" tabindex="0"></paper-fab>
+      </div>
+    </div>
+    <div>
+      <h4>Disabled</h4>
+      <div class="horizontal-section">
+        <paper-fab disabled icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
+        <paper-fab disabled icon="create" title="create" tabindex="0"></paper-fab>
+        <paper-fab disabled icon="favorite" title="heart" tabindex="0"></paper-fab>
+        <paper-fab disabled mini icon="done" title="done" tabindex="0"></paper-fab>
+        <paper-fab disabled mini icon="reply" title="reply" tabindex="0"></paper-fab>
+      </div>
+    </div>
+    <div>
+      <h4>Colors</h4>
+      <div class="horizontal-section">
+        <paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0" class="blue"></paper-fab>
+        <paper-fab icon="create" title="create" tabindex="0" class="red"></paper-fab>
+        <paper-fab icon="favorite" title="heart" tabindex="0" class="orange"></paper-fab>
+        <paper-fab mini icon="done" title="done" tabindex="0" class="green"></paper-fab>
+        <paper-fab mini icon="reply" title="reply" tabindex="0" class="blue"></paper-fab>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/app/assets/components/paper-fab/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <title>paper-fab</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/paper-fab/paper-fab.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
@@ -7,174 +8,152 @@ 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
 -->
-<!--
-@group Paper Elements
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+<!--
 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
 `paper-fab` is a floating action button. It contains an image placed in the center and
 comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
 the user touches the button, a ripple effect emanates from the center of the button.
-You may import `core-icons` to use with this element, or provide an URL to a custom icon.
-See `core-iconset` for more information about how to use a custom icon set.
+You may import `iron-icons` to use with this element, or provide a URL to a custom icon.
+See `iron-iconset` for more information about how to use a custom icon set.
 Example:
-    <link href="path/to/core-icons/core-icons.html" rel="import">
+    <link href="path/to/iron-icons/iron-icons.html" rel="import">
     <paper-fab icon="add"></paper-fab>
     <paper-fab mini icon="favorite"></paper-fab>
     <paper-fab src="star.png"></paper-fab>
-Styling
--------
-Style the button with CSS as you would a normal DOM element. If you are using the icons
-provided by `core-icons`, the icon will inherit the foreground color of the button.
-    /* make a blue "cloud" button */
-    <paper-fab icon="cloud" style="color: blue;"></paper-fab>
-By default, the ripple is the same color as the foreground at 25% opacity. You may
-customize the color using this selector:
-    /* make #my-button use a blue ripple instead of foreground color */
-    #my-button::shadow #ripple {
-      color: blue;
-    }
-The opacity of the ripple is not customizable via CSS.
+### Styling
-Accessibility
--------------
+The following custom properties and mixins are available for styling:
-The button is accessible by default if you use the `icon` property. By default, the
-`aria-label` attribute will be set to the `icon` property. If you use a custom icon,
-you should ensure that the `aria-label` attribute is set.
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-fab-background` | The background color of the button | `--paper-indigo-500`
+`--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300`
+`--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500`
+`--paper-fab` | Mixin applied to the button | `{}`
+`--paper-fab-mini` | Mixin applied to a mini button | `{}`
+`--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
-    <paper-fab src="star.png" aria-label="star"></paper-fab>
+@group Paper Elements
+@demo demo/index.html
-@element paper-fab
-@extends paper-button-base
-@status unstable
 -->
-<link href="../polymer/polymer.html" rel="import">
-<link href="../core-icon/core-icon.html" rel="import">
-<link href="../paper-button/paper-button-base.html" rel="import">
-<link href="../paper-ripple/paper-ripple.html" rel="import">
-<link href="../paper-shadow/paper-shadow.html" rel="import">
-<polymer-element name="paper-fab" extends="paper-button-base" attributes="src icon mini" role="button">
-  <template>
-    <style>
-      :host {
-        display: inline-block;
-        position: relative;
-        outline: none;
-        -webkit-user-select: none;
-        user-select: none;
-        cursor: pointer;
-        z-index: 0;
-        box-sizing: border-box;
-        width: 56px;
-        height: 56px;
-        background: #d23f31;
-        color: #fff;
-        border-radius: 50%;
-        padding: 16px;
-      }
-      :host([mini]) {
-        width: 40px;
-        height: 40px;
-        padding: 8px;
-      }
-      :host([disabled]) {
-        color: #c9c9c9;
-        pointer-events: none;
-        cursor: auto;
-      }
-      #ripple {
-        pointer-events: none;
-        z-index: -1;
-      }
-      #shadow {
-        border-radius: inherit;
-        pointer-events: none;
-      }
+<dom-module id="paper-fab">
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      outline: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+      box-sizing: border-box;
+      min-width: 0;
+      width: 56px;
+      height: 56px;
+      background: var(--paper-fab-background, --paper-indigo-500);
+      color: var(--text-primary-color);
+      border-radius: 50%;
+      padding: 16px;
+      z-index: 0;
+      @apply(--paper-fab);
+    }
-      #icon {
-        display: block;
-        pointer-events: none;
-      }
-    </style>
+    :host([mini]) {
+      width: 40px;
+      height: 40px;
+      padding: 8px;
-    <template if="{{raised}}">
-      <paper-shadow id="shadow" fit animated></paper-shadow>
-    </template>
+      @apply(--paper-fab-mini);
+    }
-    <!-- to position to ripple behind the icon -->
-    <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
+    :host([disabled]) {
+      color: var(--paper-fab-disabled-text, --paper-grey-500);
+      background: var(--paper-fab-disabled-background, --paper-grey-300);
+      @apply(--paper-fab-disabled);
+    }
+    paper-material {
+      border-radius: inherit;
+    }
+  </style>
+  <template>
+    <paper-ripple></paper-ripple>
+    <paper-material class="content fit flex layout vertical center-center" elevation="[[elevation]]" animated>
+      <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
+    </paper-material>
   </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'paper-fab',
+    behaviors: [
+      Polymer.PaperButtonBehavior
+    ],
+    properties: {
+      /**
+       * The URL of an image for the icon. If the src property is specified,
+       * the icon property should not be.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: {
+        type: String,
+        value: ''
+      },
-  <script>
-    Polymer({
-      publish: {
-        /**
-         * The URL of an image for the icon. If the src property is specified,
-         * the icon property should not be.
-         *
-         * @attribute src
-         * @type string
-         * @default ''
-         */
-        src: '',
-        /**
-         * Specifies the icon name or index in the set of icons available in
-         * the icon's icon set. If the icon property is specified,
-         * the src property should not be.
-         *
-         * @attribute icon
-         * @type string
-         * @default ''
-         */
-        icon: '',
-        /**
-         * Set this to true to style this is a "mini" FAB.
-         *
-         * @attribute mini
-         * @type boolean
-         * @default false
-         */
-        mini: false,
-        raised: true,
-        recenteringTouch: true,
-        fill: false
+      /**
+       * Specifies the icon name or index in the set of icons available in
+       * the icon's icon set. If the icon property is specified,
+       * the src property should not be.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: {
+        type: String,
+        value: ''
       },
-      iconChanged: function(oldIcon) {
-        var label = this.getAttribute('aria-label');
-        if (!label || label === oldIcon) {
-          this.setAttribute('aria-label', this.icon);
-        }
+      /**
+       * Set this to true to style this is a "mini" FAB.
+       *
+       * @attribute mini
+       * @type boolean
+       * @default false
+       */
+      mini: {
+        type: Boolean,
+        value: false
       }
+    }
-    });
-  </script>
-</polymer-element>
+  });
+</script>

data/app/assets/components/paper-fab/test/a11y.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+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>
+  <meta charset="UTF-8">
+  <title>paper-fab a11y tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../core-icons/core-icons.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-fab.html">
+</head>
+<body>
+  <test-fixture id="A11yFabs">
+    <template>
+      <paper-fab id="fab1" icon="add"></paper-fab>
+      <paper-fab id="fab2" icon="add" disabled></paper-fab>
+      <paper-fab id="fab3" icon="add" aria-label="custom"></paper-fab>
+    </template>
+  </test-fixture>
+  <script>
+    var f1;
+    var f2;
+    var f3;
+    setup(function() {
+      var fabs = fixture('A11yFabs');
+      f1 = fabs[0];
+      f2 = fabs[1];
+      f3 = fabs[2];
+    });
+    test('aria role is a button', function() {
+      assert.strictEqual(f1.getAttribute('role'), 'button');
+    });
+    test('aria-disabled is set', function() {
+      assert.ok(f2.hasAttribute('aria-disabled'));
+      f2.removeAttribute('disabled');
+      assert.strictEqual(f2.getAttribute('aria-disabled'), 'false');
+    });
+    test('aria-label is set');
+    test('user-defined aria-label is preserved', function() {
+      assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
+      f3.icon = 'arrow-forward';
+      assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-fab/test/basic.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+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>
+  <meta charset="UTF-8">
+  <title>paper-fab basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-fab.html">
+</head>
+<body>
+  <test-fixture id="TrivialFab">
+    <template>
+      <div style="line-height:30px;">
+        <paper-fab id="fab1" icon="add"></paper-fab>
+      </div>
+    </template>
+  </test-fixture>
+  <test-fixture id="SrcFab">
+    <template>
+      <paper-fab src="add.png"></paper-fab>
+    </template>
+  </test-fixture>
+  <script>
+    var f1;
+    var f2;
+    function centerOf(element) {
+      var rect = element.getBoundingClientRect();
+      return {left: rect.left + rect.width / 2, top: rect.top + rect.height / 2};
+    }
+    function approxEqual(p1, p2) {
+      return Math.round(p1.left) == Math.round(p2.left) && Math.round(p1.top) == Math.round(p2.top);
+    }
+    setup(function() {
+      f1 = fixture('TrivialFab').querySelector('#fab1');
+      f2 = fixture('SrcFab');
+    });
+    test('applies an icon specified by the `icon` attribute', function() {
+      assert.strictEqual(!!f1.$.icon.usesSrcAttribute, false);
+      assert.ok(Polymer.dom(f1.$.icon.root).querySelector('svg'));
+    });
+    test('applies an icon specified by the `src` attribute', function() {
+      assert.strictEqual(f2.$.icon._usesIconset(), false);
+      assert.ok(f2.$.icon._img);
+    });
+    test('renders correctly independent of line height', function() {
+      assert.ok(approxEqual(centerOf(f1.$.icon), centerOf(f1)));
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-fab/test/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+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>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-fab tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html',
+      'a11y.html'
+    ]);
+  </script>
+</body>
+</html>