diff --git a/src/badge/__tests__/badge.scenario.tsx b/src/badge/__tests__/badge.scenario.tsx index ee74dc8435..f70c53fbdb 100644 --- a/src/badge/__tests__/badge.scenario.tsx +++ b/src/badge/__tests__/badge.scenario.tsx @@ -137,6 +137,34 @@ export function Scenario() { + +
+ {/* topEdge/bottomEdge are center-anchored (left: 50%, translateX(-50%)). + horizontalOffset should have no effect on them and they should stay + centered, not drift left. See src/badge/styled-components.ts LEFT_PLACEMENTS. */} + + +
topEdge
+
horizontalOffset: 20px (should stay centered)
+
+
+ + +
bottomEdge
+
horizontalOffset: 20px (should stay centered)
+
+
+
); } diff --git a/src/badge/styled-components.ts b/src/badge/styled-components.ts index e46341438e..fb38bd0543 100644 --- a/src/badge/styled-components.ts +++ b/src/badge/styled-components.ts @@ -209,10 +209,8 @@ const BOTTOM_PLACEMENTS: Placement[] = [ const LEFT_PLACEMENTS: Placement[] = [ PLACEMENT.topLeft, PLACEMENT.topLeftEdge, - PLACEMENT.topEdge, PLACEMENT.bottomLeft, PLACEMENT.bottomLeftEdge, - PLACEMENT.bottomEdge, PLACEMENT.leftTopEdge, PLACEMENT.leftBottomEdge, ];