The inclusion of reset.css file nuked the default browser styles for
headers. This change sees us using custom styled headers instead to
bring structure back to the styleguide pages.
* update textarea js code and make it npm-ready
* use an attribute instead so dom debugging is easier
* use data- attribute to be I D I O M A T I C
* version the custom element
* include marica's resize logic improvements
* changes to elm module
* clean up styleguide build and use v3 in styleguide
This way you're not limited to creating tables with fixed-width columns.
This also makes the table take up the maximum available width space by
default.
There are places where we need the select to be as wide as possible.
Since it seems like a sensible default to have all the selects expand,
we take that approach.
If we find out that this is harder, we can release use the old version.
We want to allow the control to take up the full width of the parent.
This will most likely break something if you try to upgrade directly.
Should be fixable by putting the control in an element with
the appropriate width.
tl;dr; Use a class for each variant instead of overriding one variant.
Before, we relied on CSS specificity in an unclear way.
The `Focused` class was applying properly because it was ordered later
than the `Tab` class in the stylesheet.
The ordering that is important is the ordering in `styles` value.
Since `elm-css` generates the stylesheet in the order of the lists,
the `Focused` rule would be generated after the `Tab` rule.
Meaning the `Focused` rule would take precedence over the `Tab` rule
if an element had both classes as it was defined later in the stylesheet.
There are some concerns with this approach:
1. It's not readily apparent that the ordering in `styles` is important.
It is pretty easy to change the ordering of the list
and have it break the styling.
2. We rely on `elm-css` to generate the stylesheet in a specific order.
If it changes the order of rules it generates,
we're almost surely going to break the styling.
3. Altering styles for tabs that are not focused is even less intuitive.
Since the specificity is the same,
you might not know why a given rule applies (or doesn't apply).
Rather, we can eschew the specificity/precedence issues
by applying a different class to each tab.
The stuff that is the same can stay on the `Tab` class,
and the stuff that differs can be on different classes.
We are now able to set the background color for `Unfocused` tabs.
We were relying on the control being placed atop a white background.
When we moved to using the control atop a non-whitebackground,
it showed that the `Unfocused` tabs had a transparent backround.
All of our designs show `Unfocused` tabs with a white backround.
See https://github.com/NoRedInk/noredink-ui/pull/14 for more information.
