Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

no way to add data-* attribute to OK button in modal #3896

Closed
sprocket99 opened this issue Aug 15, 2019 · 4 comments
Closed

no way to add data-* attribute to OK button in modal #3896

sprocket99 opened this issue Aug 15, 2019 · 4 comments

Comments

@sprocket99
Copy link

@sprocket99 sprocket99 commented Aug 15, 2019

I am using cypress.io and decorating all the UI elements I need to interact with using data-* tags, which is the recommended way. Unfortunately I do not see a way of specifying such a tag on an modal dialog button, like OK (maybe I am missing something?). I know I could use a CSS selector like #__BVID__367___BV_modal_footer_ > .btn-primary but I rather not. I also know that I could probably make a slot for it, put my own OK button in there, and put a tag on that, again that is not convenient.

Please could you provide a way to specify in an easy way.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 15, 2019

You can provide your own modal footer containing your own button instances. The modal slots are scoped and giving access to the ok(), cancel() methods (for closing the modal, by adding @click="ok", etc on your buttons)

https://bootstrap-vue.js.org/docs/components/modal#custom-rendering-with-slots

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 15, 2019

Example:

<b-modal ... >
  <template slot="footer" slot-scope="{ ok, cancel }">
    <b-button @click="cancel" variant="danger" data-foo="bar">Cancel</b-button>
    <b-button @click="ok" variant="primary" data-baz="buz">OK</b-button>
  </template>
  Modal message content here
</b-modal>

This gives you complete control over the attributes, style, etc of the buttons and any additional content you want in the footer.

Adding in additional support props for assigning arbitrary attributes (and the code to handle the prop), etc, will increase the <b-modal> code size, adding additional bloat. The scoped slots were designed for this very reason (the default content of buttons is provided for convenience).

You could take the above one step further if you use this often, by creating a helper component to render the buttons:

<b-modal ... >
  <my-modal-buttons slot="footer" slot-scope="scope" methods="scope" foo="baz" bar="buz">
  </my-modal-buttons>
  Modal message content here
</b-modal>

And define `my-modal-buttons" as:

<template>
  <div>
    <b-button @click="methods.cancel" variant="danger" :data-foo="foo">Cancel</b-button>
    <b-button @click="methods.ok" variant="primary" :data-baz="baz">OK</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyModalButtons',
  props: {
    methods: { type: Object, default: () => ({}) },
    foo: { type: String },
    baz: { type: String }
  }
}
</script>

Loading

@vesper8
Copy link

@vesper8 vesper8 commented Aug 20, 2019

@tmorehouse you recently made changes where previously one could add custom attributes such as data- attributes to many of the elements and now all of a sudden those are ignored.. It really broke my app in many ways (I too was using data-cy for cypress testing) and is requiring a lot of workarounds

I wish you just simply allowed custom data- attributes to be added on ALL your components

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 20, 2019

@vesper8 I'm not sure what you mean... You can on any component add custom attributes on the rendered root element. All attributes are transferred to the root element of the component.

<b-xxxxx data-foo="bar"></b-xxxxx> will render data-foo="bar" onto the components root element.

Can you provide an example of which components you are referring to?

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment