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

Dropdown subcomponents should allow adding a class on their <li> elements #4022

Closed
fourcube opened this issue Sep 5, 2019 · 3 comments
Closed

Comments

@fourcube
Copy link

@fourcube fourcube commented Sep 5, 2019

Is your feature request related to a problem? Please describe...

I propose that b-dropdown-item and all other dropdown subcomponents (b-dropdown-group, b-dropdown-text, ...) should accept a list-item-class prop, which consistently adds a class attribute to the component root elements. This makes it easier to style dropdown children.

Describe the solution you'd like

Adding list-item-class to any dropdown subcomponent should result in the following rendered markup

Template

<b-dd>
  <b-dd-group list-item-class="clazz" />
</b-dd>

Rendered output

<!-- other properties omitted for clarity -->
<ul>
  <li class="clazz" />
</ul>

While adding a class prop currently works for <b-dropdown-item>, it does not work for many other dropdown subcomponents. Adding a class to e.g. a <b-dropdown-text> adds the class to the nested span element instead of the root li element.

Describe alternatives you've considered

I've considered using :nth-child selectors to style the dropdown children, but this seems hacky and also does not work for complex setups. (e.g. multi-column).

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 5, 2019

The <li>is the root element of all dropdown child components, hence you can just add class="foobar" to any of the dropdown child elements (i.e. <b-dropdown-item class="foo">).

Note if you are using scoped style classes to target child elements within the dropdown sub-component, you need to use Vue-Loader's deep selectors.

Loading

@fourcube
Copy link
Author

@fourcube fourcube commented Sep 5, 2019

@tmorehouse Thank you for your response. Adding a class to a <b-dropdown item> works perfectly.

But this feature proposal aims at all the other possible dropdown child elements (e.g. <b-dropdown-group>) where this currently does not work.

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 5, 2019

I'll adjust where vue-functional-data-merge merges on the data

Loading

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