Add better class names to modals to allow for better customized css targeting

addon/components/user-filters-manager.coffee

@@ -1,9 +1,13 @@
 import Ember from 'ember'
 
 export default Ember.Component.extend
+  tagName: 'button'
   scope_key: null
   content: null
+  classNames: 'user-filters-manager ui icon button'
+  classNameBindings: ['class']
   class: 'tiny black'
   actions:
     open_modal: ->
       @modal 'user-filters-manager/modal', scope_key: @get('scope_key'), content: @get('content'), title_path: 'user_filters.modal_title'
+  click: -> @send 'open_modal'

addon/mixins/application-route.coffee

@@ -163,6 +163,7 @@ export default Ember.Mixin.create ApplicationRouteMixin,
           return
         controller.set 'partialName', partialPath
       @incrementProperty 'router.globals.modals_counter'
+      controller.privateWillOpenModal() # setup expected attributes to be used in willOpenModal
       controller.willOpenModal() # can be implemented to setup stuff before rendering and hooks
       @render 'modals/layout',
         into: 'application'

addon/mixins/modal-base.coffee

@@ -5,6 +5,13 @@ export default Ember.Component.extend
   layoutName: 'modals/layout'
   willOpenModal: -> # can be implemented, is fired after loading attributes, before rendering
   is_saving: false # temporary state to prevent double triggering
+  class: '' # manual set or component name derived
+  component_name_based_class: ''
+  privateWillOpenModal: ->
+    component_name = @toString().replace(/.*(controller|component):/, '').replace(/::ember.*$/, '').replace(/\W+$/, '')
+    @set 'component_name', component_name
+    @set 'component_name_based_class', '' + @get('class') + ' ' + component_name.replace(/\//g, ' modal-')
+
   title: (->
     # return title if directly set by options
     return @get('modal_options.title') if @get('modal_options.title')
@@ -30,7 +37,7 @@ export default Ember.Component.extend
     return partialNameTranslation.htmlSafe() if partialNameTranslation = tspan(partial_title_path, translation_params)
 
     # @toString() => <frontend@component:workflow-action-definition/modals/edit-workflow-action-definition::ember873>
-    underscored = @toString().replace(/.*(controller|component):/, '').replace(/::ember.*$/, '').replace(/\W+$/, '').underscore().replace(/\//g, '.')
+    underscored = component_name.underscore().replace(/\//g, '.')
     return convention_translation.htmlSafe() if convention_translation = tspan("#{underscored}.title", translation_params)
 
     # Return a kind of humanized version of the title