We are rolling out advanced styling capability with Sass along with freeform entry for the numpad and more customization for the calendars through new events.

Advanced styling with Sass

More variables, more control. We went and exposed a number of variables that were there but could only be influenced by changing the theme or overriding it with CSS.

Theme building is still available, and you can define custom themes via Sass, however now you have more control about the output.

To make this more concrete, let’s see an example.

The iOS theme has three variables: Background, Text color and Accent (although Button is there, it will be phased out and set by Accent). Everything is derived from these three. So based on what you choose, the theming functions will make sure that contrast is there and things like shadows, border colors will be calculated.

This is simple enough and covers basic use-cases, however sometimes you might like to fine-tune it a bit more, like changing the color of the overlay. With the newly added Sass variable we are giving you the tools to do just that.

All this is happening on a component level, not necessarily on a global level. That means you can update the look just for certain controls and not all of them.

Let’s take the form inputs as an example where colors were derived from the theme. Now you can customize the color for:

• input background
• input text
• input border
• input accent
• input error

The customization can be set across all themes or per theme and variant – light or dark. We introduced auto theme variants in Mobiscroll 4.9.

A list of Sass variables can be seen in the Theming section of the documentation for each component.

Freeform entry for the numpad

Entering decimals was a bit limiting to say the least. The numpad always followed a template system.

A template was defined and the user filled it out from right to left. That meant if someone didn’t want to enter a decimal value but the form allowed it, they still had to fill out the fractional places with zeroes. Entering 15 required 4 key taps.

While it was possible to implement freeform entry, it required three blocks of code. We though that is not fair so we are introducing two new settings, entryMode and maxScale to make this super easy. Entering 15 requires 2 key taps.

And that’s it. This is a more natural way of entering values.

New events for the calendar and numpad

Introducing the onCellHoverIn and onCellHoverOut events for the calendar based components. Need to display additional information when hovering days in the calendar? You can use the new hover events to show a pop-up with content that is useful for the user and remain in context.

A new onInput event is triggered when the value of the Numpad changes by user interaction. You can use this event to build something like auto-suggest or trigger any custom logic based on the entered value.

Accessibility improvements

We added tab navigation for the event calendar events and role=“row” to improve accessibility.

As always, this release is available for download to all customers who have an active maintenance. You can also update through NPM if that is how you get your libraries.

Illustration by Ouch.pics.