Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1147)

Unified Diff: lib/src/paper-radio-button/paper-radio-button.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « lib/src/paper-progress/paper-progress.html ('k') | lib/src/paper-radio-button/test/basic.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: lib/src/paper-radio-button/paper-radio-button.html
diff --git a/lib/src/paper-radio-button/paper-radio-button.html b/lib/src/paper-radio-button/paper-radio-button.html
index 16aa02e2182b2695b9479dfb6f8ab9b88975de15..3a3d03d35c0a8fabbea6691cc01261a13ea9c6fc 100644
--- a/lib/src/paper-radio-button/paper-radio-button.html
+++ b/lib/src/paper-radio-button/paper-radio-button.html
@@ -1,4 +1,5 @@
<!--
+@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
@@ -8,12 +9,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/default-theme.html">
-<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
-<link rel="import" href="../iron-checked-element-behavior/iron-checked-element-behavior.html">
<!--
+Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
+
`paper-radio-button` is a button that can be either checked or unchecked.
User can tap the radio button to check or uncheck it.
@@ -38,6 +40,7 @@ Custom property | Description | Default
`--paper-radio-button-checked-color` | Radio button color when the input is checked | `--default-primary-color`
`--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
`--paper-radio-button-label-color` | Label color | `--primary-text-color`
+`--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px`
@group Paper Elements
@element paper-radio-button
@@ -46,7 +49,7 @@ Custom property | Description | Default
-->
<dom-module id="paper-radio-button">
- <template>
+ <template strip-whitespace>
<style>
:host {
display: inline-block;
@@ -66,7 +69,7 @@ Custom property | Description | Default
vertical-align: middle;
}
- :host #ink {
+ #ink {
position: absolute;
top: -16px;
left: -16px;
@@ -77,15 +80,21 @@ Custom property | Description | Default
pointer-events: none;
}
- :host #ink[checked] {
+ :host-context([dir="rtl"]) #ink {
+ right: -15px;
+ left: auto;
+ }
+
+ #ink[checked] {
color: var(--paper-radio-button-checked-ink-color, --default-primary-color);
}
- :host #offRadio {
+ #offRadio {
position: absolute;
box-sizing: content-box;
top: 0px;
left: 0px;
+ right: 0px;
width: 12px;
height: 12px;
border-radius: 50%;
@@ -95,11 +104,12 @@ Custom property | Description | Default
transition: border-color 0.28s;
}
- :host #onRadio {
+ #onRadio {
position: absolute;
box-sizing: content-box;
top: 4px;
left: 4px;
+ right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
@@ -123,12 +133,17 @@ Custom property | Description | Default
position: relative;
display: inline-block;
vertical-align: middle;
- margin-left: 10px;
+ margin-left: var(--paper-radio-button-label-spacing, 10px);
white-space: normal;
pointer-events: none;
color: var(--paper-radio-button-label-color, --primary-text-color);
}
+ :host-context([dir="rtl"]) #radioLabel {
+ margin-left: 0px;
+ margin-right: var(--paper-radio-button-label-spacing, 10px);
+ }
+
#radioLabel[hidden] {
display: none;
}
@@ -157,11 +172,9 @@ Custom property | Description | Default
<div id="radioContainer">
<div id="offRadio"></div>
<div id="onRadio"></div>
- <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
</div>
<div id="radioLabel"><content></content></div>
-
</template>
<script>
@@ -169,8 +182,7 @@ Custom property | Description | Default
is: 'paper-radio-button',
behaviors: [
- Polymer.PaperInkyFocusBehavior,
- Polymer.IronCheckedElementBehavior
+ Polymer.PaperCheckedElementBehavior
],
hostAttributes: {
@@ -192,41 +204,17 @@ Custom property | Description | Default
* @event iron-change
*/
- ariaActiveAttribute: {
- value: 'aria-checked'
- }
- },
-
- attached: function() {
- this._isReady = true;
-
- // Don't stomp over a user-set aria-label.
- if (!this.getAttribute('aria-label')) {
- this.updateAriaLabel();
+ ariaActiveAttribute: {
+ type: String,
+ value: 'aria-checked'
}
},
- /**
- * Update the checkbox aria-label. This is a temporary workaround not
- * being able to observe changes in <content>
- * (see: https://github.com/Polymer/polymer/issues/1773)
- *
- * Call this if you manually change the contents of the checkbox
- * and want the aria-label to match the new contents.
- */
- updateAriaLabel: function() {
- this.setAttribute('aria-label', Polymer.dom(this).textContent.trim());
- },
-
- _buttonStateChanged: function() {
- if (this.disabled) {
- return;
- }
- if (this._isReady) {
- this.checked = this.active;
- }
+ // create the element ripple inside the `radioContainer`
+ _createRipple: function() {
+ this._rippleContainer = this.$.radioContainer;
+ return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
}
})
</script>
-
</dom-module>
« no previous file with comments | « lib/src/paper-progress/paper-progress.html ('k') | lib/src/paper-radio-button/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698