Skip to content

fix: exclude center-anchored topEdge/bottomEdge from Badge LEFT_PLACEMENTS - #5408

Merged
DianaSuvorova merged 2 commits into
uber:mainfrom
zigzagdev:fix/badge-left-placements-edge
Sep 4, 2026
Merged

DianaSuvorova merged 2 commits into
uber:mainfrom
zigzagdev:fix/badge-left-placements-edge

Conversation

@zigzagdev

Copy link
Copy Markdown
Contributor

Description

topEdge and bottomEdge placements are center-anchored (left: 50% + transform: translateX(-50%)), but they were also included in LEFT_PLACEMENTS.
Setting horizontalOffset on a Badge with one of these placements overwrote left: 50% while leaving translateX(-50%) in place, shifting the badge far off-center instead of nudging it from its centered position. RIGHT_PLACEMENTS already excluded both, so this brings LEFT_PLACEMENTS in line with it.

  • Removed PLACEMENT.topEdge / PLACEMENT.bottomEdge from LEFT_PLACEMENTS in src/badge/styled components.ts
  • Added a scenario case in badge.scenario.tsx showing topEdge/ bottomEdge with horizontalOffset set, so the badge stays centered

Scope

Patch: Bug Fix

…MENTS

topEdge and bottomEdge are centered via `left: 50%` + `translateX(-50%)`,
but they were also listed in LEFT_PLACEMENTS. Setting horizontalOffset on
a badge with one of these placements overwrote `left: 50%` while leaving
the translateX(-50%) in place, shifting the badge off-center instead of
nudging it from its centered position. RIGHT_PLACEMENTS already excluded
both, so this brings LEFT_PLACEMENTS in line with that.
…ffset

Visually verifies that horizontalOffset no longer shifts center-anchored
topEdge/bottomEdge badges off-center.
@CLAassistant

CLAassistant commented Sep 3, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@DianaSuvorova

Copy link
Copy Markdown
Collaborator

Thank you!

@DianaSuvorova
DianaSuvorova merged commit f30c15e into uber:main Sep 4, 2026
3 checks passed
@zigzagdev
zigzagdev deleted the fix/badge-left-placements-edge branch September 5, 2026 02:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants