feat: implement BAvatar badge-offset #2692
Conversation
Badge-offset property prop to component BBadge component. Revise BBadge style prop to allow style changes for badge offset. Create badgeOffsetStyle function GitHub Issue: bootstrap-vue-next#2347: BAvatar badge-offset isn't implemented
|
|
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BAvatar
participant BBadge
User ->> BAvatar: Provide badgeOffset prop
BAvatar ->> BAvatar: Compute badgeOffsetStyle based on badgeOffset and badgePlacement
BAvatar ->> BBadge: Pass computed style and badgeOffset prop
BBadge -->> BAvatar: Render badge with updated position
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@ maintainers The badge-offset functionality is working as intended, but its implementation is different from the original approach in BootstrapVue. In BootstrapVue, badge placement was managed through its own custom positioning, allowing for easier control of offsets. However, in BSVN, badge placement relies on Bootstrap’s positioning classes, which only supports percentage values (0%, 50%, 100%) - Bootstrap Positioning Utilities. This approach limits flexibility and makes it difficult to apply arbitrary offsets without additional CSS overrides. Currently, the most effective workaround is to use the transform CSS property to manually adjust the position, recalculating the offset relative to the default Bootstrap placement. This requires using !important to ensure the transform is not overridden by the built-in positioning classes. @VividLemon : @dwgray and I were wondering what the recommended next steps might be for achieving the offset support. Would it make sense to revisit this approach, or is there a different direction we should explore other options? If the code looks reasonable, @jackle5000 and I will move forward with adding unit tests and documentation updates. |
| y = `calc(-50% - ${offset})` | ||
| } | ||
|
|
||
| if (placement.includes('end')) { |
There was a problem hiding this comment.
Does this code properly work when using RTL formats?
There was a problem hiding this comment.
@VividLemon just add support for RTL and LTR layouts, When ever you have a moment, could you take another look? Thanks!
There was a problem hiding this comment.
Looks correct, but still move this code into a composable
| @@ -216,6 +218,30 @@ const textFontStyle = computed<StyleValue>(() => { | |||
| return fontSize ? {fontSize} : {} | |||
| }) | |||
|
|
|||
| const badgeOffsetStyle = computed<StyleValue>(() => { | |||
There was a problem hiding this comment.
Maybe move this computed into a composable
const offsetStyle = (offset: MaybeRefOrGetter<>, placement: MaybeRefOrGetter<>) => computed<StyleValue>(() => {| @@ -216,6 +218,30 @@ const textFontStyle = computed<StyleValue>(() => { | |||
| return fontSize ? {fontSize} : {} | |||
| }) | |||
|
|
|||
| const badgeOffsetStyle = computed<StyleValue>(() => { | |||
| const offset = props.badgeOffset | |||
There was a problem hiding this comment.
If you are to make this change, the placement prop should handle both sides -- similar to the bdropdown. top-start bottom-right etc etc.
Offset becomes similar again to the dropdown offset, but in this case we don't have access to useFloating's middleware to handle the offset for us. So either the new functionality can be added, or not. But the goal here would be to have placement and offset top,bottom,start,end into one prop like the others
Introduced badgeOffset property to BAvatar component, allowing control over badge positioning with valid CSS length strings. Enhanced badgeOffsetStyle function to accommodate RTL layout adjustments for badge placement. GitHub Issue: bootstrap-vue-next#2347
| y = `calc(-50% - ${offset})` | ||
| } | ||
|
|
||
| if (placement.includes('end')) { |
There was a problem hiding this comment.
Looks correct, but still move this code into a composable
Contributor:
Huy Le - https://github.com/jackle500
Add Badge-offset prop to component BBadge component.
Revise BBadge style prop to allow style changes for badge offset.
Create badgeOffsetStyle function.
GitHub Issue: #2347: BAvatar badge-offset isn't implemented.
Describe the PR
The badge-offset property provides the ability to control the offset of the badge, from any placement. When given a positive value, the badge moves inward. A negative value moves it outward.
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit
badgeOffsetproperty, supporting both horizontal and vertical offsets and accommodating right-to-left layouts.