Creating "Classes" of Look and Feel Widgets

[kitsonk]

User Story

As a developer, I need to create re-usable classes of widgets, where I am not changing the functional behaviour of the widget, but having a different visual style from one class to another within an application.

Specific Use Case

I am using @dojo/widgets/Slider. I am using a custom theme. My design indicates that one class of sliders should have a standard slider as the background, where as another class should have a linear triangle as the background to give a visual indication of volume level, versus position in the slider.

[bitpshr]

This is directly related to the solution posed by @smhigley at #270, despite that issue title being specific to instance styling. If a downstream application uses stylistic variations of a Slider, ultra-minimal extensions of a Slider can be made for each necessary variation that use different @theme decorators. The decorators would point to CSS that contains only a ruleset to override the slider background as necessary:

// Custom-themed Slider
@theme(standardSliderCss)
export class StandardSlider extends Slider { }

// Variation of the default Slider, could have also extended Slider
// directly and used stacked themes
@theme(volumeSliderCss)
export class VolumeSlider extends StandardSlider { }

An escape hatch of extending the Slider and overriding its helper method that returns root classes is also possible (#316).

Action items:

• Create a ticket to add a tutorial for this content Tutorial for widget extensibility dojo.io#290
• Close this ticket