Custom base class

[benmurden]

It's nice that Bootstrap and Foundation are supported out-of-the-box, but it seems like it wouldn't be too much more effort just to make the base class and type prefix configurable. I know this could be achieved by subclassing the flash component, but it seems like a good fit for addon-level configuration when there's already type configuration available.

I'd be happy to create the PR if desired.

[FredUK]

That's a good idea and I was just looking for the same functionality.

It would be nice if we could pass an extra parameter to the custom message api similar to the already existing functionality of passing a custom timeout:

this.get('flashMessages').danger('Error', {timeout: 5000, extraCllass: 'my-extra-class'}) which would then be appended to the class list of the message div container : div class = alert alert-danger my-extra-class...

Edit: Managed to find a workaround by using add() instead: $E.get('flashMessages').add({message: 'I like alpacas', type: 'danger extraClass'})

[benmurden]

@FredUK Thanks for the info. In my case, I didn't want to mess with the Bootstrap base class at all, because it's being used elsewhere.

[FredUK]

You're not messing with the bootstrap base class. #

By calling add({type: danger extraClass}) the plugin will prepend alert-" to your classes which will become "alert-danger extraClass" which is the default bootstrap class.

If you want a success message with an extra class you could do .add({type: "success extraClass"}) which will be turned into "alert-success extraClass". (which is the default success for bootstrap).

[benmurden]

Thanks for the reply. I should have been clearer and said I didn't want to apply the "alert" base class at all, but rather have my own namespaced version, something like my-alert my-alert-danger, thus avoiding bootstrap classes entirely. An additional class might be able to help undo some of the styling applied by the Bootstrap base class, but it's less efficient for the browser, so I still think the ability to define the base class, or the wrapper in its entirety, would be nice.

[jherdman]

This is also of interest to us at Precision Nutrition. We use BEM to organize our CSS and would like to apply this to our flash styles without having to override the component. Configuring the base class, and prefix, would go a long ways to helping us.

[poteto]

I'm removing class names from 2.0, you'll be able to pass in whatever you want for each message and use a helper to precisely compose a class name you need for your styles. I expect to have it released pretty shortly. You can follow the progress on the https://github.com/poteto/ember-cli-flash/tree/two-point-oh branch

{{#flash-messages flashes=flashMessages.arrangedQueue as |flash|}}
  {{#flash.component class=(concat "alert alert-" flash.type) click=(action flash.close)}}
    <h6>{{capitalize flash.type}}</h6>
    <p>{{flash.message}}</p>
  {{/flash.component}}
{{/flash-messages}}

[jherdman]

Super cool! Many thanks for the heads up.