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 · Fixed by #3921 · May be fixed by thislooksfun/earthdawn#37

Comments

@sprocket99
Copy link

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

This comment has been minimized.

Copy link
Member

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

@tmorehouse

This comment has been minimized.

Copy link
Member

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>
@vesper8

This comment has been minimized.

Copy link

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

@tmorehouse

This comment has been minimized.

Copy link
Member

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?

jackmu95 added a commit that referenced this issue Aug 21, 2019
fix(b-modal): ensure non-prop attributes are transferred to the modal…
… outer wrapper `div` (closes #3896) (#3921)

* fix(b-modal): ensure attributes are transferred to the modal outer wrapper

* Update modal.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.