Run & review this pull request in StackBlitz Codeflow.

Open in Stackblitz

pnpm add https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2200

pnpm add https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2200

commit: 56b138d

On the other hand, using variant with textvariant or bgvariant wouldn't make sense. It could make sense to flip the [text-bg-${props.variant}]: props.variant !== null, to [text-bg-${props.variant}]: props.variant !== null && (textVariant || bgVariant), check

One would never have variant and textVariant, so naturally even though it's "breaking", it wouldn't be 'breaking'

Which could naturally alleviate the issue as first, the two props are more specific, and second there are no non "undefined/null" props of those

On the other hand, using variant with textvariant or bgvariant wouldn't make sense. It could make sense to flip the [text-bg-${props.variant}]: props.variant !== null, to [text-bg-${props.variant}]: props.variant !== null && (textVariant || bgVariant), check

I agree that something like this could work better. I started to go down that path, and got tied up a bit because no matter what you do, we'll have some non-intuitive interactions.

Is what you're proposing that we set text-bg-variant if and only if the variant prop is set and neither the text-variant nor the bg-variant prop is set? Wouldn't that be?

[`text-bg-${props.variant}`]: props.variant !== null && !(textVariant || bgVariant),

If that is what you're thinking, then the only slightly odd thing is that if someone sets all three variant props, then variant will be ignored, but that seems like a lot more of a corner case than what we have now. Which is pretty much what you said above, I'm just processing...

I'll set this to draft and try going down that path (hopefully tomorrow)...

Hypothetically one could remove the null check all together and just see what bootstrap does

Hypothetically one could remove the null check all together and just see what bootstrap does

Playing with BS5, text-variant and bg-variant take precedence over bg-text-variant. So I think the best course here is to just set the classes without trying to be smart and let BS5 handle it. I've probably over-documented the behavior, since it's fairly straightforward, but since I had most of this in place I just modified based on describing the BS5 behavior.