[FEATURE] toggle bar component: migrate to use modern ion-toggle sytnax

[jfmcquade]

What? The toggle_bar component makes use of the ion-toggle component, adding custom styling. This styling makes use of a syntax that ionic now considers to be legacy. We should update to use the new "modern syntax".

Why? This legacy syntax will be deprecated in an upcoming major release of ionic.

How? Migrating the basic styling should be reasonably straightforward, but accounting for our custom icons, enabled via the show_tick_and_cross parameter, is likely to be a bit more involved. We should consider replacing our custom on/off labels with a feature introduced for ion-toggle, accessed via a new enableOnOffLabels property. It appears these icons can't be customised: there is only one option for Android and one option for iOS, so we should decide whether it would be acceptable to use these instead of our custom implementation. Native ionic on/off labels (from here):

[jfmcquade]

The legacy syntax is deprecated in Ionic 8.

[kwAsant]

These are the results I have got:

It seems that there is no way to have tick and cross appear on the modern syntax, it seems.

I have also migrated it following the instructions specified here: https://ionicframework.com/docs/api/toggle#using-the-modern-syntax

Is there more I should do or is it good to make a PR?

[jfmcquade]

@kwAsant I think that's probably broadly acceptable, I don't think it's necessarily a problem that the toggle bar doesn't look exactly the same as before. We can discuss with @esmeetewinkel tomorrow.

I would say there are a couple of visual differences between the toggle bars in your screenshots and those of the native ionic components: in your screenshots, the "track" of the slider is visible either side of the circular "handle" element, whereas in ionic's examples, the handle goes right to the edge of the track. Also, the examples in the ionic docs show a - and tick icon depending on the value of the toggle, whereas in your screenshots only the - symbol displays. Have you figured out if these differences are due to custom styling we're applying?

I think we'd like to expose the option of displaying the icons and have this able to be authored using the existing "show tick and cross" parameter.

[kwAsant]

Oh that's cool (I read this but forgot to reply). Will make a pull request.