Inlining variants doesn't work

[boydkr]

This could be another conflicting css issue, but I had to add class="FreestyleCollection-variant" to my {{freestyle-variant}} components to get them to display properly.

[chrislopresto]

@boydkr Could you share the template where you use variants? The README doesn't document this yet, but freestyle-variant components are designed to be used inside a freestyle-collection component as follows:

{{#freestyle-collection as |collection|}}
  {{#freestyle-variant collection=collection key='no-num'}}
    {{#freestyle-usage "foo-foo-no-num" title="Information"}}
      {{foo-foo title="Information"}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}

  {{#freestyle-variant collection=collection key='with-num'}}
    {{#freestyle-usage "foo-foo-people" title="People"}}
      {{foo-foo title="People" num=55}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}

  {{#freestyle-variant collection=collection key='with-icon'}}
    {{#freestyle-usage "foo-foo-twitter" title="Twitter"}}
      {{foo-foo title="Twitter" icon="twitter"}}
    {{/freestyle-usage}}
  {{/freestyle-variant}}
{{/freestyle-collection}}

[boydkr]

Here is an excerpt

{{#freestyle-subsection name="Graphics" section=section}}

      {{#freestyle-collection title="Preview Graphics" defaultKey='very good' as |collection|}}
        {{#freestyle-variant collection=collection key='very good' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic4' title="Very Good" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=4 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='good' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic3' title="Good" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=3 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='neutral' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic2' title="Neutral" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=2
                                size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='poor' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic1' title="Poor" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=1 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
        {{#freestyle-variant collection=collection key='very poor' class="FreestyleCollection-variant"}}
          {{#freestyle-usage 'graphic0' title="Very Poor" inline=(eq collection.activeKey 'all')}}
            {{graphic foo=0 size="preview"}}
          {{/freestyle-usage}}
        {{/freestyle-variant}}
      {{/freestyle-collection}}

      {{#freestyle-usage 'graphic-incomplete-0' title="Very Poor Incomplete" inline=true}}
        {{graphic complete=false
                        foo=0
                        size="preview"}}
      {{/freestyle-usage}}

{{/freestyle-subsection}}

[chrislopresto]

Ah, gotcha. Apparently I didn't pull in the inline CSS rule tied to the freestyle-variant classNameBinding. Will be an easy fix...

http://github.com/chrislopresto/ember-freestyle/blob/1af16595bfa452eb91df261e33772003a07b30e2/app/styles/components/freestyle-collection.scss#L55-L57 should be moved into a new freestyle-variant.scss partial as:

.FreestyleVariant {
  &--inline {
    display: inline;
  }
}

We should also update the README documentation to include:

• one of our usage snippets from this issue tidied up
• an explanation of the inline property on the freestyle-variant component

Any chance you have time to make a PR?