User:JDrewniak (WMF)/notes/Understanding mw-ui-icon

mw-ui-icon

Expected usage
Standalone icon: Icon with text:

In programming terms,  can be thought of as exposing the following interface:

a base class, a modifier class, and an instance property.

The base class is, the modifier class is one of [  ,   ] and the property is one of many icon image urls.

By themselves, these classes produce nothing. The base class does not have a “default” state and requires a modifier class to have any effect.

i.e.  doesn’t work.

The line-by-line
Now we go through the code above line-by-line and see what we find.

Line #27  This base class just sizes &#x26; positions the box (min-height/min-width/line-height/relative).

Line #34 -  This guards against a single inline element,   - shouldn’t we guard against all possible inline elements and set   as a rule in the base class? What if someone uses an  element?

line #46 -  is a class to create “stand-alone” icons. It hides text, overrides the base width, and creates an absolutely positioned  pseudo-element.

Line #63 oh! An additional modifier class. . This resized the icon again (min/max/width and min/line/height).

The expected usage is probably:

NOTE: Seeing as how this class is coupled with the  class, the name should probably be  .

Line #76 - common rules for   and. Since these are shared rules, it seems like they should be placed into the base  class instead. These rules style the  pseudo-element which is the container for the actual icon image (placed as a background-image).

The min-height of this pseudo-element is declared but the width is not. The width is declared in the modifier classes instead.

Line #94 -  is a modifier class that accommodates “icons with text”. Essentially providing a right-mar