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

Comments

@fourcube
Copy link

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

This comment has been minimized.

Copy link
Member

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.

@fourcube

This comment has been minimized.

Copy link
Author

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.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 5, 2019

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

@tmorehouse tmorehouse reopened this Sep 5, 2019

tmorehouse added a commit that referenced this issue Sep 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.