To change the class of a View (or to add the isBorderBox class), you need to extend the View class and set a className property.
This is a bit inconvenient for simple components.
A quick scan of the codebase (MobileFrontend only) shows we do this in approx 33 places.
Motivations
Doing this, will simplify a lot of the logic of our Views and help us reduce View's to template, model/gateway code. For the latter, we'll want to move that out (off the back of T206036) and this will help give us clarity of what's going on where.
Acceptance criteria
- View's can pass className as an option.
- View's can pass isBorderBox as an option.
- Test coverage is added for the new options
- Port at least 3 existing classes over to the new method to prove its working (ideally we'd port all usages and remove the properties on View, but that would probably increase the scope unnecessarily large - providing the foundation to chip away at this is the important bit!)
Example:
Before:
function TableOfContents( props ) {
View.call( this, props);
}
OO.mfExtend( TableOfContents, View, {
className: 'toc-mobile'After:
function TableOfContents( props ) {
View.call( this, util.extend( props, {
className: 'toc-mobile'
} ) );
}
OO.mfExtend( TableOfContents, View, {[1]
ag className: src/ resources/ | wc -l
Developer notes
An example for className (with tests) is shown here: https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/468185
However isBorderBox will need to be done separately.