Mixins in OOjs UI have always had, shall we say, "strange" names.
Popuppable is my personal favorite, but the most strange thing about them
has always been the lack of correlation between their name and what it is
that they actually do. Furthermore, Alex came across a situation where the
convention of providing an element to a mixin at construction is not always
possible.
I've written a patch[1][2][3] which does the following:
- Mixins are now named according to what they do[2], using the "ed"
suffix if the mixin adds/manages attributes, "able" if it adds/manages
behavior and no suffix if it adds content.
- Mixins no longer take a required element argument, but do still allow
the element to be passed through the config options
- Mixins use a set{Type}Element method to set and even change the
element being targeted by the mixin - this is called in the constructor
with an overridable default, but can also be called again and again
Attribute and behavior mixins always operate on this.$element by deafault.
Content mixins always generate an element to operate on by default. Again,
in both cases the element being initially targeted can be configured using
the config object.
This division was made specifically to reduce or eliminate the need for
using this.$( '<{tagName}' ); when invoking the mixin constructor, and
instead doing what was being done most of the time automatically.
The rename will hopefully not cause too much confusion. It's important to
note that both the JavaScript and CSS classes have been updated.
Roan is reviewing the patches and they will probably be merged shortly. If
you know of any code that may be affected by this change but has not been
considered in the patches mentioned, please let me know.
- Trevor
[1]
https://gerrit.wikimedia.org/r/#/c/157274
[2]
https://gerrit.wikimedia.org/r/#/c/157286
[3]
https://gerrit.wikimedia.org/r/#/c/157285
[4] Table of classes that have been renamed
ButtonedElement ButtonElementIconedElement IconElementIndicatedElement
IndicatorElementLabeledElement LabelElementPopuppableElement PopupElement
FlaggableElement FlaggedElement