Remove outputStyle property support

[mciastek]

Hi,

I found that bread-crumb addon very useful, but I think not everyone use Bootstrap or Foundation for layout. Currently it's not possible to fully customize addon's classNames, because breadcrumb class is a default one and cannot be overwritten. It can cause some problems, as it is in my case.

Regards

[abhilashlr]

Hello @mciastek

Do these not help solve your case?

https://github.com/poteto/ember-crumbly#set-li-classes
https://github.com/poteto/ember-crumbly#set-a-classes

[StevenHeinrich]

@mciastek has a solid point about not always wanting to use Bootstrap or Foundation. The links @abhilashlr mentioned are helpful for some cases, but still rely on your breadcrumb system being based on list elements. An example of that not being sufficient is Semantic-UI, no list used for breadcrumbs (seen below).

<div class="ui breadcrumb">
  <a class="section">Home</a>
  <i class="right angle icon divider"></i>
  <a class="section">Store</a>
  <i class="right angle icon divider"></i>
  <div class="active section">T-Shirt</div>
</div>

Even with the drastic difference in element structure, I don't think outputStyle should be removed. While it would be nice (in theory) to pass in some subtle attributes to change the layout, that seems like bloat to the add-on and proves unnecessary (if you are willing to use the component in Block format). Below is an example, implementing the Semantic-UI structure from above, with no changes needed to this add-on. The key things to note are:

• Using block format allows for taking advantage of the component's legwork, while supplying custom templating (basically, an override of the default template).
• Using the well documented tagName attribute (changing from list item to a div)
• Also using the, less obvious, default component classNames attribute... in pass-through fashion
• It passes in the component and route objects to the iteration of each breadcrumb, as |component route|

{{#bread-crumbs tagName="div" classNames="ui" linkable=true as |component route|}}
  {{#if route.linkable}}
    {{#link-to route.path class=linkClass}}
      {{route.title}}
    {{/link-to}}
    <i class="right angle icon divider"></i>
  {{else}}
    <div class="active section">{{route.title}}</div>
  {{/if}}
{{/bread-crumbs}}

While this is just one example, I think it shows how it is not too much effort to break far away from the initially intended link element structure that Bootstrap and Foundation expect.

^ if my use above is a terrible idea or I am missing something... please let me know. If all seems sound. I can take a pass at adding an example like this to the documentation, in the Advanced Usage Section.

[kedano]

Ember v2.12: DEPRECATION: outputStyle option will be deprecated in the next major release