fxedel/toggle-icon

toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.

toggle-icon's Issues

Use "tap" event instead of "click"

Hi,

An improvement could be to use "tap" event instead of "click", it will allow a better behavior when use in mobile.
Thanks.

Regards,
Alexandre

Changing version for 1.1

Hi,
could you switch to a pure semver for the latest release, that is 1.1 => 1.1.0
It makes the update automatic for one of my component!
Thanks in advance,
Pascal

Tests

There should be a tests that checks/unchecks the icon-toggle using various methods (perform click, set checked, set active) and tests if the displayed styles are correct (right icon visible, right classes set, right styles applied).

The tests can then be automated via Travis

v1.3.0 is doing BC breaks without a warning

@fxedel

According to Semantic versioning 2.0.0

Bug fixes not affecting the API increment is a patch version, backward compatible API additions/changes increment the minor version, and backward incompatible API changes increment the major version.

You have updated to polymer 2.x and released a minor version, which caused all our apps build to break now.
Updating to pure polymer 2.x element must be published in a major release

I am using version 1.1.2 which is resolved now by bower to 1.3.0 as it must not break our apps , but it does.

Please consider solving this by releasing a new version and adding a warning in the changelog for version 1.3.01

Add a default value to the animation property and fix backward compatibility

following the recent update, I had to:

• change from active to checked because the backward compatibility was not working properly
• explicitly configure the animation property, or it would break in line#257 => please provide a default value for this property!

on-click/tap still works if disabled is true.

The on-tap event still works if you have disabled attribute set to true.
Don't know if this is expected behavior?

both paper-icon-buttons visible Chrome

They are both displayed over each other instead of only the checked or not-checked.

Only in Chrome, not in Firefox.

cc @MeTaNoV

toggle-icon-0 toggle-icon-1 toggle-icon-2 toggle-icon-3

Can you please tell me where this Classes are defined? Which file? Can't find it... :(

Your component toggle-icon is featured in a Vaadin blog

Hi fxedel,

Just recently, I wrote the blog Choose these toggling icon web components for your next project featuring toggle-icon. It got awesome animations and I like it a lot.

Feel free to drop a comment down below the comment section or in this tweet.

Cheers,
Binh

Icon does not change in Chrome

Derived from GeoloeG/gold-password-input#13.

Description

When you click on a toggle-icon and the icon-checked (or similar) property is set, the #unchecked paper-icon-button should hide and the #checked paper-icon-button should show.

Expected outcome

The visibility of both paper-icon-button toggles.

Actual outcome

Both paper-icon-buttons are always visible (over each other).

Browsers Affected

• Chromium 50
• Firefox 47 => not affected

Provide easy way to customize transition duration

Maybe using an attribute or a CSS variable.

Add a filled/unfilled effect to the icons using svg properties

Like in https://github.com/googlecodelabs/polymer-first-elements/blob/master/icon-toggle-finished/icon-toggle.html, add a possibility to toggle between an active fill or stroke property.

The element's property iconActive wouldn't be needed for switching between star-border and star or similar anymore. But it's still useful for cloud-off and cloud-queue, for example.

Move to new Class syntax

If anyone wants to share his effort, feel free to work in this issue!

Using IronCheckedElementBehavior would demand using the checked state

In order to gain any functionality from the iron-checked-element-behavior it would be necessary to
have a checked-property. If I want, for example, that an on-iron-change event is being fired to capture events in an dom-repeat template, there is no way of doing it in the current implementation.

So would it be an option to switch from active to checked?