Adding attrs and class props for items that need it

[VividLemon]

#756

Throughout the library, there are places where it would be beneficial to add an $attrs and $attrs.class "like" prop onto other HTML elements that aren't the "main" element. For a 'complete' example (minus the attrs)

In BOffcanvas, the central div inherits the $attrs https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue#L26

However, What if you want to change the offcanvas-body behavior?

To fix this, we add the bodyClass and bodyAttrs props https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue#L45

(This one does NOT have the attrs, but it SHOULD)

By adding these two props we can give people the ability to influence elements that they otherwise wouldn't have been able to affect. This allows for greater customization on the downstream developers part.

Like mentioned, BOffcanvas does not provide attrs for these elements, to fix it, it should include those props. However, for some, they don't even have the luxury of a class prop. For example, BCarousel is almost completely unable to be modified besides it's root component.

All components should be evaluated for these candidates. Some elements are small and do not need these values, so it is left to the discretion of the implementer.

[VividLemon]

In addition to this, the schema of prop values should likely change slightly for nested components.

For example, https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue does & Omit<BLinkProps, 'routerTag'> for its props declaration. However, this makes it difficult to determine which props are for BLink only. In that case, we have linkAttrs and linkClasses, but what if we simply had one prop that is linkProps ? Could that not make it more straightforward for inheritance? It would make for more expected behavior

[anrolmar]

In addition to this, the schema of prop values should likely change slightly for nested components.

For example, https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue does & Omit<BLinkProps, 'routerTag'> for its props declaration. However, this makes it difficult to determine which props are for BLink only. In that case, we have linkAttrs and linkClasses, but what if we simply had one prop that is linkProps ? Could that not make it more straightforward for inheritance? It would make for more expected behavior

I agree with that. Maybe it'd better and understandable if we can split the properties

[github-actions]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed