Vue-js-modal: Add possibility to provide CSS classes to dialog buttons

[alex3683]

First off all: Sorry for the edits. I accidentally had hit enter while writing the title ;-)

When using the Dialog component it would be nice if it was possible to add classes to the buttons. So for example when having something like a choice between "save changes" and "discard changes" I'd like to give the button for "discard changes" a red background (perhaps using a Bootstrap CSS class).

[euvl]

Hey @alex3683,

Thats a good point, I actually got a use-case recently, where I needed this 😄
I will add this feature in the next release 👍

Thanks

[alex3683]

Hi @euvl . Do you know when you'll probably have the time to merge and release this feature? We're currently at the point where we really need it for an application :-)

[euvl]

I guess I lied about next release. Will try to do asap 👍

[euvl]

Hey, should be available in v1.3.4.

Example:

      this.$modal.show('dialog', {
        title: 'Foo',
        text: 'Bar',
        buttons: [
          { title: 'A' },
          { title: 'B', class: 'my-awesome-classes in-a ws-separated-list' }
        ]
      })

ps. you will have to use font-size with !important tho. Not sure what's an issue there.

[alex3683]

Great, thanks!
Hm, I can't see an issue with font-size in our application. We're using boostrapp css version 3.3.7 for basic styling and their setting of font-size for the btn class gets applied.

[euvl]

Okay, thats even better 😄 👍 Mb something in my demo project.

[christophermiles]

I just installed and started using this component today and I'm really impressed.

With regard to the custom class feature for buttons, I seem to have to include vue-dialog-button in the separated list of classes. It seems that doing:

this.$modal.show('dialog', {
  text: 'My text',
  buttons: [
    { title: 'Regular button classes' },
    { title: 'Custom button classes', class: 'custom-class' }
  ]
})

removes the original vue-dialog-button class from the button, making it appear as a regular <button> element (plus my custom class).

Perhaps this is the intention, assuming that people using this feature want to completely customise the class of their buttons. But if that is the case, they would have to include their custom classname every time they instantiate a button.

My assumption (and personal preferred use case!) was that I would be extending the styling of the existing buttons, not overwriting them.

[alex3683]

There are different opinions on this topic for sure. I prefer not to have to overwrite default styles every time I want to use my own styling. What if the default styles of this component are changed? I'd also have to adapt to these changes in my custom styles.
When using e.g. bootstrap as CSS framework you normally use their classes in every button because otherwise you'll have the default styling provided by the browser (just as expected). It's just how these frameworks work to be non-invasive.
So if I wanted to built upon the styling of vue-dialog-button, I'd re-add it myself or use SASS magic to extend the styling. But this is just my opinion on this :-)

[euvl]

Hey @christophermiles, @alex3683,

My way of thinking was the same as of @alex3683 tbh. It becomes confusing if one has to overwrite just some styles.

On the other note, it's very easy to create a custom dialog, which will have different api or .$dialog wrapper for .$modal call that will set the defaults. My point is, there are always different ways to do things 😄

[davision]

Have this feature been already implemented? This would be very useful!