[Bug Report][3.5.15] v-badge inline left prop not working

[pedrito-96]

Environment

Vuetify Version: 3.5.15 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Add inline prop --> add left prop

Expected Behavior

Badge should go left

Actual Behavior

Badge stays in right position

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Doc of inline prop: Moves the badge to be inline with the wrapping element. Supports the usage of the left prop.

[KaelWD]

There is no left prop in v3, but location="left" doesn't work here either.

[bbedyukh]

I have the same problem here, in Vuetify v3.5.8.

[J-Sek]

It seems that in order to close this issue we only need to update inline description in docs. It could say "inline badge is always on the right and ignores location prop, use location="left" to put badge centered left"

However, I wish to take this opportunity to ask whether current implementation is "optimal". In my big-ass example you can notice following problems exposed:

• top toolbar
  • location-left needs offset
    • of course it depends on use case, but I suspect it might be needed more often than not
• center content
  • without inline icon stays centered
  • easy to workaround but maybe an inconvenience compared to inline left from v2
• left drawer
  • inline requires spacing tweaks and I cannot use offset
• left drawer bottom slot
  • both use cases seem OK, but I think prepend looks cleaner
    • I wish docs could include/suggest this example
• right drawer
  • uses location and seems much cleaner, until I want the left badge on the title
    • I don't think there is area for improvement on these examples, included just for reference

Suggestions:

• restore left for inline or a new inline-left prop
• include more examples in docs to guide developers towards location when their first idea might be to use inline

[KaelWD]

There is also floating which applies a 12px offset or 8px with dot.

I think the intention with inline was to use it standalone next to something instead of having the icon inside it, this would explain the 4px margin .v-badge--inline .v-badge__wrapper has.

[J-Sek]

There is also floating which applies a 12px offset or 8px with dot.

It would be nice if it would add a bit more when location is effectively centered as it would eliminate the need for offset-x in this case (I think touching icon is not typically desired):

[KaelWD]

I don't think we should have a separate way of positioning it just for this, inline should only be used without anything inside:

https://play.vuetifyjs.com/#eNpVjs0KwjAQhF8lLB6txavEgs9hPMRmWwJxDWlS/MF3dxMjtJdld+ZbZs5vmELfnrzfzQnhADLizTsdsVMkhJwb7X1Zy9HfKWpLGKpUxKs2IwpLjg2RCaR4VLBX0Mm22kveMiPyYGjDqdEOTwVisi9k5dE4HUaszxn7x/O5zs/Kr55sF7UTGRwYMorgs6XkXBmXL0iGTfw=

[J-Sek]

inline should only be used without anything inside

I have never noticed this :) Thanks for pointing it out.

For anyone using it as a wrapper, you can leave left (assuming IDE does not complain) and reorder stuff with CSS:

.v-badge--inline[left] .v-badge__badge {
  order: -1;
}