InputSwitch loss of onLabel/offLabel for Poseidon theme

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Sasha
Posts: 49
Joined: 08 Mar 2017, 23:46

14 Sep 2018, 02:06

Hello,

I noticed that with the PrimeNG 6 / Poseidon 6 update, the customizable text label for "on" and "off" states for the InputSwitch component is now gone:
https://www.primefaces.org/primeng/#/inputswitch

But... this makes the input switch very difficult to use in the Poseidon theme:
https://www.primefaces.org/poseidon-ng/#/forms

Unlike the default theme, which grays out the whole component when it is in a 'false' state and uses the primary color in a 'true' state, in Poseidon, both on and off states use a shade of the primary color, and the minimalized style makes the square "switch" portion look very similar to the rectangular "sliding area" portion.

Without mouse focus, the "off" state looks like almost nothing is there ("white box - white box") ; the "on" state looks like a white narrow rectangle next to a theme-color square. ("white box - color box")
With mouse focus, the "off" state looks like "white box - color box", the "on" state looks like "light color box - dark color box".
Notice that the "on state without mouse focus" and "off state with mouse focus" look almost identical, except for the slight difference in the relative widths of the 2 boxes, and a tiny difference in the shade of the color.

In short, I don't think the inputSwitch as it looks on Poseidon 6.1 provides enough visual clues for our users to use comfortably without confusing the "off" and "on" states.
I would love to hear your plans or suggestions to mitigate this. Thank you!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

17 Sep 2018, 10:04

Thank you for your feedback. We will consider this feedback.
We will discuss with our design team and make an improvement for the next version. Also, after deciding, we can send you a code to use.

Sasha
Posts: 49
Joined: 08 Mar 2017, 23:46

17 Sep 2018, 19:07

Thank you, I will wait for your further decisions.

User avatar
bossqone
Posts: 10
Joined: 24 Aug 2017, 09:01

26 Sep 2018, 14:24

I just wanted to report the same issue. As @Sasha said, it's not clear what state is rendered on InputSwitch.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

08 Oct 2018, 14:09

New InputSwitch component doesn't support on/offLabel attributes. It is by design. If you want to add labels to inputSwitch, you can use content property of CSS with :after option. Exp;

Code: Select all

/* Theme codes */
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider:before {
    background-color: #ffffff;
    border-right: 1px solid #c9cdd2;
}

body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider {
    background-color: #00acac;
    border-right: 1px solid #00acac;
}

body .ui-inputswitch.ui-inputswitch-focus .ui-inputswitch-slider {
    background-color: transparent;
}

body .ui-inputswitch.ui-inputswitch-focus .ui-inputswitch-slider:before {
    background-color: #009393;
    border-color: #009393;
}

/* For Users */
body .ui-inputswitch {
    width: 4.429em !important;
}

body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider:before {
    -webkit-transform: translateX(2.55em);
    -ms-transform: translateX(2.55em);
    transform: translateX(2.55em);
}

.ui-inputswitch:not(.ui-inputswitch-checked)::after {
	content: 'false';                           /* offLabel = 'false' */
	position: absolute;
	left: 29px;
	top: 5px;
}

.ui-inputswitch.ui-inputswitch-checked::after {
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	color: #ffffff;
	content: 'true';                            /* onLabel = 'true' */
	position: absolute;
	left: 5px;
	top: 5px;
}
Video; https://www.dropbox.com/s/cxheqgrkalux8 ... n.avi?dl=0

Note: you can change the above code according to your UX design.

Sasha
Posts: 49
Joined: 08 Mar 2017, 23:46

09 Oct 2018, 02:45

We are aware that the new InputSwitch does not have the on/offLabels by design, since it must have been intentionally removed by PrimeNG. The problem is that the on state and off states are much more ambiguous and easier to confuse in the Poseidon premium template than in other PrimeNG templates.

I can see at least 3 different ways that the PrimeNG team can solve this issue:

1. Change the shape/color of the InputSwitch in Poseidon so that it is more clear.
2. Add back the on/off label property to PrimeNG InputSwitch component, by design.
3. Tell your customers (us) to apply a custom CSS fix, that they (us) may potentially need to tweak and test every time there is a Poseidon premium template update.

I really do appreciate the CSS fix suggestion and all the support from the PrimeNG team throughout so far.
However, I was disappointed to see @aragorn's answer, because :

A. It does not address the usability issue of the colors & shapes specific to the Poseidon theme
B. The suggested fix is not an "it just works!" advantage provided by using PrimeNG components, but requires us to peek further under-the-hood and make custom changes, which we will probably need to tweak even more when we use multiple InputSwitch components with their separate, specific on/offLabels, if we were to follow this advice
C. It does not acknowledge the fact that when we originally purchased the Poseidon theme, the Poseidon inputSwitch component had the on/off labels in its demo page, and the on/offLabels were a documented feature of the PrimeNG component itself, even though other premium themes such as Ultima did not support the labels. The design decision to remove the on/off label is a noticeable change for the Poseidon theme, but the impact was not communicated to users of the Poseidon theme.

In conclusion, thank you for considering this issue, and suggesting a workaround. We do not think that the suggested workaround is a suitable solution for our needs, and will need to find an alternate solution. I hope that you will consider this issue further to improve the next versions of PrimeNG and the Poseidon theme. Thank you.

martinkronstad
Posts: 1
Joined: 09 Mar 2017, 12:28

19 Dec 2018, 15:27

I faced this issue too.

The result of removing the labels are that the users do not always understand if the switch is on or off.

I modified the css to change the switch from a square switch to more like the one in material design.
I also did a minor change to make sure the background of the slider-container is not the same as the actual slider after clicking the switch.

Image
Image

Just add the following in your sass-file.

Code: Select all

@import './assets/sass/_mixins';
@import './assets/theme/theme-green';


.ui-inputswitch-focus .ui-inputswitch-slider {
  background-color: inherit !important;
}

body {
  .ui-inputswitch {
    height: 1.6em;
    .ui-inputswitch-slider {
      background-color: $inputBgColor;
      border: 1px solid $contentBorderColor;
      @include border-radius(15px);
      @include transition(background-color .3s);

      &:before {
        background-color: #ccc;
        margin-bottom: -0.2em;
        @include border-radius(15px);
      }
    }

    &.ui-inputswitch-checked {
      .ui-inputswitch-slider {
        &:before {
          @include border-radius(15px);
        }
      }
    }
  }
}

leppkem
Posts: 4
Joined: 07 Apr 2017, 18:35

13 Jan 2020, 20:46

Please reconsider the removal of the on/off labels. This is a miss on usability and accessibility for UX. This feels like a design decision based on visual design only, and not considering other factors.

For example color blind users may have difficulty with some color combinations. When indicating the state of something, it's important to also have text. text is much harder to make an error with.

Post Reply

Return to “Poseidon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests